13. januára 2018

Poďme sa hrať s bloggerom/06 (...ako na "related posts"...)

R
elated posts sú, ako aj názov napovedá, súvisiace články, ktoré sa nachádzajú na konci príspevku ako bonus pre čitateľa, aby si mohol prečítať ďalší zaujímavý článok od autora. Žiaľ, blogger túto funkciu neponúka, dokonca ani nové šablóny, s ktorými prišiel. No čo nie je, môže byť - stačí sa s tým iba pohrať a váš článok dostane nový nádych. Dnes si preto ukážeme dva postupy, ako si sami môžete pridať na blog "related posts"...
Keď som hľadala články o tom ako pridať "súvisiace články" pod aktuálny príspevok, našla som mnoho postupov, všetky cez úpravu HTML, avšak ani jeden nebol taký ľahučký ako práve ten, ktorý som našla na TEJTO stránke. Tak sa teda poďme pozrieť, ako na to 😉...
Postup
Prejdite do sekcie Motív a kliknite na Upraviť kód HTML.
Kdekoľvek v texte kliknite a stlačte na klávesnici Ctrl + F. Vďaka tomu vám vyskočí vyhľadávacie okienko.
Do okienka zadajte </body> a stlačte Enter. Vyhľadaný kód sa zvýrazni na žlto.
 
Skopírujte si celý kód z TEJTO stránky a vložte ho nad vyhľadaný kód </body>. Postačí už iba kliknúť na Uložiť motív a práve ste úspešne pridali "related posts" na svoj blog.
...a tu môžete vidieť výsledok...
Ako však môžete vidieť, je potrebné upraviť šírky tohto prvku. Preto prejdite na kód, ktorý ste pridali v HTML a pozmeňte:
1. 
 var maxSearched = 500; toto číslo znázorňuje ako ďaleko sa môže zájsť vo vašich príspevkov týkajúcich sa daného štítku (napr. Recenzia). Ak chcete, aby sa zobrazovali vaše najnovšie články, znížte číslo, ale nie zas priveľmi 😁.
var minimum = 3; zobrazenie najnižšieho počtu príspevkov pod článkom.
 var maximum = 5;  zobrazenie najvyššieho počtu príspevkov pod článkom.
 var imageSize = 150;  tu si môžete nastaviť veľkosť obrázka.
2.
var relatedTitleText = "more posts about"; ⇒v tejto kolonke, medzi úvodzovkami, si môžete zvoliť nadpis podľa vlastných predstáv.
Ja som si pozmenila nastavenia takto:
 var maxSearched = 100; 
    var minimum = 1; 
    var maximum = 3; 
    var imageSize = 250; 
    var roundImages = false; 
    var relatedTitle = true; 
    var labelInTitle = true;
  var relatedTitleText = "Mohlo by vás zaujímať: "; 
    var defaultImage = ""; 
    var campaignTracking = false; 
    var campaignSource = ""; 
    var campaignMedium = ""; 
    var campaignName = ""; 
    var insertBefore = $('.post-footer'); 

    ...a tu je výsledok...
