Sunday, December 12, 2010

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 !
 

Designed by Alieff Artwork