Kamis, 28 Maret 2013

Cara Membuat Potingan Lama Menjadi Angka pada Blog


Biasanya setiap blog blog mempunyai tampilan yang berbeda beda. Salah satu yang membedakan mungkin blog lain tampilan tulisan beranda, postingan baru dan postingan lama nya menggunakan angka tetapi blog anda tidak.

Cara Mengganti Tulisan Home, Previous Dan Next Dengan Angka Jona Rendra

Berikut adalah cara membuat tampilan blog potingan lama menggunakan angka :

Pertama, login ke akun blogger anda, lalu ke Template, Edit HTML

Kedua, cari kode </body> bisa menggunakan CTRL + F

Ketiga, copy kode dibawah ini lalu pastekan diatas kode </body>


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->
Langkah ini bertujuan untuk menampilkan angka - angka setelah tulisan home/beranda dan older post/postingan lama tampil duluan.

Catatan :
* Pada kalimat "var pageCount=5; " dan "var displayPageNum=5; ", angka 5 bisa diganti dengan angka yang ditampilkan sampai nomer berapa
* Lalu, kata Previous bisa diganti dengan kata yang berarti "sebelumnya"
* Sama juga pada kata Next, bisa diganti dengan kata lainnya yange berarti "postingan terbaru"


Keempat, cari kode ]]></b:skin> dengan menggunakan F3 atau CTRL + F
Kelima, copy kode CSS dibawah ini, lalu paste 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;
}

Untuk langkah yang satu ini, berfungsi mengatur tampilan angka, home dan older post dengan memberikan tampilan warna putih dan abu abu atur warna kesukaan anda jika anda bingung pilih warnanya di sini

Terakhir, Klik Simpan Template

Tidak ada komentar:

Posting Komentar