Modifikasi Page Number Dengan CSS3

Postingan ini sebagai tambahan untuk Navigasi Page Number 123 yang sebelumnya telah saya bahas silahkan dilihat kembali pembuatan Page Number 123 untuk blogger. Sekarang saya coba Memodifikasi page number 123 ini dengan menggunakan CSS3, yang pasti akan lebih menarik dibandingkan dengan navigasi page number sebelumnya.

Contohnya seperti gambar di bawah ini ::

modifikasi pagenumber dengan CSS3
Dengan Memasangkan CSS3 pada page number, page number terlihat seperti menggunakan background image (Gradasi dua warna) seperti yang anda lihat pada gambar di atas. padahal itu hanya permainan dari CSS3 mungkin itu yang menjadi unggulan untuk CSS3. Betul tidak bang [Hendro].

Langsung saja pada cara pemasangan page number dengan CSS3 ::

Pertama masuk pada Dashboard > Rancangan > Element Halaman > Tambah Gadget > Pilih HTML/JavaScript.

Masukan Script di bawah ini ::


<style>

.showpageArea {
padding:2px;margin-top:8px;margin-bottom:8px;
}
.showpageArea ul{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
text-align: center;
font-size: 12px;
color:#333;
}

.showpageArea li{
padding: 8px;padding-top:6px; padding-bottom:6px;
margin: 0 2px;
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.showpageArea a, .showpageArea a:visited{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
text-decoration: none;
color:#000;
}

.showpageArea a:hover, .showpageArea a:active{
margin: 2px 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
border: 1px solid #940f04;
color: #940f04;
background-color: #fff;
}

.showpagePoint {font-size:12px;
padding: 8px;padding-top:6px; padding-bottom:6px;
margin-right:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
color: #940f04;
background-color:#fff;
}

.showpageArea a.disablelink, .showpageArea a.disablelink:hover{
background-color:none;
cursor: pointer;
color: #940f04;
font-weight: normal !important;
}

.showpageArea a.prevnext{
color: #000;
font-weight: bold;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding:4px;margin:2px;border: 0px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Untuk meng-Eksekusinya silahkan klik Simpan.

NB :: Script Page Number ini Sekaligus revisi untuk script page number sebelumnya. Script ini lebih cepat dalam loading, serta pengaturan paddingnya telah saya rubah sehigga posisi atau jarak number dengan kotak tidak terlalu dekat. Anda juga bisa mengcustom warna gradasinya dari kode CSS3 di atas. Selamat mencoba.

Komentar

Ka Damar mengatakan…
biaring make Older Message ajalah, pake navigasi jd berat ^^
komgue : komputer gue mengatakan…
kodenya cuman dirubah dikit y
Elvindinata mengatakan…
nice info sob,,tdi barusan nyoba,,tp kok t4 ane gk muncul ya sob,,ap pengruh template??..hehe
Chugy mengatakan…
Ka Damar :: Silahkan saja ga wajib ko.

Komgue :: Betul cm drubah CSS-y + sama script-y ditmbahin

Elvindinata :: Tidak smua tmplate suport Page number ini..jadi mohon maaf mungkin nanti saya cari alternative lain. trimakasih
Jaloee mengatakan…
wew ane belum nyaho tuh css 3 .. perlu di jajal kek na
Anonim mengatakan…
Wajib dicoba...mungkin dengan cara ini halaman blog gue bisa jadi lebih kecil bite-nya..thanks for posting this tips
Belajar SEO mengatakan…
Klo pake CSS lebih asyik nih , ntar dicoba deh
TUKANG CoLoNG mengatakan…
oh namanya page number. ku cari-cari di gugel pantes gag ada, salah keyword ternyata..:)
febriyanto mengatakan…
keren gan...... tapi saya pake bawaan aj dah... takut memberatkan... :D
Rezky Pratama mengatakan…
ah tidak,,,,,
skripnya begitu panjang,,,,ora mudeng,,,
newbie2
Ferdinand mengatakan…
Wah boleh nie... ikut sedot Sob...... tapi save dlu prakteknya nyusul hhe....

maaf telat Sob... gy banyak kerjaan aku hhe... sehat kan Sob???

Semangat n happy blogging Sob...
didiet mengatakan…
hmm gak mudeeng mas...gak begitu paham script2 ginian
Rizkyzone mengatakan…
keren sob aq suka tampilannya, tp apa g bisa sob di pasang di edit html ? kl d taruh d sidebar aq kurang suka sob
Chugy mengatakan…
Rizky2009 :: Bisa Boz tapi kebetulan saya cari yang simple biar mudah di praktekan . Mungkin saya posting lain kali page number ini di dalam edit HTML trimakasih.
om rame mengatakan…
pernah beLajar mengenai CSS tapi sampe sekarang masih beLum mudeng dan suka puyeng kaLo mempeLajari, u/ tutor kaLi ini numpang Lewat aja sob. harap makLum yah, hehehe...
mas kholiq mengatakan…
tutorialnya sangat bermanfaat sob boleh di coba nih
thank sob
Blogger mengatakan…
wah².. saya ketinggalan episdoe pertama nech sob, coba² tak balik ke awal dulu biar pas..
Sukses Slalu!
Ferdinand mengatakan…
Siank brader.... kaya biasa aku hadir hhe...... masih Css3 ternyata hhe.... aku tunggu yg baru deh klo gtu...

tetep semangat n Happy blogging!!!
Rizkyzone mengatakan…
aq suka yg edit HTML, ok deh sob tak tunggu yah
Amdhas mengatakan…
baru mampir..keren sob makin hidup tinggal gradient yang menentukan narablog, mau teranimasi webkit bisa di kasih timing transtition, tapi ini aja sudah mantep banget
niesa mengatakan…
klo di modif pake css3 lebih bagus ya.

lebih gemanaaa gt..! heheee...

tr di coba deh. semoga j berhasil.
Anonim mengatakan…
dapat ilmu baru nih, nanti saya coba deh
makasih sob
sukses selalu dan tetap semangat
Unknown mengatakan…
kl boleh tahu ngganti ukuran fontnya gmn mas...?
Unknown mengatakan…
ganti warna gmana gan...
Blogger Katro mengatakan…
sayang banget, template gak support:(

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text