Cara Membuat Navigasi Share Menu diatas Header

Seperti postingan saya sebelumnya, tentang Cara membuat Navigasi Menu Share di sisi kanan maka sekarang saya akan mencoba berbagi lagi dengan kawan yaitu Cara Membuat Navigasi Share Menu di atas Header :z
Untuk Demonya kawan bisa lihat disini 
Bagaimana ingin tahu cara membuatnya :r
Caranya sebagai berikut :

  1. Masuk Account Blogger dengan ID kawan
  2. Pada Design / Perancang Template pilih Tambah Gadget  
  3. Copas Kode berikut kedalamnya
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #FFF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#699ab8;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FF0;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation .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() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a href="http://info-blogbego.blogspot.com/atom.xml" target="_blank"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"><span>My Twitter</span></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"><span>My Profile</span></a></li>
<li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"><span>My E-Mail</span></a>
</li></ul>
  • Ganti Link atau URL saya dengan Link kawan 
  • Masalah warna silahkan kawan menggantinya sesuai keinginan
  • Simpan Template kawan dan lihat hasilnya

Description: Cara Membuat Navigasi Share Menu diatas Header - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Cara Membuat Navigasi Share Menu diatas Header


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

Artikel Menarik Lainnya :


Comments
2 Comments

2 komentar pada : “Cara Membuat Navigasi Share Menu diatas Header”


KOMENTAR MENCERMINKAN KEPRIBADIAN KAWAN BLOGGER
EKSPRESIKAN KOMENTAR DENGAN EMOTICON :

:a :b :c :d :e :f :g :h :i :j :k :l :m
:n :o :p :q :r :s :t :u :v :w :x :y :z