Trik Blogger

1. Pergi ke Template/Rancangan > Edit Html
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>
3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script>//<![CDATA[ $(function() { /** * the list of posts */ var $list = $('#rp_list ul'); /** * number of related posts */ var elems_cnt = $list.children().length; /** * show the first set of posts. * 200 is the initial left margin for the list elements */ load(200); function load(initial){ $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list. //Make sure not to repeat while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else $elem.show(); ++loaded; } //animate them var d = 200; $list.find('li:visible div').each(function(){ $(this).stop().animate({ 'marginLeft':'-50px' },d += 100); }); } /** * hovering over the list elements makes them slide out */ $list.find('li:visible').live('mouseenter',function () { $(this).find('div').stop().animate({ 'marginLeft':'-220px' },200); }).live('mouseleave',function () { $(this).find('div').stop().animate({ 'marginLeft':'-50px' },200); }); /** * when clicking the shuffle button, * show 5 random posts */ $('#rp_shuffle').unbind('click') .bind('click',shuffle) .stop() .animate({'margin-left':'-18px'},700); function shuffle(){ $list.find('li:visible div').stop().animate({ 'marginLeft':'60px' },200,function(){ load(-60); }); } }); //]]></script>

4. Sekarang letakan struktur HTML ini juga diatas kode  </body>
<div class='rp_list' id='rp_list'> <div class='img2'> <ul> <li> <div> <img alt='Slawi Kabupaten Tegal' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4zKILnjtB_VQV6LnixVLOKLO3L5OB6CkegVVLyTWHkf4ZYvSGHNT0bXq-w0z9ottRKU4Wr4mRAk1EdQK6ZgPQxrgc7MrdRDmCQZogoXsfvP9lflMa4jzdiUDW5638_ORT9SxxUhWbKwW/s320/34468396.jpg' width='72'/> <span class='rp_title'>Slawi Kabupaten Tegal</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2010/10/slawi-kab-tegal.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Perilaku Hewan Pendeteksi Gempa' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9rMPf_CK98DjfNiDURd8h9PRmHEwfu7rhzvwamNvdlChg_jQK-Y9x60Bm3Qc2MQDrBv4KVfocgti_sIY44CmhzXTVG6-bvkqkvw88prKWlJ1yu1RQEbwogBDTEHl0gDiWSj5qrpdNJ9m/s320/tubuh+katak+pohon+bermata+merah.jpg' width='72'/> <span class='rp_title'>Perilaku Hewan Pendeteksi Gempa</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/perilaku-katak-bisa-mendeteksi-gempa.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Yang Pertama Dilihat Pria dari Wanita' height='72' src='http://cdn.sximg.com/salingsilang.com/uploads/2012/01/20120125_minyoung_minho_1.jpg' width='72'/> <span class='rp_title'>Yang Pertama Dilihat Pria dari Wanita</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/yang-pertama-dilihat-pria-dari-wanita.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Lima Artis Korea Tercantik' height='72' src='http://l.yimg.com/bt/api/res/1.2/kV0L3D40XsMrjoYgUrRXGw--/YXBwaWQ9eW5ld3M7cT04NTt3PTIwMA--/http://l.yimg.com/os/401/2012/02/16/AP050725014760-jpg_104402.jpg' width='72'/> <span class='rp_title'>Lima Artis Korea Tercantik</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/lima-aktris-korea-tercantik.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='4 Makanan Pelangsing Ala Perempuan Jepang' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK-yWgeOKQXaY3ZAmKQ-i9mV77YPmuOAtLY5B3M39dSNfu5c3PmVCdGfL76KDPncphDsKTmXWz1a3B9P4QNDvW0EQxHvecVt0-cQWd-_z8GrNH3R5yJ-LUHeJrjzxgAHCqIL9rlETVt0q1/s1600/artis+korea.png' width='72'/> <span class='rp_title'>4 Makanan Pelangsing Ala Perempuan Jepang</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/4-makanan-pelangsing-ala-perempuan.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='7 Ciri Pria Tidak Dewasa' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid5fAKajZKIxoaiEKogIbb3zxCCQQUWOkG4vOfmuyWS2z_WMkPH-ET1fNuoiwy5dx-yG2EIptcFBvTraovx8lJkExoNgScwb03CvA5Br8wzRaGPLGEzUcz1rNkfL4oJMu0BFyywls26DA/s320/karir-terpaksa-senyum.jpg' width='72'/> <span class='rp_title'>7 Ciri Pria Tidak Dewasa</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2011/12/7-ciri-pria-tidak-dewasa.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Obati Luka Dengan Kopi' height='72' src='http://www.tabloidnova.com/var/gramedia/storage/images/media/images/luka-kopi-foto-ferdi/5329576-1-ind-ID/luka-kopi-foto-ferdi_medium.jpg' width='72'/> <span class='rp_title'>Obati Luka Dengan Kopi</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/obati-luka-dengan-kopi.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Adobe Photoshop CS 5 Portable (Download Gratis.!!!)' height='72' src='http://i34.tinypic.com/a3f2as.jpg' width='72'/> <span class='rp_title'>Adobe Photoshop CS 5 Portable (Download Gratis.!!!)</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/adobe-photoshop-cs-5-portable-download.html' target='_blank'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Logo SATPAM Format Cdr' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVx05voxLHrxkPVYrtaOMJnVR4X6uU51Cmfv3MEnlRd22y41PItDDrUihUC_EhekURxgHJOyQQeyUbEj8GGMoNCQ-XaIjD6txDQjfg9FgVNR6YDg1HZIudZo0sHu8nn5ZsYLFN8-Qb-8Wi/s320/satpam.jpg' width='72'/> <span class='rp_title'>Logo SATPAM Format Cdr</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2011/12/logo-satpam-format-cdr.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Puisi Untukmu untuk Kekasihku' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOS5Dda5W_020SlMEYlAoDRl1uzkT3q_DWjLwRk6TSOVzN6PTpQoQQob3km9M70FGayvV7Q3rItdvwdDWMl0AYljle5CGOYtmU6fORYGEYpOLTF5d_vIQi2bA7TzLUQmowGTVANIe3Gsi/s200/87o4gqig+copy.jpg' width='72'/> <span class='rp_title'>Puisi Untukmu untuk Kekasihku</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/01/puisi-untukmu-untuk-kekasihku.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='9 Perbedaan Antara Cinta dan Nafsu' height='72' src='http://rasapas.files.wordpress.com/2011/08/cinta-dan-nafsu.png' width='72'/> <span class='rp_title'>9 Perbedaan Antara Cinta dan Nafsu</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2011/11/9-perbedaan-antara-cinta-nafsu.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Bikin Facebook Baru [humor]' height='72' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='72'/> <span class='rp_title'>Bikin Facebook Baru [humor]</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/bikin-facebook-baru-yang-belum-pernah.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Fosil Tupai dalam Film Ice Age Ditemukan di Argentina' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj90J4COE_0L8XHaAyEfpkpIDJ9l4LT-Md7nX39ajY8pACdIgks5GR3ErGXaSeCup43etjtMZe7Vp1YtYWAC7-GnFAxDFeZ9hw1LxUtsYCoc_O_Z_-9T2FkmOdOpZ84pC9-jdRSr7Fq_cRx/s400/tupai.jpg' width='72'/> <span class='rp_title'>Fosil Tupai dalam Film Ice Age Ditemukan di Argentina</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/03/fosil-tupai-purba-ditemukan.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Film Animasi Pada Suatu Ketika' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJ65jzyYQ8wrS49_WPubwbmChRSuaQwpOU1q4qiemr3w1izOFhsR9GsC0Xq0R_Ci_icpVEMN44epGmJfY6glv21yisqQhsBqo_y7SuZTSmP2_bUuFj1c9_ykC2CmXqqSEgxC5WO9o6ZtH/s1600/galeri5_banner+copy.jpg' width='72'/> <span class='rp_title'>Film Animasi Pada Suatu Ketika</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/02/film-animasi-indonesia-pada-suatu.html'>Baca Selengkapnya</a> </span> </div> </li> <li> <div> <img alt='Hentikan Merayu Wanita' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHaKTbVSTUAB0zZ4KM3YMKfJtKjRlP8TfS0F6fbwh97uCjSVO6TNuMmupX4HhyJmIS8DdboxfC5EzgURQaSvtwC8xRKXRVk-vFmMwi68TMswBVefMbVZaSsqRXofJjIaf2D3OhpDjUSQ-o/s320/cowo+perlu+baca+ini.jpg' width='72'/> <span class='rp_title'>Hentikan Merayu Wanita</span> <span class='rp_links'> <a href='http://sanieburonan.blogspot.com/2012/03/hentikan-merayu-wanita.html'>Baca Selengkapnya</a> </span> </div> </li> </ul> <span class='rp_shuffle' id='rp_shuffle'/> </div></div>


Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut

<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>


Anda bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, Anda harus mengganti teks berwana dengan link dan judul Anda.
5. Terakhir Klik Save Template

Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke FacebookBagikan ke Pinterest