Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen
nextprev (
blog-pager) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru,
home,
& posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman
home & di bawah
form komentar pada halaman posting.
Berikut merupakan kode CSS (
Cascading Style Sheets) untuk
elemen nextprev.
#blog-pager-newer-link { float:left; } #blog-pager-older-link { float:right; } #blog-pager { text-align:center; }
Sedangkan markup HTML (
HyperText Markup Language) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Nah, sekarang bagaimana
cara merubah agar tampilan
posting lebih baru, home, & posting lama menjadi judul posting? Silakan Anda simak tutorial berikut yang bersumber pada postingan di blog
ETBlue.
Langkah Pertama
- Login ke akun blogspot Anda.
- Pilih Rancangan → Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.
- Masukkan script berikut di atas
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Tips : Kalau susah mencarinya, coba tekan tombol F3 atau Ctrl + F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.- Opsional: Anda dapat menambah CSS
blog-pager dengan tag berikut:
#blog-pager-newer-link:before { content:"\00ab"; } #blog-pager-older-link:after { content:"\00bb"; }
Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik « («) sebelum #blog-pager-newer-link dan karakter » (») sesudah #blog-pager-older-link
Simpan template.Pilih Rancangan → Elemen Laman → Tambah gadget (“HTML/Javascript”).Masukkan jquery seperti di bawah ini:
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
});
</script>
- Update (July 01, 2011) jquery di atas dapat juga Anda letakkan di atas
</body>, melalui “Edit HTML”. - Simpan template.
- Lihat Blog Anda.
Langkah Kedua
Apabila Anda telah melakukan “Langkah Pertama”, maka navigasi
nextprev (
blog-pager) hanya akan menampilkan
link “
Home” pada halaman utama, pencarian (halaman pertama),
& klik label (halaman pertama). Sebagai alternatif pilihan, mungkin Anda tidak menampilkan navigasi
nextprev pada halaman-halaman tersebut. Caranya adalah dengan menambahkan
kode optimasi tampilan widget dalam “Edit HTML”, seperti berikut:
<!-- navigation --> <b:if cond='data:mobile'> <b:include name='mobile-nextprev'/> <b:else/> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> <b:else/> </b:if> <b:else/> </b:if><!-- feed links --> <b:include name='feedLinks'/> </b:if>
Kode yang berwarna merah merupakan penambahan kode yang dimaksud.
Ketika menampilkan judul posting yang panjang, maka tampilan navigasi
nextprev akan berantakan. Bagaimana cara memperbaikinya? Hal itu telah diulas dalam update 19 Pebruari 2010 di blog
ETBlue, yakni dengan menmbahkan beberapa atribut dalam CSS
blog-pager.
#blog-pager { font-size:…em; } #blog-pager-older-link, #blog-pager-newer-link { width:…px; line-height:…em; height:…em; overflow:hidden; }
Silakan isi dot…dot…dot dengan nilai (angka) yang sesuai dengan struktur blog Anda
Menghilangkan Link “Home”
Hapus kode yang berwarna merah pada mode “Edit HTML”.
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Opsional: Ditindak-lanjuti mengganti CSS
blog-pager.
#blog-pager-newer-link { float:left; } #blog-pager-older-link { float:right; } #blog-pager { text-align:center; }
Ganti semua CSS di atas dengan kode di bawah ini.
.blog-pager-newer-link { margin-right:1.5em; } .blog-pager-older-link { margin-left:1.5em; }
Catatan
Khusus untuk “Langkah Kedua”, Anda dapat menerapkannya atau tidak sama sekali. Jika Anda melakukan “Langkah Kedua”—dari beberapa alternatif tersebut—maka Anda dapat menerapkan seluruhnya, sebagian (kombinasi), atau salah satu saja. Mungkin Anda dapat juga melakukan kostumisasi navigasi
nextprev dengan beberapa variasi lainnya.
Update
Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumasi, seperti pada ulasan di bawah ini:
CSS untuk
blog-pager.
.blog-pager-newer-link { margin:0; } .blog-pager-older-link { margin:0; } #blog-pager { font-size:…em; text-align:left; margin:0; padding:0; }
Silakan diganti nilai untuk
… & margin maupun padding, sesuai dengan template blog Anda.
HTML untuk
blog-pager.
<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <p class='blog-pager-newer-link'>Posting terbaru: <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </p> </b:if> <b:if cond='data:olderPageUrl'> <p class='blog-pager-older-link'>Posting lama: <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </p></b:if>
Kode yang berwarna merah merupakan
markup yang dicari
& warna hijau merupakan
markup yang telah diganti dengan tag paragraf (
<p>).
Dimana posisi yang baik untuk meletakkan
blog-pager? Kembali kepada selera masing-masing. Sedangkan menurut saya sendiri, peletakkan
nextprev sebaiknya seperti
default-nya atau di bawah posting. Kode HTML yang perlu Anda cari adalah sebagai berikut
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/><b:else/>
</b:if>
<b:else/>
</b:if>
Kode berwarna merah merupakan markup yang dicari
& jika Anda belum menambahkan kode yang menyertainya, silakan ditambah dulu sama dengan seperti tampilan kode di atas. Selanjutnya pindahkan (
cut) kode tersebut tepat di atas kode berikut ini.
<b:if cond='data:blog.pageType == "static_page"'><b:include data='post' name='comments'/></b:if><b:if cond='data:blog.pageType == "item"'><b:include data='post' name='comments'/></b:if>
Simpan template
& sekarang
blog-pager Anda telah berpindah di bawah posting. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi pada kode
CSS blog-pager.
Mohon maaf, posting ini tidak disertai dengan gambar. Untuk Demo Bisa Lihat Blog
http://optimasi-blog.blogspot.com