Cara membuat Posting lama dan posting baru blogger menjadi judul artikel

♠ Posted by Unknown in Blogger at 07.37

Yang saya akan postingkan untuk kali ini adalah bagaimana caranya untuk mengubah Navigasi petunjuk posting lama ataupun posting baru digantikan tampilannya dengan judul dari artikel posting lama ataupun baru. Menu posting lama dan baru yang ada dibawah mnu komentar blogger atau yang biasanya disebut blog-pager, Untuk contohnya sendiri sudah saya terapkan pada template saya di blog biroelangiet.blogspot.com, untuk contohnya bisa dilihat jika membuka salah satu artikelnya, ataupun anda bisa melihan screenshotnya dibawah ini:

untuk cara membuatnya saya mempunyai dua Opsi :

1. Mengganti blogpagernya dihompage dan di artikelpage
2. Menggantinya hanya di artikel page nya saja, dihomepage tetap default(bawaan blogger).

Opsi Satu

Kita mulai dengan Pilihan yang pertama, mengganti Navigasi petunjuk posting lama ataupun posting baru dengan judul artikel dihompage maupun di artikelpage, silahkan masuk ke menu eit html nya.
1. Copy kode dibawah ini dan simpan diatas kode ]]></b:skin> :

#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}

Untuk width atau lebarnya sesuaikan dengan template anda.
2. Simpan script jquery ini dibawah kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://biroelangiet.googlecode.com/files/blogpager.js' type='text/javascript'/>

3. Simpan tempate

Opsi Dua

Berikutnya kita mulai untuk Pilihan Yang Kedua yaitu mengubah blogpagernya dengan nama judul artikel hanya jika berada di page artikel, jadi tampilan dihompage untuk blogpagernya default.
Cukup copykan kode dibawah ini dibawah kode </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://biroelangiet.googlecode.com/files/blogpager.js' type='text/javascript'/>
</b:if>

Simpan template 

Referensi: ardiyantobay.blogspot.com