Tombol Next-Previous Buttons ini sanggup dibilang sama dengan Tombol Next-Previous Navigasi pada Home Page yang terdapat dibawah postingan. Tujuan dari pemasangan Next-Previous ini yaitu biar pengunjung lebih gampang dan leluasa menjelajahi seluruh isi blog anda. Selain untuk memudahkan pengunjung, Tombol Next-Previous ini memudahkan pengunjung untuk melihat Artikel sebelumnya atau selanjutnya tanpa harus kembali ke home page. Untuk Tombol Next-Previous kali ini hanya menampilkan judul saja, fungsinya sama yaitu memancing pengunjung untuk melihat artikel sebelumnya dan artikel selanjutnya.
Baca Juga :
4. Copy&paste instruksi berikut ini, dan letakkan diatas </head> atau <head>
Sebelumnya instruksi tersebut, menyerupai dibawah ini!
7. Copy&paste instruksi berikut ini, dan Temukan kode <b:includable id='nextprev'> kemudian ganti dengan instruksi dibawah ini.
9. Copy&Paste instruksi berikut ini, dan letakkan dibawah kode <data:post.body/>
|Wajib Baca :
Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul
Baca Juga :
Menurut -master seo, Secara logika memasang tombol next-previous ini cukup bekerjasama dengan SEO sebab jikalau Anda mengganti next-previous dengan judul postingan, setelah atau sebelumnya. Mungkin ada pengunjung yang tertarik untuk membaca dan mengklik judul tersebut, otomatis jumlah pageviews akan bertambah.
Screenshoot :
Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul
Cara Pertama :
1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
1. Temukan kode ]]></b:skin> atau </style>
2. Copy&paste instruksi berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* Next-Previous Design */ .pagebutton-nextprevious {margin-bottom: 10px; overflow:hidden; padding:0;margin-right:5px;margin-left:5px;} .pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left; border-right:1px solid #ddd; padding:0; background:#fff;color:#444;} .pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px} .pagebutton-nextprevious li.previous {float: right; padding:0; background:#fff; margin:0;color:#444} .pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px } .pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover {background:#fff;color:#ccc } .pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; } .pagebutton-nextprevious li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;} .pagebutton-nextprevious li i { color: #444; font-size: 18px; } .pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #444; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;} .pagebutton-nextprevious li a span { font-size: 15px; color: #444; font-family:oswald,Helvetica, arial; margin:0;} .pagebutton-nextprevious li a:hover span, .pagebutton-nextprevious li a:hover i { color: #c00; } .pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; } .pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; } .pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i , .pagebutton-nextprevious li.next, .pagebutton-nextprevious li.previous{transition-duration: 0.4s; transition-timing-function: ease-out; }4. Copy&paste instruksi berikut ini, dan letakkan diatas </head> atau <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>Sebelumnya instruksi tersebut, menyerupai dibawah ini!
<b:includable id='nextprev'> <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'><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> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></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:includable>7. Copy&paste instruksi berikut ini, dan Temukan kode <b:includable id='nextprev'> kemudian ganti dengan instruksi dibawah ini.
<b:includable id='nextprev'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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'><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> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></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:if> </b:includable>9. Copy&Paste instruksi berikut ini, dan letakkan dibawah kode <data:post.body/>
|Wajib Baca :
Kode ini biasanya lebih dari satu, silakan anda pilih yang kedua/ketiga. Anda juga sanggup meletakan instruksi berikut ini diatas Related Post atau dibawah tombol share-buttons
(Jika memasangnya)
(Jika memasangnya)
<b:if cond='data:blog.pageType == "item"'> <ul class='pagebutton-nextprevious'> <li class='next'> <b:if cond='data:newerPageUrl'> <i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next' title='Artikel Selanjutnya'/> <b:else/> <i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a> </b:if> </li> <li class='previous'> <b:if cond='data:olderPageUrl'> <i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous' title='Artikel Sebelumnya'/> <b:else/> <i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a> </b:if> </li> </ul> <script type='text/javascript'> //<![CDATA[ (function($){ var newerLink = $('a.newer-link'); var olderLink = $('a.older-link'); $.get(newerLink.attr('href'), function (data) { newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>'); },"html"); $.get(olderLink.attr('href'), function (data2) { olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>'); },"html"); })(jQuery); //]]> </script> </b:if>
