Tipsberonline: Membuat Link Subscribe Blog di Navbar Blogger

Navbar merupakan bagian paling atas dari blogger. Navbar blogger bisa kita modifikasi sendiri, dan kita bentuk sekehendak kita. Pada posting kali ini, kita akan belajar bagaimana membuat link subscibe blog di navbar blogger dengan javascript.

Dengan navbar buatan sendiri, kita bisa mengisinya dengan menu ataupun tulisan-tulisan dan link yang inginkan. Bloggerafif sendiri pernah membuat navbar blogger ini untuk menaruh link feedburner. Untuk lebih jelasnya silahkan anda baca berikut ini :

1. Login ke dashboard blogger, dan masuk ke design, dan edit html
2. Letakkan kode dibawah ini sebelum <div id='outer-wrapper'>

<div id='message_box'>
<div id='box_rss'><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpPI5SLmK-vd8QfxallylsRlYBljx_jrTp8ufQsdAALp-DH9bDpkyeZD41KqyHmuuxyO_difYBZZN2AMlBUlUG8_7XemqdC9xV26hRsPqPcy4yxgXGp7VpNrVVG6jMju-e2w4Coi_8xSV/s200/feed-c.png'/></div>
<span>
<img alt='Blogger Afif - Closed Nav' id='close_message' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fPaeSc0gTDYC2ljDP9gEqppkQNHhN-lAbQZjvGHkz10tskMFJB5ytCUoRRUYPB6iDbsbHEJH90nN_Yj21YLuFNWbvNhBtSK4rBk_rnxtHhbL04RmHIauV04infBpFnZ7TWB0tYkSBbw/' style='float: right; cursor: pointer;'/>
<strong>Berlangganan artikel : </strong><a href='http://feedburner.google.com/fb/a/mailverify?uri=bloggerafif&loc=en_US' rel='nofollow'>Update artikel Bloggerafif via feed</a></span>
</div>

<script type='text/javascript'>
// Developed by Roshan Bhattarai
// Visit roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use

$(document).ready(function()
{
    //scroll the message box to the top offset of browser's scrool bar
    $(window).scroll(function()
    {
        $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
    });
    //when the close button at right corner of the message box is clicked
    $('#close_message').click(function()
    {
        //the messagebox gets scrool down with top property and gets hidden with zero opacity
        $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
    });
});

</script>

3. Tambahkan kode CSS berikut sebelum ]]></b:skin>

#message_box { position: absolute; top: 0; left: 0; z-index: 10; background: #ECEEF5; padding:5px; text-align:center; font-weight:bold; font-size: 12px; width:99%; color: #3B5998; }
#box_rss {padding-top: 15px; display: inline;}
#message_box a:hover {text-decoration: underline; }
#message_box a:visited {color:#C54E0B }

4. Yang terakhir simpan template anda.

Kelebihan membuat navbar blogger seperti ini adalah bahwa navar ini akan selalu bergerak mengikti jendela browser anda, artinya tidak statis berhenti diatas terus. Ketika Browser anda geser kebawah, maka navbar ini akan mengikuti kebawah. Jika pengunjung merasa terganggu, terdapat fasilitas untuk menutup navbar ini, dengan melakukan klik pada icon silang di sebelah kanan navar.