Menambah Sexy Sliding Sidebar di Blogspot

Sexy sliding Sidebar ini adalah alternatif lain pengganti Navigation Menu biasa, nah bila blog anda belum mempunyai Navigation Menu ataupun tidak ingin memakai Navigation Menu karena satu dan lain hal, Sexy sliding sidebar ini bisa menjadi alternatifnya.

sexy sidebar


Live Demo


Sekarang Mari Lihat Bagaimana Cara Memasangnya ....

  • Pertama login ke blogger
  • Pergi ke ---> Tata Letak
  • Klik Di Tambah Gadget
  • Pilih Html / Javascript
  • Dan Copy Paste Kode yang dibawah ini :

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://i49.tinypic.com/121abrq.jpg);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>


Sekarang Klik Simpan ...

Rubah Kode warna Merah Dengan Link Dan Teks Dari Pilihan Anda

Sekarang lihat hasilnya Blog Anda....

27 komentar untuk “Menambah Sexy Sliding Sidebar di Blogspot”

  1. Tampil lebih menarik dan cantik :X . Trims tutorialnya.

    BalasHapus
  2. keren sobs.. ijin copy script dan langsung ke TKP. thanks hehehe

    BalasHapus
  3. Keren nich...
    Aku simpan dulu sob kodenya...
    Thanks.

    BalasHapus
  4. This is a great blog post. . It's really nice and
    informative post. Thanks so much.

    BalasHapus
  5. hebat.. saya nyoba make ah..

    BalasHapus
  6. pastinya temlet makin mantabs deh :-*

    BalasHapus
  7. Wah, lagi-lagi javascript, bisa-bisa loading blog saya jadi lemot nih, padahal salah satu faktor SEO tahun 2010 adalah pagespeed atau kecepatan loading suatu halaman.

    BalasHapus
  8. bermanfaat sekali infonya...? jazakallah, salam ziarah n salam balik..... :)

    BalasHapus
  9. kalo cara pasang sub menu di atas itu caranya gimana yah??

    trus kalo sidebar ini ga bsa nge-link ke adress lain??

    trims...

    www.multibizzonline.webs.com

    BalasHapus
  10. @Reza Winandar JS yang ini juga nggak berat bro, coba test dulu kalau nggak percaya....

    BalasHapus
  11. Mantap Sekali Artikelnya Salam Kenal Ya...?

    BalasHapus
  12. mas,, saya mau nanya donk.. ini diluar artikel ini.. bagaimana caranya saya bisa aktifin home, tip seo, trik blogger, kode warna, tukeran link. maksud saya klo yg punya mas homenya diklik muncul satu halaman, kode warna dklik muncul halaman yang berbeda.. nah punya saya seperti ini mas home,about,contact,advertise,themes. punya saya homenya aja yg bisa muncul halaman kalau dklik,sedangkan about,contact dan yg lainnya ga ada yg muncul kalau diklik.. saya minta bantuannya dong... maaf ya mas klo ngerepotin dan buat comment yg panjang ini.. makasih mas... blog saya---->http://heryandi-sianipar.blogspot.com/
    kunjungi ya mas...

    BalasHapus
  13. tampilannya keren nih,,ijin copas gan,tp warnanya bisa diubah gak??

    BalasHapus
  14. Wuih mantap sekali, thx tips nya :)

    BalasHapus
  15. keren bos
    langsung di coba
    terima kasih infonya sangat bermanfaat

    BalasHapus
  16. mantap boss,,saya banyak belajar dari blog ini,,,thnks bgt

    BalasHapus
  17. thank's triknya sangat berguna buat pemula

    http://greentankrt6.blogspot.com

    BalasHapus
  18. yups benar sangat berguna sekali...
    thank qyu by bilaqalbuberbicara.blogspot.com

    BalasHapus
  19. Wah..keren..sekali coba langsung jadi... Thanks mas infonya..

    BalasHapus
  20. Okreeee bengeeeeddd dah...thx bozzz.

    BalasHapus
  21. pak de... saya mau nanya,,. klo script di atas di buat untuk shoutmix bisa gak...???

    please pak de... urgent bgt nich,... gara gara kesasar di blognya sampeyan saya sampe gak tidur nich....

    NGEBET MODE ON....

    BalasHapus
  22. mas tolong pencerahannya dong,
    saya dah coba dan berhasil tp ada satu masalah ni,
    smua link saya yg di sebelah kiri ko jd kecil ya,
    jd g enak aja di baca,
    klo mau balikin ke ukuran awal gmn ya ??
    tp tanpa menghapus sexy slidingnya, tolong dibantu ya mas,
    ni email saya gitariz.de_choice@yahoo.com
    mungkin bs di kirim ke email saya, thx mas ........

    BalasHapus
  23. oya itu bs g posisinya di pindahkan ke kiri/atas/bawah ??
    thx mas tolong di bales .......

    BalasHapus