Blogkészítési Tippek VII. - Színes Lapozó Modul
Kissé sok ideig nem jelentkeztem, de azt hiszem épp itt az ideje, hogy folytassam a tippek átadását. Ebben a cikkben azt a színes lapozó modul elkészítését mutatom meg Nektek amit a blog kezdőlapján is láthattok. Kissé bonyolultnak tűnhet azonban nem kell tőle megijedni. Csupán néhány lépés az egész.
Stílus 1.
Stílus 2.
Stílus 3.
Stílus 4.
Stílus 5.
Stílus 7.
MÉG NEM VAGYUNK KÉSZ! :) Most hozzá kell adnunk a Script-et.
Ezen rész első lépéseként a már említett Ctrl+F billentyűkombinációval keressünk rá a </body> részre a blogban.
Rögtön az előbb megkeresett rész fölé (elé) illesszük be az alábbi kódot.
1) perPage ezzel azt állíthatod, hogy hány cikk látszódjon egy oldalon
2) numPages ezzel azt állíthatod, hogy hány oldalt mutasson a lapozó modul
3) A többi pirossal kiemelt szöveg helyére azt írsz amit akarsz. Jelentésük a következő:
Kezdjük az elején. Menj a blogod szerkesztő felületére és kattints a sablon gombra, majd a "html szerkesztése" feliratra. Nem kell pánikba esni, így eléggé ijesztő dokumentumot fogunk magunk előtt látni. Ez a blogod - programozók által sokat emlegetett - forráskódja. Igen, ebben fogunk dolgozni.
Kattintsunk bele ebbe a szövegbe, vagyis villogjon ott a kurzor. Teljesen mindegy, hogy hol. Ezek után használjuk a Ctrl+F billentyűkombinációt. Így kapunk egy keresőmezőt a következőképp.
Ebbe a keresőmezőbe gépeljük be a következő sort és nyomjuk meg az ENTER gombot.
]]></b:skin>Ha ez meg van akkor következő lépésként válasszuk ki a lenti dizájnok közül a számunkra legszimpatikusabbat. Másoljuk ki a kódját és az imént megtalált ]]></b:skin> elem fölé (elé) helyezzük azt be.
Íme a dizájnok:
Stílus 1.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}
Stílus 2.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
Stílus 3.
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}
Stílus 4.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Stílus 5.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }Stílus 6.
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Stílus 7.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }FIGYELEM! Ha szeretnéd elrejteni az "Első" és "Utolsó" gombokat, akkor add hozzá az imént bemásolt stíluslaphoz a következő sort:
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
.firstpage, .lastpage {display: none;}
MÉG NEM VAGYUNK KÉSZ! :) Most hozzá kell adnunk a Script-et.
Ezen rész első lépéseként a már említett Ctrl+F billentyűkombinációval keressünk rá a </body> részre a blogban.
Rögtön az előbb megkeresett rész fölé (elé) illesszük be az alábbi kódot.
<b:if cond='data:blog.pageType != "item"'>A pirossal kiemelt részeket lehet változtatni. Mégpedig a következőképpen:
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
1) perPage ezzel azt állíthatod, hogy hány cikk látszódjon egy oldalon
2) numPages ezzel azt állíthatod, hogy hány oldalt mutasson a lapozó modul
3) A többi pirossal kiemelt szöveg helyére azt írsz amit akarsz. Jelentésük a következő:
First = Első
Last = Utolsó
Previous = Előző
Next = Következő
Ha mindent beállítottál, mentsd el a Blogod html kódját és már kész is vagy. Remélem sikerült mindent beállítanod. Ha valami probléma akadt, keress meg üzenetben a Kapcsolat menüponton belül.
Megjegyzések
Megjegyzés küldése