Rabu, 01 Agustus 2012

Tutorial Karungboy Edisi 3

di tutorial kali inii..
aku bakal ngebahas cara ngebikin floating sidebar kayak yang di kanan ini nih yang gelantungan >>>>>>>
jangan lupa buat ngebackup template dan berdoa dulu supaya tidak terjadi hal yang tidak diinginkan
oke langsung aja..

pertama
ke template > edit html > centang expand template widget
terus tekan ctrl+F & cari ]]></b:skin>

diatasnya copas ini :
#sharebox {
float: right;
right: 0px;
z-index:1500;
position: absolute;
top: 100px;
}

#sharebox .wdt {
float: right;
clear: right;
padding: 5px;
}
abis itu ctrl+F lagi terus cari   </head>
diatasnya copas ini :
 <script type='text/javascript'>
$(document).ready(function() {

var $sidebar   = $(&#39;#sharebox&#39;),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 100;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
naah.. langkah terakhir ctrl+F lagi dan cari <body
dan dibawahnyaa tinggal copas lagi ini :

<div id='sharebox'>

<table align='center' background='https://background.com/sidebar.png' cellpadding='20' class='no' height='512px' style='background-repeat:no-repeat' width='100%px'>
  <tr>
    <td align='left' valign='middle'>

<a href='http://taro-disini.com/link_kamu.html'>
<img src='http://sumber.com/gambar'/>
</a>
</td>
</tr><tr>

    <td align='left' valign='middle'>
<a href='http://taro-disini.com/link_kamu.html'>
<img src='http://sumber.com/gambar'/>
</a></td>
</tr><tr>
    <td align='left' valign='middle'>
<a href='http://taro-disini.com/link_kamu.html'>
<img src='http://sumber.com/gambar'/>
</a>
</td>

  </tr>
 
</table>
</div>

*keterangan :
  • yang dikasih warna ijo itu background sidebarnya, kalo disini gambar kayunya
  • yang dikasih warna biru itu linknya, bisa diganti sesuka kamu
  • yang warna pink itu buat icon di tiap linknya
oke selesai :3
kalo ada pertanyaan silakan kirim message ke akun FB aku ya..

see you next post!

4 komentar:

  1. Wah.. iya bang, lucu tuh si floating sidebarnya.. kalo biar gambar2nya ganti2 sndiri gitu gmana bang?

    BalasHapus
    Balasan
    1. itu ada di tutorial edisi dua atau satu.. cari deh ada kok di blog ini

      Hapus
  2. makasih udah di bikinin tutorial :) segera di coba :D

    BalasHapus
  3. wah ini yang gue cari floating sidebar, terima kasih KarungBoy. Salam kenal ya

    BalasHapus