Metode pembuatan blog pager/navigasi halaman melayang ini pada dasarnya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang bisa kamu ambil, yaitu posisi melayang di atas atau di bawah jendela.
Pertama-tama masuklah ke halaman editor HTML templatemu, lalu cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Letakkan salah satu kode CSS ini di atas kode
]]></b:skin> atau </style>:Navigasi Melayang di Sebelah Atas
/*
Copyright Agustus 2012 :: Mafia Hacker
(http://MafiaSitez.blogspot.com)
*/
#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;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;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);}
.float-right {float:right;width:100px;margin-right:13px;}
.float-right span {display:block;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;} /* menghilangkan blog pager bawaan dari template */
Navigasi Melayang di Sebelah Bawah
/*
Copyright Agustus 2012 :: Mafia Hacker
(http://MafiaSitez.blogspot.com)
*/
#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;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;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);}
.float-right {float:right;width:100px;margin-right:13px;}
.float-right span {display:block;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;} /* menghilangkan blog pager bawaan dari template */
Setelah itu temukan kode ini:
<a expr:name='data:post.id'/> Tip: Tekan CTRL + F lalu ketik expr:name='data:post.id' untuk mempermudah pencarian.
Letakkan kode ini di atasnya:
<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 + "_blog-pager-older-link"' title='Halaman Berikutnya'><span class='ikon-kanan'/></a>
</b:if>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Halaman Sebelumnya'><span class='ikon-kiri'/></a>
</b:if>
</div>
</div>
Klik Pratinjau untuk melihat hasilnya.
Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode
#Note Jika Anda Mau Merubah Warnanya Agar tidak hitam ( Transparant ) Ganti Kode Berwarna Merah Tebal dengan transparent
<a expr:name='data:post.id'/>. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode <a expr:name='data:post.id'/> yang kamu temukan berikutnya.#Note Jika Anda Mau Merubah Warnanya Agar tidak hitam ( Transparant ) Ganti Kode Berwarna Merah Tebal dengan transparent
Terakhir tinggal klik Simpan Template.
Ditulis Oleh : Yandi Mulyadi ~ Semua Artikel Menarik Ada Disini
Sobat sedang membaca artikel tentang Membuat Breadcrumb Halaman Blogspot Melayang. Yang diketik tangan Oleh Admin Yandi Mulyadi, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya ya?
Artikel tersebut bisa Anda akses via mobile, klik disini.
Related Posts :
Posting Komentar
Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
✗ Jangan berkomentar yang mengandung SARA atau hal yang NEGATIF lainnya !!
✗ Jangan sampai komentarmu masuk ke dalam SPAM !!
✗ Berkomentarlah yang Masuk di Akal
✗ Usahakan Jangan Menggunakan Kata Kasar
✗ Tolong Jangan Membuat Link Porno dan Sebagainya
(◕‿-) TERIMA KASIH SUDAH BERKUNJUNG (-‿◕)