Postingan kita kali ini akan membahas tentang cara membuat blog pager di blogspot berada di bawah dan di atas postingan kita, apa itu blog pager. . . . . .?? Mungkin ada sebagian yang belum mengerti blog pager ( saya juga waktu itu belum ngerti ) . . . Blog pager itu biasanya terletak di bawah kotak komentar biasa nya dalam bahasa inggris Older Post dan Newer Post dan kalau untuk bahasa indonesia biasanya Posting Lama dan Posting Baru
Nah itulah namanya Blog Pager dan sekarang kita akan memodifikasi Blog Pager Tersebut
Dengan penambahan kode css maka jadi lah Blog Pager yang keren dan Enak di liat
Tutorial ini sebelumnya sudah di Publikasikan Oleh blog Hompimpaalaihum Gambreng saya juga dapat dari sana Trik nya, namun trik yang dari Blog Hompimpa Blog pager nya bergaya Fixed atau mengikuti scroll kemanapun anda scroll, Nah untuk yang saya posting kali ini blog pager nya akan di simpan di bawah postingan atau di atas postingan,
Mari kita mulai Coding nya
- Baca: Cara masuk ke dalam template
- Centang Expand Template Widget
- Cari kode
]]></b:skin> - Simpan kode di bawah ini di Atas kode
]]></b:skin>
#hompager{
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;} Setelah itu Cari kode
<div class='post-footer'> setelah ketemu Simpan kode di bawah ini di atas kode <div class='post-footer'><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'><div 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'><div class='ikon-kiri'/></a> </b:if> </div> </div>
jika sudah silahkan simpan template anda dan lihat hasilnya.
Nah kode di atas blog pager nya akan berada di bawah postingan anda, jika anda ingin blog pager nya di atas postingan atau bisa di bilang di bawah judul postingan maka simpan kode di bawah ini di bawah kode
<div class='post-header-line-1'/><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'><div 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'><div class='ikon-kiri'/></a> </b:if> </div> </div>
kalau sudah silahkan simpan template anda.
1. Blog pager di atas postingan
2. Blog pager di bawah postingan
Blog Pager di bawah postingan, Alhamdulilah selesai juga postingan panjang ini, semoga bermanfaat ya teman. Wassalamualaikum . . . . . .
