Senin, 02 Januari 2012

Membuat Navigasi 123

Gambar diatas adalah gambar navigasi pada blog saya. Hal ini saya gunakan untuk mempermudah melihat file posting yang sebelumnya. Selain untuk itu dengan adanya navigasi blog tampak lebih bagus dari pada tidak terdapat navigasi…hee.

Untuk membuatnya tidaklah terlalu sulit, yang dibutuhkan adalah ketelitian, kesabaran dan keberanian untuk mencoba. Langkah-langkah dalam membuat tombol navigasi pada blog adalah sebagai berikut :
1.       Login ke Blogger
2.       Setelah masuk Dashboard klik Design
3.       Setelah anda klik design anda akan menemukan tampilan seperti gambar dibawah ini :


Klik Edit HTML dan berilah tanda centang pada Expand Widget Templates

4.       Kemudian carilah kode ]]></b:skin>
[untuk mempermudahnya gunakan Ctrl + F] 

5.       Kemudian paste script dibawah ini dan letakkan tepat diatas kode ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

6.       Langkah selanjutnya adalah carilah </body>
Setelah ketemu copy paste script dibawah ini dan letakkan diatas  kode </body>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
 
7       Langkah terakhir adalah cari kode 'data:label.url' setelah ketemu ganti kode tersebut dengan kode “data:label.url + &quot;?&amp;max-results=5&quot;’ kemudian simpan dan lihatlah perubahan pada blog anda.


0 comments:

Posting Komentar