NÁVOD NA BLOG | Skrytí příspěvku, ikonky na sociální sítě, vyhledávací box

Protože jsem slíbila, že se budu věnovat více blog designu a podobným věcem, přicházím s novinkou, kterou se budu snažit zařazovat častěji. Mám zatím pracovní název "Rychlá BLOGGER poradna" :) Nic originálního to není, přiznávám, ale nechci se zaseknout na názvu, když ten je vedle návodů až druhořadý! A o co jde? Často se mi dotazy, které mi od vás chodí na e-mail, opakují. A tak jsem se rozhodla sobecky sama sobě ušetřit čas a práci a jednou pro vždy to napsat všem:)

Dnes si tedy v krátkosti povíme o třech návodech. (někdy budou dva, jindy zase jeden - trojky se nedržte:) A tady máte jejich přehled - v textové i grafické podobě:

Jak "zabalit" článek a mít na hlavní stránce jen náhled?

Jak vložit malé ikony, které čtenáře přesměrují na sociální sítě?

Jak mít hezčí vyhledávací boxík?


 ❤  ❤  ❤  ❤

1. Náhled článku

Někteří začátečníci bádají nad tím, jak to druzí udělali, že se jim na blogu nezobrazuje celý článek, ale jen část - chcete-li jakýsi náhled nebo ochutnávka. Tady pomůže jeden obrázek více než tisíc slov :) Tam, kde chcete článek "přetrhnout", klikněte na označenou ikonku. Tamtadadá - a je to :)

obrázek: weheartit.com
 ❤  ❤  ❤  ❤

2. Ikonky na sociální media - a nejlépe v jednom řádku!

Přišlo mi hodně otázek typu "Jak na ty malé ikonky, co má ta a ta bloggerka? Já to chci taky!" No, tak to máte mít :) První část úspěchu je zajistit si tyto ikony :) Buď si je vytvoříte vlastní, nebo stáhnete z internetu. Můžete googlit přes klíčové slovo "social media icons". Přináším pár tipů, které jsem vygooglila já.

Barevné a veselé z Beautyholics Anonymous

Jednoduché a minimalistické z Media Loot
Ikonky i s textem z Beautiful Dawn Designs

Jakmile je stáhnete, musíte je uložit na web. První možnost je vyhradit si na to jeden příspěvek na vašem blogu, který nikdy nezveřejníte, jen do něj budete ukládat takové a podobné obrázky, které budete používat na blog. (do názvu příspěvku si napište třeba: NEVYDÁVAT) Nebo si je můžete nahrát na jakýkoliv server, který umožňuje uploadování obrázků. Za sebe doporučuji
Postimage.org.

Jakmile máte fotografii nahrané na serveru, musíte zjistit jejich adresu - správnou adresu poznáte tak, že je v podobném formátu jako např. http://www.stranka.cz/ikonka.png. Vždy tam musí být nějaká koncovka! (obvykle png)

Tohle představuje jednu z možností, jak zjistit adresu obrázku v editoru na blogu

 Takhle zjistíte adresu obrázku, když ikonu nahrajete na server Postimage.org.

Jakmile budete mít ikony uploadnuté, jejich adresy pak už stačí jen vložit do HTML/JavaScript gadgetu. Ten naleznete v možnosti Rozvržení - Vložit Gadget.



Do prázdného pole s názvem "Obsah" vložte toto:


Řádek zkopírujte tolikrát, kolik máte ikonek. Pokud použijete odkazy na Twitter, Facebook a Instagram, zkopírujete to třikrát a vyplníte příslušnými adresami :)

Vysvětlení:
adresa odkazu = například adresa vaší FB stránky
adresa obrázku = netřeba vysvětlovat :) viz předchozí řádky

Dodatek:
Pokud chcete v každém řádku jednu ikonku (např. je v ní nápis) za < /a> použijte <br /> 

A pak stačí už jen uložit a je to:)

 ❤  ❤  ❤  ❤

3. Minimalistický vyhledávací box