TIP: Ak chcete, aby ste mali názov "more posts about" na stred, vložte si do CSS kód, ktorý vám vycentruje celý stredný panel - nájdete ho ⇒TU.
TIP č.2: Ak by ste chceli väčšie rozostupy medzi obrázkami, tak si vyhľadajte v kóde tento kód:
.related-posts ul li {
  list-style: none;
  margin: 0 5px; postačí pozmeniť zvýraznené číslo, čím zadáte vlastný rozostup.
  float: left;
  text-align: center;
}
VÝHODY (tohto prvku)
+ rýchle a jednoduché nastavenie
+ zobrazujú sa len články, ktoré súvisia so zvolenou menovkou (napr.: Článok so štítkom recenzia zobrazuje v podobných článkoch len príspevky s recenziami)
+ moderné
+ ľahké na úpravu
+ "podobné články" sa zobrazujú len v päte článku po kliknutí na príspevok
NEVÝHODY
- možno pre niekoho nastavenie práve cez HTML (ale naozaj sa nie je čoho obávať, zvládnete to! Ale pre istotu si nikdy nezabudnite zálohovať šablónu a celý obsah blogu. Ako na to nájdete ⇒TU, na konci článku...)
!POZOR!
Tento HMTL kód funguje iba vtedy, ak máte blog otvorený pre verejnosť. Ak by ste ho mali uzavretý, na stránke sa nezobrazí.
Druhý spôsob, ako pridať podobné články na blog, je rovnako jednoduchý, len má menšiu nevýhodu, o ktorej si povieme až na konci článku. Teraz sa však zamerajme na stránku linkwithin...
Postup
Prejdite na stránku LinkWithin⇐ a do vyznačeného políčka zadajte vašu e-mailovú adresu, adresu vášho blogu, platformu, kde vyberiete položku Blogger a počet stĺpcov, ktorý sa vám bude zobrazovať na blogu. Potom už stačí iba kliknúť na Get Widget!
 Budete automaticky presmerovaný na novú stránku s vysvetlením, ako nainštalovať tento Widget. Kliknite na Install Widget.
 Po predchádzajúcom kroku sa ocitnete na ďalšej stránke, kde môžete vybrať blog, pre aký chcete nainštalovať tento prvok (platí to, ak máte viac ako jeden blog). Postačí už iba vybrať voľbu Pridať miniaplikáciu.
Po zvolení "Pridať miniaplikáciu" sa ocitnete v rozložení stránky vo vašom blogu. Widget LinkWithin sa zobrazí na bočnom paneli. Musíte ho presunúť pod blogové príspevky a uložiť usporiadanie.
 
Tento widget sa neobjaví hneď (teda, aspoň u mňa to tak bolo). No po kliknutí na článok sa mi v päte príspevku ukázalo oznámenie o pridaní prvku a po obnovení stránky som "related posts" mala na blogu.
 
...a takto by to malo vyzerať...
 
Teraz si ukážeme pár "fígľov", ako si ho môžeme pomocou CSS upraviť (ako pridať CSS na blog nájdete ⇒TU)
⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕
Vycentrovanie Widgetu:
.linkwithin_inner { 
margin: 0 auto !important; 
}
 
Zmena "You might also like" na ľubovoľný názov:
Prejdite na Rozloženie stránky a vyberte upraviť LinkWithin. Zobrazí sa vám kód, ako môžete vidieť aj na obrázku. Vašou úlohou bude vložiť tento kód: linkwithin_text=''; (medzi úvodzovky vložte svoj ľubovoľný text) nad zvýraznené </script>  (viď. obrázok).

 
...takto by to malo vyzerať...
<script>
var linkwithin_site_id = 2539622;
linkwithin_text='Mohlo by vás zaujímať...';
</script>
 
 Zaokrúhlenie obrázkov:
.linkwithin_posts a div div { 
-webkit-border-radius: 60px; 
-moz-border-radius: 60px; 
border-radius: 60px; 
}
Zmena pozadia po nájazde myši:
.linkwithin_posts a:hover { 
background-color: #f8e5ed !important;  /* Môžete si zvoliť farbu, akú chcete. Ak neviete, ako nájsť kód farby, tak sa to môžete dozvedieť TU v odseku "Citovanie"*/
}

Pred zadaním kódu...
...po zadaní kódu.
 
Zmena horného textu + zmena farby textu
.linkwithin_text {
text-transform: uppercase; /* Transformovanie textu na veľké písmená. Ak nechcete tento typ, ale klasický, zadajte none */
text-align: center!important; /* Orientácia textu na stred */
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 20px; /* Veľkosť nadpisu */
color:#c97a7c; /* Farba nadpisu */
}
 Odstránenie čiar medzi príspevkami 
