Membuat Random Post Hanya Dengan Thumbnail

Membuat Random Post Hanya Dengan Thumbnail

Bola Hero Gawai

Membuat Random Post Hanya Dengan Thumbnail

Random Post Hanya Dengan Thumbnail
Jika dilihat dari tampilan gambar yang di samping, ini akan sama dengan tampilan popular post yang saya bagikan kemarin yaitu modifikasi popular post hanya thumbnail, namun sebenarnya ini adalah random post yang saya modif sehingga tampilannya hanya thumbnail-nya saja.


Pada umumnya random post dengan thumbnail akan menampilkan thumbnail di sebelah kiri dengan judul post dan potongan deskripsi di sebelah kanan, ada juga yang menampilkan tanggal post dan jumlah komentarnya.

Terus terang saja random post ini terinspirasi dari blognya kang +Ruly Jenar Nakula yang keren itu hehehehe... dan ini sebenarnya untuk random post template game online yang tengah saya modif secara blog game online selalu menampilkan banyak gambar agar tampilan blognya menarik.

Untuk itu kemudian saya searching untuk script random post dengan thumbnail dan akhirnya menemukan yang lumayan simple dan mudah dimengerti. Kemudian saya modif sedikit agar hanya menampilkan thumbnailnya saja. Sebenarnya random post agak berbeda dengan popular post yaitu randam post bisa menampilkan postingan lebih dari 10 buah, namun pada gambar di atas saya sengaja hanya penampilkan 9 buah post agar tampilannya sama dengan popular post kemarin. 

Nah bagi yang ingin mencobanya juga silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

2. Langkah Kedua

Silahkan masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.

<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>

Untuk mengatur banyaknya post yang ditampilkan silahkan atur pada kode var rdp_numposts=9; dan untuk mengatur size gambarnya silahkan atur pada angka 90 yang berwarna merah pada kode CSS sama kode javascriptnya. Dan setelah saya cek widget ini valid HTML5 dan CSS3 juga tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.

Selamat mencoba...

Sumber script: http://karaokebatak.blogspot.com/2013/02/cara-membuat-random-post-with-thumbnail.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

29 Comments Add Comment

Sayah mah bensin sajah kang....!
Ieu teh sami tampilana sareng nu kamari??

Balas

Silahkan ambil bonusnya hehehee :D

Balas

Muhun kang ngahaja disamikeun sareng popular post nu kamari. :D

Balas

Kapan-kapan dicoba ah :D

Balas
This comment has been removed by the author.
This comment has been removed by the author.

Wah keren om kompi, tetapi bisa gak om kompi share random posts yang biasa, yang seperti popular posts itu, hanya memunculkan Title link dengan snippet.

Btw, kok ganti lagi om kompi, kan tadi popular posts ? perasaan :D

Balas

kayanya kurang efektif deh kang kalo gambar doang yang ditampilkan tanpa deskripsinya, orang bingung gambar apa itu?

Balas

Itulah kenapa saya kasih title tag, selain untuk optimasi seo juga agar orang tidak bingung pada gambar postingan, setidaknya dengan menyorotkan mouse pada gambar akan muncul titlenya untuk menjelaskan judul gambar postingannya.. :D

Balas

script di atas bisa menampilkan title, gambar, snippet, bahkan komentar, tinggal utak-atik dikit.... jossss hehehehe :D

Balas

kalau title kurang cukup pasang saja tooltip, heheeh obrak dari template game rupanya ya mas :-bd

Balas
This comment has been removed by the author.

sip mass,, simple view

Balas

Sae Random Post na Kang, nyimak nih yah Kang
Sekaligus belajar praktekin di blog saya, ijin nyimpen
Script nya Kang. terima kasih salam sukses terus Kang Adhy.

Balas

gan klo nampilin gambar dan judul postingan saja dihomepage seperti pada blog agan ini, gimana ya caranya??? mohon pencerahannya dung,,,,

Balas

Saya sudah memberikan title pada thumbnails popular post dan sudah berhasil.

Tapi kenapa di chkme masih begini yah
http://game-begog.blogspot.com/2013/10/cara-menggunakan-emulator-epsxe-1.7-game.html (fix this)

Balas

Iya menjadi simple :D

Balas

Silahkan kang Saud :D salam sukses juga :D

Balas

Itu hanya dengan CSS saja dengan tag conditional untuk homepage mas....

Balas

Berarti masih ada widget lainnya yang belum memiliki title tagnya :D

Balas

wah makasih kang, meskipun saya tidak mencoba tutorialnya tapi dari artikel ini, menambah pengetahuan saya. Seteah saya cerna baik2 kode dari akang, saya jadi tahu bahwa ternyata title tag dan alt itu tidak hanya di html tetapi bisa juga di javascript, seperti kode javascript di artikel akang yg ini, Makasih kang :D

Balas

Iya mas jika pembentuk elemennya berupa javascript dan membentuk sebuah link atau gambar, maka tetap harus mengaktifkn alt dan title tag (untuk image) dan title untuk link agar menjadi lebih seo friendly.

Balas

hatur nuhun kang. sukses di terapken di blog wallpaper.
kalau berkenan mangga di tengok http://artgallery89.blogspot.com/

Balas

Ga bisa aktif nih kang :(

Balas

min, kok di blog saya gambar thumbnailnya kaga muncul ya... tolong diobantu dong ( sumingsuming.blogspot.com )

Balas

kalau mau buat gambarnya berjejer kekirike kanan bisa mas (y)
terimakasih sebelumnya

Balas

scriptnya delimiter kang gk tau apa maksudnya jadi gk bisa kau pasang di templet ku

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×