Page Navigation sebuah kata yang langka kita dengarkan tapi mengandung banyak manfaat. Page Navigation adalah sebuah widget yang di tambahan supaya pembaca mudah untuk melihat-lihat posting per halamannya. Nah, pada kesempatan kali ini saya akan membahas bagaimana caranya membuat Page Navigation. Caranya tidak begitu sulit, hanya butuh ketelitian dan kesabaran saja, jika tidak punya keduanya itu pasti dalam mengerjakannya akan mengalami kesalahan. Uuupsss.. malah ceramah, hehehe.. Bagaimana, penasaran? simak langkah berikut ;1. Login ke akun Blogger anda..
2. Pilih menu " Design" atau "Rancangan"..
3. Klik sug menu "Edit HTML" lalu "Expand Widget Templates"
4. Cari kode ]]></b:skin>, setelah itu masukkan kode berikut tepat di atasnya..
Style 1 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtsQEza75BYAr9p3pS-7LT47KdzzbKS-69np_aq1fzDA5NnPO_tUjbD17D0YAL5HuKDSr4R_W6nKKDmwpwGLvIZDifD-qys2LC7DKSCYkGgpRSqlKp9kLwiVdHGoZrLPrAkkepNoNCPR0/s1600/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtsQEza75BYAr9p3pS-7LT47KdzzbKS-69np_aq1fzDA5NnPO_tUjbD17D0YAL5HuKDSr4R_W6nKKDmwpwGLvIZDifD-qys2LC7DKSCYkGgpRSqlKp9kLwiVdHGoZrLPrAkkepNoNCPR0/s1600/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtsQEza75BYAr9p3pS-7LT47KdzzbKS-69np_aq1fzDA5NnPO_tUjbD17D0YAL5HuKDSr4R_W6nKKDmwpwGLvIZDifD-qys2LC7DKSCYkGgpRSqlKp9kLwiVdHGoZrLPrAkkepNoNCPR0/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
Style 2 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcX0l1Cr-RSsx8zg3qitv3Fe8fUVQHyXu6sa3Uz4UPP804iB55D9C4d9lcK5Qd5oIGuiITHIwIv3U1BMfA-mbpiXs7csRCwz_mq948hPtub9127BpcuNeHTnOKTtDCs3BlTHpTJzfaXGk/s1600/wp2.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcX0l1Cr-RSsx8zg3qitv3Fe8fUVQHyXu6sa3Uz4UPP804iB55D9C4d9lcK5Qd5oIGuiITHIwIv3U1BMfA-mbpiXs7csRCwz_mq948hPtub9127BpcuNeHTnOKTtDCs3BlTHpTJzfaXGk/s1600/wp2.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcX0l1Cr-RSsx8zg3qitv3Fe8fUVQHyXu6sa3Uz4UPP804iB55D9C4d9lcK5Qd5oIGuiITHIwIv3U1BMfA-mbpiXs7csRCwz_mq948hPtub9127BpcuNeHTnOKTtDCs3BlTHpTJzfaXGk/s1600/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}
Style 3 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sWN1wCqcZpKW3BmWc81SFUEDXu8tYJFvICXC_z0giIzX_EWRW-8JDilpTr6SAZjvOwmJMPJ9VdVIRdP9jJjtpiMYxC1qWYA2-Iv4JMj_wTVkKwli5Qp3OU2ZxaAzksMm8YBhRGJksgg/s1600/wp3.jpg) 0 -25px repeat-x;
}
.showpageNum a:hover {
background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sWN1wCqcZpKW3BmWc81SFUEDXu8tYJFvICXC_z0giIzX_EWRW-8JDilpTr6SAZjvOwmJMPJ9VdVIRdP9jJjtpiMYxC1qWYA2-Iv4JMj_wTVkKwli5Qp3OU2ZxaAzksMm8YBhRGJksgg/s1600/wp3.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sWN1wCqcZpKW3BmWc81SFUEDXu8tYJFvICXC_z0giIzX_EWRW-8JDilpTr6SAZjvOwmJMPJ9VdVIRdP9jJjtpiMYxC1qWYA2-Iv4JMj_wTVkKwli5Qp3OU2ZxaAzksMm8YBhRGJksgg/s1600/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
Style 4 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3MmXOa8yRVVZNnXc38P19CAZ27fXwTKLGR7FSH-9wnFPUrUdzqbh8JtBerwmqMCSM72TrjPsTMiQWYIV01eSiqknjbtKnCrxgAqPqPKi-HXyCWbRAgFIIxT23n11cMPKPl4NvrXLSuM/s1600/wp4.jpg) 0 -25px repeat-x;
}
.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3MmXOa8yRVVZNnXc38P19CAZ27fXwTKLGR7FSH-9wnFPUrUdzqbh8JtBerwmqMCSM72TrjPsTMiQWYIV01eSiqknjbtKnCrxgAqPqPKi-HXyCWbRAgFIIxT23n11cMPKPl4NvrXLSuM/s1600/wp4.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3MmXOa8yRVVZNnXc38P19CAZ27fXwTKLGR7FSH-9wnFPUrUdzqbh8JtBerwmqMCSM72TrjPsTMiQWYIV01eSiqknjbtKnCrxgAqPqPKi-HXyCWbRAgFIIxT23n11cMPKPl4NvrXLSuM/s1600/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
Style 5 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqo3_clW7zehZRMks7KJib8P2MbYAARLKOyBp8IS9jBkJLWOCBDmi8gRCjjD4uSgsQPZE6R6XXPcPUY8GvTZIb_q9ewGIOUcF4UIi50gnl7FI5PjIXEyx52_E6DxAE3-w9a2XuKNFzxM/s1600/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqo3_clW7zehZRMks7KJib8P2MbYAARLKOyBp8IS9jBkJLWOCBDmi8gRCjjD4uSgsQPZE6R6XXPcPUY8GvTZIb_q9ewGIOUcF4UIi50gnl7FI5PjIXEyx52_E6DxAE3-w9a2XuKNFzxM/s1600/wp5.jpg) 0 -25px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqo3_clW7zehZRMks7KJib8P2MbYAARLKOyBp8IS9jBkJLWOCBDmi8gRCjjD4uSgsQPZE6R6XXPcPUY8GvTZIb_q9ewGIOUcF4UIi50gnl7FI5PjIXEyx52_E6DxAE3-w9a2XuKNFzxM/s1600/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
Style 6 :
.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}
.showpageNum a:hover {
background: #888;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
Silahkan dipilih mau style yang mana?!! semua keren-keren...
5. Jika sudah, silahkan cari lagi kode </body> lalu masukkan kode berikut tepat diatasnya..
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://hypercustom.googlecode.com/files/Page%20Navigator.js' type='text/javascript'> </script>
6. Dan yang terakhir save template... simsalabim !!! keren to hehehe...
0 comments:
Posting Komentar