Cara membuat Navigasi Menu Share di sisi kanan

 


Semenjak Blog kena virus saya jadi malas menulis artikel alias menambah postingan :b; karena :q; semuanya menjadi serba membengkak, sebagai Admin BlogBego Creation saya mohon maaf pada kawan pengunjung yang setia :w; biar tidak kosong sama sekali terpaksa saya copaskan postingan di Blog saya yang lain, yang akan saya bahas sekarang Cara membuat Navigasi Menu Share di sisi kanan yang bisa Auto Hidden 

untuk Demonya kawan bisa lihat disini 
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget 
  • Pilih tanda [+] pada HTML / JavaScript
  • Copas Kode berikut kedalamnya
<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 100px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}
ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px;
background-color:transparent;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #FFF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xPVLaGcaYedBJFOSK3LbzBU708z2QfVn2j8CaU_VzcAi3hSgCFbdLg0fPlyBJmMhlP-qiYW7cPVrq65-sz3jWTIwv5LUUKyIvAD-CSoEuOzLJaAtUgMBxZVBcB8VGFBkC_VmqkeVoFg/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpOOMNi_oBn_TfWU-f60rHg4yMj_ku17ceYdXyeWZluMaOlVRsrRVMELx8JTGZoJM7YtsFEblJTvzN8SGgJCgzjIVXcwZBn28KZoF8IVt7U_twK_UrJdURQsAF2MnOLN71h0gW6w5vWg/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHbHvoNCYujuNhMWbaiizAsO9SFlEQRPUQtZZ4lNUMKmeYZsvpBACUcZXi62dI7B7xzAWvOmdcHxBEGmEG9EgzvJaNyyDt9Jnt0oXPX73sfJ2X9Bt462TOhPOHgqqqhnCVxmWKp75IaY/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh51lx1yLgaBVF-QGY42oQMJH_oLupH_Dm87Qxwzop_-cQ-Azu7pfmN9eWRn5UBB35GXiuvS4EYhNoxxYxrMYNLS70CDyZSK8WmzPYR5HK7ECJS6FyMVAOpVA3EooVqrGfmVJkt54kYRXs/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZ0EbmdirS0aw6OIqM2QdozjeG19rMVcxxgOb2xaYx141eA5qzh-O0wZhvrYMbP6UH90chs8-HTQ0_MGjZ36o7_hovd-veHVMz3Njm2t_6M4wjFI8JC0L_cFMIN60zwfz6k8xAY9kaRw/s400/mail_edit.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script>

<ul id="navigation1">
<li class="rss"><a href="http://info-blogbego.blogspot.com/atom.xml" target="_blank"></a></li>
<li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"></a></li>
<li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"></a></li>
<li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"></a>
</li></ul>
  • Silahkan ganti teks yang saya beri warna dengan Link kawan 
  • Teks yang saya beri warna biru [transparent] bisa kawan ganti dengan kode warna 
  • Simpan Blog kawan 
Seandainya Nanigasi Menu ini tidak mau Auto Hidden tambahkan jquery  berikut dibawah ]]></b:skin> atau diatas </head>

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

Tags

Top Post Ad

Below Post Ad