Halo sobat blogger, sudah sekian lama saya tak membagi artikel tentang tutor blog supaya elegan dan keren tentunya. Kali ini
FCJ Blog's akan mengeshare
Tutor Mengganti Posting Lama Menjadi Angka dengan mudah, dan pastinya juga akan membuat bahagia.
Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Untuk mengubahnya Blogger Tutorial mau share koleksi widgetnya,
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
Langkah - Langkahnya :
- Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
- Sobat pilih salah satu dari 3 model diatas (bebas)
- Script nya ada dibawah ini, sesuai dengan tandanya (Model1,2,3)
- Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum/diatas kode tersebut
Mode 1
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
.showpageNum a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #FFFFFF;
color: #FF8000;
background-color: #000000;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
Mode 2
.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;
}
Mode 3
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #5FB404;
color: #fff;
background-color: #5FB404;
}
.showpage a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}
- Setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum/diatas 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 -->
- Kalau sudah silahkan dilihat hasilnya. Taraa, pasti sudah berhasil nih sahabat Blogger Tutorial, hoho, semoga bermanfaat :)
Title :
Cara Mengganti Posting Lama Menjadi Angka
Description : Halo sobat blogger, sudah sekian lama saya tak membagi artikel tentang tutor blog supaya elegan dan keren tentunya. Kali ini FCJ Blog'...
Rating :
5
