Related Posts | Code Your Blog

pondelok 5. októbra 2015


Keďže mi chodia nejaké otázky na ask a mail ohľadom pomoci s designom a tiež v dotazníku ohľadom zlepšenia blogu z júna ste niektorí písali, že by ste privítali články týkajúce sa designu a jeho kódovania. Netvrdím, že som nejaký expert a viem úplne všetko, ale z informatiky v škole mám celkom slušné základy, ktoré sa časom trochu zdokonalili a veľmi rada niečo posuniem ďalej.

Ak ste na nejakom blogu prvýkrát a zaujme vás nejaký článok, určite si hneď chcete prečítať niečo ďalšie z rovnakého súdka. No možno nie vždy máte čas ďalej sa hrabať v archíve a oveľa jednoduchšie je rovno kliknúť na odkaz k článku z rovnakej rubriky.
Hoci postup vyzerá pomerne odstrašujúco, budem sa snažiť vysvetliť vám to krok po kroku.

01. Prihláste sa na svoj blog, v ľavom menu nájdite Šablónu a kliknite na Upraviť kód HTML.
02. V tej zmesi kódov vyhľadajte: </head>. (Na zrýchlenie kliknite dovnútra veľkého okna [kde sú kódy] a stlačte CTRL+F.)
03. PRED </head> vložte:

<!--Začiatok podobných príspevkov-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{width:760px;}  /*veľkosť stránky - bez menu*/
#related-posts a{border: 0px}  /*rámček okolo odkazu na príspevok*/
#related-posts a:hover{background: none; color: #eeeeee;}  /*zmena farby odkazu príspevku pri ukázaní na odkaz*/
#related-posts h2{margin-top: 20px;background:none;font:15px Montserrat;padding-bottom: 5px;color:#222222;}  /*NADPIS → medzera medzi príspevkom a podobnými príspevkami | veľkosť a typ písma | medzera pod napisom | farba textu*/
#related-posts .related_img {margin:0px;width:185px;}  /*šírka miniatúry obrázku príspevku*/
#related-title {text-align:center;padding: 0px;width:185px;height:20px;color:#555;font-size:9px;font-family:Lato;}  /*centrovanie názvu príspevku | šírka názvu | výška názvu | farba názvu | veľkosť písma | typ písma*/
</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/></b:if>
<!--Koniec podobných príspevkov-->

Poznámky:
červenou farbou zvýraznený text je ten, ktorý môžete meniť a prispôsobovať si ho
nadpis je názov, ktorý vám bude zobrazovať nad podobnými príspevkami → v mojom prípade to je "Posts you might also like"
miniatúru obrázku musíte prepočítať → veľkosť stránky ÷ počet odkazov na podobné príspevky - medzera medzi jednotlivými príspevkami (odporúčam 5)
→ v mojom prípade je to teda 760 ÷ 4 - 5 = 185

04. Vyhľadajte: <div class='post-footer'>. POZOR - až to druhé (sú tam dva).
05. PRED tento kód vložte:

<!-- Začiatok podobných príspevkov s miniatúrami-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;  /*počet podobných odkazov*/
var relatedpoststitle="Posts You Might Also Like:";  /*nadpis nad podobnými príspevkami*/
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Koniec podobných príspevkov s miniatúrami-->

A to je všetko!
Ak vám tento kód nebude fungovať - napíšte mi a veľmi rada vám pomôžem.

with all love.
bee.

tumblr | instagram | ask | bloglovin

14 komentárov

  1. Super článek, máš to vážně pěkně udělaný:)
    www.sarkazelena.blogspot.com

    OdpovedaťOdstrániť
  2. Závidím ti, že ti informatika ide a že sa vyznáš v takýchto veciach, pretože ja sa pri týchto kódoch naozaj cítim ako keď sedím na hodine matematiky a vidím pred sebou všetky tie čísla a písmená. Jednoducho mám v tom zmätok. Ale určite super nápad na články! Rada sa učím nové veci a toto sa mi naozaj zíde :)

    OdpovedaťOdstrániť
  3. Toto našťastie mám k svojej téme, tak to nemusím robiť.. ale určite pridaj viac článkov, vždy na tvojom blogu obdivujem tieto designové veci, ktoré tu stále vylepšuješ :) ♥

    OdpovedaťOdstrániť
    Odpovede
    1. ešte by ma zaujímalo niečo :D Prosím ťa, kde ty hľadáš tieto veci? :) či máš na to nejaké obľúbené stránky alebo tak :)

      Odstrániť
    2. Mnoho vecí som už našla pred mesiacmi či rokmi a akosi mi ostali v pamäti, no nemám nejakú konkrétnu stránku, kde by som tieto kódy hľadala. Vždy, keď mi nejaké "vylepšenie" napadne, tak stačí zadať pár kľúčových slov do Googlu a hneď ti vyhodí mnoho rôznych stránok :)

      Odstrániť
    3. urcite prinosny clanek.
      www.pimpleworld.blogspot.cz

      Odstrániť
  4. Tohle se mi bude urcite hodit, sama planuji nejake zmeny :) Diiky

    OdpovedaťOdstrániť
  5. Super článek :) Máš vše krásně zpracované a myslím si, že ho jistě využiji :)

    www.maredifragole.blogspot.cz

    OdpovedaťOdstrániť
  6. Hezký návod :) já na tohle taky moc nejsem, tak se to bude hodit :D
    www.getmovincz.blogspot.com

    OdpovedaťOdstrániť
  7. Bezva článek! Klidně přidávej více blogerských tipů, mně jako začínající blogerce se to jedině hodí! :D
    The Colorful Blog

    OdpovedaťOdstrániť
  8. Ježiš, ak toto nastavím, tak ti tu prídem vyznať lásku!!! :D
    BTW keď sme už pri radách ako vložíš fotku na bok do "menu", proste tak ako to máš ty?
    http://willieho-skaza.blog.cz/

    OdpovedaťOdstrániť
  9. Moc ti děkuju za tento návod! Už jsem se o to několikrát snažila, ale místo posunu v kódování jsem akorát objevila mezery v mé angličtině protože jsem nebyla absolutně schopná si to nějak smysluplně přeložit:D

    OdpovedaťOdstrániť

Latest Instagrams

© A STYLISH BEE. Design by FCD.