Navigasi Halaman Blog Yang Melayang

Kali ini kita akan memberikan fasilitas lagi untuk Blog kita,seperti gambar diatas tentunya kalian sudah tahu apa yang dimaksud dengan judul yang saya berikan di postingan ini yaitu Navigasi Halaman Blog Yang Melayang. Sebenarnya disini saya memiliki dua model dalam membuat Navigasi Halaman Blog Yang Melayang yaitu :

1. Posisi Navigasi Halaman Blog Yang Melayang Di Atas,dan
2. Posisi Navigasi Halaman Blog Yang Melayang Di Bawah.

Sebelum saya banyak bicara sebaiknya kita langsung saja ke proses pembuatannya..hehehe..

Cara Membuat Navigasi Halaman Blog Yang Melayang :

Cara Pertama <--- (Posisi Navigasi Halaman Yang Melayang Di Atas).

• Login ke Blogger dan masuk ke Blog kalian.
• Klik Design yang berada di Navbar
• Pilih menu Template yang berada disebelah kiri.
• Lalu klik Edit HTML.
• Berikutnya klik Proceed untuk mengedit template.
• Dan beri centang pada tulisan Expand Widget Templates.
• Cari kode ]]></b:skin> atau </style>:
• Letakan kode CSS dibawah ini diatasnya.   

#hompager{position:fixed;z-index:1000;top:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-bottom:2px solid #999;text-align:left;box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;-webkit-box-shadow:0 0 7px #000;}
a .ikon-beranda{background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);}
div.float-right{float:right;width:100px;margin-right:13px;}
div.float-right div{float:right;margin-right:2px;}
a .ikon-kiri{background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-kanan{background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-beranda:hover,a .ikon-kiri:hover,a .ikon-kanan:hover{opacity:1;filter:alpha(opacity=100);}
#blog-pager{display:none !important;}
 

• Selanjutnya cari kode <a expr:name='data:post.id'/>
• Letakan kode dibawah ini diatasnya.

<div class='hompager' id='hompager'>
<a expr:href='data:blog.homepageUrl'><div class='ikon-beranda'/></a>
<div class='float-right'>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Berikutnya'><div class='ikon-kanan'/></a>
</b:if>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Sebelumnya'><div class='ikon-kiri'/></a>
</b:if>
</div>
</div>

• Simpan / Save Template. 

Cara Kedua <--- (Posisi Navigasi Halaman Blog Yang Melayang Di Bawah).

• Login ke Blogger dan masuk ke Blog kalian.
• Klik Design yang berada di Navbar
• Pilih menu Template yang berada disebelah kiri.
• Lalu klik Edit HTML.
• Berikutnya klik Proceed untuk mengedit template.
• Dan beri centang pada tulisan Expand Widget Templates.
• Cari kode ]]></b:skin> atau </style>:
• Letakan kode CSS dibawah ini diatasnya.

#hompager{position:fixed;z-index:1000;bottom:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-top:2px solid #999;text-align:left;box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;-webkit-box-shadow:0 0 7px #000;}
a .ikon-beranda{background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);}
div.float-right{float:right;width:100px;margin-right:13px;}
div.float-right div{float:right;margin-right:2px;}
a .ikon-kiri{background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-kanan{background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-beranda:hover,a .ikon-kiri:hover,a .ikon-kanan:hover{opacity:1;filter:alpha(opacity=100);}
#blog-pager{display:none !important;}

• Selanjutnya cari kode <a expr:name='data:post.id'/>
• Letakan kode dibawah ini diatasnya.

<div class='hompager' id='hompager'>
<a expr:href='data:blog.homepageUrl'><div class='ikon-beranda'/></a>
<div class='float-right'>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Berikutnya'><div class='ikon-kanan'/></a>
</b:if>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Sebelumnya'><div class='ikon-kiri'/></a>
</b:if>
</div>
</div>

• Simpan / Save Template. 
• Selesai.

INFO : Kemungkinan besar kode <a expr:name='data:post.id'/> dibeberapa Blog memiliki dua buah kode,apabila script yang kita pasang ini tidak bekerja silahkan letakan kembali di atas kode berikutnya.

SARAN : Sebelum kita  menyimpan atau save template sebaiknya kita unggah / download terlebih dahulu templatenya dengan cara klik Backup / Restore. Kemudian klik preview terlebih dahulu sebelum menyimpan.

Selamat Mencoba