Vycházela jsem z tohoto tutorialu, který jsem lehce poupravila. Takže máte-li chuť si vyhledávání ještě více přizpůsobit, koukněte se tam :)

Pro tento vzhled:
 vložte do HTML/Java gadgetu (viz předchozí návod) tento kód:


Pro tento vzhled:
 vložte do HTML/JavaScript gadgetu tento kód:
 
Malé přizpůsobení:
délku boxu změníte u položky "size". Teď je tam "20"
text změníte u možnosti "value". Teď je tam "Search..."

Dodatek pro ty, kteří nechápou, kam to dát:

Rozvržení - přidat gadget - z možnosti zvolit HTML/JavaScript. (v předchozím návodu je to i graficky znázorněno) Do nadpisu můžete napsat např. "Vyhledejte na blogu" či jen nechat prázdný. Do obsahu vložíte kód z boxu :)

A taky tu proběhl dotaz, co se má připadně smazat. Pokud už jedno vyhledávací pole máte, smažte ho. Pokud jste neměli jeho nadpis, bude na blogu pod možností Prohledat tento blog. Klikněte na Upravit a na konci tabulky máte možnost Odstranit.


Ať se vydaří, přátelé! :)
A kdybyste měli nějaký problém, moc ráda vám pomohu - ať v komentářích, či přes e-mail.

Návod může být zastaralý. Na jeho aktualizaci se pracuje.
Prosím o trpělivost. Děkuji moc. Silvi

