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 (Primer)
- 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.
Perhatikan pada script jQuery ajax di atas — jika Anda memiliki versi 1.4.4 ke atas — pilih salah satu jQuery dengan versi yang lebih baru.
- Update (July 01, 2011) — Kemudian tambahkan script berikut di atas
</body>, disertai dengan conditional tags.<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
- Simpan template.
Menyembunyikan Link “Home”
Tambahkan CSS inline pada kode yang berwarna merah.
<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 style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Langkah Kedua (Sekunder)
Kostumisasi CSS blog-pager
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-newer-link,
#blog-pager-older-link {
width: 48%;
}
#blog-pager-newer-link {
text-align: left;
}
#blog-pager-older-link {
text-align: right;
}
Opsional: Anda dapat menambah CSS blog-pager dengan tag berikut:
#blog-pager-newer-link:before {
content:"\2190";
}
#blog-pager-older-link:after {
content:"\2192";
}
Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik ← (←) sebelum #blog-pager-newer-link dan karakter → (→) sesudah #blog-pager-older-link.
Langkah Ketiga (Tersier)
Peletakkan nextprev
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.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
Tambahkan conditional tag (warna hijau), seperti yang tampak pada kode di atas. Selanjutnya copas (copy & paste) kode tersebut tepat di atas kode berikut. Jangan lupa untuk mengganti conditional tag.
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
Simpan template & sekarang blog-pager Anda telah berpindah di atas komentar, jika pengguna mengunjungi halaman artikel/posting tertentu. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi pada kode CSS blog-pager.
Mengganti blog-pager dengan tag Paragraf
Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumisasi, seperti pada ulasan di bawah ini:
CSS untuk blog-pager.
#blog-pager {
text-align:left;
}
p.blog-pager-newer-link,
p.blog-pager-older-link {
margin:0;
}
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>
<a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Kode yang berwarna merah merupakan markup yang dicari & warna hijau merupakan markup yang telah diganti dengan tag paragraf (<p>).
Anda dapat juga melakukan kostumisasi navigasi nextprev dengan beberapa variasi lainnya. Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi nextprev di Optimasi-Blog.
Tips Cara Mudah Menghilangkan Navbar Blog Terbaru, – Mungkin anda berfikiran bahwa postingan ini adalah trik jadul, padahal tidak. Ini adalah cara menghilangkan navbar blog terbaru dengan metode terbaru dan juga legal.
atau yang diistilahkan dalam dunia blogger adalah "quickedit pencil" merupakan shortcut image yang disematkan dalam posting (umumnya di bawah posting)dan akan terlihat jika kamu telah login ke akun blogger kamu. Quickedit pencil berguna untuk mengedit postingan secara cepat dengan satu kali klik. Kadang-kadang ada saja dari para blogger yang kurang menikmati fasilitas tersebut karena alasan yang berbeda-beda, seperti ; merusak pemandangan, tidak biasa menggunakan, de-el-el. Nah, jika kamu mau, kamu bisa menghilangkan icon pensil tersebut. Caranya gampang dan cepat (itulah choki-choki), berikut "step"i wonder-nya :
kurang lebih sama pengertiannya dengan quickedit pencil, bedanya hanya dalam penggunaannya. quickedit pencil digunakan untuk edit posting, sedangkan icon obeng dan kunci (quickedit) digunakan untuk editing gadget atau widget dalam blog. Cara menghilangkan icon/image quickedit ini pun terbilang mudah, yakni menambahkan kode CSS di bawah ini dalam template blog kamu.
Bagi kamu yang perduli dengan validasi terhadap blog kamu, saya rasa cara ini pantas diterapkan di blog blogspot kamu, karena engine
atau Link Quick Edit gambar kunci pas link 
di blog Anda, walaupun Anda sedang dalam keadaan login.
