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 {abis itu ctrl+F lagi terus cari </head>
float: right;
right: 0px;
z-index:1500;
position: absolute;
top: 100px;
}
#sharebox .wdt {
float: right;
clear: right;
padding: 5px;
}
diatasnya copas ini :
<script type='text/javascript'>naah.. langkah terakhir ctrl+F lagi dan cari <body
$(document).ready(function() {
var $sidebar = $('#sharebox'),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 100;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>
dan dibawahnyaa tinggal copas lagi ini :
*keterangan :
<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>
- 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
kalo ada pertanyaan silakan kirim message ke akun FB aku ya..
see you next post!
Wah.. iya bang, lucu tuh si floating sidebarnya.. kalo biar gambar2nya ganti2 sndiri gitu gmana bang?
BalasHapusitu ada di tutorial edisi dua atau satu.. cari deh ada kok di blog ini
Hapusmakasih udah di bikinin tutorial :) segera di coba :D
BalasHapuswah ini yang gue cari floating sidebar, terima kasih KarungBoy. Salam kenal ya
BalasHapus