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 menawarkan secara Gratis bagi Blogger. Ada juga yang versi Premium tentunya disesuaikan dengan kebutuhan isi dari konten yang akan di tampilkan oleh blogger itu sendiri.
Cukup mudah juga sekarang ini untuk mendapatkan Custom templated yang bagus dan profesional seperti para Master design templated yang menurut saya cukup bagus 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 adalah 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 bagus namun bagaimana jika yang masih menggunakan template bawaan Blogger yang masih terlihat sederhana nah bagi sobat yang mau berkreasi mari kita simak bersama pembahasan 3 Langkah Modifikasi Blog Pager Di Postingan Blog.
Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu ganti semua kode Blog pager yang sobat punya dengan kode ini.
Setelah itu silahkan sobat cari kode dibawah ini
Setelah ketemu silahkan sobat ganti semuanya dengan kode dibawah ini.
Langkah Ke Dua
Silahkan sobat cari kode dibawah ini, biasanya terletak pas dibawah kode diatas.
Setelah itu silahkan sobat salin kode dibawah ini dan letakkan tepat diatas kode </b:includable>.
Langkah Ke Tiga
Silahkan sobat salin kode Javascript dibawah ini lalu letakkan tepat diatas kode </body>.
Perhatikan setiap langkah dan penerapan kodenya, ada baiknya sebelum mencoba cara ini sobat backup terlebih dahulu templatednya antisipasi jika terjadi error. Setelah selesai 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 sobat cari kode dibawah ini
<b:includable id='nextprev'>
........
........
</b:includable>Setelah ketemu silahkan sobat ganti semuanya dengan kode 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 sobat cari kode dibawah ini, biasanya terletak pas dibawah kode diatas.
<b:includable id='post' var='post'>
........
........
</b:includable>Setelah itu silahkan sobat salin kode dibawah ini dan letakkan tepat diatas kode </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 sobat salin kode Javascript dibawah ini lalu letakkan tepat diatas kode </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 sobat backup terlebih dahulu templatednya antisipasi jika terjadi error. Setelah selesai silahkan SAVE templatenya dan selesai, selamat mencoba.
EmoticonEmoticon