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!

7 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
  4. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

    BalasHapus
  5. Artikel yang sangat menarik :D

    http://clayton88.blogspot.com | http://bit.ly/1sUU8dl | http://goo.gl/lNMX3D | http://goo.gl/cAQcMp | http://goo.gl/97Yn1s | http://goo.gl/tw2ZtP | http://goo.gl/RkuB4G | http://bit.ly/1Mwgw3U | http://bit.ly/23ABPpR |


    Prediksi Bola
    Kumpulan Berita Menarik
    Kumpulan Berita Campuran
    Nonton Film Dewasa
    Bandar Bola
    Agen Bola
    Agen Casino
    Agen Bola Terpercaya
    Main Dominoqq
    Agen Poker
    Bandar Ceme
    Agen Capsa
    Agen Poker Terpercaya

    Terimakasih admin..
    salam kenal ^_^

    BalasHapus
  6. Artikel yang sangat menarik :D

    http://clayton88.blogspot.com | http://kagumiterus.blogspot.com/ | http://pkcinema.com/
    http://informasiberitatop.blogspot.com | http://bit.ly/1sAwovI | http://bit.ly/1sUU8dl | http://bit.ly/1ZIdBJv http://bit.ly/1YjeNnK | http://bit.ly/1WKgJqp | http://bit.ly/1ZIehP9 | http://bit.ly/1sAwovI | http://bit.ly/1UobCKp | http://bit.ly/1S0ZSYr | http://bit.ly/1ZIehP9 | http://bit.ly/1UL7Ia5 | http://bit.ly/1WKgJqp | http://bit.ly/1YjeNnK

    Nonton Movie

    BalasHapus