Page navigation for Blogger with Google style using New Script
June 3rd, 2011
Bismillah,..
Google, who does not know google!? ..
A search engine most used by internet users … especially users of Blogger.
Actually Abu Farhan have been post about page navigation with google style …
“Page Navigation for Blogger with Google Style”
But in that article can only be used on old navigation script ..
So I make a css script for google style using new navigation script…
Please look carefully, css and javascript scripts are different from my previous scripts …So follow the instructions below for running well …
The following is how it looks
This Demo for Google Style:
Google Style :
Step 1 : Apply Style
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’t click the checkbox which says ‘Expand Widget Templates’
- Find this
]]></b:skin>
Copy the css script from the demo file.
Then insert the script in front of
]]></b:skin>
Example :
#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}
td.showpageOf{display:none;}
#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}
#nav a{display:block; text-decoration:none; color: #0066FF}
#nav a:hover{ text-decoration:underline;}
#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold}
.cur{ font-weight:bold;}
.csb{background:url(http://www.google.com/images/nav_logo7.png) no-repeat 0 0;height:26px;display:block;}
.csb.cur{background-position: -44px 0pt; width: 16px;}
.csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;}
.csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;}
.csb.ch{background-position: -60px 0pt; width: 16px;}
#nav td{padding:0;text-align:center}
]]></b:skin>
Step 2 : Aplly Javascript
Find This :
</body>
Replace with :
<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;
<script src='http://accordion-template.googlecode.com/svn/trunk/jsnavigoogle-packer.js' type='text/javascript'></script>
</body>
Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation
Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)
Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)
'data:label.url'
and Replace with this
'data:label.url + "?&max-results=7"'
Change 7 base on how many post every page
Alhamdulillah…by Catur
Another post about the page navigation for Blogger :
28 Responses to “Page navigation for Blogger with Google style using New Script”
Leave a Reply
Code above is missing…
I like Your Article about Page navigation for Blogger with Google style using New Script | Blogger Templates and Tricks by Abu Farhan Perfect just what I was looking for! .
why i can’t make it? please help me ):
heya i am using this on my blog thankx a lot!
but how to increase the size of “G o o o o g l e”
i want it big ,………thankx a lot!
Thanks MR.Farhan I like Your CODE
You’re my inspiration … Your is the best and the first, But Iam Just Limited Edition … :D
one again thanks
visit my site….
Thank you. this was such a nice post. I am going to apply this feature on my blog. Thank you again :)
amooo google…
Assalamualaikum warahmatullah,
Saya dah cuba berkali kali tapi tak menjadi jugak bapak…
Wa’alaikumsalam
Errornya apa? alamatnya apa?
makasi mas dan saya senang telah membaca article ini.,,,
cool pagination. . . i like it so much, ,
Thank, your astuce in impect
salam abu Farhan,
macam mana cara nak tukarkan perkataan *Gooooogle* kepada perkataan lain?
trima kasih :)
Ganti dari gambar di css
Kalau bisa lebih detail dong om … makasih sebelumnya
Wihh.. I’ll try this..
Thx 4 share,, Mas :D..
So usefull ^^
Furrealz? That’s mraelvosuly good to know.
بارك الله فيك أخي أبو فرحان لقد تم تركيب هذا التطبيق على مدونتي http://learnandearnanything.blogspot.com/ بنجاح
أتمنى لك دوام الصحه و أنتظر أشياء جديدة في مستقبل قريب بإذن الله
wahh.. om farhan kliatan lagie,..!!
Postingannya baguss..!! thx om farhan.
sukses selalu..!!
Thanks for share :) Update terus kang :) I like it :)
assalamu’alaikum.. so you’re back… pa kbr pak?
btw, yg script mp3 player alamat yg dulu keknya dah g bisa lg yah? Ada ganti yg baru? warmest regards for ur family :)
Wa’alaikumsalam
Alhamdulillah baik, ga juga yg posting mahasiswa ku.
Mp3 playernya mati karena google codenya mati, nanti upload lagi deh
stylenya mantap kang abu….
[...] Page navigation for Blogger with Google style using New Script [...]
krennn bosss
good information, very helpful. Thanks.. Buat Info Hadir disini :)
numpang lewat bang farhan…
moga sukses …
nitip satu link, boleh ya!!!
http://danoefa.blogspot.com/
makasih
jazakallah
terima kasih buat updatenya :)
semoga terus berkarya ya :)