Cara Membuat Widget Galon Sembunyi Diatas Header

Salam Sobat....

Memang Asik kalo Tampilan Blog kita Bagus, Indah, unik dan menarik pasti banyak yang suka iya khan...... nah kali ini GFT berbagi Cara Membuat Widget Galon Sembunyi Diatas Header disamping untuk memperindah juga Widget agar blog sobat tidak terlalu ribet karena terlalu banyak link yang tampil di halaman blog.

Okey kita langsung saja, silahkan sobat ikuti runtutan cara pemasangannya yang pastinya sobat sudah pada bisa akan tetapi tidak ada salahnya saya sertakan cara-caranya disini :

[ D E M O ]

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda

2. Pilih menu Tata Letak

3. Setelah itu pilih Tambahkan Gadget

4. Kemudian pilih Gaget HTML/JavaScript

5. Dan Copy dan kode di bawah ini :

<!-- Widget - http://gratisfulltain.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAlOccm765lgrBRyte91qE4W7pIIty-PBd2zvxApUE2usDe2ET2zlsFomPBvsyI7jRW_siaBoevp7VSH3sqAMpqWk-h-0_dqRVZ6bkKb8_PEeshb8pQp_l0J7MgbJ6A2lkDtjFBNay_c/s1600/RssFeed+%5BGratisFullTain%5D.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldgPOrWcKTD5do-C9WvGgHDPIs3VXeqHqSC9WU-EmPhvw-lQKhgJzC1PYt_-w1RTNPI9Zy_GVl6itCHeGpbnultPnu9JOMOc5IPC4-X8EfpQ_haYzQhneE-grlYJE6UDBaBMs35xvwug/s1600/facebook+%5BGratisFullTain%5D.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip30qvVSpw1jze0CbweN6meeu0N1ascxpGeuOylYSWfRb-q_3lw4iOPrlSBU71R4lgHFdv09l-uGEOYHuqAw_JZd3YvjDXJkhg4NAqg7x3LWBISYbDmbDBybmHYXbE-QH30nCjk_Aq740/s1600/Twitter+%5BGratisFullTain%5D.png);
}
ul#navigation .g-mail a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixwf4fN2G5utisDsIAHBJKgxcEfrMn-nLJ_AnbosQ7WdvOmx3ZlgrmcGmRveGhN8GgqaLt-i5Ug8F6d0ia0mId-ZbwfhTYahgaJgYNhl7VdusEAUD4gMb3fNss4eTlU5Cns89TywVVnNI/s1600/google+%5BGratisFullTain%5D.png);
}
ul#navigation .y-mail a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4TQHf1yH-E9MMMCLLmiT3EZ8zZO3Ed_KsbGWWNI1FNW8bSJHILAwLQMRolW1bXdxfhaQq0R6gPCwhjfsieA0QedyYW7gBj_exHNlP6MKR6xqFRtl-8Tc3jc-74Rmg_XeQK3VwbWicDRw/s1600/Yahoo+%5BGratisFullTain%5D.png);
}
ul#navigation .youtube a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixg9VvUXqea4rTP7nvT14jBXlOQuuuD9Uvbl7N56agHXTk9jnVA9UuI9iex-t-5pBTg8OHnWMsbo5HbfHlBKr2aqLypKQfEFbkfboY4uxFY2FctdgUwT5Rpj21Wy2XLN99EJLhNDzeZlk/s1600/YouTube+%5BGratisFullTain%5D.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" http://tutorial-service-lengkap.blogspot.com/feeds/posts/default">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://www.facebook.com/pages/Teknisi-Komputer-Handal/469924526397595?ref=hl">Facebook</a></li>
<li class="twitter"><a target="_blank"href="https://twitter.com/Mustain01">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://gratisfulltain.blogspot.com - End-->

6. Setelah sobat pastekan code tersebut selanjutnya Save/Simpan
7. Selesai
8. Silahkan Lihat Hasilnya dan berhasil

Keterangan:
Silahkan Sobat ganti link-link berikut dengan link sobat:
~ http://tutorial-service-lengkap.blogspot.com/feeds/posts/default
~ http://www.facebook.com/pages/Teknisi-Komputer-Handal/469924526397595?ref=hl
~ https://twitter.com/Mustain01
~ https://www.google.com/bookmarks/
~ https://www.Yahoo.com/bookmarks/
https://www.Youtube.com/

Gimana pasti okey khan hehe...
demikina Sobat semoga Pistingan berbagi Cara Membuat Widget Galon Sembunyi Diatas Header ini ada manfaat untuk sobat sekalian...