Cara Membuat Tombol Navigasi di Pojok Blog - Mungkin masih banyak yang belum memahami maksud dari Judul Posting kali ini, maksudnya adalah sebuah tombol navigasi yang berisi tombol Back to Top, Go to Bottom, Next Post / Next page, Previous Post / Previous Page, untuk link yang dituju di atur otomatis, dan jika ingin melihat langsung ( live demo ) silahkan lihat di kanan bawah blog ini ( jika masih tersedia ) atau bisa melihat screenshot berikut. 
Jika tertarik ingin mencoba, silahkan baca tutorial berikut, dan jika tidak tertarik mencoba, dapat berkeliling di blog biasa ini.
langkah yang harus dilakukan adalah ( saya sarankan backup dulu template sobat, untuk mengurangi resiko kesalahan ) :
1. Masuk ke Template - Edit HTML
2. Centang Expand Template Widget
3. Cari kode <body>, pastekan kode berikut di bawah kode <body>
langkah yang harus dilakukan adalah ( saya sarankan backup dulu template sobat, untuk mengurangi resiko kesalahan ) :
1. Masuk ke Template - Edit HTML
2. Centang Expand Template Widget
3. Cari kode <body>, pastekan kode berikut di bawah kode <body>
< a href='#top' style='display:scroll;position: fixed; bottom:45px;right:42px;' title='Ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqK82Vq3tKCQ6UHhNms4E3yJr_uVQmIGBEozD6t6CLeH5NOH9RRGzpcnkMRwqBFn-Pg4Y1ZI651heie3saQ5y858vRQLIY417igBPjeTVUvolaJHH21VtwahzzZO1EcwTFnQKzC0haLRc/s1600/up.png' width='43'/></a>
< a href='#footer' style='display:scroll;position: fixed; bottom:5px;right:42px;' title='Ke Bawah'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpe-11rLsA35gXL-3oiglAm7nEFrrGRFhKdfc5VYPgbW59wounU52bDZh89RLiUl-usPbXJEr5uurPfgyjtltPaykZzQgOFg29Nt2dLElFIOL-pRMXTs-_Oa-vdwZqoQkaeQtDXlZ2zw/s1600/down.png' width='43'/></a>
4. Cari kode berikut :
< 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>
5. Hapus dan Gantikan dengan kode berikut :
< b:if cond='data:newerPageUrl'>6. Terakhir, silahkan simpan template dan lihat hasilnya.
<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIYcrFZiNEOSzMFqPhxnMDuGcafo0S0akJ6uIM4ddHPv0rHDqfQZlPepF0mI3rGrfo8kwlPNq0LD_vRcLubowhAeHTAad7ud-YZ5mgb2td8qdUFo9Ly9bTiO6BO0vweHtPpZE5uSK13cI/s1600/left.png' width='43'/></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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCuetCZZm3BG645ygPIy1u2EQQThjC0SwiyvQfpHxaQBD7IkNmhSDLR9jjN52wvu90pHEoehZ5G9XYzN3XCkdTepW3RtXfKPe75Rmz4i1yllmHI7BaCauLWFBw28wNtHJFfKQwURxD0cU/s1600/right.png' width='43'/></a>
</span>
</b:if>
NB : gambar tombol bisa diganti sesuai dengan keinginan, cukup ganti tulisan yang berwarna merah, tetapi harus sesuai dengan arah navigasinya.
0 komentar:
Posting Komentar