HOW TO MAKE LOOK OF YOUR BLOG?

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> <!--Koniec kodu na numerowane strony-->

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. 

73 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Świetny post. Przynajmniej wszystko będzie w jednym miejscu, dostępne bez problemu. Na pewno przyda się to dużej ilości osób. :)

    http://aleksandra-brycka.blogspot.com/

    ReplyDelete
  3. Bardzo przydatne!

    toofussy.blogspot.com

    ReplyDelete
  4. Świetny pomysł na notkę.
    Na pewno większości się przyda.
    Pozdrawiam, nataa-natkaa.blogspot.com

    ReplyDelete
  5. Dzięki, wykorzystałam dla swojego bloga!! :*

    miss-and-jess.blogspot.com

    ReplyDelete
  6. To z numeracją stron jest świetny wygląda bardzo ładnie :)

    http://londonkidx.blogspot.com/

    ReplyDelete
  7. Bardzo przydatne porady! Oby więcej postów tego typu :)
    Pozdrawiam, MAJA-RUSEK.BLOGSPOT.COM.

    ReplyDelete
  8. Świetny post, kody mi się na pewno przydadzą! :)

    ONLYMERY55.BLOGSPOT.COM

    ReplyDelete
  9. Mam mały problem z wgraniem kody z kreskami przy dacie, zlewają się ze sobą i tworzą ciaglą linie. Co zmienić w kodzie zeby było okay?

    ReplyDelete
  10. Przydatne!

    Zapraszam na nowy post! Jeśli Ci się spodoba będzie mi bardzo miło, jeśli skomentujesz i zaobserwujesz mój blog. :)
    Sprawdź też KONKURS u mnie!
    >> ALEXANDRAK-BLOG.BLOGSPOT.COM <<




    ReplyDelete
  11. Mega przydatne, czekam na więcej takich poradników :)
    poleksandra.blogspot.com

    ReplyDelete
  12. oo, przyda sie!:)

    http://feel-that-moments.blogspot.com/

    ReplyDelete
  13. Very interesting and useful article! Thank you! :)

    XoXo, Dasha :*
    My blog "Demilla". Welcome!

    ReplyDelete
  14. Świetnie wszystko wytłumaczyłaś! :) Bardzo przydatny post!
    http://everything-by-me.blogspot.com/

    ReplyDelete
  15. Bardzo przydatny post :)
    http://my-natalias-place.blogspot.com/

    ReplyDelete
  16. Przydatny post, ja się jednak w ogóle nie znam na tych wszystkich kodach i który mam jak przekształcić, by na przykład rozszerzyć czy zwężyć coś.. Dlatego korzystam ze stron, które udostępniają szablony. Być może mało oryginalne, bo zawsze można trafić na blog z takim samym szablonem, ale to dobre wyjście dla tych, co się na tym nie znają.

    ReplyDelete
  17. Bardzo przydatny post! Szczególnie dla mnie i na pewno jeszcze do niego wrócę :)

    crejzzzooll.blogspot.com

    ReplyDelete
  18. Post strasznie przydatny, bo długo szukałam tych instrukcji i nie mogłam ich znaleźć :)

    cvte-olga.blogspot.com

    ReplyDelete
  19. Świetny post, masz bardzo fajny blog a Twoje wpisy są naprawdę bardzo interesujące :) !
    ja juz obserwuje i zapraszam do mnie
    nowy post
    milentry-blog

    ReplyDelete
  20. Świetnie się czytało :)
    Obserwacja za obserację?
    Zacznij
    http://malwinabeczek.blogspot.com/

    ReplyDelete
  21. Super, że wstawiłaś te kody, na pewno z nich skorzystam :) jesteś świetna w robieniu designów!
    via-martyna.blogspot.com

    ReplyDelete
  22. Super pomocne kody! Jak bedę znowu podrasowywać wygląd bloga to wpadne na pewno!
    Zapraszam do siebie, nowy post! Pozdrawiam
    MÓJ BLOG-KLIIK

    ReplyDelete
  23. Przydatne informacje, zawsze miałam problem z tymi kodami :)

    http://ab-photographs.blogspot.com/

    ReplyDelete
  24. Beautiful photos and I love love love your style of writing! Keep it up!

    PS: Follow for follow? I always follow back! Just let me know!

    SYDNEYSLEEK.COM - KLIK!

    ReplyDelete
  25. BARDZO przydatne kody, kiedyś na pewno z nich skorzystam :D/K

    ReplyDelete
  26. pomocny post :)

    http://belief-hope-and-love.blogspot.com/

    ReplyDelete
  27. Bardzo lubię edytować wygląd mojego bloga, szczególnie za pomocą kodów CSS, dzięki którym mamy dużo możliwości :)

    ReplyDelete
  28. Przydatne kody :) Dla kogoś, kto jest kompletnie zielony w tych sprawach (np. ja), na pewno pomogą :)

    http://tournerlemonde.blogspot.com/

    ReplyDelete
  29. Bardzo pomocny post. :)

    seendixsecret.blogspot.com

    ReplyDelete
  30. Pomocny post :) Na pewno wiele osób skorzysta.. ;) Śliczny design


    wiktoriakarnecka.blogspot.com <---KLIK ;)

    ReplyDelete
  31. Najbardziej może mi się przydać kod z datą :). W jaki sposób wyszukujesz takich kodów? Wpisujesz frazy po angielsku?
    Pozdrawiam
    DifferentDiamond klik

    ReplyDelete
  32. Patrycja, stokrotnie dziękuję! Bardzo brakowało mi tych kodów :D
    Bonia Blog

    ReplyDelete
  33. O zgrozo! Tyle się naszukałam tych kodów, a tu proszę! Pewnie kiedyś skorzystam ;3

    Wróciłam na bloga! Zobacz jak teraz u mnie jest. :) KLIK

    ReplyDelete
  34. Świetny post. Na pewno się niektórym przyda :)
    Mój blog-klik

    ReplyDelete
  35. Większość kodów już znałam, ale mimo wszystko przydatny post.
    tyglysia.blogspot.com(KLIK)

    ReplyDelete
  36. OOO! Nam się przyda bardzo! Dopiero zaczynamy i jak na razie to dla nas czarna magia ;p

    ReplyDelete
  37. Przydatny post!
    Jak będę zmieniać wygląd to na pewno te kody mi pomogą. ;)
    BLOG

    ReplyDelete
  38. ten drugi kod, na pewno mi się przyda jak będę zmieniać design

    http://dorota-kotlarz.blogspot.com/

    ReplyDelete
  39. Oj, wielu osobom się na pewno przyda! Świetnie wszystko ujęłaś :)

    minimalistyczny.blogspot.com

    ReplyDelete
  40. Bardzo pomocny post! :*

    rilseee.blogspot.com

    ReplyDelete
  41. Przydatne, osobom które chcą coś zmienić na swoim blogu :)
    Ja już na szczęście swój wymarzony design mam!
    WHAT DO YOU MEAN? - zapraszam!

    ReplyDelete
  42. Przydatny post :)
    http://julie-juliees.blogspot.com/

    ReplyDelete
  43. Dziękuję bardzo za ten post, na pewno wykorzystam zawarte w nim porady.
    Pozdrawiam i zapraszam do mnie :)
    http://marysiawojcik.blogspot.com/

    ReplyDelete
  44. Mega przydatne, dziękuję!!

    http://wiktoriaszymanska.blogspot.com/2015/11/fall-november-inspirations.html?m=1

    ReplyDelete
  45. Bardzo przydatny post. Na pewno skorzystam z niego jak będę tworzyć design swojego bloga.
    Pozdrawiam ;)
    Zapraszam do nas ;)
    smiling-sisters.blogspot.com

    ReplyDelete
  46. Wszystkie rady bardzo przydatne! :)

    pozdrawiam, ann--blog.blogspot.com

    ReplyDelete
  47. Próbowałam, ale padłam na pierwszym poleceniu, czyli znajdź znacznik. Jestem beznadziejna w tych sprawach!

    claudine-bloog.blogspot.com --> MÓJ BLOG

    ReplyDelete
  48. Przydatne rady, jednak nie jestem zbyt dobra w wykonywaniu wyglądu, albo po prostu zbyt leniwa :)
    MÓJ BLOG - KLIK :)

    ReplyDelete
  49. Ja się wiecznie męczę z wyglądem mojego bloga! Najwięcej problemów mam z paskiem menu/kart czy jak go się tam nazywa, ale mam nadzieję, że w końcu opanuję choć trochę z tych kodów css! ;)

    Mój blog- ultradefenceless

    ReplyDelete
  50. Bardzo przydatny post! Zapraszam, melodylaniella.blogspot.com

    ReplyDelete
  51. Pożyteczny post, który na pewno przyda się większemu gronu czytelników!:)
    Pozdrawiam, życzę dalszych sukcesów w blogowaniu i zapraszam do siebie, jednocześnie zachęcając do obserwacji!:)
    http://aguuuszka.blogspot.com/

    ReplyDelete
  52. Z całą pewnością przyda mi się ten post :-)

    ReplyDelete