Cara Mengganti Tombol Next Prev Dengan Judul Postingan | Tutorial Lengkap

Cara Mengganti Tombol Next Prev Dengan Judul Postingan

Zona Internetku September 23, 2018

Cara Mengganti Tombol Next Prev Dengan Judul Postingan

Cara Mengganti Tombol Next Prev Dengan Judul Postingan Untuk Blogger. Tombol navigasi next & previous pada blog adalah sebuah sajian navigasi blog yang secara default berada pada bawah postingan buat memberitahu pengunjung agar sanggup memilih antara postingan sebelumnya

Dan kali ini kita akan mencoba untuk memodifikasi tombol navigasi blog tersebut supaya menjadi lebih keren dan juga responsive, supaya menambah nilai user friendly maka kita akan memodifikasinya dengan cara memberikan keterangan judul pada menu Next Post dan Previous Post.

Cara Untuk Menambahkan Tombol Older And Newer Post Menjadi Next And Previous Yang Keren Di Tambah Judul Postingan Untuk Blogger

1. Masuk ke dalam blog kalian terlebih dahulu

2. Kedua, pilih menu "Tema" dan klik "Edit HTML"

3. Selanjutnya kalian cari kode </head>

4. Lalu kalian letakkan kode berikut ini di atas kode tadi

			<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .halaman{padding:5px 0;background:#fff;border-top:1px solid #ccc;margin:10px 0 0} .halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;} .halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out} .halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;} .halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;} .halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none} .halaman-kiri a,.halaman-kanan a{color:#48d;} .pager-title-left,.pager-title-right{font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999} .isihalaman-kiri{margin:0} .isihalaman-kanan{margin:1px 10px 10px} #blog-pager {padding:5px 0;margin:5px 0} #blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300} #blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300} </style> </b:if>

5. Setelah itu cari kode <data:post.body/> dan letakkan script berikut ini di bawah kode tersebut

Perhatian :

Setiap bawaan template memiliki jumlah kode <data:post.body/> yang berbeda, jadi intinya kalian hanya perlu mencobanya untuk meletakkan kode Next & Prev ini di bawah postingan blog kalian

			<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='halaman'>   <div class='blog-pager' id='blog-pager'> <div class='halaman-kiri'> <div class='isihalaman-kiri'>     <b:if cond='data:newerPageUrl'>       <span id='blog-pager-newer-link'>         <span class='pager-title-left'>Previous</span><br/>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>       </span> <b:else/>       <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/> You are reading the newest post     </b:if> </div> </div> <div class='halaman-kanan'> <div class='isihalaman-kanan'>     <b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>         <span class='pager-title-left'>Next</span><br/>       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>       </span> <b:else/> <span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/> You are reading the latest post     </b:if> </div> </div>   </div> <div style='clear: both;'/> </div> <script type='text/javascript'> //Pager $(document).ready(function(){ var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;); $(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() { var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text(); $(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt }); var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;); $(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() { var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text(); $(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle); }); }); </script> </b:if>

6. Kemudian kalian klik "Simpan Tema" untuk menyimpan perubahan tersebut

Untuk melihat hasilnya, silahkan kalian lihat salah satu artikel yang ada di blog kalian

Baca juga :

Cara Membuat Widget Recent Comments Di Blog

Cara Menambahkan Widget Random Post Di Blog

Cara Membuat Featured Post Di Homepage Blog

Kenapa Gan, Ada yang error ya? Navigasi judul yang ada di Next And Previous Menjadi ganda (banyak)?

Untuk menangani masalah di tersebut memang sangat wajar untuk template bawaan blogger, namun saya akan menunjukkan cara memperbaiki error tersebut seperti cara di bawah ini

+ Cari kode <b:includable id='nextprev'> jika sudah ketemu kira kira hasilnya akan seperti ini

			<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> Ada banyak kode disini </div> </b:includable>

+ Sekarang ganti kode <b:includable id='nextprev'> menjadi seperti kode berikut ini

			    <b:includable id='nextprev'> <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>

+ Dan ganti kode penutup </b:includable> pada <b:includable id='nextprev'> menjadi seperti ini

			</b:if>   <div class='clear'/> </b:includable>

Jika perintah di atas sudah dilakukan maka menu navigasi Next dan Previous tidak akan mengalami error lagi, jika masih mengalami error pada menu navigasi tersebut silahkan untuk memberitahukan saya melalui komentar di bawah artikel ini, semoga dengan demikian saya bisa membantu kalian untuk menangani masalah tersebut

Baca juga :

Tutorial Menambahkan Widget Blog Recent Post By Label

Cara Menambahkan Widget Latest Post Di Blog Itu tadi Cara Mengganti Tombol Next Prev Dengan Judul Postingan Untuk Blogger yang dapat saya bagikan, sekian tutorial dari saya dan semoga berhasil.

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android | Tutorial Lengkap

Gambar
4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android. Mungkin sebagian besar orang membutuhkan informasi yang terbaru dan aktual mengenai pergerakan mata uang dunia baik itu dollar ataupun rupiah. Zona Internetku August 20, 2019 Hal yang mendorong seorang buat terus memantau perkembangan mata uang tersebut umumnya disebabkan sang alasan tersendiri misalnya urusan berbisnis ekspor/impor barang ke mancanegara, berpergian (travelling), trading forex dan pula usaha lainnya. Untuk memantau terus pergerakan nilai tukar mata uang global contohnya dolar Amerika Serikat, Singapura, Taiwan Deretan Aplikasi Terekomendasi Untuk Memantau Pergerakan Nilai Tukar Mata Uang Lokal Dan Asing (Internasional) Di Android 1. BI Mobile Pertama ada aplikasi BI Mobile yang diluncurkan dengan resmi dari Bank Sentral Republik Indonesia, melalui aplikasi kamu bisa melihat semua informasi mengenai keuangan seperti nilai tukar ru...
Baca selengkapnya

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya