Numrerad sidnavigering
Har ni tänkt på att det längst ner, efter alla inlägg, står äldre inlägg. Där kan man ju klicka sig bakåt i arkivet till äldre inlägg. Men varför inte styla denna länk med siffror istället?
Allt du behöver göra är att kopiera följande kod och klistra in i en html-gadget, under layout. Du kan även ändra färger m m enligt instruktioner nedan.
.showpageNum a {
color:#333333; - färg på knapparna
border: 1px solid #cccccc; - färg på ramen runt knapparna
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF; - bakgrundsfärg
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333; - färg på knapparna, när man håller musen över
border: 1px solid #cccccc; - färg på ramen runt knapparna, när man håller musen över
padding:3px 7px;
background-color:#cccccc; - bakgrundsfärg, när man håller musen över
margin:0 3px;
var numshowpage=3; - antal sidor för och efter aktuell sida
var postperpage =5; - antal inlägg per sida
var upPageWord="<<"; - Kan bytas ut om valfria ord, t ex äldre, nyare, prev, next osv
var downPageWord=">>"; - Kan bytas ut om valfria ord, t ex äldre, nyare, prev, next osv
Koder för alla färger hittar du hos t x colorpicker.com
Lycka till!
Denna kod kommer ursprungligen från 24work.blogspot.com
Allt du behöver göra är att kopiera följande kod och klistra in i en html-gadget, under layout. Du kan även ändra färger m m enligt instruktioner nedan.
<style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {
color:#333333;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #cccccc;
padding:3px 7px;
background-color:#cccccc;
margin:0 3px;
}
.showpageOf {
color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}
</style>
<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var numshowpage=3;
var postperpage =5;
var upPageWord="<<";
var downPageWord=">>";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {
color:#333333;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #cccccc;
padding:3px 7px;
background-color:#cccccc;
margin:0 3px;
}
.showpageOf {
color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}
</style>
<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var numshowpage=3;
var postperpage =5;
var upPageWord="<<";
var downPageWord=">>";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>
.showpageNum a {
color:#333333; - färg på knapparna
border: 1px solid #cccccc; - färg på ramen runt knapparna
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF; - bakgrundsfärg
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333; - färg på knapparna, när man håller musen över
border: 1px solid #cccccc; - färg på ramen runt knapparna, när man håller musen över
padding:3px 7px;
background-color:#cccccc; - bakgrundsfärg, när man håller musen över
margin:0 3px;
var numshowpage=3; - antal sidor för och efter aktuell sida
var postperpage =5; - antal inlägg per sida
var upPageWord="<<"; - Kan bytas ut om valfria ord, t ex äldre, nyare, prev, next osv
var downPageWord=">>"; - Kan bytas ut om valfria ord, t ex äldre, nyare, prev, next osv
Koder för alla färger hittar du hos t x colorpicker.com
Lycka till!
Denna kod kommer ursprungligen från 24work.blogspot.com
Åh vilket bra tips.
ReplyDeleteTack för en bra instruktion.
Beem
Jättebra!
ReplyDeleteDet finns fler tips i forumlänken, som nämns nederst i inlägget.
Kanon & jag som har "boxar" lade in detta i samma gadget som "Min status" så slapp jag få en tom box hihi :)
ReplyDeleteTack! La genast till denna gadget, så snyggt det blev!!
ReplyDeleteTack, vilken himla bra funktion!
ReplyDeleteTog bort min igen tänkte fösöka på Svensk text ;)
ReplyDeleteMen en riktigt fin & bra funktion/Kram
Tusen tack för en bra sida. Funkade lätt med dina enkla instruktioner.
ReplyDeleteAnnelie
Väldigt väldigt trevligt tips det här.
ReplyDeleteTackar så enormt mycket.
Hälsningar,
Baaartil
Hej!
ReplyDeleteJag har en skitsnygg design på min blogg MEN jag har ingen knapp "äldre inlägg" eller sidnumrering alls! Vet inte hur jag ska göra (använder blogg.se)
Jag har fixat så det bara får plats max 5 inlägg på starsidan, men eftersom man inte kan gå tillbaka i äldre inlägg så "försvinner" min äldre inlägg.
Hur ska jag göra?
Tack på förhand!
Emmagalen