4/01/2016

PORADNIK: DESIGN BLOGA DIY


Nie wykonuję design'ów! Nie wykonuję design'ów! Nie wykonuję design'ów! Mimo, że wszędzie o tym piszę, mówię, dosłownie 'trąbię' i informuję to i tak ciągle dostaję od Was wiadomości odnośnie tej właśnie kwestii. Nie chcąc pozostać wobec Was obojętna jakiś czas temu rozpoczęłam serię poradników z DIY Design'em bloga, a jako, że coraz częściej pytacie jak zrobić na blogu to, czy tamto, jakiego kodu użyć na dany element, a Wasze nurtujące pytania powtórzyły się już kilkakrotnie, stwierdziłam, że najwyższy czas, napisać kontynuację owych instrukcji. Mam nadzieję, że ten post okaże się przydatny i stworzycie dzięki niemu wymarzony wygląd bloga!


Wchodzimy kolejno SZABLON > EDYTUJ KOD HTML, wyszukujemy </body> i poniżej wklejamy kod:

<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,{})) //]]>

Przechodzimy do SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS i wklejamy kod:
.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;}
Zapisujemy i gotowe!
Tutaj nie ma żadnej filozofii, wystarczy wejść kolejno: SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS i wkleić 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 ;}
Na samym początku dodajemy ikonki społecznościowe na boczną kolumnę, tak jak w >TYM< poradniku. Aby przenieść ikonki na pasek stron wchodzimy kolejno SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS, wklejamy kod:
#HTML1 {position: fixed; top: 8px; right30px ; z-index: 5000; }
Następnie sprawdzamy jakiego selektora użyć, czyli jaka cyfra powinna stać po '#HTML'. Wpisujemy różne, aż w końcu trafimy na tą właściwą. Jeśli chcemy, by ikonki poruszały się z paskiem stron, zostawiamy część zaznaczoną na biało, jeśli wolimy, by znajdowały się normalnie w wybranym miejscu- usuwamy tę część. Aby odpowiednio umiejscowić ikonki zmieniamy liczbę pikseli w kodzie, możemy również wyśrodkować (center) lub wyrównać do prawej (right), albo do lewej (left) strony.
Najpierw tworzymy grafikę 'Czytaj dalej' w dowolnym programie graficznym i zapisujemy na dysku. Następnie otwieramy program do hostowania obrazków (np. imageshack) i kopiujemy adres URL grafiki. Otwieramy Bloggera. Teraz otwieramy SZABLON > EDYTUJ KOD HTML. Wyszukujemy w kodzie fragment:
<b:if cond='data:post.hasJumpLink'>
i zastępujemy występujący pod nim element:
<div class=’jump-link’> <a expr:href=’data:post.url + &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a> </div> </b:if> 
na:
<div class=’jump-link’> <a expr:href=’data:post.url + &quot;#more&quot;’><p align=’center’><img border=’0′ src=’URL DO OBRAZKA'/></p> </a> </div> </b:if> 
Zapisujemy i cieszymy się efektem!

Tworzymy grafikę 'Starsze/ nowsze posty' oraz 'Strona główna' według uznania w dowolnym programie graficznym. Pobieramy adres URL grafiki z programu do hostowania obrazków. Otwieramy SZABLON > EDYTUJ KOD HTML. Aby zastąpić odnośnik 'Nowsze posty' szukamy następującego fragmentu:
<data:newerPageTitle/>
i zamieniamy go na:
<img src=’URL OBRAZKA NOWSZE POSTY’/>
Aby zastąpić element 'Strona główna' wyszukujemy:
<data:homeMsg/> 
i zamieniamy na:
<img src=’URL OBRAZKA STRONA GŁÓWNA’/>
Aby zastąpić element 'Starsze posty' wyszukujemy:
<data:olderPageTitle/>
i zastępujemy na:
<img src=’URL OBRAZKA STARSZE POSTY’/> 
Zapisujemy, gotowe!
UWAGA! Przed wprowadzeniem jakichkolwiek zmian trzeba pamiętać o zapisaniu kopii zapasowej, gdyby coś poszło nie po naszej myśli. 
Aby łatwo wyszukać daną frazę w kodzie HTML wciskamy CTRL+ F i wpisujemy ją w okienko, które wyskoczy, następnie klikamy na ENTER.
Każdy kod należy odpowiednio zmodyfikować, tak aby pasował do danego bloga. Możemy zmieniać dowolnie wartości liczbowe oraz kolory (paleta kolorów HTML >klik<).





Na końcu chciałabym powiadomić Was, że przy zamówieniach powyżej $55 Shein oferuje 40% rabat! Koniecznie sprawdźcie >tutaj<
(BĘDĘ WDZIĘCZNA ZA POKLIKANIE)

