bankolay.com: Cara membuat navigasi halaman untuk blogger

Pada tutorial kali ini bankolay akan memposting tentang cara membuat navigasi halaman di blogg sobat seperti gambr dibawah ini.

ok langsung saja :

1. Login ke blogger masing-masin
2. Klik rancangan/desigen
3. Pilih edit HTML
4. Beri centang expand template widget
5. Cari kode seperti berikut :

6. jika sudah, tambahkan kode di bawah ini tepat di atas kode yang ada di atas (untuk mempermudah pencarian tekan tombol kombinasi ctrl+f)

Note : var postperpage=10; = jumlah poting perpage (perhalaman)
var numshowpage=4; = jumlah nomor navigasi yang ditampilkan

7. cari kode 'data:label.url' (biasanya kode tersebut lebih dari satu, saran saya di coba dari yang paling
bawah satu persatu kode script tersebut).
8. Kemudian ganti kode scrip no.7 dengan yang di bawah ini

Hha cape ey. sabar dulu sobat, tinggal satu langka lagi nih.

9. Cari kode ]]></skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atas kode ]]></skin>, kemudian simpan pengaturan template terebut.

.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/AVvXsEhp2cL1NXYqHHtYtTrdeV5CNRgbzPax4nt0THuKIQvVSY_wqJ7WUGQIJwx7VtGR0Lung_-sDd9LG1FnkSgSxk33f-XXM6i9u-d9Z-nIMuxxhofu0pMyEQqqcZaLNYcElmKKl8idYAvAbJs/s1600/wp2.jpg) 0 -50px repeat-x;
  }
   
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2cL1NXYqHHtYtTrdeV5CNRgbzPax4nt0THuKIQvVSY_wqJ7WUGQIJwx7VtGR0Lung_-sDd9LG1FnkSgSxk33f-XXM6i9u-d9Z-nIMuxxhofu0pMyEQqqcZaLNYcElmKKl8idYAvAbJs/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/AVvXsEhp2cL1NXYqHHtYtTrdeV5CNRgbzPax4nt0THuKIQvVSY_wqJ7WUGQIJwx7VtGR0Lung_-sDd9LG1FnkSgSxk33f-XXM6i9u-d9Z-nIMuxxhofu0pMyEQqqcZaLNYcElmKKl8idYAvAbJs/s1600/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

10. Simpan
11. Rebes Mission

03/04/12

Cara membuat navigasi halaman untuk blogger

1 komentar: