Banyaknya template blog custom sekarang ini membuat mudah para blogger dan menambah semangat untuk menulis. Custom template yang ditawarkan pun banyak juga dari developer template yang menyampaikan secara Gratis bagi Blogger. Ada juga yang versi Premium tentunya diadaptasi dengan kebutuhan isi dari konten yang akan di tampilkan oleh blogger itu sendiri.
Cukup mudah juga sekarang ini untuk menerima Custom templated yang mengagumkan dan profesional ibarat para Master design templated yang menurut aku cukup mengagumkan dalam design template blognya yaitu arlina design, kompiajaib, dan banyak lagi, itulah enaknya menggunakan Platform Blogger banyak support untuk templatenya.
Berbicara mengenai Custome template tidak terlepas dari design template itu sendiri salah satu yang sangat penting yaitu Custome pada Navigasi yang wajib ada untuk memudahkan pengunjung untuk terus menelusuri isi dari konten yang ada pada blog, dikesempatan kali ini kita akan membahas Blog Pager Di Postingan Blog.
Mungkin bagi yang sudah menggunakan Custome templated Blog Pager sudah termodifikasi dengan mengagumkan namun bagaimana jikalau yang masih menggunakan template bawaan Blogger yang masih terlihat sederhana nah bagi teman yang mau berkreasi mari kita simak bersama pembahasan 3 Langkah Modifikasi Blog Pager Di Postingan Blog.
Langkah Pertama
Silahkan teman salin arahan CSS dibawah ini lalu ganti semua arahan Blog pager yang teman punya dengan arahan ini.
Setelah itu silahkan teman cari arahan dibawah ini
Setelah ketemu silahkan teman ganti semuanya dengan arahan dibawah ini.
Langkah Ke Dua
Silahkan teman cari arahan dibawah ini, biasanya terletak pas dibawah arahan diatas.
Setelah itu silahkan teman salin arahan dibawah ini dan letakkan sempurna diatas arahan </b:includable>.
Langkah Ke Tiga
Silahkan teman salin arahan Javascript dibawah ini lalu letakkan sempurna diatas arahan </body>.
Perhatikan setiap langkah dan penerapan kodenya, ada baiknya sebelum mencoba cara ini teman backup terlebih dahulu templatednya antisipasi jikalau terjadi error. Setelah jawaban silahkan SAVE templatenya dan selesai, selamat mencoba.
.halaman{margin-top:20px;padding:0;background:#e9e9e9} .halaman-kiri{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;} .halaman-kanan{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out} .halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:red!important} .halaman-kanan a:hover,.halaman-kiri a:hover{color:red!important;} .halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none} .halaman-kiri a,.halaman-kanan a{color:#333;} .pager-title-left{font-family: 'Trebuchet MS', sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out} .isihalaman-kiri{margin:5px 10px 10px} .isihalaman-kanan{margin:5px 10px 10px} #blog-pager-newer-link{float:left} #blog-pager-older-link{float:right} .blog-pager,#blog-pager{clear:both;text-align:center} .feed-links{clear:both;line-height:2.5em}Setelah itu silahkan teman cari arahan dibawah ini
<b:includable id='nextprev'> ........ ........ </b:includable>Setelah ketemu silahkan teman ganti semuanya dengan arahan 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> <div class='mobile-link-button' id='blog-pager-home-link'> <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> </div> <div class='mobile-desktop-link'> <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a> </div> </div> </b:if> </b:if> <div class='clear'/> </b:includable>Langkah Ke Dua
Silahkan teman cari arahan dibawah ini, biasanya terletak pas dibawah arahan diatas.
<b:includable id='post' var='post'> ........ ........ </b:includable>Setelah itu silahkan teman salin arahan dibawah ini dan letakkan sempurna diatas arahan </b:includable>.
<b:if cond='data:blog.pageType == "item"'> <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'>Next</span><br/> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Prev Post</a> </span> <b:else/> <span class='current-pageleft'><span class='pager-title-left'>Next</span><br/>This is the current newest page</span> </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'>Previous</span><br/> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next Post »</a> </span> <b:else/> <span class='current-pageright'><span class='pager-title-left'>Previous</span><br/>This is the oldest page</span> </b:if> </div> </div> </div> <div style='clear: both;'/> </div> </b:if>Langkah Ke Tiga
Silahkan teman salin arahan Javascript dibawah ini lalu letakkan sempurna diatas arahan </body>.
<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>Perhatikan setiap langkah dan penerapan kodenya, ada baiknya sebelum mencoba cara ini teman backup terlebih dahulu templatednya antisipasi jikalau terjadi error. Setelah jawaban silahkan SAVE templatenya dan selesai, selamat mencoba.
Comments