DwiCreations

Wisanto's Blogg - Selamat siang kawan bloggers nah.. kali ini saya akan share cara membuat sidebar di kiri blog ala kak doza cracker !!

Cara : > pergi ke DASHBOARD

          > pilih TATALETAK

          > lalu pilih TAMBAH GADGET

           > pilih HTML/JAVASCRIPT

           > lalu pastekan kode dibawah ini !        

<style type="text/css">
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaDsQSBDVur0hU6FPqhErekTfbyf8e2lBO7vWr9XT3KnWG03na4Uobp-QR1WtU2OUH1PEsvRbN6qhxifrayinOUQoOIQ2d4N79jlZaEyLXb-ufQZIsfIXXj3AIloqYqZRSuIFZnlV_I_A/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRe7uKB39wfyo8k2PMEGPIRZaAOPyQqJ8zCrpai0alX5Dqll4FMJgQlBMMSv5QQ49THjZjAs2QGRuc_FQFUJnT6Dxmrp-x_op5GtUN3wyGt1jCmPYBHP5VfGRJhymxuNL10D1JAGihkkw/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ChqIOOMTJyver2jqf5eBBwfyOfI1idGU9QPCzdB3laW12ct45wD3JetzdTZtGO-RAfLLb3Acr1Ct3aIbFhEPDdAfYgpYKopWaR_kwGqJc9hws8qikBVtTtNaF9tLczRt_-BG532sbKU/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5G_ex782ERWDAqSQfdr-8hbRtO2w3e-auS4iivjS3zWCHHSoBA2_wOTuASdRsdmmbI75VVA4peicqEDxy3JbiCwPuy5IJbiekNC5b9KKR7fR6R4IHw_ooiVpQoxKGVIzCtQHTDrhucAk/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGKwhP-2D8jLtvxC1ViSuM3W-Cg3UtiuN77AGKbpwdERsFFtIBnO3C5gGFLIqxJPSYBk0RxTSe9NfqtiBF3N3XgNtWHWpOIT1LYb0Jxj1NqppCjYGs_UvSvWBpIByc7VBTpDTY3oDZSY/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSvQtUMdt6yTA4oHjBfx-r0htYT3sHXY-HL1YnBdTmD4ly1EcD1PcQFSdeY5K2RLoLZHs0JdANv_OtPk4vav8n6RPouRpSbvEfSRkzWDKxFE-9ulSLDtEERUhyzBvh98lz75AjiTNg-QY/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKhhWy3-PoEJ1qf1ccVHSxnbxK8v-vPhCkVwBhZOe6RJ5DRwl_fZjJMf3I3uKJ3y57B_LMiv5qIw6XoMbT7DV0schLdgN-3u7vjZzDE4PXgQ8BpURTk_OPakll0BUDdLacLYFh7Tq6l8/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYON2lKjtjgcSE4totS1sY-Z3i9nQtFe26MrhG3wFbtOXD6P_BoHYYyKLr3H8lMtfD5cmj9Ed0yb6Ib7VFxJpr_P8Nvxo3Ws8JOi-ffHm6Qg0iMSqo2MnCuZ7O9yDMaviJgGKeSEnhSsg/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjPZhfUjIzmlsckiXslaKayXh-3cAB-cA7yzeA6v_74-LuiGe8lgzHaCf9z6-zqecOm_1JhB6zNaUtm5RnedY7k7raB0iRWYMTdtLWvUZrCW_q3N9jb3pgpktdNXYA8GRocVShlB8O9M/s1600/yahoo+icon.jpg);
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>



<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>

<li class='home'><a href='http://wis4nto.blogspot.com/' title='#'></a></li>

<li class='about'><a href='/' target='_blank' title='About us'></a></li>

<li class='rss '><a href='http://feeds.feedburner.com/DozaGanteng' target='_blank' title='Rss feed'></a></li>

<li class='mail'><a href='http://facebook.com/messages/100002065981974' target='_blank' title='Contact Me'></a></li>

<li class='facebook'><a href='https://www.facebook.com/dwi.iankkclalucyankqmmu' target='_blank' title='Follow us on facebook'></a></li>

<li class='twitter'><a href='http://twitter.com/wisantohacker' target='_blank' title='Follow us on twitter'></a></li>

<li class='youtube '><a href='/' target='_blank' title='Follow Us on Youtube'></a></li>

<li class='googleplus '><a href='https://www.facebook.com/dwi.iankkclalucyankqmmu' target='_blank' title='Follow Us on google plus'></a></li>

<li class='yahoo'><a href='/' target='_blank' title='YM Dwi Susanto'></a></li>

</ul>

<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

Tulisan yang saya beri warna ganti sesuai keinginan !

SEMOGA BERMANFAAT ^_^