Goodreads widgety

Zdravím, tentokrát jsem se rozhodla udělat návod na goodreads, pokud někdo má účet, ale nedokáže si sám vypracovat widget do menu. Ukážu vám, co všechno s tím můžete udělat a pak už jen bude na vás, zda si jej přidáte na blog :-)

Jako první si otevřete Goodreads. Nahoře najdete záložku My Books a vlevo v menu najdete Widgets.

Na této stránce objevíte několik možností, ze kterých si můžete vybrat. Vezmeme to tedy popořadě.

1. Goodreads Updates Widget

Tento rámeček slouží jako update přehled, tedy jakékoli změny uděláte na svém účtu. Přidáte si knihy na seznam čtení, ohodnotíte a přečtete knihu, označíte ji jako právě čtenou a tak dále. Vpravo máte tři možnosti nastavení:

• height - výška rámečku
• width - šířka rámečku
• number of updates - kolik příspěvků se zobrazí

Na tomto nastavení nic není, jde o takový základ. Potvrzením update se vám pod rámečkem zobrazí aktuální kód, který vložíte na blog. Tady vidíte původní kód, akorát si musíte vložit číslo svého profilu...

<style>
#gr_updates_widget{
border-radius: 5px;
background-color:#fff;
border:solid #683205 10px;
-webkit-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
-moz-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
padding:15px 0 35px 15px;
width:250px;
height:330px;
}
#gr_footer{
margin-bottom:10px;
}
#gr_updates_widget p{
padding:0px;
margin:0;
font-size:14px;
}
#gr_footer img{
width:100px;
float:left;
}
#gr_updates_widget img{
    border-style:none;
}
</style>
    <div id="gr_updates_widget">
      <iframe id="the_iframe" src="https://www.goodreads.com/widgets/user_update_widget?height=400&num_updates=3&user=CISLO-UCTU&width=250" width="248" height="330" frameborder="0"></iframe>
        <div id="gr_footer">
          <a href="https://www.goodreads.com/"><img alt="Goodreads: Book reviews, recommendations, and discussion" rel="nofollow" src="https://www.goodreads.com/images/layout/goodreads_logo_140.png" /></a>
        </div>
    </div>

CISLO-UCTU - číslo, které najdete v adresním řádku v profilu

Změna barvy rámečku

Opět máte několik možností jak upravovat vzhled tohoto rámečku. Goodreads však povoluje jen některé změny, některé bohužel nejde přizpůsobit. Ale tady, například chci-li rámeček užší a v jiné barvě, šířku rámačku jsem změnila na 5 pixelů a barvu na růžovou...

<style>
#gr_updates_widget{
border-radius: 5px;
background-color:#fff;
border:solid #ee778e 5px;
-webkit-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
-moz-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
padding:15px 0 35px 15px;
width:250px;
height:330px;
}
#gr_footer{
margin-bottom:10px;
}
#gr_updates_widget p{
padding:0px;
margin:0;
font-size:14px;
}
#gr_footer img{
width:100px;
float:left;
}
#gr_updates_widget img{
    border-style:none;
}
</style>
    <div id="gr_updates_widget">
      <iframe id="the_iframe" src="https://www.goodreads.com/widgets/user_update_widget?height=400&num_updates=3&user=CISLO-UCTU&width=250" width="248" height="330" frameborder="0"></iframe>
        <div id="gr_footer">
          <a href="https://www.goodreads.com/"><img alt="Goodreads: Book reviews, recommendations, and discussion" rel="nofollow" src="https://www.goodreads.com/images/layout/goodreads_logo_140.png" /></a>
        </div>
    </div>

Změna stínování rámečku

Nebo například pouze rámeček, ale žádné stíny, je potřeba smazat tyto řádky

-webkit-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
-moz-box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;
box-shadow: 0px 0px 4px 1px #595959,
inset 0px 0px 0px 1px #7D730B;

a vznikne následující kód

<style>
#gr_updates_widget{
border-radius: 5px;
background-color:#fff;
border:solid #ee778e 5px;
padding:15px 0 35px 15px;
width:250px;
height:330px;
}
#gr_footer{
margin-bottom:10px;
}
#gr_updates_widget p{
padding:0px;
margin:0;
font-size:14px;
}
#gr_footer img{
width:100px;
float:left;
}
#gr_updates_widget img{
    border-style:none;
}
</style>
    <div id="gr_updates_widget">
      <iframe id="the_iframe" src="https://www.goodreads.com/widgets/user_update_widget?height=400&num_updates=3&user=CISLO-UCTU&width=250" width="248" height="330" frameborder="0"></iframe>
        <div id="gr_footer">
          <a href="https://www.goodreads.com/"><img alt="Goodreads: Book reviews, recommendations, and discussion" rel="nofollow" src="https://www.goodreads.com/images/layout/goodreads_logo_140.png" /></a>
        </div>
    </div>

