Sabtu, 04 Februari 2012

Cara Membuat Link Subcribe di blog pada navbar

Navbar adalah alat navigasi yang disediakan oleh blogger yang ada di sisi paling atas blog kita. Navbar bisa kita kreasikan sesuka hati kita , bisa diganti dengan Headline News , atau Link subscribe yang akan kita bahas saat ini. Sebenarnya trik kali ini tidak hanya bisa di isi dengan link subscribe saja tetapi bisa anda letakkan link yang anda kreasikan . Karena kali ini kita membahas Cara Membuat Link Subscribe Blog Di Navbar Blogger . Maka kita akan membuat tutorial ini saja , tetapi jika sobat ingin mengganti link subscribe ini dengan link yang lain , silahkan sobat ganti sesuka hati sobat.

Nah , apakah sobat berminat untuk memasangnya...? Ikuti langkah-langkah berikut ini.

Cara Membuat Link Subscribe Blog Di Navbar Blogger.
1.Login ke blogger dengan akun blogger sobat.
2.Masuk ke Rancangan .
3.Kemudian klik Edit Html.
4.Centang kotak Expand Template widget. Tetapi saya sarankan untuk mendownload template lengkap untuk mendapatkan back up dari template sobat. (Jaga-jaga kalau terjadi kesalahan).
5.Letakkan kode dibawah ini di atas kode <div id='outer-wrapper'> .


<div id='message_box'>
<div id='box_rss'><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmejkCUQPatYKjuhB0qkG0w-ptJbbe_1hO2SnkxE-sEoUYTqrhEpTMH2GIXkue4u88tSMuR60AKLKPIONHvikDI8jSUCUGiUkSMPNrO1fCttoekle1HEgtE9iF29WKEdfjAhm3afnqImD/s200/feed-c.png'/></div>
<span>
<img alt='Blogger Afif - Closed Nav' id='close_message' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurXao87DnjmbcUFbgYVGS2ppskl3DlOOG6rVPgrm5txPVv_7qdKBOYfNTMIpnnExpW43tBMAq2OlygqaTnSBtM70v_DgCgd-MQmfsS9TOlnvQ4D9oI-vGtIVajYZqZKRsv12xetMHWXQ/' style='float: right; cursor: pointer;'/>
<strong>Berlangganan artikel : </strong><a href='http://feedburner.google.com/fb/a/mailverify?uri=ShareNeighbor&amp;loc=en_US' rel='nofollow'>Update artikel Blog saya 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&#39;s scrool bar
    $(window).scroll(function()
    {
          $(&#39;#message_box&#39;).animate({top:$(window).scrollTop()+&quot;px&quot; },{queue: false, duration: 350}); 
    });
    //when the close button at right corner of the message box is clicked
    $(&#39;#close_message&#39;).click(function()
    {
          //the messagebox gets scrool down with top property and gets hidden with zero opacity
        $(&#39;#message_box&#39;).animate({ top:&quot;+=15px&quot;,opacity:0 }, &quot;slow&quot;);
    });
});
</script>
6.Perhatikan kode yang berwarna orange dan merah, ganti kode yang berwarna orange dengan id feedburner sobat,kemudian ganti kode yang berwarna merah dengan kalimat sobat sendiri.
7.Kemudian sobat cari kode (Ctrl+F)  ]]></b:skin> , kalau sudah ketemu masukkan kode css ini di atas kode
]]></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 }


8. Perhatikan kode-kode di atas .
 kode yang berwarna biru adalah warna background navbar nya silahkan anda ganti sesuka hati sobat .
 kode yang berwarna orange adalah warna teks link subscribe nya , silahkan di ganti sesuka hati sobat .
 kode yang berwarna hijau adalah warna teks setelah di klik , silahkan ganti dengan sesuka hati sobat.

9.Kalau sudah , save template sobat .
10.Selamat mencoba :D





  1. Membuat Halaman Web Dengan Mudah
  2. Membuat Graffiti Dengan Mudah
  3. Cara Mendapatkan Uang $ Dari Wazzub
  4. Membuat Judul (Header) Blog Anda Menggunakan XHead...
  5. Cara Merekam Aktivitas Desktop & Suara Menggunakan...

0 komentar:

Posting Komentar