Trick Widget Kaleng Social Media Tersembunyi Di Header

Sobat blogger yang lagi belajar seperti saya ini pastinya ingin supaya tampilan Blog menjadi Keren,,cantik dan Indah  (seperti cewek Idaman admin ...hehehehhehe).Salah satunya dengan menambah widget Social Media berbentuk kaleng yang tersembunyi di atas (header).

Trik ini saya dapat waktu saya browsing di Google dan tidak sengaja menemukan Trik ini di Blog Wisyulovers.Setelah saya lihat keren juga Widget yang satu ini.Selain itu banyak  blog lain belum pasang Widget ini sehingga sobat sangat beruntung kalau mencobanya karena blog sobat akan beda dengan yang lainya.

Untuk lebih jelas lagi siahkan sobat simak baik-baik sehingga nanti waktu mencobanya tidak gagal,Trik ini sangat mudah dan sederhana sekali soalnya tidak sampai edit Template cuma tambah widget saja.

1. Login ke Akun Blog
2. Dasbor ===>> Tata Letak ===>> Tambah Widget ===>> pilih Html/Javascript ===>> Copy Paste Kode di bawah
<!-- Widget - http://prastypunya.blogspot.com - Start -->

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 993px;
}
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:#000000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-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=40);
}
ul#navigation li a:hover{
background-color:#BDBDBD;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FFFFFF;
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://i1123.photobucket.com/albums/l546/wizyuloverz/RSS.png);
}
ul#navigation .facebook a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Twitter.png);
}
ul#navigation .g-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Google.png);
}
ul#navigation .y-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Yahoo.png);
}
ul#navigation .youtube a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/YouTube.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</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 target="_blank" href="http://prastypunya.blogspot.com/atom.xml"  rel="http://prastypunya.blogspot.com">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://www.facebook.com/prasty.ajaH">Facebook</a></li>
<li class="twitter"><a target="_blank"href="https://twitter.com/dhiaz_sakha">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href="https://www.google.com/bookmarks/">Google</a>
<li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>
<li class="youtube a"><a target="_blank" href="https://www.Youtube.com/">YouTube</a></li>
</li>
</li></ul>
<!-- Widget - http://prastypunya.blogspot.com - End-->

3. Simpan dan Lihat Hasilnya.

NB : * Warna Merah silahkan ganti dengan URL punya sobat
         * Warna Biru silahkan ganti dengan ID Facebook sobat
         * Warna Pink silahkan ganti dengan ID Twitter sobat
Selesai sudah saya posting "Tentang Cara Membuat Widget Social Media Tersembunyi di Atas header ".Semoga bermanfaat dan bisa menjadikan blog sobat kelihatan keren dan cantik.Sebelum CLOSE Blog ini alangkah senang hati admin kalau sobat meninggalkan JEJAK di Buku Tamu,,LIKE FP atau FOLLOW Blog ini,,Jika masih bingung dengan Trik di atas silahkan berkomentar di bawah.
T E R I M A K A S I H

sumber dari: Blog wizyulovers