Cara Membuat Navigasi Menu Share di Sisi Kanan

Berbicara tentang Navigasi Menu atau Tab Menu pasti kawan sudah tahu, yang biasanya berada diatas posting atau dibawah / diatas  Header dan ada juga yang menaruhnya dibawah posting [pada Footer Blog] itu semua tergantung selera masing-masing, :r tapi sekarang saya akan mencoba berbagi dengan kawan cara membuat Navigasi Menu Share di sisi kanan yang bisa Auto Hidden :z

untuk Demonya kawan bisa lihat disini

Caranya : 
  • Saya asumsikan kawan sudah berada pada Design / Perancang Template 
  • Tambah Gadget atau 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(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/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://blog-bego.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>
  • Simpan Template Kawan dan lihat hasilnya :# 
  • Kalau hasilnya tidak mau Auto Hidden, maksud saya Navigasi tersebut akan masuk ke sisi / pinggir kanan Blog dan akan keluar satu elemen Share kalau mouse di dekatkan pada elemen Share tersebut. [seperti gambar / image disamping] berarti pada template kawan belum berisi jquery, maka tambahkan kode berikut dibawah 
]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
  • Setting lainnya, kalau kawan ingin biar kelihatan warna background / latar belakang silahkan text transparent berwarna hijau diganti dengan warna kesukaan kawan
  • Ganti semua URL saya yang berwarna hijau dengan URL kawan 
  • Kalau semuanya sudah okey simpan kembali template kawan 

Description: Cara Membuat Navigasi Menu Share di Sisi Kanan - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Cara Membuat Navigasi Menu Share di Sisi Kanan


Kawan sedang berada pada Artikel
» Cara Membuat Navigasi Menu Share di Sisi Kanan
di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
asal kawan menyertakan Link / Sumber Artikelnya

Artikel Menarik Lainnya :


0 komentar

Post a Comment