sobota 6. srpna 2016

Dneska se podíváme na to, jaké druhy citací můžeme na blogu použít. Je jich opravdu nepřeberné množství, takže uvedu jen pár jako příklad, aby bylo jasné, jaké možnosti vůbec existují... V tomto návodu jsem hodně využila svoje nápady, věci, které jsem objevila a pár tipů z této stránky.

Předem upozorňuji, že před veškerými změnami proveďte zálohu, ať máte jistotu, kdyby se vám něco nepodařilo...

Veškeré kódy se vkládají nad ]]></b:skin>


Můj návod.

Kopírovat se zdrojem!

Obyčejná citace


blockquote {
font-weight: normal;
font-size: 12px;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 1px solid #DDDDDD;
}

border: ...; - rámeček citace, můžete hodně experimentovat
width: 75%; - šířka citace
font-size: 12px; - velikost písma
1px - určuje šířku ráměčku, klidně mužete mít širší linky,
#DDDDDD - určuje barvu rámečku,
solid je jednoduchá čára, dotted tečkovaná, double dvojitá


rámeček můžete mít i jen na některé straně nebo různě kombinovat, nahradit border: 1px solid #DDDDDD;
  • levý rámeček border-left: 1px solid #DDDDDD;
  • pravý rámeček border-right: 1px solid #DDDDDD;
  • rámeček nahoře border-top: 1px solid #DDDDDD;
  • rámeček dole border-bottom: 1px solid #DDDDDD;



také můžete přidat řádek border-radius: 3px; - tím určíte zaoblené rohy (3px určuje velikost obloukových hran)

Citace s uvozovkami


blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
}

.post blockquote:before {
 content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  left: 10px;
  top:25px;
}

.post blockquote:after {
 content: " \201D ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  right: 10px;
  bottom:5px;
}

blockquote... vzhled citovaného boxu
post blockquote:before ... určuje symbol na začátku
post blockquote:after... určuje symbol na konci

bold - určuje typ písma (tučné - bold, normální - normal)
\201C - symbol uvozovek, na této stránce si můžete vybrat jakýkoli jiný symbol a vložíte jeho číslo za obrácené lomítko, nebo můžete vložit i text...
#757575 - kód pro barvu písma, na této stránce si můžete zvolit barvu a získáte k ní její html kód
50px - velikost symbolu
10px - posuváte symbol doleva či doprava podle potřeby (left - levá, right - pravá)
5px - posuváte symbol nahoru či dolů podle potřeby (top - nahoru, bottom - dolů)


Také můžete kombinovat více věcí...


blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border-left: 1px solid #DDDDDD;
}

.post blockquote:before {
content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
position: absolute;
left: 10px;
top:25px;
}


Citace v bublině


.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 30px 0px 0px 20px;
top: -30px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}

#C1BDBD, #5F5F5F - barva boxu, nejdříve nahoře, potom dole, vytvoří to přechod
#FFFFFF - barva textu
11px - velikost písma
#C1BDBD - barva trojúhelníku nad boxem


.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}


A ještě jednobarevná nestínovaná verze...

.post blockquote {
background: #C1BDBD;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}


Další bubliny

Opravdu hodně flexibilní. Máte na výběr mnoho možností a kombinací. Bubliny lze umístit kamkoli...

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C92E2E;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #D56666;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F19E9E;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}




.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EE7C2A;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-bottom: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EEA36D;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F2C6A6;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}




.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #3228EB;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-top: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #8B87DA;
border-radius: 50px 50px 50px 50px;
top: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C9C7F7;
border-radius: 25px 25px 25px 25px;
top: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}



.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #2FB41D;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #69CF5C;
border-radius: 50px 50px 50px 50px;
top: 20px;
content: "";
display: block;
height: 50px;
position: absolute;
left: -40px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #E39A25;
border-radius: 25px 25px 25px 25px;
top: 10px;
content: "";
display: block;
height: 25px;
position: absolute;
left: -70px;
width: 25px;
z-index: 10;
}

border: 5px solid #...; - barvy a tloušťka ráměčků
border-radius: ...; - určuje jak moc se rámeček podobá kruhu či obdélníku
#333333 - barva textu
padding: ...; - odsazení textu od okraje rámečku
margin: 1em 140px 80px; - čím bude text delší, bude se rámeček prodlužovat směrem dolů, ale nebude se rozšiřovat, pokud nechcete, smažte celý řádek
top: 10px; / left: -70px; / ... - tímto určíte polohu menších kruhů, vždy vybíráte pozici odshora nebo odspodu (top, bottom) a zleva nebo zprava (left, right). Například když chcete kruh v horním levém rohu, použijete top a left. Čísla potom určují o kolik je posun oproti rohu rámečku. Takže když chcete kruh například nad rámeček, dáváte hodnotu se znaménkem mínus viz příklady.



Snad vám pomůže na pochopení i tento obrázek...


Doufám, že je to alespoň trochu srozumitelné. Těch možností je samozřejmě mnohem více. Příště se pokusím ukázat, jak je možné mít i více druhů citací. Například když budete chtít mít citát z knihy, pak třeba spoiler v jiném rámečku apod...



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

8 komentářů:

  1. Jej, to jsem ani nevěděla, že existuje. Díky! :D

    OdpovědětVymazat
    Odpovědi
    1. Hlavne jestli je to pro tebe pouzitelne :-)

      Vymazat
  2. Toto je skvělý nápad a ráda bych ho použila i na svém blogu, ale bohužel mi to nefunguje. Nevím jestli dělám něco špatně, ale když to uložím, píše mi to: Chyba při analýze souboru XML, řádek 2010, sloupec 4: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.
    Nevíš, co s tím?

    OdpovědětVymazat
    Odpovědi
    1. Citace v článku musíš vkládat do kódu, takže nesmíš nic smazat (nad ]]>). Jen to přidáváš...
      Kdyby něco, zítra večer bych mohla mít čas, tak mi napiš a pořešíme... :-)

      Vymazat
    2. Trochu jsem si s tím pohrála a citace je konečně na světě. Jen by mě zajímalo, jestli se nedá třeba změnit styl písma nebo barva pozadí té citace, aby to nebylo bílé. Vybrala jsem si 4 typ, ale pořád nejsem spokojená.

      Vymazat
    3. Na font najdeš návod tady http://lucy-lillianne-podruhe.blogspot.cz/2016/07/jak-na-spravny-font.html
      Stačí do blockquote přidat font-family...
      A co se týče pozadí, přidáš background:#.... a doplníš barvu

      Vymazat
    4. Konečně se mi povedlo vytvořit citát podle mých představ. Děkuji za pomoc :)

      Vymazat


  • Tutorial na šablony

    Krok za krokem, jak si vytvořit vlastní blogovou šablonu po svém...

  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...