Author : UnknownTidak ada komentar
halloo sob kali ini saya akan share bagaimana cara mengubah older post atau newer post dengan number atau bisa kita kenal dengan trik memasang page navigation number di blog!!
trik ini saya test work 100%
Page navigation number ini juga bisa dibilang memberikan kesan rapi dan indah pada blog kita, walaupun saya sendiri tidak menggunakannya. Tetapi jika ada sobat yang ingin menggunakan page navigation pada blognya, berikut ini saya berikan Cara Membuat Page Navigation Number di Blog.
1.Log in ke blogger.
2.Klik template » edit HTML » centang Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atasnya.
#blog-pager {
text-align:center;
padding-right:2%;
padding-top:2%;
padding-bottom:5%;
font-weight:normal;
margin-bottom:20px;
}
.home-link{display:none}
#blog-pager-newer-link {width:300px;float:left; text-align:left;font-size:13px}
#blog-pager-older-link {width:300px;float:right; text-align:right;font-size:13px}
#blog-pager {font-weight:400;font-size:14px;}
#blog-pager a{color:#2c3e50}
#blog-pager a:hover{color:#c34755; text-decoration:none}
/* Page Navigation
----------------------------------------------- */
#showpageArea {font:normal normal 11px Verdana, Geneva, sans-serif;margin-top:0;padding-top:0;}
.showpageArea a {font-size:14px;font-weight:bold;text-decoration:none;}
.showpageNum a {background:#eee;font-size:14px;font-weight:bold;text-decoration:none;border:1px solid #ccc;margin:0 2px;padding:4px 8px;color:#474747;transition: all 0.3s ease-in;}
.showpageNum a:hover {border:1px solid #189b91;background-color:#21afa4;color:#fff;}
.showpagePoint {border:1px solid #189b91;background-color:#21afa4;color:#fff;font-size:14px;font-weight:bold;text-decoration:none;margin:0 2px;padding:4px 8px;}
.showpageOf {font-size:14px;font-weight:bold;text-decoration:none;padding:4px 8px;margin: 0 2px 0 0;color: #ccc;text-transform:none;}
.showpage a {border:1px solid #1573A3;background-color:#21afa4;color:#fff;font-size:14px;font-weight:bold;text-decoration:none; padding:4px}
.showpage a:hover {border:1px solid #1573A3;background-color:#21afa4;color:#fff;text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;}
text-align:center;
padding-right:2%;
padding-top:2%;
padding-bottom:5%;
font-weight:normal;
margin-bottom:20px;
}
.home-link{display:none}
#blog-pager-newer-link {width:300px;float:left; text-align:left;font-size:13px}
#blog-pager-older-link {width:300px;float:right; text-align:right;font-size:13px}
#blog-pager {font-weight:400;font-size:14px;}
#blog-pager a{color:#2c3e50}
#blog-pager a:hover{color:#c34755; text-decoration:none}
/* Page Navigation
----------------------------------------------- */
#showpageArea {font:normal normal 11px Verdana, Geneva, sans-serif;margin-top:0;padding-top:0;}
.showpageArea a {font-size:14px;font-weight:bold;text-decoration:none;}
.showpageNum a {background:#eee;font-size:14px;font-weight:bold;text-decoration:none;border:1px solid #ccc;margin:0 2px;padding:4px 8px;color:#474747;transition: all 0.3s ease-in;}
.showpageNum a:hover {border:1px solid #189b91;background-color:#21afa4;color:#fff;}
.showpagePoint {border:1px solid #189b91;background-color:#21afa4;color:#fff;font-size:14px;font-weight:bold;text-decoration:none;margin:0 2px;padding:4px 8px;}
.showpageOf {font-size:14px;font-weight:bold;text-decoration:none;padding:4px 8px;margin: 0 2px 0 0;color: #ccc;text-transform:none;}
.showpage a {border:1px solid #1573A3;background-color:#21afa4;color:#fff;font-size:14px;font-weight:bold;text-decoration:none; padding:4px}
.showpage a:hover {border:1px solid #1573A3;background-color:#21afa4;color:#fff;text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;}
4.Cari kode </body> dan letakkan kode dibawah ini tepat di atasnya.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://yourjavascript.com/44461531165/blogger-pagenavi-min-muizcyan.js' type='text/javascript'/>
</b:if>
</b:if>
Keterangan:
- Jika anda ingin mengganti jumlah postingan yang akan ditampilkan pada setiap halaman silahkan ganti kode yang berwarna biru.
5.Cari kode 'data:label.url' dan ganti kode itu dengan kode dibawah ini.
'data:label.url + "?&max-results=7"'
Keterangan:
var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)
6.Save Template anda.
NB:
kalau tidak jalan alias tidak muncul atau istilahnya tidak berubah coba hapus kode ini
Remove this code
Now find [by pressing Ctrl + F ] this code in the template:
<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"' title='Previous Product'>« Prev Movie</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"' title='Next Product'>Next Movie »</a>
</span>
</b:if>
<span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
<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'/>
Now find [by pressing Ctrl + F ] this code in the template:
<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"' title='Previous Product'>« Prev Movie</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"' title='Next Product'>Next Movie »</a>
</span>
</b:if>
<span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
<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'/>
Nah selesai sudah Cara Membuat Page Navigation Number di Blog mudah-mudahan artikel ini bisa bermanfaat bagi anda/
tag
tutorial blogger,navigation blogger,navigation number blogger
incoming search
cara mengubah older post jadi number
trik menambah page navigation number di blogger
trik memasang number navigation di blog work 100%
<!--Page Navigation Ends -->
Nah selesai sudah Cara Membuat Page Navigation Number di Blog mudah-mudahan artikel ini bisa bermanfaat bagi anda/
tag
tutorial blogger,navigation blogger,navigation number blogger
incoming search
cara mengubah older post jadi number
trik menambah page navigation number di blogger
trik memasang number navigation di blog work 100%
<!--Page Navigation Ends -->
Posted On : Jumat, 13 Juni 2014Time : 02.11