Cara Membuat Efek Sticky Widget Lebih Dari Satu Admin : Unknown

Assalamu'alaikum,wr.wb

Hai sobat blogger,ketemu lagi dengan catatan saif acak acak namun manfaat, ^^

kali ini di catatansaif mau bahas soal STICKY WIDGET , sebelumnya udah pada tahu blm itu apa?? 

Sticky widget adalah suatu script yang membuat efek lekatan dimana jika kita pasang di widget kita maka widget tersebut akan melekat atau mengikuti scroll pada blog. seperti halnya posting saya sebelumnya mengenai Cara Mudah Membuat Sidebar Auto Slide Blog Melayang . Namun beda dengan tutorial kali ini,karena kita akan membuat efek auto slide melayang hanya dibeberapa widget saja.

Catatan Penting :
Kebanyakan ditutorial sobat sobat blogger yang pernah saif kunjungi efek sticky widget ini hanya bisa digunakan untuk satu widget saja,ya memang benar adanya karena script mengkhususkan hanya satu kode id saja, namun disini saif ingin coba menggabungkan antara widget 1 dengan yang lain.mau tau kaya apa yuk langsung kita praktikkan :

Yang ingin saif gabungkan widget hari ini adalah untuk widget entri popular dan widget posting terbaru, tolong diperhatikan cara ini bisa sobat bikin sesuai keinginan,namun hanya saja karena saif masih newbie jadi yang mudah mudah aja dulu, artinya kita menggabungkan widget bawaan dengan widget buatan sendiri yang menggunakan kode javascript. Sobat bisa lihat DEMO nya di SINI ( bagian kanan / sidebar )

Kalau sudah kita mulai tutorialnya :

• Pertama log in dulu ke blog sobat
• Masuk ke Template >> Edit HTML
• Cari kode </body> ( atau yang udah di modif jadi seperti ini &lt;!--</body>--&gt;&lt;/body&gt; ) gunakan CTRL+F untuk mencarinya
• Copy dan pastekan kode berikut dan letakkan tepat diatas kode </body> tadi. 

<script>
//<![CDATA[
bs_makeSticky("PopularPosts1");
function bs_makeSticky(elem) {
   var leony_sticky = document.getElementById(elem);
   var scrollee = document.createElement("div");
   leony_sticky.parentNode.insertBefore(scrollee, leony_sticky);
   var width = leony_sticky.offsetWidth;
   var iniClass = leony_sticky.className + 'leony_sticky';
   window.addEventListener('scroll',leony_sticking, false);
   function leony_sticking() {
   var rect = scrollee.getBoundingClientRect();if (rect.top < 0) {
   leony_sticky.className = iniClass + ' leony_sticking';
   leony_sticky.style.width = width + "px";} else {
   leony_sticky.className = iniClass;}}
}
//]]>
</script>
<style>
.leony_sticking {background:none !important; position:fixed; top:6px;}
</style>

Catatan :
Warna merah ganti dengan id widget sobat, sebagai contoh saya gunakan id pada popular pos.
cara mendapatkan id yang pas silahkan sobat cari di template sobat,contohnya karena saya edit popular pos jadi saya gunakan id seperti ini <b:widget id='PopularPosts1'.......dst,atau dengan cara lain sobat buka tata letak kemudian sobat coba buka widget popular pos,nah di tampilan new tab di widget tersebut sobat perhatikan pada kotak alamat browsernya,lihat alamat paling pojok kanan sendiri terdapat id widget sobat.

• Simpan template atau pratinjau dulu.

Langkah pertama selesai untuk membuat satu widget melayang dengan efek sticky. sobat boleh lanjut boleh tidak untuk menambahkan 1 widget lagi dibawahnya dengan efek yang sama.

Seperti yang saif bilang diatas kali ini saif gunakan script widget  posting paling baru.

ini dia kodenya :

<div dir='ltr' style='text-align: left;' trbidi='on'>
<div style='text-align: center;'>
<div style='text-align: left;'>
<u><b><span style='color: red; font-family: Times New Roman,; font-size: 40;'>POSTING PALING BARU</span></b></u></div>
</div>
<div style='text-align: center;'>
<u><b><span style='color: #e69138;'/></b></u></div>
<div style='border: px solid; height: 180px; overflow: auto; padding: 10px; width: 100%px;'>
<style>
img.recent_thumb {padding-left:20px;padding-right:padding-bottom:0px;0px;width:60px;height:60px;border:0;float:right;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:green;}
.recent_posts_with_thumbs {padding-bottom:0px;padding-top:0px;padding-left:0px;padding-right:0px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:12px;}
</style>
<script src='http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js' type='text/javascript'/>
<script type='text/javascript'>
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<script src='http://www.emelde.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs' type='text/javascript'/></div>
</div>

 Catatan :
warna biru adalah ukuran font judul bisa sobat ganti angkanya
warna merah adalah judul widget silahkan ganti sesuai widget yang digunakan
warna pink adalah tinggi scroll widget silahkan sesuaikan tingginya
warna orange adalah jumlah posting terbaru yang ingin ditampilkan
warna hijau adalah alamat blog silahkan ganti dengan alamat blog sobat

Langkah langkah memasang kode widget tersebut :

• Sobat cari kode script popular post / entri populer seperti dibawah ini ditemplate sobat :

<b:widget id='PopularPosts1' locked='false' title='TERPOPULER MINGGU INI' type='PopularPosts'>blablabla.................dst sampai</b:includable>
   </b:widget> </b:section></div>

gunakan CTRL+F pusatkan pencarian judul widgetnya  contoh : title='TERPOPULER MINGGU INI' 

• Jika sudah ketemu copy kode script widget posting paling baru dan pastekan tepat di atas kode </b:includable> .
• Selesai pratinjau dulu atau langsung simpan jika anda sudah yakin.

Oya sobat bisa gunakan kode script widget lainnya seperti widget per label,facebook fanspage,twitter dsb yang penting berbentuk kode script,sobat juga bisa gabungkan diwidget apa aja selain popular pos, bisa dengan arsip,label atau lainnya. dengan cara yang sama. keberhasilan tergantung dari kesungguhan dan niat sobat untuk otak atik template, seperti hal yang saif lakukan hari ini . ^^
Selesai sudah tutorial catatansaif kali ini mengenai cara membuat efek sticky widget lebih dari satu. Semoga sukses dan semoga bermanfaat,wassalam.......