Untuk membuat tampilan blog lebih lengkap dan dinamis, terkadang seorang blogging harus
Berupaya bagaimana tampilan halaman blognya terlihat rapi juga lengkap di lihat pengunjung
Seperti pada kesempatan kali ini saya akan berbagi tutorial seperti pada judul, artikel di atas
Sebelumnya sudah saya share tentang,
Membuat Random Posts Style Polos, pada postingan
Yang saya bagikan kali juga sedikit akan merubah, pada next dan prev pada blogger dimana
Dengan tampilan default nya hanya biasa saja maka dengan widget ini akan sedikit di rubah
 |
| Merubah Next Prev Blog Dengan Judul Artikel |
Buka halaman berikut untuk melihat demonya : DEMO Pungsi next prev ini kebanyakan terdapat pada bagian paling bawah postingan blog kita
Dimana pungsi tersebut untuk memudahkan pengunjung untuk melihat artikel sesudahnya
Dan juga artikel sebelumnya dan untuk lebih memudahkan visitor next prev tersebut, akan di
Rubah menjadi teks link dengan judul artikel buat sobat yang berminat simak di bawah ini
Cara memasangnya :
Pertama anda masuk account blog anda lalu sign in, terus pilih dasboard lalu pilih templateKemudian pilih edite template, selanjutnya cari kode </head> atau jika template blog andaMemakai kode </style>, copy kode, di bawah ini dan pastekan tepat diatas kode, </head>Atau paste kode di bawah, tepat di atas kode, </style>, pada element, template blog anda<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'type='text/javascript'/>
Jika di blog anda sudah terdapat code jquery jangan di pasang code diatas
Atau hapus code jquery yang di template dengan yang ini, versi terbarunya
Tambahan code :
Masih di edit Html jika anda ingin mengganti icon Home di bawah postingan
Cari code
<data:homeMsg/> code tersebut ada 2, pilih yang terdapat pada
Bagian pungsi next - prev atau pada bagian code
<data:newerPageTitle/>Atau code
<data:olderPageTitle/>, code
<data:homeMsg/> ini yang di ganti
Dengan script Url icon Home pada bagian template blog kesayangan anda
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMjgIP8YMndK_-BpWOrznbkVWR7MOQSJIvk4VJVBKzoE3kumT6_Q7Q5rTNMnykDPau_KUeoTugK7uVcyzWq8RbB2z42ycwofMjjuzvwRxeFxwlCmwOZWy6KaIlIdZgZaMYyh6i9Lvs_xll/s1600/Home+Karrysta.jpg' title='Halaman Beranda'/>
Setelah memasang kode diatas, dengan benar kemudian save template, dan selanjutnya<script type="text/javascript">
$(document).ready(function(){
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
});
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:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
});
</script>
Save - simpan widget dan lihat hasilnyaKode javascript diatas bisa di pasang pada widet lain yang sudah ada atau dengan cara
Buat add widget baru, bisa di mana saja penempata nya, tapi lebih tepat di bawah foter
Jika membuat add widget baru jangan lupa hapus kode, dibawah ini untuk menghilangkan
Error Html 5, pada template anda, cari kode nya di bawah ini, kemudian hapus, kode nya
Kode tersebut, terdapat pada template anda, cari kodenya di bagian, edite template blog
<b:include name='quickedit'/>
Kesimpulan :
Scripts diatas jika diterapkan sesuai dengan petunjuk tutorial ini maka next prev yang terdapat
Pada bagian paling bawah postingan blog anda. Maka akan berubah menjadi link judul artikel
Sekian artikel saya pada kali ini, semoga bisa bermanfaat buat sobat semua "Happy blogging"