55 comments:

  1. Bardzo przydatny i praktyczny post! Dziękuję :*

    ReplyDelete
  2. Świetny post! Ja ciągle szukam takiego idealnego szablonu , ale nigdzie nie mogę znaleźć .Dlatego skorzystam z twoich kodów :D A przy okazji poklikałam w linki :)
    http://veryclassyfashion.blogspot.com/

    ReplyDelete
  3. Bardzo podobają mi się takie posty. Czekam na więcej. Przydadzą mi się jakieś pomysły, ponieważ jeszcze nie znalazłam idealnego wyglądu bloga. Hmmm może jakiś post o nagłówku bloga ?

    ReplyDelete
    Replies
    1. Postaram się w najbliższym czasie zrobić poradnik o nagłówku ;)

      Delete
  4. Genialny post! Bardzo przydatny :)

    By-Aleksandraa.blogspot.com

    ReplyDelete
  5. Fajny post :) napewno mi się przyda. Oczywiście Poklikałam

    ReplyDelete
  6. To z numerowaniem stron naprawdę ciekawy pomysł, ostatnio otrzymałam ten top w paski, naprawdę polecam :D

    Pozdrawiam,Madda
    blog ->klik

    ReplyDelete
  7. Świetny poradnik !
    Ostatnio zmieniłem sobie desing bloga i jestem z niego bardzo zadowolony :)
    http://maasonpl.blogspot.com/

    ReplyDelete
  8. poklikane, świetne rady, przyda się numerowanie stron :)
    http://mypink-glasses.blogspot.com/

    ReplyDelete
  9. Bardzo przydatny post! Moze sama z czegoś skorzytam. :* Zdjecia jak zwylke profesjonalne! Pozdrawiam.

    ReplyDelete
  10. Świetny post, muszę skorzystać raz z Twoich rad :)

    ReplyDelete
  11. JAk ja lubię takie poradniki. fAJNIE, ze robisz takie posty.

    http://moniqa-blog.blogspot.com/

    ReplyDelete
  12. Dopiero zaczynam blogowanie, więc na pewno Twoje instrukcje mi się przydadzą :) Pozdrawiam i zapraszam: http://dramabeautyy.blogspot.com

    ReplyDelete
  13. Na moim blogu chyba szykują się zmiany ;) Bardzo ciekawy i przydatny post :D
    Pozdrawiam :* http://felicja-bookaholic.blogspot.com/

    ReplyDelete
  14. Świetnie piszesz, zapraszam do siebie
    http://magda-ola.blogspot.com/

    ReplyDelete
  15. Bardzo przydatny dla mnie post. Wpadnę tutaj jeszcze raz, kiedy zabiorę się za remont wyglądu :)

    ♡ all-pastel-world.blogspot.com ♡ KLIK ♡

    ReplyDelete
  16. Bardzo przydatne rady. Znaam te kody, ale dla innych osób, początkujących ten post jest bardzo wartościowy :D

    rilseee.blogspot.com

    ReplyDelete
  17. Gratuluję Ci takiego zaangażowania w blogowanie :D
    Trzymam za Ciebie kciuki :D

    ReplyDelete
  18. Oo pojawiło się Tu wiele kodów, o których nie wiedziałam, ale i takie, które na pewno przydadzą się początkującym! Super, że postanowiłaś je tu zebrać i pomóc innym :)
    Poklikałam.

    http://natasiak.blogspot.com/2016/04/to-nasza-wojna.html

    ReplyDelete
  19. Bardzo przydatny post, w wolnej chwili przejrzę jeszcze raz i zastosuję :)

    ReplyDelete
  20. Bardzo podoba mi się Twój blog :)

    ReplyDelete
  21. Lubię takie posty, bo nie jestem mistrzem w desingach
    naoffashion-click

    ReplyDelete
  22. Super post i świetny poradnik! :)

    Obserwuję i zapraszam do siebie:

    http://karox96.blogspot.com/

    ReplyDelete
  23. Bądźmy szczerzy- jestem strasznie słaba, jeśli chodzi o HTML. Ale myślę że wpis przyda mi się na przeszłość ^^

    nellyyy-blog.blogspot.com

    ReplyDelete
  24. O! Przyda mi się najbardziej własna grafika w "Starsze post...", bo nie mogłam nigdzie tego znaleźć :)

    Pozdrawiam,
    >>>http://w-pogoni-za-idealem.blogspot.com/<<<

    ReplyDelete
  25. Przydatny post! Widać, że się napracowałaś! Chyba skorzystam z twoich rad! Oczywiście poklikałam! :)

    ReplyDelete
  26. Bardzo się cieszę, że napisałaś kolejny post z tej serii!
    Poklikałam ;*
    1- 16.99$ 2- 13.19$ 3- 7.90$ 4- 8.99$
    http://vicci-blog.blogspot.com/

    ReplyDelete
  27. Super, że zrobiłaś posta tego typu, jest bardzo przydatny!
    myteensweetlife.blogspot.com

    ReplyDelete
  28. Bardzo przydatne porady, lubię takie posty :)

    ReplyDelete
  29. Super post, na pewno mi sie przyda;)
    A co do bloga to łał naprawdę mega!

    ReplyDelete
  30. Teraz wiem jak edytować! Naprawdę ta seria jest świetna i będę czytać ją częściej :)
    Pozdrawiam <3
    http://xemijlyx.blogspot.com/?m=1

    ReplyDelete
  31. Porady bardzo mi się lrzydadzaw, a zwłaszcza to, jak zrobić ilony stron na pasku stron. Dawno chciałam tak zrobić, ale nie wiedzialamw jak ;)

    ReplyDelete
  32. Świetny post, na pewno mi się przyda. :)
    http://zanetta44.blogspot.com

    ReplyDelete
  33. Kody są jak najbardziej przydatne :) Chciałam wykorzystać ten na datę, ale chyba przez chorobę jestem tak nieogarnięta :D

    INNA MYŚL [blog] | FILMIKI

    ReplyDelete
  34. Świetny post! Osobiście sama pamiętam moje pierwsze szablony, takie tam niewypały.
    W miarę praktyki zaczęły stawać się coraz lepsze. Obecnie postawiłam na minimalizm.
    Poza tym nie dziwię się, że często Cię pytają o design. Po prostu Twój blog ma bardzo, bardzo dobry.

    Miłego dnia!

    ~subiektywna-sasha.blogspot.com

    ReplyDelete
  35. Wiele świetnych wskazówek. Myślę, że nawet ja sobie z tym poradzę ;)

    Pozdrawiam!

    skoknamiasto.pl

    ReplyDelete
  36. Jestem kompletnie zielona w tych sprawach, także myślę, że mi się to przyda! :)

    Jull.pl - klik!

    ReplyDelete
  37. Mega przydatny post, wiele z Takich wskazówek na pewno mi się przyda, wrzucam post w zakładki, żebym zapamiętała :)

    ReplyDelete
  38. Świetny post. Od dłuższego czasu szukałam informacji na ten temat ^^
    Pozdrawiam. wy-stardoll.blogspot.com

    ReplyDelete
  39. Bardzo przydatny post! Ja w prawdzie już te rzeczy wiedziałam, ale na pewno innym się przyda i stworzą coś super!

    MÓJ BLOG

    ReplyDelete
  40. Na pewno się przydadzą! Bardzo czytelnie napisane!
    pelnapasji.blogspot.com

    ReplyDelete
  41. Szkoda, że nie wykonujesz designów bloga. :) Jednak no cóż, rozumiem Cię.
    Dzięki za post, przydatny. Myślę, że kiedyś wykorzystam jeden z tych pomysłów. :)
    Oczywiście poklikane:
    16.99 13.19 7.90 8.99
    Pozdrawiam i zapraszam do siebie: http://siatkareczkablogaq.blogspot.com/

    ReplyDelete
  42. bardzo przydatny post :)

    Zapraszam do siebie senjakmarzenie.blogspot.com

    https://www.facebook.com/senjakmarzenie/

    ReplyDelete
  43. Dzięki za porady - przydadzą się :)
    Super ubrania!

    High Five? :)
    http://fridayp.blogspot.com/

    ReplyDelete
  44. Świetny poradnik, naprawdę bardzo pomocny :)
    Śliczne zdjęcia!
    http://everything-by-me.blogspot.com/

    ReplyDelete
  45. świetny post i nie wiedziałam że świetnie piszesz :D pozdrawiam :D

    ReplyDelete
  46. Świetny post. Na pewno skorzystam z rad tylko muszę znaleźć więcej czasu by się w to dokładnie pobawić
    http://mydreamand-i.blogspot.com/

    ReplyDelete
  47. Świetny poradnik ! Na pewno skorzystam z twoich porad i dam znać ! :)
    http://desiignyourself.blogspot.com/2016/05/wrociam-30-dni-bez-laptopa.html

    ReplyDelete
  48. Bardzo przydatny poradnik!
    Jednak jak ja tak samo robię ikonki społecznościowe to razem z nim przesuwa się do góry cała kolumna boczna.
    Wiesz może co z tym zrobić? :(

    ReplyDelete

Dziękuję za każdy komentarz i obserwację.