Cara Membuat Random Post di Blog

Setelah sebelumnya Mas Adhie memposting bagaimana cara membuat Widget Twitter di blog, kali ini Mas Adhie akan menambah daftar tutorial blog untuk teman-teman semua, yang kali ini akan Mas Adhie share adalah bagaimana cara membuat postingan berjalan dengan thumbnail gambar.

Widget ini sebelumnya pernah saya gunakan pada template yang pertama dan kali ini saya akan bagikan kepada teman-teman semua.

Script yang saya bagi ini terdiri dari 2 komponen yaitu fanspage dan posting berjalan yang sudah saya gabungkan di dalam satu kotak, anda tinggal mengedit sedikit menyesuaikan dengan kesukaan anda.

Baiklah berikut ini adalah screenshoot widget fanspage dan postingan berjalan di blog

Screenshoot :

Kode :

<form style="border-radius:5px; border:1px solid #dedede;padding:3px;text-align:left; background: #F4F5F5 target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masadhie', 'popupwindow', 'scrollbars=yes,width=490,height=520');return true"><input value="en_US" name="loc" type="hidden" /><input value="MasAdhie" name="uri" type="hidden" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/kangmasadhie&amp;width=295&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:239px;" allowtransparency="true"></iframe>
    <p style="text-align: left"><script src="http://goo.gl/rs5w7" type="text/javascript"></script><style type="text/css" media="screen"><!-- #spylist {overflow:hidden;margin-top:9px;padding:0px 0px;height:257px;} #spylist ul{overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;} #spylist li {width:290px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;border-bottom: 0px solid #DDD;} #spylist li a {text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0px 0px;padding:0px 0px 2px 0px;} #spylist li img {float:left;margin-right:5px;background:none;border:0;}
.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;} .spycomment{overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;} --> </style> <script language='javascript'> imgr = new Array(); imgr[0] = "http://goo.gl/oj5sQ"; imgr[1] = "http://goo.gl/LuClO"; imgr[2] = "http://goo.gl/fBbpo"; imgr[3] = "http://goo.gl/fh9rw"; imgr[4] = "http://goo.gl/QZuTl"; showRandomImg = true; boxwidth = 250; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 36; home_page = "http://www.belajartekno.com/"; limitspy=3
intervalspy=4000 </script><div id="spylist"><script src='http://goo.gl/plwS4' type='text/javascript'></script></div></p>

   </form>

Keterangan :

• http://www.facebook.com/kangmasadhie : Alamat Fanspage anda
• http://www.belajartekno.com/ : Alamat Homepage blog anda
• Limitspy=3 : jumlah maksimum yang ditampilkan di random post

Cara Penerapan :

1. Login ke akun blogger.com

2. Pilih Tata Letak > pilih HTML/Javascript

3. Paste kode diatas klik simpan dan lihat hasilnya

Silahkan dicoba dan semoga berhasil