wtorek, 25 października 2016

Poradnik Designu #7 Numerowanie stron i zmiana informacji o cookies.

Hej! Zauważyłam, że dawno nie było posta z serii designowej. Czas to zmienić. Zapraszam na post z dwoma ciekawymi kodami na Waszego bloga!
Numerowanie stron
1. Poniższy kod wklejamy w szablon > edytuj kod HTML tuż nad! znacznikiem </body>. Następnie przechodzimy do drugiego punktu.
<!--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-->

2. Teraz musimy dodać kod CSS, by samodzielnie określić wygląd. Wchodzimy w SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS. Wklejamy następujący tekst:

.showpageNum a {
   padding: 3px 8px;
   margin:0px 4px;
   text-decoration: none;
   color:#000000;/*kolor cyfr na przyciskach*/
   font-weight: bold;
   border:1px solid #3bb6fe;/*ramka przycisków*/
   border-radius:2px;/*zaokrąglenie rogów*/
   background:#3bb6fe;/*tło przycisków*/
}
.showpageOf {
   margin:0 8px 0 0;
   color:#cdcdcd; /*kolor tekstu "Strona 7 z 20*/
}
.showpageNum a:hover {
   border:1px solid #4082fe;/*ramka przycisku po najechaniu myszą*/
   border-radius:2px;/*zaokrąglenie rogów*/
   color:#cccccc;/*kolor cyfr na przyciskach po najechaniu myszą*/
   font-weight: bold;
   text-decoration: none;
   background:#4082fe;/*kolor tła przycisku po najechaniu myszą*/
}
.showpagePoint {
   color:#ffffff;/*kolor cyfr na aktywnym przycisku*/
   padding: 3px 8px;
   margin: 2px;
   font-weight: bold;
   border:1px solid #001aff;/*ramka aktywnego przycisku*/
   background:#001aff;/*kolor tła aktywnego przycisku*/
   border-radius:2px;/*zaokrąglenie rogów*/
   text-decoration: none;
}

span.post-labels, span.post-labels a {
    display: none;
}

I gotowe! W tekście są dodane komentarze ułatwiające Wam pracę. Ja przekształcając ten kod stworzyłam coś takiego:


Zmiana informacji o cookies
Podany kod wklejamy w HTML nad znacznikiem </head>. W pogrubionych miejscach trzeba wpisać własny tekst. Żeby sprawdzić efekt należy wejść na swojego bloga w oknie incognito. 

<script type='text/javascript'> cookieOptions = {msg: &quot;Na tej stronie rozdajemy pyszne ciasteczka. Mam nadzieję, że Ci zasmakują! Jeśli chcesz możesz też przeczytać ich skład. Spokojnie, nie są tuczące :)&quot;, close: &quot;Proszę o ciasteczko!&quot;, learn: &quot;Skład ciasteczek&quot;}; </script>

Informacja o cookies
Akceptacja ciasteczek
Więcej informacji


Mam nadzieję, ze post okaże się przydatny. Lubicie się bawić kodami? Standardowo zapraszam do obserwacji, komentowania i udostępniania. Do zobaczenia już za tydzień! 

17 komentarzy:

  1. Ta druga porada mnie zainteresowała i chyba wkrótce taka zmiana zaistnieje na moim blogu :)

    typoweblog.blogspot.com

    OdpowiedzUsuń
  2. Niezwykle przydatne info. Zastosuję chyba w najbliższym czasie myk o ciasteczkach :)

    Pozdrawiam cieplutko;) Tak Po Prostu BLOG Będzie mi miło jak zajrzysz do mnie :)

    OdpowiedzUsuń
  3. Uwielbiam takie poradniki, lubię udoskonalać swojego bloga! Skorzystam z porad zwłaszcza, że jeszcze się z takimi instrukcjami nie spotkałam :) Dzięki wielkie!

    Pozdrowionka,
    b l a c k e l e y

    OdpowiedzUsuń
  4. Nie lubię się bawić kodami.Przydatny post na pewno skorzystam.

    http://weruczyta.blogspot.com/

    OdpowiedzUsuń
  5. Dla mnie to i tak było, jest i pozostanie czarną magią. Ale pewnie wielu osobom się przyda taki post :P
    mój blog, hooneyyy

    OdpowiedzUsuń
    Odpowiedzi
    1. Też tak kiedyś myślałam! Gdy widziałam takie posty od razu uciekałam! Jednak zaczęłam się w to zagłębiać i tak jakoś wyszło :D

      Usuń
  6. Jak dla mnie zbyt skomplikowane.
    http://evildivination.blogspot.com/

    OdpowiedzUsuń
  7. Te poradniki są świetne zwłaszcza dla osób, które chciałabym same pokombinować, a nie potrafią!
    Pozdrawiam.


    Millie Matyska(klik)

    OdpowiedzUsuń
  8. O jak ja dawno sie nie bawiłam z kodami. Takie posty są bardzo przydatne :)
    Mój blog - Klik

    OdpowiedzUsuń
  9. Super, że robisz takie poradniki, na pewno przydadzą się osobom, które mają problem z wyglądem bloga ;)
    Obserwuję!

    BY-KAYLA-BLOG.BLOGSPOT.COM-KLIK

    OdpowiedzUsuń
  10. What's this code about? We used to have programing in school, but I've always sucked at it ;P

    xx

    d'star

    *d'star*

    OdpowiedzUsuń
  11. Świetny poradnik, bardzo przydatny :) Całe szczęście w w gimnazjum miałam informatykę, więc nie byłam kompletnie zielona w html :)
    Pozdrawiam :*
    http://natforart.blogspot.com/

    OdpowiedzUsuń

♥ Dziękuję za każdy komentarz ♥
♥ Napisz coś wartościowego ♥
♥ Nie ma nic złego w krytyce, o ile jest konstruktywna ♥
♥ Nie komentuj samych zdjęć, pamiętaj że oprócz nich jest też tekst ♥
♥ Każdy obserwator ma miejsce w moim serduszku ♥