Bez rámečku

Nechci-li ale žádný rámeček ani stíny, je potřeba toho smazat více a zbude následující kód....

<style>
#gr_updates_widget{
border-radius: 5px;
background-color:#fff;
padding:15px 0 35px 15px;
width:250px;
height:330px;
}
#gr_footer{
margin-bottom:10px;
}
#gr_updates_widget p{
padding:0px;
margin:0;
font-size:14px;
}
#gr_footer img{
width:100px;
float:left;
}
#gr_updates_widget img{
    border-style:none;
}
</style>
    <div id="gr_updates_widget">
      <iframe id="the_iframe" src="https://www.goodreads.com/widgets/user_update_widget?height=400&num_updates=3&user=20433534&width=250" width="248" height="330" frameborder="0"></iframe>
        <div id="gr_footer">
          <a href="https://www.goodreads.com/"><img alt="Goodreads: Book reviews, recommendations, and discussion" rel="nofollow" src="https://www.goodreads.com/images/layout/goodreads_logo_140.png" /></a>
        </div>
    </div>

Odstranění tlačítka goodreads

Stačí smazat následující řádky...

        <div id="gr_footer">
          <a href="https://www.goodreads.com/"><img alt="Goodreads: Book reviews, recommendations, and discussion" rel="nofollow" src="https://www.goodreads.com/images/layout/goodreads_logo_140.png" /></a>
        </div>

Další změny už bohužel nejsou možné. Nelze smazat nadpis s názvem uživatele, ani měnit barvy odkazů...

2. Grid Widget

V této části už je to lepší. Sama tento widget používám v menu. Můžete si zvolit, jakou 'poličku' chcete zobrazovat. Na blogu mám jeden jako právě čtené knihy a druhý jako přečtené. Samo se to pak na blogu mění a nemusím nic nastavovat ručně...

Jak už jsem psala, můžete si vybrat sami, co chcete zobrazovat. Můžete si vybrat své vlastní poličky, které jste si na goodreads vytvořili. Nebo si vybrat:

select shelf

• read - přečtené
• currently reading - právě čtené
• to-read - knihy k přečtení (váš seznam přání)

select sort (řazení záznamů)

• date added - datum přidání
• date read - datum přečtení
• date pub - datum vydání
• author - autor
• avg rating - průměrné hodnocení

• asc - nejstarší
• desc - nejmladší

• a tak dále...

select number of books up to 200 - kolik obálek chcete zobrazovat, já mám třeba na blogu kvůli šířce menu navoleno jen 5 obálek
select cover size - velikost obálky (malá, velká)
hide link - schová odkaz viz obrázek Lucy Lillianne's favorite books
hide title - schová odkaz viz obrázek Lucy's bookshelf: read

Právě čtené knihy

Chcete-li teda přečtené knihy a pět záznamů, tak navolíte následující...

• polička currently-reading 
• řazeno podle datumu začátku čtení (date started) od nejmladšího (desc)
• záznamů 5
• obálky malé (small)

Pak stačí jen zkopírovat kód a vložit na blog.Vypadá to následovně, protože zrovna mám rozečtené jen dvě knihy...

Přečtené knihy

Chci-li teda právě čtené knihy a pět aktuálních záznamů, tak navolíte následující...

• polička read
• řazeno podle datumu dočtení (date read) od nejmladšího (desc)
• záznamů 5
• obálky malé (small)

Pak stačí jen zkopírovat kód a vložit na blog. A zobrazí se posledních pět přečtených knih...

Mezery mezi obálkami

Samozřejmě i v tomto případě si lze trochu se vzhledem pohrát. Například mi vadí, jak se na sebe obálky lepí. Stačí k tomu malé kouzlo... :-)

      <style type="text/css" media="screen">
        .gr_grid_container {
          /* customize grid container div here. eg: width: 500px; */
        }

        .gr_grid_book_container {
          /* customize book cover container div here */
          float: left;
         width: 39px;
          height: 60px;
          padding: 0px 0px;
          overflow: hidden;
        }
      </style>
.......................

padding: 0px 0px; - stačí pozměnit, třeba na padding: 4px 4px;

3. Reading Challenge Widget

Předposlední widget, na kterém se toho už moc upravit nedá. Ale můžete například odstranit nevzhledný rámeček...

Odstranění rámečku

Hned na začátku kódu byste měli vidět něco takového, přičemž tučnou část úplně smažete