77 komentářů

  1. Si zlatá za tyto články, moc mi pomáhají ;)

    OdpovědětSmazat
  2. A ja som vždy rozmýšľala, ako skryť zvyšok článku :) Vďaka za skvelé návody! :)

    OdpovědětSmazat
  3. ♥ přesně tyhle 3 věci jsem chtěla změnit, děkuji, jsi zlatá. Jen dotaz - píšu příspěvky jako text, ne v HTML, takže aby se mi jednotně změnily všechny příspěvky, to asi nejde, že? Musím postupně každý změnit ručně, třeba písmo a styl

    OdpovědětSmazat
    Odpovědi
    1. Jestli myslíš návod se skrytím části textu, tak to se musí opravdu ručně :)

      Smazat
    2. Nebo to lze nastavit pomocí HTML, ale bohužel se musí nastavit přesný rozměr obrázku, který se bude zobrazovat jako ten úvodní.

      Smazat
  4. Jsi naprosto úžasná!! :) o tvém blogu jsem četla už před nějakou dobou, tak jsem ho tu měla otevřený, že se někdy vrhnu na úpravu blogu. Strašně jsem se toho bála, ale dneska jsem se do toho pustila, a s tvými návody to jde krásně!! hlavně jsem dostala i větší odvahu další věci hledat na internetu, nebát se těch kódů, a jsem teď sama na sebe hrdá! :) tyhle ikonky jsem strašně chtěla, tak jsi mi zrovna odpověděla na moje přání!! díky moc!! :) budu tě dál sledovat a těším se na další vychytávky!! :)
    Georgie :)

    OdpovědětSmazat
  5. Jéé, zrovna začátkem týdne jsem si vložila na blog "vyhledávání"
    ... nu a teď ho mám místo s "hledej" s parádní lupou:-)

    Děkuji převelice! ;-)
    Tak, a já jdu zpět obdivovat tu lupu :D

    OdpovědětSmazat
  6. Moc pěkné rady. x) Mě by se ještě líbil článek o tom, jak udělat to, abych měla komentáře pod články očíslované. Všude jsem to hledala a zatím jsem nenašla.

    OdpovědětSmazat
    Odpovědi
    1. To bych chtěla taky vědět... :)

      Smazat
    2. Píšu si do deníčku a zkusím na to přijít :)

      Smazat
    3. presne! inak skvelý článok SILVI:)

      Smazat
    4. baby stačí, ak do css vložíte tento kod

      .comment-thread ol{
      counter-reset: contarcomentarios;
      }
      .comment-thread ol ol {
      counter-reset: contarbis;
      }
      .comment-header::before {
      content: counter(contarcomentarios,decimal)".";
      counter-increment: contarcomentarios;
      float: left;
      padding-right: 4px;
      }

      Smazat
  7. Tak mně to nefunguje - políčko hledání, asi nevím, kam to správně vložit. A jestli mám něco jiného vymazat?
    Mohla by jsi Silvi upřesnit, kam přesně mám jít a tam vložit ten kód, pro ty nechápavé trubky jako jsem já, Děkuji moc :)

    OdpovědětSmazat
    Odpovědi
    1. Upřesněno v článku. :-)

      Smazat
    2. Už to mám :)! Děkuju za upřesnění :). A ještě jedno velké díky za tyhle články. Chodím sem pravidelně a pomocí nich postupně vylepšuji svůj začínající blog :).

      Smazat
  8. Mužete mi prosím někdo poradit, jak mám na blogu to hlavní pozadí mě nejde nastavit jako bílé, i když tam dám třeba průhledné. Nevíte někdo jak na to? :)

    OdpovědětSmazat
  9. moc si mi tímhle pomohla díky moc! :))

    OdpovědětSmazat
  10. Seš uplně nejvíc šikovná tyjo!:)

    OdpovědětSmazat
  11. jeeee, dakujem - hlavne za tip cislo jedna ;)
    doteraz som to mala prepnute na HTML a nechapala som, preco tam nemam tolko ikoniek ako potrebujem...vdaka tebe ma osvietilo ;)

    OdpovědětSmazat
  12. Díky za super návod :) jednička i dvojka využita beze zbytku :)!! Moc děkuji!

    OdpovědětSmazat
  13. Děkuju ti moc! Myslím si, že máš ten nejlepší blog ze všech, které znám. Vždycky mi nějakým způsobem pomůžeš :)

    OdpovědětSmazat
  14. Super návody, presne tie mini ikonky som potrebovala! Ďakujem, si skvelá :)

    OdpovědětSmazat
  15. Ahoj, vložila som si na blog podla tvojho návodu políčko "Search" aj sa mi tam pekne zobrazilo ale akosi hľadanie nefunguje :( a stále mi vypíše toto, nech hľadám čokoľvek: Ľutujeme, stránka, ktorú ste hľadali v tomto blogu, neexistuje. Vedela by si mi prosím poradiť kde by mohol byť problém?

    OdpovědětSmazat
  16. Ahoj,
    bohužel netuším, kde je problém :-(
    Teď jsem to kontrolovala a když to vkládám přes Rozvržení - vložit gadget - HTML/JavaScript, tak mi fungují oba. Děláš to takhle? A používáš blogspot?

    OdpovědětSmazat
  17. Ďakujem za radu...prvú som stále hladala...vedela by si poradiť aj ako dostať ten text "viac infotmácii" do stredua ako ho premenovať napr. na text celý článok alebo tak nejak?

    OdpovědětSmazat
  18. Moc děkuji za pomoc, vše se mi hodilo:) chtěla jsem se zeptat, jak na Archiv článků? Problémem je, že jsem ho nechtěně smazala a nejde mi znovu přidat... nevíš, jak na to? Díky moc! A.

    OdpovědětSmazat
  19. ahoj, Silvi, využila jsem ikonky a je to tak jednoduché, když to někdo srozumitelně vysvětlí. díky! :)

    chtěla bych se zeptat, zda neplánuješ třeba návod na to, jak vytvořit nějaké slušné záhlaví nebo jen ikonku (třeba Tvé Sd vlevo nahoře v záhlaví)? ráda bych blog trochu překopala.. :)

    OdpovědětSmazat
  20. tento návod mi strašne pomohol :D skvelé :D ďakujem

    OdpovědětSmazat
  21. Super návod, veľmi si mi pomohla! :)

    OdpovědětSmazat
  22. Může se zeptat, nevíš, kde bych našla nějakou pěknou ikonku na ask? Hrozně se mi líbí ty, na které si dávala odkazy, ale ask tam bohužel nikde není...

    OdpovědětSmazat
  23. Ahoj, skvělý článek:) můžu se jen zeptat ohledně skrytí části článku, kde se dá změnit ten popisek k odkrytí schovaného textu? opravdu tam nechci mít "zobrazit více>>" ale nevím kde to změnit, můžeš mi s tím prosím poradit? děkuji:)

    OdpovědětSmazat
  24. Ahoj Silvi,
    chtěla byhc se jen zeptat, také ohledně skrytí části článku, kde se dá změnit ten popisek k odkrytí schovaného textu? Byla by si moc hodná, děkuju! :)

    OdpovědětSmazat
    Odpovědi
    1. Rozvržení - U Příspěvky na blogu kliknout vpravo dole na "Upravit" a u možnosti "Hlavní stránka – možnosti" druhý řádek: Text odkazu na stránku příspěvku ... tam to můžeš změnit :-)

      Smazat
  25. Bezvadný nápad Blogger poradna, díky, zkusím se tím prokousat:-))
    Ajka

    OdpovědětSmazat
  26. Potřebuju poradit:) Na mém blogu se mi přes gadget překrývá příspěvek a opačně, konkrétně jen fotky, jde nějak v kódu HTML upravit ta šířka, nebo musím měnit šablonu? Děkuju. :)

    OdpovědětSmazat
    Odpovědi
    1. Betko, bohužel přesně nevím, co myslíš. Zkus mi to, prosím, popsat do e-mailu. (nejlépe i odkaz na blog) Děkuji! :)

      Smazat
  27. Ahoj ešte by som sa chcela spýtať či nevieš ako sa robí to ak chcem aby pri prejdení myškou na tie ikonky sa zmenili....napr. farbu alebo tak.Ďakujem

    OdpovědětSmazat
  28. Ahoj, prosím tě, jak se zbavím názvu blogu v záhlaví? Mám tam vlastní pozadí, ale pořád se mi do toho plete automatický název, který tam fakt nechci... www.nikolascestuje.cz

    OdpovědětSmazat
  29. Díky moc za pomoc. Jsi skvělá :-)!!!

    OdpovědětSmazat
  30. ahoj silvi diky moc za prispevok o skrateni textu :) velmi pomohlo..avšak čo sa chcem opýtať, ako si zmenila z povodnej verzie na "precist cely clanok" ? mne ta ukazuje "viac informacii" vobec sa mi to nepaci :) dakujem za radu

    OdpovědětSmazat
  31. Tento komentář byl odstraněn autorem.

    OdpovědětSmazat
  32. Mohla bys mi prosím poradit, jak udělám abych měla celý blog v aj, myslím jako třeba to domovská sttránka co je dole a tak:)

    OdpovědětSmazat
  33. Díky, moc mi to pomohlo, ale mohla bys mi poradit, jak se do té ikonky vloží email? To mi nejde :/

    OdpovědětSmazat
  34. Absolutně nejlepší návody, co jsem našla!! A že je hledám nějakou tu dobu! :-D

    OdpovědětSmazat
  35. To som potrebovala pre svoj blog, ďakujem pekne! ;)

    OdpovědětSmazat
  36. super návod, dík za tutorial! ten nápad s nepublikovaným příspěvkem s obrázky je dokonalý a jednoduchý!
    mám to přesně tak, jak jsem chtěla ;-)
    Lenka
    http://zahradananiti.blogspot.cz/

    OdpovědětSmazat
  37. Uplně super návody máš, celý blog se mi moc líbí, jen by jsem se chtěla zeptat k těm ikokám jsem totiž tele, mám všechno už hotový daný do článku ty ikonky, a potom si otevřu rozvržení, HTML a pak už to moc nechápu, klinu na tu ikonku okopíruju ten odkaz a co dál? to jsem asi nějako nepochopila:// Děkuju, za rady, a ještě kdyby jsi mi s tímhle poradila byla by jsi úžasná:))
    http://photobyanni.blogspot.cz/

    OdpovědětSmazat
  38. Ahoj, návod na ikonky je super , robila som to presne podla návodu, ale z nejakého neurčitého dôvodu mám tie ikonky obrovské a nvm kde v html kóde sa dajú zmenšiť. Budem rada ak mi poradíš.

    OdpovědětSmazat
  39. Si skvelá! veľmi mi to pomohlo!
    Chcela som sa spýtať, či nevieš náhodou ako by som mohla to "zobraziť viac" posunúť viac na stred , pretože teraz to mám na pravo a moc sa mi to nepáči. Ďakujem :)

    OdpovědětSmazat
  40. Zachránila jsi mi život! Děkuji ;)

    OdpovědětSmazat
  41. Tento komentář byl odstraněn autorem.

    OdpovědětSmazat
  42. Absolútne úžasný článok! Veľmi ti ďakujem :) Strašne si mi pomohla :)

    OdpovědětSmazat
  43. Tento komentář byl odstraněn autorem.

    OdpovědětSmazat
  44. Mnohokrát děkuji opravdu mi článek pomohl....Díky

    OdpovědětSmazat
  45. Přesně toto jsem hledala, jak vylepšit svůj blog :) Děkuju moc! :)

    OdpovědětSmazat
  46. Super článek, ale prosím :) ikony jsem nahrála, přesměrování funguje, ale ty ikony mám hrozně veliké, jak se zmenší??

    OdpovědětSmazat
  47. Silvi u teba na stránke, nájdem vždy pomoc :)

    OdpovědětSmazat
  48. Ahoj, článek je super, jen mám otázku. Když nahraji ikonku na Postimage.org a kliknu do "kopírovat do schránky" zobrazí se mi "Copied" nevím si s tím rady. :)
    Děkuji za odpověď! :)

    OdpovědětSmazat
  49. Ahoj, já mám problém právě naopak, článek se mi "zabalí", aniž bych to chtěla... spíš bych chtěla články celé na hlavní stránce, nevíš, jak to udělat? :)

    OdpovědětSmazat
    Odpovědi
    1. Ahoj, zkus to úplně stejně jak to vysvětluje v tomto článku akorát to dáš až nakonec :)

      Smazat
  50. Úžasný článok :)
    veľmi ďakujem - pomohol mi! :)

    OdpovědětSmazat
    Odpovědi
    1. To já jsem se zasekla na tom bodu odkazů.. vůbec mi to nejde!!!

      Smazat
  51. Ahoj,
    možná, že to sem nepatří, ale už nevím na koho se obrátit. Nesetkala jsi se s tím, že když kopíruješ odkaz ze svého blogu, tak se při vložení odkazu na fb, messenger, viber atd. zobrazí jako obrázek záhlaví blogu? Nevěděla bys co s tím?
    Předem děkuji za odpověď

    OdpovědětSmazat
  52. děkuji, tvůj návod mi hodně pomohl :))

    OdpovědětSmazat
  53. Zase úžasný, děkuji, vše se povedlo :) jen rada na ty malý ikonky, já to vyřešila tak, že jsem si prostě stáhla z internetu menší a bylo!

    OdpovědětSmazat
  54. Další slvělý článek a návod,který pomohl! Děkuju! <3

    OdpovědětSmazat
  55. Děkuju moc. Ty ikony jsem potřebovala...

    OdpovědětSmazat
  56. Tieto tvoje články sú geniálne! Ďakujem :-*

    OdpovědětSmazat
  57. Hledala jsem návod na řešení jednoho problému a našla rovnou řešení na dva! Skvělé! Moc děkuji! :-)

    OdpovědětSmazat
  58. BlueHost is one of the best hosting company for any hosting services you need.

    OdpovědětSmazat
  59. Moc dobrý, já z těchto článků čerpám několik let. Díky

    OdpovědětSmazat