Widget Recent Post Terkeren 2013

ali ini saya ingin berbagi widget auto scrolling untuk recent update atau recent post  di mana untuk artikel terbaru dapat ditampilkan secara scrolling otomatis berpindah naik turun. Widget auto scroll artikel terbaru ini di temukan oleh pakar SEO termuda yaitu Waleed Khan dari Pakistan.
Langsung saja kita mulai tutorial ini, pertama-tama silakan buka Edit HTML blog sobat, centang expand template widget. Copy kode berikut tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script></a>

Kemudian di save dan tutup kembali. Pada tahap pertama ini sobat telah menambahkan kode jquery di blog sobat. Selanjutnya adalah tahap kedua. Silakan sobat masuk ke menu tata letak dan pilihkan add gadget. Silakan sobat tentukan sendiri di mana akan di letakkan widget auto scroll artikel terbaru atau recent post ini.

Jika sudah di tentukan, silakan pilih edit HTML/Javascript dan copy kode di bawah

<style type="text/css" media="screen"> <!-- /* ========== Scrolling Recent Posts Widget By bloggiks.com ======== */ #bloggiks-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #bloggiks-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #bloggiks-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXBtYRk2_oOizMq3l-umpNMic0vFP1zzUscH69u3fr_q_nWpcKeTaGS42xBfdNYczKhV44PFQ_8Ph-upmwZb11chVvJK-kzi4XISXRg0xa37FKI-TdnG4G9juRuU1TsVBFiFsfjuj1APM/s1600/bloggiks.com-post.jpg) repeat-x; border: 1px solid #ddd; } #bloggiks-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #bloggiks-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #bloggiks-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #bloggiks-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .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; } /* ========== Scrolling Recent Posts Widget By bloggiks.com ======== */ --> </style><br /> <br /> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkt1IMDPR05AlDcjlAMz8qrYs4WSrwMqoQ0mb1ss50220Jo7I9bujobxevR1rH6JExRLuSwJEFlEejUGXWlPFgmsW60cJ_6JJIQ7po1OhJrVLNOrgr6BQ2m_wD2TUxdfVbPloXB07pM8/s1600/no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkt1IMDPR05AlDcjlAMz8qrYs4WSrwMqoQ0mb1ss50220Jo7I9bujobxevR1rH6JExRLuSwJEFlEejUGXWlPFgmsW60cJ_6JJIQ7po1OhJrVLNOrgr6BQ2m_wD2TUxdfVbPloXB07pM8/s1600/no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkt1IMDPR05AlDcjlAMz8qrYs4WSrwMqoQ0mb1ss50220Jo7I9bujobxevR1rH6JExRLuSwJEFlEejUGXWlPFgmsW60cJ_6JJIQ7po1OhJrVLNOrgr6BQ2m_wD2TUxdfVbPloXB07pM8/s1600/no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkt1IMDPR05AlDcjlAMz8qrYs4WSrwMqoQ0mb1ss50220Jo7I9bujobxevR1rH6JExRLuSwJEFlEejUGXWlPFgmsW60cJ_6JJIQ7po1OhJrVLNOrgr6BQ2m_wD2TUxdfVbPloXB07pM8/s1600/no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkt1IMDPR05AlDcjlAMz8qrYs4WSrwMqoQ0mb1ss50220Jo7I9bujobxevR1rH6JExRLuSwJEFlEejUGXWlPFgmsW60cJ_6JJIQ7po1OhJrVLNOrgr6BQ2m_wD2TUxdfVbPloXB07pM8/s1600/no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.nelsonsitompul.com/"; limitspy=4; intervalspy=4000; </script><br /> <br /> <div id="bloggiks-widget"> <script src='http://widgetbloggiks.googlecode.com/svn/trunk/recent.js' type='text/javascript'></script><br /> </div> </a>

Yang perlu sobat ganti adalah pada baris ke 9 dari bawah yaitu URL http://nelsonsitompul.com dengan URL sobat. Dan di bawahnya limitspy=4 silakan diisi jumlah artikel yang ingin terlihat di home page. 

Sedangkan jumlah artikel yang ingin dimunculkan silakan ganti pada kode di atas URL http://www.nelsonsitompul.com yaitu pada numposts = 10. (ini berarti ada 10 artikel yang akan dimunculkan pada 4 kotak limit spy.

Mudah khan? Demikian sharing widget auto scroll recent post atau artikel terbaru yang dapat menghiasi blog sobat. Semoga bermanfaat menghias blog sobat.