Line Behind Post Title And Date | Code Your Blog

nedeľa 14. februára 2016


Hello ♡♡
V prvom rade verím, že si užívate krásnu slnečnú nedeľu a dnešný Valentín oslavujete či už so svojou druhou polovičkou alebo aspoň pri tabuľke čokolády a dobrom filme.
Čiaru za názvom článku ste už určite niekde videli, ja ju mám momentálne za dátumom, no princíp je v podstate ten istý. Mne osobne sa to celkom páči, a ak aj vám a chcete to aj vo svojom designe, dnes vám ukážem - na prvý pohľad možno trochu dlhší, ale predsa jednoduchý a rýchly postup.

Behind Post Title
01. Prihláste sa na svoj blog, v ľavom menu nájdite Šablóna a kliknite na Upraviť kód HTML.
02. Kliknite dovnútra veľkého okna s kódmi, stlačte CTRL + F a do vyhľadávača zadajte:

post-title entry-title

Pozor! V šablóne to budete mať dvakrát, takže stlačte ENTER, aby ste sa dostali k druhému kódu.

Teraz by ste mali vidieť čosi také:
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
    <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
  <b:else/>
    <data:post.title/>
  </b:if>
  </h3>
</b:if>

03. Po kóde <h3 class='post-title entry-title' itemprop='name'> vložte <span>.
04. Pred kód </h3> vložte </span>.
05. Znova kliknite dovnútra okna s kódmi, stlačte CRTL + F a do vyhľadávača zadajte:

]]> </b:skin>

06. Pred tento kód vložte:

h3.post-title::before {
border-top: 1px solid #666666; /* zmení veľkosť a farbu čiary */
margin-top: 10px; /* posúvanie čiary hore a dole */
content: " ";
position: absolute;
left: 0;
right: 0;
z-index: 0; }

h3.post-title span {
background: #ffffff; /* farba pozadia za názvom príspevku */
padding: 0 20px; /* miesto okolo textu */
position: relative;
z-index: 1 !important;
margin: 0 auto; }

.post-title.entry-title { text-align: center; }

Pozor: čo je červenou môžete meniť; modrou sú moje poznámky.

07. Uložte šablónu a hotovo

Behind Date
01. V návode vyššie preskočte až na krok 05. (Čas pridania príspevku už v šablóne v sebe <span> a </span> má.)
02. Pred ]]> </b:skin> vložte:

h2.date-header::before {
border-top: 1px solid #666666; /* zmení veľkosť a farbu čiary */
margin-top: 10px; /* posúvanie čiary hore a dole */
content: " ";
position: absolute;
left: 0;
right: 0;
z-index: 0; }

h2.date-header span {
background: #ffffff; /* farba pozadia za názvom príspevku */
padding: 0 20px; /* miesto okolo textu */
position: relative;
z-index: 1 !important;
margin: 0 auto; }

.date-header {text-align: center;}

Pozor: čo je červenou môžete meniť; modrou sú moje poznámky.

03. Uložte šablónu a hotovo!

Ak vám niečo nebude fungovať, tak mi napíšte.
Kontakt nájdete v menu.

Aký návod by ste chceli vidieť najbližšie?

with all love,

