Cara Pasang Navigasi Halaman
- Login ke blogger
- Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
- Beri centang pada bagian Expand Template Widget
</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="/";
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)Jangan disimpan dulu ya, karena masih ada kode yang haru kamu pasang lagi.
var numshowpage=4; = jumlah nomor navigasi yang ditampilkan
Sekarang cari kode
'data:label.url'Kemudian ganti kode tersebut dengan kode ini
Lanjut ...'data:label.url + "?&max-results=10"'
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/AVvXsEjsyaOOz4HkPY-C5VwZfsHSXEYoUX8-A5hPjM924IZSe29pbuuUv2Fjj6xt-jUprQkHATxg00QoxupvjlXrztwQbn6WJt3LMnJ6IXmatsQmsY3n9afeogw5UIdojtsBW59r0mLgTnjZRqM/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsyaOOz4HkPY-C5VwZfsHSXEYoUX8-A5hPjM924IZSe29pbuuUv2Fjj6xt-jUprQkHATxg00QoxupvjlXrztwQbn6WJt3LMnJ6IXmatsQmsY3n9afeogw5UIdojtsBW59r0mLgTnjZRqM/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/AVvXsEjsyaOOz4HkPY-C5VwZfsHSXEYoUX8-A5hPjM924IZSe29pbuuUv2Fjj6xt-jUprQkHATxg00QoxupvjlXrztwQbn6WJt3LMnJ6IXmatsQmsY3n9afeogw5UIdojtsBW59r0mLgTnjZRqM/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/AVvXsEgjLPZzSgbonwgguZkK7a80Q68Z2-6orkciYRXkBMcNlS2npySAnS76g29WZ78c8Y6T0gAq9r1Awf9hzY6Gt5qYn5ZybuQwrpGFTE1jL5xe6bI9uZFZMk61hAXcPJnVkAbLgQkGbezE2MA/s1600/wp2.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #aeae0a; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLPZzSgbonwgguZkK7a80Q68Z2-6orkciYRXkBMcNlS2npySAnS76g29WZ78c8Y6T0gAq9r1Awf9hzY6Gt5qYn5ZybuQwrpGFTE1jL5xe6bI9uZFZMk61hAXcPJnVkAbLgQkGbezE2MA/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/AVvXsEgjLPZzSgbonwgguZkK7a80Q68Z2-6orkciYRXkBMcNlS2npySAnS76g29WZ78c8Y6T0gAq9r1Awf9hzY6Gt5qYn5ZybuQwrpGFTE1jL5xe6bI9uZFZMk61hAXcPJnVkAbLgQkGbezE2MA/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/AVvXsEgZXoFLiVdAWZ3e6eDS1l8dqHjMEnrpXgru6nRJpQpPZdazaGF9_OHfv0ht7Cme8H6Rr-blEB9nhYBvVfeZRlUmaKBanCLk5VstMJs-lL4eUuG7Cmnkwxu7708jYA1kbuS6_4jy_EBSI-U/s1600/wp3.jpg) 0 -25px repeat-x; } .showpageNum a:hover { background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXoFLiVdAWZ3e6eDS1l8dqHjMEnrpXgru6nRJpQpPZdazaGF9_OHfv0ht7Cme8H6Rr-blEB9nhYBvVfeZRlUmaKBanCLk5VstMJs-lL4eUuG7Cmnkwxu7708jYA1kbuS6_4jy_EBSI-U/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/AVvXsEgZXoFLiVdAWZ3e6eDS1l8dqHjMEnrpXgru6nRJpQpPZdazaGF9_OHfv0ht7Cme8H6Rr-blEB9nhYBvVfeZRlUmaKBanCLk5VstMJs-lL4eUuG7Cmnkwxu7708jYA1kbuS6_4jy_EBSI-U/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/AVvXsEg9OfYnivCN3DHyx4vqQptUUThRHi6tRx3QZWGernEaYtiVMEHnBqO3EJjEvg4XUWv_krn0GR66HBObLvbZtiqjt9-t09rtNF3MR2jQ03BQdUiSq5bMfB4pDar-gdoZbDrj_uHQGfwoXpw/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/AVvXsEg9OfYnivCN3DHyx4vqQptUUThRHi6tRx3QZWGernEaYtiVMEHnBqO3EJjEvg4XUWv_krn0GR66HBObLvbZtiqjt9-t09rtNF3MR2jQ03BQdUiSq5bMfB4pDar-gdoZbDrj_uHQGfwoXpw/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/AVvXsEg9OfYnivCN3DHyx4vqQptUUThRHi6tRx3QZWGernEaYtiVMEHnBqO3EJjEvg4XUWv_krn0GR66HBObLvbZtiqjt9-t09rtNF3MR2jQ03BQdUiSq5bMfB4pDar-gdoZbDrj_uHQGfwoXpw/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/AVvXsEj8-K0WVgpQAJV87PpX6jROFU2VauJhs_G2MkIenL3lL51ARCV9vgaoASj9bSJ00-I80kHSf8cQIQ6Soee8kIAP2WOHbAOYY2zkY3_iBN-8VBrfEZgE3FJI2Ayr_Fnqgtt40rUBTCMoKYY/s1600/wp5.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-K0WVgpQAJV87PpX6jROFU2VauJhs_G2MkIenL3lL51ARCV9vgaoASj9bSJ00-I80kHSf8cQIQ6Soee8kIAP2WOHbAOYY2zkY3_iBN-8VBrfEZgE3FJI2Ayr_Fnqgtt40rUBTCMoKYY/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/AVvXsEj8-K0WVgpQAJV87PpX6jROFU2VauJhs_G2MkIenL3lL51ARCV9vgaoASj9bSJ00-I80kHSf8cQIQ6Soee8kIAP2WOHbAOYY2zkY3_iBN-8VBrfEZgE3FJI2Ayr_Fnqgtt40rUBTCMoKYY/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/Selamat mencoba dan semoga berhasil
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/
0 komentar:
Posting Komentar