Selamat datang ke BelajarBlogs...
Home » » Menambah Sliding Sidebar Pada blog

Menambah Sliding Sidebar Pada blog







Live Demo

Langkah 1
Anda perlu edit dan copy kode dibawah ini


<script src="https://sites.google.com/site/jeritanblog/javascript/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jeritanblog/javascript/effects.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jeritanblog/javascript/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://4.bp.blogspot.com/_8X8A6_fKD8A/S9CFbXuUDgI/AAAAAAAAC-Y/yr2cyLZgCV0/s320/left.collapse.border.gif);
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://2.bp.blogspot.com/_8X8A6_fKD8A/S8mQ8Ig6q3I/AAAAAAAAC9o/rnKICWGwLls/s320/sidebarcollapse.gif" title="sideBar"/></a>
</div>

Warna Merah (GAntikan dengan URL anda )
Warna Biru (Nama Tajuk URl anda )

Langkah 2
1. Login ke Blogger, Klik Design :



2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;



4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;


15 ulasan:

  1. widget yang lebih kemas
    thanks!

    BalasPadam
  2. sama-sama ..
    memang sesuai dengan blog Nurdani

    BalasPadam
  3. Tn punter tuto nape saya punye jadi camtu ?
    please pegi JENGGUK !
    dea ckp image has been remove. :(
    cmne ?

    BalasPadam
  4. kenape saye punye tak bley?
    die x nk kluar la..
    plese tlong..

    BalasPadam
  5. @atira syuhadah
    Kalau banyak script yang awk gunakan memang susah untuk kelaur kerana blog awk berat

    BalasPadam
  6. napee image was been remove ? tak paham lahh

    BalasPadam
  7. minta maaf hosted gambar dah didelete.

    BalasPadam
  8. saya punya lepas da save tros x ley keluar langsung. Tetiba keluar yg lain pulak. ?? Kenapa jadi cam tu?

    BalasPadam
  9. @Muhammad R-Syad minta maaf tutorial ini tidak menjadi lagi

    BalasPadam
  10. Saya dah ubah..Sekarang dah menjadi..minta maaf sebab ada kesilapan host

    BalasPadam
  11. @Jeritan Blog : Saya punya dah menjadi. thnks :)

    BalasPadam