Header adalah bagian yang paling penting untuk dipercantik, baik dengan
penggunaan gambar yang menarik, background yang proporsional dan tulisan
yang komunikatif sehingga pengunjung blog merasa dihargai pas ketika
berkunjung ke halaman blog. Pilihan lainnya adalah penggunaan flash, dan
digabung dengan javascript untuk memunculkan tampilan yang dinamis dan
keren.
Kali ini pilihannya adalah
memasang slide out navigation floating
pada header. Penggunaan slide ini direkomendasikan, karena selain
gunanya mempercantik header blog, kegunaan lainnya adalah untuk membuat
anchor link ke kontak online seperti Email, Facebook, Twitter, dan
Plurk. Jika berminat memasang Slide Out Navigation pada blog anda, ikuti
langkah-langkah berikut.
Langkah 1:
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
langkah 2
Copy dan paste kode di bawah pada content HTML/Javascript.
"><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:#E7F2F9;
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=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
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/AVvXsEgNYRbknqUbFwL-QaF-m16701cJhHxMhRF34cls__1yHwMCsuWVEFBU9N-La-w-bVPNbAKw_DgjCawzxYj6mZhCjsaLGq2TUNWp69blgrntyOhFFHroelP5VuqvQSbA-NKdb2otibjhA8E/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufvqMYJIodIwjSgifxJDcF6I2L6Eyv7j-Jzso6_OxVi2aXnixdjxkBmup-B1bcOBxaL98WKcRsfwXZ_iKsor7bd3AKJW_IbBSszQXun6adYizGJKW6uLNbtTPOjPTlrXJZsktnt8t4yk/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dQo0BPrycllit-rZigasL86HA6wX7931AoWhla5Adqr6OEieryBW6x0mpeEOVDRjNzTAnSwIxgW1E4_p27UBiaEKT-w5KHNP_ecGn-98yle9HHGLphLAoMOS1pZQ6-TYmUO9VHVAvpM/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRDx33cXTh401hKaq4BFpMrKFSWE_BBrhJPZZEMw_wnRCf16zFvWu3jGMrCiU9XNSz-yDWgOBpGmwCrw2xVkuf5FvdgdXsbFxcvPTrteR6oWa4yG-fJxqxXW3CMFa3Jy79IfqamVbKtIk/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKsiWy2u1tQch_h0bBraFaEClqVQqrlUItGXL-N1RTWO9iFJuAkwexeN6uTiFxJy2Rr3EX0HbX-M7AcRQEQXD7zj3llWijZ4HmcIP-qhfHEvpout9SaH0dWFa33vjE6aCNVJ-FZPnAUo/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://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li>
<li class="about-me"><a href="http://draft.blogger.com/profile/masukkan-ID-Blogger-disini"><span>My Profile</span></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>
</ul>
Tambahan:
1.Untuk mengubah warna background, silahkan edit kode background-color:#E7F2F9;
2. Untuk mengubah warna tulisan, silahkan edit kode color:#60ACD8;
3. Untuk memasukkan ID bagi akun Facebook, Twitter , RSS Feed, Profile dan E mail anda, silahkan edit kode yang di bold dengan warna merah.
Akhir sekali, klik Save. Selamat mencoba...ya sobat semoga sukses
sumber dari : http://wisencare.blogspot.com/2011/04/cara-membuat-slide-out-navigasi.html
Anda telah membaca artikel tentang Cara Membuat Slide Out Navigasi Floating Di Atas Header dan anda juga bisa menemukan artikel Cara Membuat Slide Out Navigasi Floating Di Atas Header ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/cara-membuat-slide-out-navigasi.html.Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Slide Out Navigasi Floating Di Atas Header ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.
