search

iklan

›

✔ Cara Mengganti Tombol Next Dan Previous Dengan Judul Postingan Artikel

By Rabu, 15 Agustus 2018 Add Comment Edit
cara ganti navigasi next dan prev dengan judul ✔ Cara Mengganti tombol Next dan Previous Dengan Judul Postingan Artikel

Untuk mengganti navigasi next dan previous dengan judul postingan artikel blog yang perlu teman-teman lakukan hanyalah mengedit pada arahan template yang anda gunakan dengan menambah dan mengganti arahan yang akan saya bagikan di bawah ini.

Jika sebelumnya secara default tombol navigasi pada halaman postingan hanya bertulisan Next atau previous atau Newer dan Older saja. Dengan mengganti tombol next dan previous dengan judul postingan akan menciptakan navigasi terlihat menjadi lebih baik.

Selain alasan di atas, tombol Next dan Previous yang kita rubah dengan judul postingan artikel akan menciptakan pengunjung lebih lebih banyak didominasi untuk mengunjungi halaman selanjutnya atau sebelumnya alasannya yaitu melihat judul postingan pada tombol navigasi newer atau older.

Cara Mengganti Navigasi Next dan Previous dengan Judul Postingan


1. Sebelum melangkah ke tahap lebih lanjut pastikan blog teman-teman sudah memasang library jQuery. Untuk mengetahuinya silahkan cari arahan di bawah ini di dalam sajian edit HTML.
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Kalau template yang anda gunakan tidak ada arahan tersebut silahkan tambahkan arahan di bawah ini sehabis arahan <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

2. Selanjutnya mulai ke tahap mengganti tombol navigasi next dan previous dengan mencari arahan <b:includable id='nav-post'> dan ganti semua isinya dengan arahan di bawah.
<b:includable id='nav-post'>   
   <b:if cond='data:view.isPost'>
 
     <div class='blog-pager' id='blog-pager'>
 
       <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'>Newer</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'>Older</a>
 
         </span>
 
       </b:if>
 
       <a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
 
       <b:if cond='data:mobileLinkUrl'>
 
         <div class='blog-mobile-link'>
 
           <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
 
         </div>
 
       </b:if>
 
     </div>
 
     <div class='clear'/>
 
   </b:if>
 
 </b:includable>

3. Namun kalau arahan <b:includable id='nav-post'> tidak ada silahkan cari arahan <b:includable id='postPagination'> kemudian ganti semua isinya dengan arahan di bawah ini. Perlu di ingat, cara pada tahap nomor 3 ini di lakukan kalau tidak ada arahan <b:includable id='nav-post'> pada tahap nomor 2, namun kalau sudah ada silahkan pribadi lanjut ke langkah nomor 4.

<b:includable id='postPagination'>  
   <b:if cond='data:view.isPost'>
 
     <div class='blog-pager' id='blog-pager'>
 
       <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'>Newer</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'>Older</a>
 
         </span>
 
       </b:if>
 
       <a class='home-link' expr:href='data:blog.homepageUrl'> Home</a>
 
       <b:if cond='data:mobileLinkUrl'>
 
         <div class='blog-mobile-link'>
 
           <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
 
         </div>
 
       </b:if>
 
     </div>
 
     <div class='clear'/>
 
   </b:if>
 
 </b:includable>

Selanjutnya cari kode
<b:includable id='postFooter' var='post'>

Jika terdpat lebih dari 1 kode, Pilihlah arahan yang berada di dalam widget Blog1, Kemudian tambahkan arahan di bawah di dalamnya
<b:include cond='data:view.isPost' name='postPagination'/>

Sehingga hasil balasannya akan nampak ibarat di bawah ini.
<b:includable id='postFooter' var='post'> 
   <div class='post-bottom'>
 
     <div class='post-footer float-container'>
 
       <b:include name='footerBylines'/>
 
       <b:include cond='data:view.isPost' name='postPagination'/>
 
       <b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>
 
     </div>
 
     <b:if cond='data:view.isSingleItem'>
 
         <b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true }' name='maybeAddShareButtons'/>
 
     <b:else/>
 
       <b:include data='post' name='postFooterJumpLink'/>
 
     </b:if>
 
   </div>
 
 </b:includable>