<div id="gr_challenge_8863" style="border: 2px solid #EBE8D5; border-radius:10px; padding: 0px 7px 0px 7px; max-width:230px; min-height: 100px">

Změna písma

V dalším řádku si můžete nastavit typ a velikost písma, v příkladu uvedu písmo 14 a font verdana, ať vidíte rozdíl...

  <div id="gr_challenge_progress_body_8863" style="font-size: 12px; font-family: georgia,serif;line-height: 18px">

font-size: 14px; font-family: verdana;

Tím však veškeré změny končí. Nelze změnit nadpis ani jeho kurzívu. Nelze nastavit velikost písma u popisku view books, ani změnit barvu načítajícího se banneru. Jsou věci, které i když přepíšete, goodreads stejně změnu neprovede... Tak alespoň takto... Barva odkazů se samozřejmě přizpůsobí nastavení vaší šablony.

4. Custom Widget

Tento widget funguje stejně jako číslo 2, ale uvádí ještě další detaily, například poličky, kde jsou knihy uloženy, hodnocení, ukazuje názvy a autory a tak podobně...

• select shelf - opět vybíráte poličky s přečteno, právě čteno, chci číst...
• show - vybíráte si, co chcete zobrazit - cover (obálka), author (autor), title (titul), rating (hodnocení), review (komentář či názor), tags (štítky)
• select sort - třízení položek
• select number of books up to 100 - počet záznamů
• select title - nadpis rámečku

Tady už nechám na vás, co si vytvoříte, způsobů je více. Máte zde i další možnosti pomocí Customize Style.

• select cover size - velikost obálky
• cover position - pozice obálky (vlevo, vpravo, uprostřed)
• widget width - šířka widgetu
• widget title size - velikost nadpisu
• border width - šířka rámečku (při zvolení none rámeček zmizí)
• background color (enter hex value) - barva pozadí
• transparent background - průhledné pozadí
• text color (enter hex value) - barva textu

Přečtené knihy

Přečtené knihy, obálka vlevo nebo vpravo. Pouze název knihy a autora, moje hodnocení a poličky... Nastavit si můžete co vás napadne, podle vlastního uvážení. Zde je můj příklad...

Právě čtené knihy

Knihy, které právě čtu. Pouze jsem využila název knihy, autora a poličky. Pokud knihy právě čtu, nepotřebuji komentáře ani hodnocení... Opět si můžete vybrat cokoli chcete, můj příklad vidíte zde...

Menší úpravy

Pokud si chcete zkusit změnit detaily, máte možnost přes kód, který jste si vložili do menu...

 .gr_custom_container_1547846674 {
    /* customize your Goodreads widget container here*/
    border: 0px solid gray;
    border-radius:10px;
    padding: 10px 5px 10px 5px;
    background-color: #FFFFFF;
    color: #000000;
    width: 300px
  }
  .gr_custom_header_1547846674 {
    /* customize your Goodreads header here*/
    border-bottom: 1px solid gray;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    font-size: 120%
  }
  .gr_custom_each_container_1547846674 {
    /* customize each individual book container here */
    width: 100%;
    clear: both;
    margin-bottom: 10px;
    overflow: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid #aaa;
  }
  .gr_custom_book_container_1547846674 {
    /* customize your book covers here */
    overflow: hidden;
    height: 60px;
      float: left;
      margin-right: 4px;
      width: 39px;
  }
  .gr_custom_author_1547846674 {
    /* customize your author names here */
    font-size: 10px;
  }
  .gr_custom_tags_1547846674 {
    /* customize your tags here */
    font-size: 10px;
    color: gray;
  }
  .gr_custom_rating_1547846674 {
    /* customize your rating stars here */
    float: right;
  }

border: 0px solid gray;  - rámeček šířka a barva
border-radius:10px;- rámeček oblé rohy

border-bottom: 1px solid gray; - rámeček pod nadpisem, jeho smazáním zmizí
font-size: 120% - velikost nadpisu, chcete-li menší, zadejte třeba 100%, 80% nebo podle libosti

border-bottom: 1px solid #aaa;  - rámeček pod každou knihou, pokud ho smažete, nebou jednotlivé řádky oddělené

V tomto případě máte název (viz Lucy's bookshelf...) a můžete ho přejmenovat. V případě nutnosti, pokud mu výše nastavíte velikost písma 0%, nebude vidět. To však nedoporučuji, protože z nějakého důvodu tam zůstává stínované podtržení, kterého se nelze zbavit. Tlačítko goodreads odstranit taky nejde. Po smazání mi tam stejně zůstalo...

A to je pro dnešek asi všechno. Snad vám přišel návod užitečný a srozumitelný :-)