Showing posts with label post. Show all posts
Showing posts with label post. Show all posts
Tuesday, December 6, 2016
Cara Mengganti Older Post Menjadi Angka
Cara Mengganti Older Post Menjadi Angka
Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini
1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
.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;
}
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;
}
3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts-->
<b:if cond=data:blog.pageType != "item">
<b:if cond=data:blog.pageType != "static_page">
<script type=text/javascript>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src=http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js type=text/javascript/>
</b:if> </b:if>
<!--Page Navigation Ends -->
<b:if cond=data:blog.pageType != "item">
<b:if cond=data:blog.pageType != "static_page">
<script type=text/javascript>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src=http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js type=text/javascript/>
</b:if> </b:if>
<!--Page Navigation Ends -->
Kalau sudah silahkan dilihat hasilnya.
Available link for download
Wednesday, November 16, 2016
Cara Mengganti Newer dan Older post di blog dengan Navigasi Angka
Cara Mengganti Newer dan Older post di blog dengan Navigasi Angka
Selamat malam sobat blogger semua !!! Mungkin diantara kalian pasti pernah berkunjung ke suatu situs dan melihat navigasi newer post dan older post-nya bermodel form angka. Nah... pada kesempatan kali ini, aq akan memberi tips Untuk Mengganti Navigasi Newer - Older post dengan Angka. Silahkan sobat mengikuti langkah - langkah berikut ini :
- Login ke Blogger.com => Template => Edit HTML
- Cari kode ]]></b:skin> ( tekan Ctrl + F untuk memudahkan pencarian ), lalu copy kode dibawah ini, kemudian paste tepat di atas kode ]]></b:skin> :
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}
- Selanjutnya, sobat cari kode </body> dan letakkan kode di bawah ini tepat di atas kode </body> :
<script type=text/javascript>var pageCount=4;var displayPageNum=4;var upPageWord ='« ';var downPageWord =' »';</script><script src=http://project-goez.googlecode.com/files/Page%20number.js type=text/javascript/>
- Lalu sobat Klik Simpan Template.
Hasilnya akan seperti gambar dibawah ini :
- Catatan : Untuk mengubah tampilan kotak pada navigasi seperti pada gambar diatas, sobat hanya tinggal menambah atau mengurangi angka yang terdapat pada kode di bawah ini :
- var pageCount=4;
- var displayPageNum=4;
Selesai, sekian pembahasan ku kali ini tentang Cara Mengganti Newer dan Older post di blog dengan navigasi angka, semoga bermanfaat. :)
Available link for download
Subscribe to:
Posts (Atom)