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

Pada postingan sebelumnya saya sudah membahas bagaimanacara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas. 

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW 
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
Keterangan:
5px adalah ukuran x-offset 
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini: 


Keterangan:
0 adalah ukuran x-inset 
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:


dan untuk inner text shadow menjadi seperti ini:


Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)