.linkwithin_posts {
width: 500px !important; /* Šírka medzi obrázkami */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
Zmena farby textu popisu:
.linkwithin_title {
text-align: center!important; /* Orientácia textu na stred */
font-family: Georgia, Times, "Times New Roman", serif !important;
font-size: 15px !important; /* Veľkosť textu */
color: #3d85c6 !important; /* Farba textu */
}

Pred zadaním kódu...
 
...po zadaní kódu.
 
Zmena farby textu po nájazde myšou
.linkwithin_title:hover {
color: #444444 !important; /* Farba textu po nájazde myšou */
}
Výhody (tohto widgetu)
+ ľahká inštalácia
+ úprava podľa vlastného gusta
+ pekné prevedenie
Nevýhody
- "podobné články" sa nezobrazujú len v päte článku po kliknutí na príspevok, ale hneď pod príspevkom na hlavnej strane
- zobrazujú sa všetky tipy článkov, nie len súvisiace s daným príspevkom (napr. s recenziami)
⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕
Poznámka: Všetky kódy použité v tomto články si môžete skopírovať ⇒TU.
(mám nastavené "zakázanie kopírovania textu", preto si ich nemôžete skopírovať z tohto článku)

⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕
To je odo mňa na dnes všetko. Ako môžete vidieť, pridať si "related posts" na stránku je veľmi jednoduché a dokonca si ho môžete upraviť podľa seba (čo sa týka najmä druhého postupu). Každopádne, dúfam, že som aspoň niekomu málinko pomohla a v prípade otázok, či nejasností pokojne píšte do komentárov - spolu už niečo vymyslíme 😊.

⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕
P.S.: Ak môj blog sledujete, tak ste si isto všimli novú zmenu (ja viem, už zase). Vzhľad blogu som mala v pláne zmeniť už dlho, pretože ten predchádzajúci bol zhotovený len tak narýchlo, keďže sa mi stiahnutá šablóna rozhodla robiť problémy a, úprimne, veľmi sa mi nepáčil.
No tentokrát som si k tomu sadla a nevybrala si tú jednoduchšiu cestu, ako zvyčajne (dokonca som sa pohrala aj s Photoshopom 😱- sama neverím, že som splnila vlastnú predstavu hlavičky blogu! Ja viem, má to chyby, ale snažila som sa aspoň ako tak vytvoriť vesmír 😊...), a tak som tvorila, hľadala, prerábala...(ale ešte ma čaká prerábanie motívu pre verziu pre mobil - hádam to nepokazím
Preto idem k vám zas a znova s malou prosbou o vašu odozvu - páči sa vám nový vzhľad blogu? Zobrazuje sa všetko tak, ako má? Zobrazuje sa správne diakritika článku, nadpisu, bočného panelu a textu celkovo? (lebo som inštalovala nové písma, tak dúfam, že i vám to zobrazuje správne, nie len mne) Načítala sa vám stránka bez problémov? Alebo ste postrehli iné problémy?
Budem vďačná za každú spätnú väzbu, už vopred posielam veľké ďakujem❤...

⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕
P.S.S.: Poviem vám, vďaka tvoreniu nového vzhľadu som narazila na skvelé postupy - takže sa prichystajte na ďalšie články tohto tipu a množstvo vychytávok!!! Mám ich neúrekom 😁.

16 komentárov:

  1. To by se mohlo hodit. :) Moc pěkný návod, mám ty tvé ráda, jsou takové přehledné a hezky blbistické. :D

    OdpovedaťOdstrániť
    Odpovede
    1. Mne sa vždy na všetkých, už hotových, bloger šablónach páčilo práve "related posts" - podľa mňa je to veľmi užitočné a ani si nevieš predstaviť, aká som bola nadšená, keď som objavila ten prvý postup, ktorý mám v článku :) Skrátka, neskutočne ma to potešilo a vedela som, že sa oň musím jedného dňa podeliť aj s ostatnými♥
      Ďakujem ti krásne za tvoj komentár a povzbudivé slová, veľmi si to vážim - prajem ti nádherný deň ;)

      Odstrániť
  2. Okeeey, tak ja sa teda najprv vyjadrím k vzhľadu blogu, lebo to už dlhšie nevydržím.:D O.D.P.A.D.L.A SOOOOM.♥♥♥ Čo? Ako? Kedy? Nie vážne, rozklikla som si Tvoj článok, no v tom som si spomenula, že som čosi chcela ešte z inej stránky, no keď som sa už už chystala prekliknúť, zistila som, že mi čosi nesedí a keď som sa pozrela ešte raz a poriadne, vážne som skoro odpadla.♥ Ten motív je prekrásny a fakt klobúk dole!♥♥ Nechápem ako to robíš, určite to muselo dať neskutočne zabrať, ale stálo to za to Mony, naozaj. Mne sa všetko zobrazuje v poriadku, diakritika je správna, nevšimla som si žiaden problém, takže môžeš byť v kľude.:)
    No a čo sa článku týka. Ďalšie 'nechápem'. Všetko máš rozobrané do najmenších detailov, veci, čo by mi ani zďaleka nenapadli v rámci úpravy. Čo k tomu viac dodať. Tieto články sú viac ako len nápomocné. Takže obrovské ĎAKUJEM!♥

    OdpovedaťOdstrániť
    Odpovede
    1. Veronikááá - ja odpadnem z teba! Ty si taký úžasný človek, veľké - preveľké ďakujem za tvoju odozvu, pochvalu a jednoducho, za všetko❤❤❤
      Poviem ti, odteraz si už nebudem vyberať tú jednoduchšiu cestu a ku všetkému si poctivo sadnem a budem tvoriť, vymýšľať, prerábať a moju lenivosť porážať :D, lebo potom sa mi dostane krásnej odmeny - dobrého pocitu z toho, čo robím. Priznávam, mne sa tento vzhľad páči...možno to znie narcisticky, no som konečne, po dlhej dobe, spokojná, a preto som sa bála, či náhodou nie je niečo zle a najmä tá diakritika (ten predchádzajúci vzhľad mal práve tento problém a musela som zvoliť písma, o ktorých viem, že našu abecedu podporujú)...preto si ma týmto komentárom a odozvou nesmierne potešila a som ti neskutočne vďačná - posielam veľké ĎAKUJEM❤❤❤
      Nuž, vďaka tomuto novému vzhľadu som natrafila naozaj na skvelé postupy, takže sa v blízkom čase o ne podelím aj s vami - hra s blogerom je naozaj zábavná! :D Som naozaj véľmi rada, že sa vzhľad zobrazuje správne, že sa páči a článoček pomôže♥^.^♥
      Maj sa krásne a ešte raz ďakujem - si poklad!

      Odstrániť
  3. Toľkokrát som už premýšľala, ako by som si mohla dať tieto odporúčané články na blog, ale nikdy som nenašla dostatočne jednoduchý návod, ktorému by som rozumela aj ja. Ďakujem za to, že sa venuješ týmto článkom a tiež ďakujem za to, že mi to dokážeš vysvetliť dostatočne podrobne a jednoducho bez toho, aby som sa cítila ako úplný idiot. :)
    Čo sa týka nového vzhľadu veľmi sa mi páči. Milujem vlkov. <3

    OdpovedaťOdstrániť
    Odpovede
    1. Vitaj v klube :D Aj ja som tak dlho hľadala nejaký ľahký postup, ktorý by som pochopila a s ktorým by som nič nepokazila. Preto som z toho prvého postupu taká nadšená! Autorka tohto kódu je naozaj šikovná, klobúk dole pred ňou ^.^
      Už som sa bola pozrieť u teba na blogu a som nadšená, že ti tento návod pomohol a mohla si si tak aj ty tieto "related posts" pridať na stránku❤ Dúfam, že aj ďalšími článkami pomôžem :)
      Ďakujem za spätnú väzbu ohľadom vzhľadu blogu. Aj ja milujem vlkov a keďže som už jeden vzhľad práve s vlkom mala, povedala som si, že by som mohla ešte nejaký s týmto motívom vytvoriť - a tak som sa zamilovala do vĺčika, ktorého môžeš vidieť aj ty, a pustila sa do úprav :)
      Veľmi sa teším, že sa vzhľad blogu páči a zobrazuje sa všetko správne a najmä, že ťa tento článok inšpiroval. Maj sa krásne :*

      Odstrániť
  4. Páni Mony, tak tenhle vzhled tvého blogu je možná ten úplně nejkrásnější, jaký jsi dposud měla. Jsem nadšená! A co se týče článku?? Velké wow!!! Hrozně moc ti děkuju za inspiraci a za to, co do těch článků dáváš. Musí ti to trvat neuvěřitelně dlouho vytvořit. Jsi fakt extrémně šikovná!!!
    Měj se krásně

    OdpovedaťOdstrániť
    Odpovede
    1. ĎAKUJÉM, Hanka♥^.^♥ Aj mne sa asi najväčšmi páči a som s ním, konečne, spokojná. Takže zmena už, dúfam, dlho nebude :D
      Ale nie je, ono je to trocha náročné na čas, ale inak je to malina a k tomu kódy nevymýšľam ja, ale šikovní ľudia, takže ja stláčam len CTRL+C a CTRL+V...ale už začínam tomu prichádzať na kĺb, tak možno raz začnem nejaké vymýšľať aj sama - no chce to ešte kopec času :)
      Aj ty sa maj krásne a veľmi pekne ďakujem za tvoj komentár♥

      Odstrániť
  5. Tenhle článek jde do oblíbenejch. Až mě přestane bavit šablona, kterou u mě řešíme, rozhodně si budu zkoušet víc hrát sama s html...:-D Zrovna sem z něj dostala výsledky zkoušky :-D Ale fakt umím jen základy, každopádně pomalu zjišťuju, že mě to docela začíná bavit, asi se v tom začnu vzdělávat :-D :-D

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne♥^.^♥ Som veľmi rada, že článok zaujal, len škoda, že to nie je moja tvorba, no musela som sa o tieto skvelé prvky a zistenia podeliť...ale možno raz prídem aj s vlastnými kódikmi :D Ktovie, aj mňa to baví a trocha tomu prichádzam na kĺb - som zvedavá, kam to až dospeje :)
      Ďakujem za komentár a prajem ti krásny deň ;)

      Odstrániť
  6. Obdivuji všechny, kteří se věnují návodům na blog :-) Já na to nemám trpělivost. A máš ho nádherný :-)

    OdpovedaťOdstrániť
    Odpovede
    1. Ďakujem krásne, veľmi si to vážim♥^.^♥

      Odstrániť
  7. To je úžasný asi časem projdu všechny tvoje tyhle články a všechno si na blogu zpravím. Jinak mohla by si my poradit? Když se podíváš na můj blog a sjedeš úplně dolů uvidíš články, které jsem zveřejnila nedávno, ale u prvního článku je tam strašně obrovský obrázek, co vůbec nehezky vypadá, nevíš, co s tím? Jinak jsem ti nesmírně vděčná

    OdpovedaťOdstrániť
    Odpovede
    1. Myslím, že máš pod blogovými príspevkami daný "odporúčaný príspevok". Choď do rozloženia blogu a ak mám pravdu, tak pod Blogovými príspevkami by si mala mať Odporúčané príspevky - postačí ho iba presunúť na bočný panel a nastaviť podľa seba (aby sa zobrazovali najnovšie uverejnené články, alebo taký, ktorý si vyberieš sama alebo ho jednoducho odstráň...no na boku by už mal vyzerať dobre, bez problémov :)). Rovnako máš pod blogovými príspevkami dané aj obľúbené príspevky, tie by si mala tiež lepšie dať do bočného panela, ale je to len vec názoru ;)...hádam som pomohla a ak by si potrebovala pomoc, určite mi napíš - buď sem alebo na mail, veľmi rada poradím ak budem vedieť ^.^
      Ďakujem veľmi pekne a prajem ti krásny deň...

      Odstrániť
    2. Díky, už jsem to zpravila. Kdyby něco tak určitě ráda napíšu zrovna v tady těch věcech nejsem sečtělá a budu moc ráda když mi někdo zodpoví všechny moje stupidní otázky, takže jestli nevadí už mám připraveno spoustu otázek až si projdu tvoje ostatní články a nenajdu tam postup tak ti napíšu. Tobě taky přeji hezký večer :)

      Odstrániť
    3. Nevadí, určite nie...veď práve preto som prišla s týmito článkami, aby som mohla pomôcť, lebo viem, aké sú začiatky ťažké - budem sa tešiť na tvoje otázky ;)

      Odstrániť