Nah kali ni saya akan memberi tahukan Cara Membuat Widget Kaleng Tersembunyi Di Atas Blog (Header). Anda bisa melihat'y langsung diatas,, atau pada gambar dibawah ini.
Kalau Begitu langsung simak saja cara'y:
1. Login ke akun Blog Anda
2. Pilih menu Rancangan dan pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :
<!-- Widget Start
-->
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 665px;
}
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://ferryxzyamato.blogspot.com/atom.xml"
rel="http://ferryxzyamato.blogspot.com">RSS
Feed</a></li>
<li
class="facebook"><a
target="_blank"href="http://www.facebook.com/Ferryxz">Facebook</a></li>
<li
class="twitter"><a target="_blank"href="https://twitter.com/#!/FerryxzRixz">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 End -->
6. Setelah slesai mengCoPas kode diatas, anda bisa mengganti tulisan yang berwarna tersebut:
_. Merah : alamat URL blog anda
_. Orange : untuk mengatur posisi widget pada blog
_. Kuning : alamat ID Facebook anda
_. Biru : alamat ID Twitter anda
7. Dan terakhir Save, kemudian lihat hasil'y.