Pages

Saturday, 21 January 2012

6 Macam Style Navigasi Halaman Untuk Blogger

 

Kali ini saya akan menuliskan tutorial untuk blogger tentang cara membuat navigasi halaman di blogger (navigasi 1 > 2 > 3 > ... Next).

Sebenarnya dulu saya sudah pernah menuliskan caranya yaitu : Cara Membuat Navigasi Halaman Di Blogger (1>2>3>dst...)

Pada tutorial kali ini saya akan menuliskan panduan membuat blogger pagenavi yang berbeda dengan script terdahulu, selain itu di sini saya juga menyertakan 6 macam style (css) yang nantinya bisa kamu pilih sesuai selera.


Ok mari kita mulai ....

Ups ... Hampir lupa, sebaiknya backup dulu template yang kamu gunakan, agar jika terjadi hal-hal yang tidak diinginkan atau ada eror kamu bisa mengembalikannya seperti semula.

Cara Pasang Navigasi Halaman

  1. Login ke blogger
  2. Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
  3. Beri centang pada bagian Expand Template Widget
Cari kode berikut
</body>
Jika kamu merasa susah mencari kode tersebut silakan baca dulu Cara Mudah + Cepat Mencari Kode Html di Blogger
Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode</body> tadi
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
atau jika tidak bisa gunakan yang ini 
<script type='text/javascript'>//<![CDATA[
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]></script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
Catatan :
var postperpage=10; = jumlah poting perpage (perhalaman)
var numshowpage=4; = jumlah nomor navigasi yang ditampilkan
Jangan disimpan dulu ya, karena masih ada kode yang haru kamu pasang lagi.
Sekarang cari kode
'data:label.url'
Kemudian ganti kode tersebut dengan kode ini
'data:label.url + &quot;?&amp;max-results=10&quot;'
Lajut ...

6 Macam Style Navigasi Halaman Untuk Blogger

Sekarang cari kode ]]></b:skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template kamu. Silakan pilih salah satu dari 6 Style berikut (Ingat, salah satu saja, urutan gambar di atas sudah saya sesuaikan dengan urutan style):
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/AVvXsEgEIsAtjdbjcDgGBBmAvRl53M33C77uOZcsHmFXAUDeHRr6Ne1HW-KZAToCxPnMQxqz7Ki2UmMhbwirNAvFXOgqRDuIgxnrZaYltl4DcPRSvTRlPg_ylDNz2bbEWeX89-OPf8E0g4Wf6Ak/s1600/wp1.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEIsAtjdbjcDgGBBmAvRl53M33C77uOZcsHmFXAUDeHRr6Ne1HW-KZAToCxPnMQxqz7Ki2UmMhbwirNAvFXOgqRDuIgxnrZaYltl4DcPRSvTRlPg_ylDNz2bbEWeX89-OPf8E0g4Wf6Ak/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/AVvXsEgEIsAtjdbjcDgGBBmAvRl53M33C77uOZcsHmFXAUDeHRr6Ne1HW-KZAToCxPnMQxqz7Ki2UmMhbwirNAvFXOgqRDuIgxnrZaYltl4DcPRSvTRlPg_ylDNz2bbEWeX89-OPf8E0g4Wf6Ak/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/AVvXsEjeWKJMuoONXZv-HCN6VO_INqRsVEomiQjO-CaMPKhGXiaPoC-lDtZI1GFTCUzYpj75DZZXIc5QAuTd-4JB7-OJWTFpD_v0jwJ16aGDcxM9h6qbr3t4xEVEbkRhH4GlCj0AoYnEIo57Lio/s1600/wp2.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWKJMuoONXZv-HCN6VO_INqRsVEomiQjO-CaMPKhGXiaPoC-lDtZI1GFTCUzYpj75DZZXIc5QAuTd-4JB7-OJWTFpD_v0jwJ16aGDcxM9h6qbr3t4xEVEbkRhH4GlCj0AoYnEIo57Lio/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/AVvXsEjeWKJMuoONXZv-HCN6VO_INqRsVEomiQjO-CaMPKhGXiaPoC-lDtZI1GFTCUzYpj75DZZXIc5QAuTd-4JB7-OJWTFpD_v0jwJ16aGDcxM9h6qbr3t4xEVEbkRhH4GlCj0AoYnEIo57Lio/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/AVvXsEjOkA4Asz4-uvfDq8CYrn-4JdgxzhankmXxwrkFf__S7DsBl4BhauCFm-ruM0Hspnq_VtKM2nq8SXduebcjT-wG6mvTaoxGDYIu7JA7XQHsAfK144LRLEGcMME7e3ezDc2AnwXoBgKH_v0/s1600/wp3.jpg) 0 -25px repeat-x;
  }
  