4. Agar tampilan navigasi next previous dengan judul postingan artikel semakin menarik, tambahkan css berikut di atas arahan </head>
<b:if cond='data:view.isPost'> 
 <style>
 
   /* Navigasi Blogger dengan Judul by masigun.com */
 
   #blog-pager a.home-link {display:none}
 
   #blog-pager {margin:20px 0px; display:inline-block; width:100%;}
 
   #blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link {font-weight:600; font-size:16px; padding:0px; overflow:hidden; line-height:initial; display:block; width:100%; border:0px; background:transparent;}
 
   #blog-pager a.blog-pager-newer-link {padding-right:5px;}
 
   #blog-pager a.blog-pager-older-link {padding-left:5px;}
 
   .blog-pager-newer-link span:first-child, .blog-pager-older-link span:first-child {font-size:20px; color:#000; text-transform:uppercase;}
 
   .blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:24px; font-weight:400; text-transform:none;}
 
   #blog-pager a.blog-pager-newer-link:hover, #blog-pager a.blog-pager-older-link:hover{color:#ff5722; background:transparent;}
 
   #blog-pager-newer-link {float:left; text-align:left; width:50%;}
 
   #blog-pager-older-link {float:right; text-align:right; width:50%;}
 
   #blog-pager-older-link span:first-child::after {margin-right:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
 
   #blog-pager-newer-link span:first-child:before {margin-left:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
 
   @media only screen and (max-width:640px){
 
     #blog-pager {display:block;}
 
     #blog-pager-newer-link, #blog-pager-older-link {float: none; width: 100%; display: block; text-align: center;}
 
     #blog-pager-older-link {margin-top:20px;}
 
   }
 
 </style>
 
 </b:if>

5. Berikutnya copy paste script di bawah ini kemudian tempatkan di atas arahan </body>
<b:if cond='data:view.isPost'> 
   <script> //<![CDATA[
 
     // Navigasi Blogger dengan Judul by masigun.com
 
     !function(t) {
 
    var next = 'Next';
 
    var prev = 'Previous';
 
     eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('E b=["\\d\\p\\B\\k\\o\\l\\i\\g\\d\\l\\e\\j\\i\\f\\e\\I\\e\\j\\i\\k\\m\\f\\D","\\d\\p\\B\\k\\o\\l\\i\\g\\d\\l\\e\\j\\i\\o\\k\\z\\e\\j\\i\\k\\m\\f\\D","\\A\\j\\e\\u","\\d\\c\\c\\j","\\q\\h\\g\\d\\f\\s","\\q\\w\\h\\g\\d\\f\\s\\y\\q\\h\\g\\d\\f\\s","\\c\\e\\G\\c","\\u\\m\\j\\h\\c","\\p\\g\\o\\h\\c\\y\\p\\g\\o\\h\\c\\i\\c\\m\\c\\k\\e","\\u\\m\\f\\z","\\q\\w\\h\\g\\d\\f\\s","\\A\\c\\H\\k","\\l\\e\\c"];E a=t(b[0]),n=t(b[1]);t[b[C]](a[b[3]](b[2]),x(n){a[b[r]](b[4]+F+b[5]+t(n)[b[9]](b[8])[b[7]]()[b[6]]()+b[v])},b[r]);t[b[C]](n[b[3]](b[2]),x(a){n[b[r]](b[4]+J+b[5]+t(a)[b[9]](b[8])[b[7]]()[b[6]]()+b[v])},b[r])',46,46,'|||||||||||_0x3670|x74|x61|x65|x6E|x70|x73|x2D|x72|x6C|x67|x69||x6F|x2E|x3C|11|x3E||x66|10|x2F|function|x20|x64|x68|x62|12|x6B|var|next|x78|x6D|x77|prev'.split('|'),0,{}));}(jQuery);
 
   //]]> </script>
 
 </b:if>

Nah itulah cara mengganti tombol next previous dengan judul postingan artikel blog. Untuk mengedit sebuah template blog memang ribet, jadi saya sarankan untuk membackup templatenya terlebih dahulu kalau terjadi kesalahan.

Baca juga : Cara menciptakan tombol chat whatsapp melayang di blogger

Jika teman-teman kesusahan dalam menerapkan cara di atas silahkan tanyakan di kolom komentar dan saya ucapkan terima kasih mengikuti tutorial mengganti tombol next dan prev pakai judul postingan.

Sumber http://www.masigun.com

Berlangganan update artikel terbaru via email:

0 Response to "✔ Cara Mengganti Tombol Next Dan Previous Dengan Judul Postingan Artikel"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel