HOW TO MAKE LOOK OF YOUR BLOG?

November 14, 2015

Ostatnio na asku dostaję dużo pytań dotyczących jak zrobić to albo tamto na blogu, lub jakiego kodu użyć na dany element. Szczerze, to teraz mój ask składa się z samych pytań o kody css i html. Postanowiłam, że nie będę się powtarzać i stworzę post, w którym zbiorę wszystkie kody, które być może nie są lub są wam znane. Postaram się też przybliżyć, jak stworzyć idealny wygląd bloga.

Coś o co mnie wieeele pytacie, czyli jak zrobić numerowanie stron. Więc po pierwsze wchodzimy w SZABLON > EDYTUJ KOD HTML i za pomocą kombinacji CTRL+F znajdujemy znacznik </body> i wklejamy nad nim ten oto kod:

<!--Początek kodu na numerowane strony-->
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=6;
var upPageWord ='←';
var downPageWord ='→';
</script>
 
<script type='text/javascript'>
 
//<![CDATA[
 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Strona|z|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
 
//]]>

</script>

Następnym krokiem jest określenie wyglądu naszego numerownia. Do tego celu postępujemy według dalszej instrukcji. Wchodzimy w SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS. Dodajemy następujący kod CSS:

.showpageNum a {
   padding: 3px 8px;
   margin:0px 4px;
   text-decoration: none;
   color:#617B18;/*kolor cyfr na przyciskach*/
   font-weight: bold;
   border:1px solid #72811A;/*ramka przycisków*/
   border-radius:2px;/*zaokrąglenie rogów*/
   background:#B7C823;/*tło przycisków*/
}
.showpageOf {
   margin:0 8px 0 0;
   color:#999; /*kolor tekstu "Strona 7 z 20*/
}
.showpageNum a:hover {
   border:1px solid #FA084C;/*ramka przycisku po najechaniu myszą*/
   border-radius:2px;/*zaokrąglenie rogów*/
   color:#617B18;/*kolor cyfr na przyciskach po najechaniu myszą*/
   font-weight: bold;
   text-decoration: none;
   background:#FCFFEF;/*kolor tła przycisku po najechaniu myszą*/
}
.showpagePoint {
   color:#617B18;/*kolor cyfr na aktywnym przycisku*/
   padding: 3px 8px;
   margin: 2px;
   font-weight: bold;
   border:1px solid #72811A;/*ramka aktywnego przycisku*/
   background:#FCFFEF;/*kolor tła aktywnego przycisku*/
   border-radius:2px;/*zaokrąglenie rogów*/
   text-decoration: none;
}

I gotowe! Efekt u mnie wygląda następująco:

____________________________________________________________________________________________________

Tutaj posługuję się samymi kodami CSS, czyli po kolei wchodzimy w SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS i wpisujemy ten kod:

.date-header span {
background-color: #ffffff;
padding: 1px 15px;
position: relative;
text-transform: uppercase;
top: 0px;
width: 120px;
z-index: 1500 ;
}
h2.date-header {
background: none repeat scroll 0 0 #000;
height: 1px;
width: 300px;
font-weight: 590;
text-align: center;

}
h2.date-header span {
margin-left: 260px;
padding-left: 0px;
font-weight: 1650px;
text-transform: uppercase;
text-align: center;
}

.post {border-top: 1px #111 solid ;}

Voilà! Efekt jest następujący:

____________________________________________________________________________________________________

Wyśrodkowanie nagłówka:
.header-inner .widget div, .header-inner img {

margin-left:auto;

margin-right:auto ;}

Wyśrodkowanie górnego menu:

#PageList1 ul {

text-align: center ;}

#PageList1 ul li {

float: none;

display: inline ;}

Zbliżenie gadżetów:

.sidebar .Image {margin-bottom: -42px;}

Usunięcie tytułów gadżetów:
.column-right-outer h2 {

display:none ;}

.column-left-outer h2 {

display:none ;}

Wszystkie kody pochodzą z blogów graficznych, ale postanowiłam te kody przekazać również tutaj Wam. Wartości we wszystkich kodach trzeba modyfikować samodzielnie, według własnego uznania.