.showpageNum a:hover {
  background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkA4Asz4-uvfDq8CYrn-4JdgxzhankmXxwrkFf__S7DsBl4BhauCFm-ruM0Hspnq_VtKM2nq8SXduebcjT-wG6mvTaoxGDYIu7JA7XQHsAfK144LRLEGcMME7e3ezDc2AnwXoBgKH_v0/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/AVvXsEjOkA4Asz4-uvfDq8CYrn-4JdgxzhankmXxwrkFf__S7DsBl4BhauCFm-ruM0Hspnq_VtKM2nq8SXduebcjT-wG6mvTaoxGDYIu7JA7XQHsAfK144LRLEGcMME7e3ezDc2AnwXoBgKH_v0/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/AVvXsEiYxoor76PgjdHl9JsNWkeXA1L0nhgTwA97a0CFhcx1gst5MLFl5yEUutrfa4-JyH8ueVLNeDQvpglYvabZzMwOchurwJ3QPllGLmbpnAfQ8ohtngb-2C5xqeYnj_9xxV0eU0c5M8i9eHk/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/AVvXsEiYxoor76PgjdHl9JsNWkeXA1L0nhgTwA97a0CFhcx1gst5MLFl5yEUutrfa4-JyH8ueVLNeDQvpglYvabZzMwOchurwJ3QPllGLmbpnAfQ8ohtngb-2C5xqeYnj_9xxV0eU0c5M8i9eHk/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/AVvXsEiYxoor76PgjdHl9JsNWkeXA1L0nhgTwA97a0CFhcx1gst5MLFl5yEUutrfa4-JyH8ueVLNeDQvpglYvabZzMwOchurwJ3QPllGLmbpnAfQ8ohtngb-2C5xqeYnj_9xxV0eU0c5M8i9eHk/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/AVvXsEjQdimfHEQIfKAnFvnL8D0q-CYdYkSqlWdi2heLcSS3QpY_GcQLNsYcIU3O8QREY4HeJ-L1zCNStSYYAjhh58v5SRdZS7AWXXUMW0NsjNJoILS4p9Cjwyawx0fYrpNTYFpsg1G2Imv6yjU/s1600/wp5.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdimfHEQIfKAnFvnL8D0q-CYdYkSqlWdi2heLcSS3QpY_GcQLNsYcIU3O8QREY4HeJ-L1zCNStSYYAjhh58v5SRdZS7AWXXUMW0NsjNJoILS4p9Cjwyawx0fYrpNTYFpsg1G2Imv6yjU/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/AVvXsEjQdimfHEQIfKAnFvnL8D0q-CYdYkSqlWdi2heLcSS3QpY_GcQLNsYcIU3O8QREY4HeJ-L1zCNStSYYAjhh58v5SRdZS7AWXXUMW0NsjNJoILS4p9Cjwyawx0fYrpNTYFpsg1G2Imv6yjU/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;
  }

Nah itulah tutorial membuat navigasi halaman di blogger.

Sumber 6 Macam Style Navigasi Halaman Untuk Blogger :
http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/
Selamat mencoba dan semoga berhasil
Artikel ini telah saya update pada 14 Februari 2012

Next
Prev Post
Previous
Next Post
blogart

About blogart

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

No comments:
Write comments

Get updates in your email box

Complete the form below, and we'll send you our recent update.

Deliver via FeedBurner
© Copyright 2016 i-Habibi. Designed by Bloggertheme9. Distributed by Free Blogger Templates