Tutorial : Cara Buat Sliding Sidebar Blogspot

Tutorial Time !

Jom belajar macamana nak buat peek-a-boo sidebar !  

Comel dan seksi sungguh tau sidebar sliding ni, korang boleh letak kat tepi blog dan pamerkan link link yang korang nak secara tersembunyi ! Cuba dulu baru tauuu =)

slide sidebar

Demo / contoh  : Sliding Sidebar Blog kat sini



Ikuti tutorial dengan cermat. supaya selamat = )

Langkah pertama

Cara Buat Sliding Sidebar Blog

• Copy kod  :

• <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>

• Gantikan Url Blog korang pada perkataan # warna merah.
• Gantikan Tajuk Url korang pada perkataan warna biru.

• Save dalam wordpad

Langkah Kedua

Cara Buat Sliding Sidebar Blog

• Log in blogger.com
• Go to >> Design
• Click Page Element
• Add a gadget
• Pilih Html / Javascript
• Paste kod yang korang copy tadi
• Save 

Credit : JeritanBlog




Selamat Maju Jaya !