23 komentárov

  1. Takové návody mám moc ráda, jenže jsem strááášně nešikovná!

    OdpovedaťOdstrániť
  2. Jsi moc šikovná! :) Já se na nějakou změnu designu na blogu chystám už od Vánoc, ale stále se mi nedaří začít, nebo respektive nevím, od čeho začít.. ale nějakou změnu už by to chtělo :)

    Another Dominika

    OdpovedaťOdstrániť
  3. The post is fantastic! I love it:)
    Happy St. Valentine's Day!!

    theprintedsea.blogspot.com

    OdpovedaťOdstrániť
  4. Znovu, veľký obdiv, že toto všetko dokážeš. Mne všetky tie kódy prídu tak veľmi zložité a nevyznám sa v nich. Naozaj sa snažím čoraz viac sa o nich dozvedieť a učiť sa, aby aj môj blog nejak vyzeral haha :D

    OdpovedaťOdstrániť
    Odpovede
    1. btw. viem, že je to určite smiešna otázka, ale už asi týždeň/dva sa pokúšam prísť na to, ako meníš v článku fonty určitých slov. naozaj by ma to zaujímalo ako na to. :D

      Odstrániť
  5. Super nápad, ale s HTML kódy si nerozumím, tak třeba mi přítel pomůže :D
    Beauty by K.

    OdpovedaťOdstrániť
  6. Super návod.. veľmi rada si čítam takéto články a aj ja sama na internete nie raz hľadám takéto návody na blog, no väčšinou ich nájdem v angličtine (v mojom prípade to nie je problém, ale pre niekoho iného môže byť) a som rada, že sa takéto tutoriály dostávajú aj na slovenské/české blogy :DD
    Caroline

    OdpovedaťOdstrániť
  7. Skvelé, niekedy sú tie návody jednoduché, že ich pochopím aj z AJ, ale niekedy mi dá riadne zabrať kým na niečo prídem, takže viac takýchto článkov! :)

    OdpovedaťOdstrániť
  8. Skvelé. Takéto návody na blog mám rada (:
    Daniela

    OdpovedaťOdstrániť
  9. Rada sa síce pozerám na takéto návody a hovorím si, že čo všetko by som dokázala a ako by to potom dobre vyzeralo. Potom si spomeniem, že takéto veci sa mi zásadne nedaria na prvý raz a nejako veľa času to opravovať nemám. Stále mám na mojom blogu toho veľa na práci, tak teraz cez prázdniny si to budem opravovať a tak. A možno mi zvýši čas aj na niečo takéto iné...:)
    DominicaLand

    OdpovedaťOdstrániť
  10. Skvělý tip, čára se mi taky líbí takže děkuji za návod určitě to vyzkouším.

    NEPLECHA NA PLECHU

    OdpovedaťOdstrániť
  11. pěkně typy a moc krásný vzhled blogu, je to příjemně zorganizované....mohu se zeptat zda si děláš šablony sama a nebo si je kupuješ? a popřípadně kde? děkuju
    www.lifestylebyilu.cz

    OdpovedaťOdstrániť
  12. Jsem ráda, že někdo dělá takové návody ! :)

    OdpovedaťOdstrániť
  13. Skvelé typy ! :) myslím, že pre začiatočníkov sú skvelé ! :) ja si pamätám svoje začiatky, keď som sa babrala v html kódoch :D
    My blog : THE COLORFUL THOUGHTS

    OdpovedaťOdstrániť
  14. Jéé to je skvělé! Všeobecně si mi tvůj desing blogu moooc líbí! :) Úplně můj styl, si šikovná.

    OdpovedaťOdstrániť
  15. Toto sa mi vždy veľmi páčilo, ale nikdy som neprišla na to ako to tam mám dať, takže ďakujem za tip :) tieto tvoje blogerské how to mám veľmi rada :)

    OdpovedaťOdstrániť
  16. Neviem, či som to pochopila správne, ale myslíš tú čiaru čo je ----SUNDAY, FEBRUARY 14, 2016------?
    Ak áno, tak vždy sa mi páčila, ale zakázala som si, sa na ňu pýtať. Pretože nechcem mať formálne blog ako máš ty. Nechcem po tebe opakovať, rovnako sa mi páči horné menu, pravá časť dizajnu. Každý jeden detail na tvojom dizajne sa mi páči. A chcela by som ho mať aj ja. Ale zakázala som si to, a preto aj keď si tieto príspevky čítam, nechcem to vedieť. Radšej zostanem pri základnej šablóne blogspotu, pretože nechce kradnúť niečo, čo mi nepatrí.

    OdpovedaťOdstrániť
  17. Hrozně moc bych to chtěla, ale je možný, že přesně "]]> " v šabloně nemám? :D

    OdpovedaťOdstrániť
    Odpovede
    1. Jé, počkej - to se dává do CSS až u perzonalizace! Jupí, mám to :D :) Z tvých návodů mám hroznou radost, děkuji ti za ně! :)

      Odstrániť

Latest Instagrams

© A STYLISH BEE. Design by FCD.