Nová nastavení optimalizace vyhledávání blogu

Možnosti nastavení blogu na platformě blogger.com se opět o něco rozšířili a mohou pomoci lépe a přesněji optimalizovat obsah blogu, jednotlivé články a obrázky, pro vyhledávače. Souhrnně řečeno, jedná se o nastavení SEO. Nová nastavení umožňují vložit meta značku popisu blogu i jednotlivých článků, konfigurovat přístup vyhledávacích robotů, aniž by bylo potřeba něco editovat v kódu šablony, a další novinky.
První novinkou je položka v menu nastavení "Nastavení vyhledávání".

Kliknutím zobrazíte všechny možnosti. Tou první je nastavení značky metadat blogu. Kliknutím na přepínací tlačítko " Ano, povolíte vložení vlastního popisu blogu pro vyhledávání a do textového bloku vložíte text. Stručně popíšeme (máme na to jen 150 znaků) o čem náš blog vlastně je a změny uložíme.
Povolením popisu pro vyhledávání nám také přibude možnost vložit popis každého příspěvku.
Otevřeme příspěvek do kterého chceme meta značku vložit. V pravém menu "Nastavení příspěvků" klikneme na "Vyhledávat v popisu" a do textového pole vyplníme popis příspěvku.

Další položkou v novém nastavení jsou "Chyby a přesměrování". Poskytuje možnost vložení vlastní zprávy při chybě "Stránka nebyla nalezena" (Error 404). Také lze ručně nastavit přesměrování odkazu.

Poslední položkou v nastavení je "Prohledávače a indexování". Zde máme možnost vložit upravený vlastní soubor robots.txt, který nahradí ten původní. Pokud povolíte vkládání vlastních meta značek pro roboty, např. noindex, nofollow, noarchive atd., lze je označením vložit do záhlaví:

• Domovské stránky
• Stránky archivace a vyhledávání
• Výchozí pro příspěvky a stránky

Pokud se chcete pustit do úprav položky "Prohledávače a indexování", buďte opatrní. Úplný začátečník, by měl rozhodně o používání meta značek a editaci souboru robots.txt něco přečíst, než se pustí do nastavování. Nesprávným nastavením, může dojít k ignorování celého blogu vyhledávacími roboty, nebo části obsahu. Upozorňuje na to i zobrazené varování.
Nové možnosti ohledně editace odkazů a obrázků se nastavují v samotném příspěvku.Úprava odkazu v příspěvku obsahuje navíc možnost vložit atribut "nofollow".

Vložíme-li do příspěvku obrázek, v liště jeho nastavení nalezneme nový odkaz "Properties".

V okně můžeme vyplnit titulek obrázku a alternativní text (alt.)

To je všechno. Hodně zdaru.

Jak vložit na stránky jednoduchou kalkulačku

Před časem jsem potřeboval vložit na webové stránky jednoduchou kalkulačku. Někde na internetu, bohužel nevím kde, jsem našel šikovný kód k vložení na stránky. Nejsem žádný odborník, ale myslím, že je to docela jednoduché a parádní řešení. Komu stačí základní kalkulačka s funkcemi, sčítání, odčítání, násobení a dělení, může být následující postup dobrým řešením.
Protože používám Blogger, popíši postup pro tuto platformu, ale kalkulačka bude jistě fungovat i jinde.

Vložení kalkulačky na blogger.com

Nejprve si zvolíme umístění kalkulačky. Kalkulačku můžeme vložit do článku na blogu, nebo jako widget (miniaplikace). Funguje v obou případech, takže volba je jen na vlastním uvážení.

Vložení do článku

Po přihlášení na blog, vytvoříme nový příspěvek. Když máme hotovo, zvolíme místo v článku kde chceme kalkulačku zobrazit. V panelu nástrojů pro editaci příspěvku, přepneme zobrazení na html kód, tak, že klikneme na tlačítko s názvem "HTML" (dvojice tlačítek nahoře vlevo v panelu nástrojů).

Tlačítko pro přepnutí zobrazení

V náhledu kódu přesuneme kurzor na místo zvolené pro zobrazení kalkulačky a vložíme kód uvedený níže.

 Příklad HTML kódu:

<form name="calculator">
<table bgcolor="#73B27B" border="4" bordercolor="#FFFFFF" cellpadding="1" cellspacing="2" style="width: 222px;"><tbody>
<tr> <td>
<input length="25" name="ans" size="25" style="background: beige; color: black;" type="text" value="" /></td> </tr>
</tbody></table>
<table bgcolor="#73B27B" border="4" bordercolor="#FFFFFF" cellpadding="2" cellspacing="2" style="width: 222px;"><tbody>
<tr> <td align="center">
<input name="seven" onclick="document.calculator.ans.value+='7'" type="button" value=" 7 " /></td> <td align="center">
<input name="eight" onclick="document.calculator.ans.value+='8'" type="button" value=" 8 " /></td> <td align="center">
<input name="nine" onclick="document.calculator.ans.value+='9'" type="button" value=" 9 " /></td> <td align="center">
<input name="divide" onclick="document.calculator.ans.value+='/'" type="button" value=" / " /></td> </tr>
<tr> <td align="center">
<input name="four" onclick="document.calculator.ans.value+='4'" type="button" value=" 4 " /></td> <td align="center">
<input name="five" onclick="document.calculator.ans.value+='5'" type="button" value=" 5 " /></td> <td align="center">
<input name="six" onclick="document.calculator.ans.value+='6'" type="button" value=" 6 " /></td> <td align="center">
<input name="multiply" onclick="document.calculator.ans.value+='*'" type="button" value=" * " /></td> </tr>
<tr> <td align="center">
<input name="one" onclick="document.calculator.ans.value+='1'" type="button" value=" 1 " /></td> <td align="center">
<input name="two" onclick="document.calculator.ans.value+='2'" type="button" value=" 2 " /></td> <td align="center">
<input name="three" onclick="document.calculator.ans.value+='3'" type="button" value=" 3 " /></td> <td align="center">
<input name="subtract" onclick="document.calculator.ans.value+='-'" type="button" value=" - " /></td> </tr>
<tr> <td align="center">
<input name="clear" onclick="document.calculator.ans.value=''" type="button" value=" C " /></td> <td align="center">
<input name="zero" onclick="document.calculator.ans.value+='0'" type="button" value=" 0 " /></td> <td align="center">
<input name="equal" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)" type="button" value=" = " /></td> <td align="center">
<input name="add" onclick="document.calculator.ans.value+='+'" type="button" value=" + " /></td> </tr>
</tbody></table>
</form>

Uložíme a můžeme zhodnotit výsledek. V článku máme funkční kalkulačku.

Pro základní úpravu vzhledu kalkulačky lze změnit barvy pozadí, textu a orámování, editací položek označených červeně.
Výsledek může vypadat třeba takhle.

Vložit kalkulačku jako widget (miniaplikaci)

 V nabídce nastavení blogu otevřeme položku "Rozvržení". Klikneme na "Přidat miniaplikaci" a zvolíme kartu "HTML/JavaScript". Dále je postup stejný jako v předchozím případě. Vložíme zkopírovaný kód a uložíme. Tak a máme to hotové.

Nové možnosti zobrazení blogu pomocí rozšíření Chrome

Nové rozšíření, prohlížeče Google Chrome, Blogger Dynamic Views, nabízí úplně novou perspektivu zobrazeni blogu služby blogger.com.

Pokud jste aktivními uživateli blogerského účtu na blogger.com, možná víte, že již týden  funguje několik nových dynamických šablon, na základě moderních webových technologií, jako CSS3, HTML5 a AJAX, které nabízejí naprosto nové možnosti zobrazení vašeho blogu.

Podmínka pro správnou funkci zobrazení blogu je nainstalovaný prohlížeč Google Chrome s rozšířením "Blogger Dynamic Views". Po jejím splnění, můžete vyzkoušet jak to celé funguje. Načtěte si v prohlížeči jakýkoliv blog služby blogger.com, např. http://dc-bublina.blogspot.com/. Vpravo v adresním řádku se objeví známá ikona "blogger".

Blogger.com má nový editor šablon

Ti z nás, kteří již nějaký čas provozují svůj blog pomocí služby blogger.com po nějakém čase většinou zatouží po větší svobodě výběru grafické podoby svých stránek. Velmi záhy jsem tento problém začal řešit. Má znalost kodu je bídná, proto jsem jako většina vzal za vděk výběrem šablony někde na internetu kde jsou ke stažení ve velkém množství. Jenže mi opět vadilo, že i drobné "kosmetické" úpravy vyžadovali znalost kódu. Než jsem pochopil základy, mělo mé "programátorské" snažení několikrát za následek totální rozložení layoutu. Než jsem se naučil zálohovat šablonu, párkrát jsem blog natolik dovrtal, že nešel uvést do původního stavu.

Jak zobrazit v blogger nové komentáře

Zobrazení komentářů ve službě blogger je velmi jednoduché, pokud nám stačí zobrazení posledních pěti komentářů. V opačném případě je to trochu složitější. Nejprve ten lehčí způsob. Přihlásíme se ke svému účtu na blogger.com a v menu Rozvržení > Prvky stránky, zvolíme "Přidat miniaplikaci" tam kde chceme komentáře zobrazovat.

Ze seznamu aplikací vybereme "Feed" a do kolonky pro adresu zadáme http://ADRESA_VAŠICH_STRÁNEK/feeds/comments/default . Nastavíme počet zobrazovaných komentářů a chceme-li zobrazit datum a autora. Uložíme a máme hotovo.

V předchozím případě jsme omezeni počtem zobrazení komentářů, jehož maximum je pět.

Jak vložit html kód do článku na blogger

Občas potřebujeme v textu článku zobrazit html kód nebo skript. V případě, který jsem si vybral se kód zobrazuje ve vložených polích. Barvu pozadí, šířku, druh fontu apod. je možné editovat pomocí CSS stylu.

Přihlásíme se ke svému účtu na blogger.com a v menu Rozvržení, zvolíme Upravit HTML. V tomto případě "Rozbalit šablony pomůcek" neoznačíme. Nejlépe pomocí Ctrl+F vyhledáme část kódu jako

]]></b:skin>

Před tuto část vložíme následující kód:

Jak v blogger editovat ikonu záložky stránky

Změna obrázku ikony záložky stránky (favicone, shortcut icon).
Přihlásíme se na svůj účet blogger.com. Pro jistotu uložíme původní šablonu v Menu > Rozvržení > Upravit HTML. Klikneme na odkaz Stáhnout úplnou šablonu.

V kódu úvodu stránky, nad <b:skin><![CDATA[ najděte část vypadající takto:

<link href='http://PŘESNÁ_ADRESA_OBRÁZKU.png' rel='shortcut icon'/>

Změňte adresu podle nového umístění obrázku.

Obrázek je možné umístit do Vaší Picasa galerie a doplnit jeho přesnou adresu. Příklad:

http://lh3.ggpht.com/_NXRlVmwvuwA/Sd6mNxldkXI/AAAAAAAAACc/Vtt56WF-VAo/logo-bublina.png

Uložíme šablonu. Je dobré smazat historii prohlížeče a obnovit stránku, někdy i 2x. Nová ikona stránky by se měla zobrazovat.

Aktualizováno 20.4.2013

Od roku 2011 nabízí Blogger podstatně elegantnější způsob změny obrázku ikony stránky. V rozvržení gadgetů v šabloně, přibyla kolonka Favicon, v levém horním rohu.

Červeně označená kolonka pro editaci

Po kliknutí na odkaz Upravit, se otevře vyskakovací okno, v něm vyberete a nahrajete vlastní obrázek, který chcete pro ikonu použít. Vyberte čtvercový obrázek, menší než 100 kB, jak je uvedeno v popisu. Po uložení máte hotovo.

Jak v blogger rozdělit článek na úvod a celý obsah

Rozdělení článku na samostatný úvod a celý obsah. Přidání odkazu "číst celé".
Nejprve upravíme html kód šablony. Přihlásíme se ke svému účtu na blogger.com. V menu zvolíme Rozvržení > Upravit HTML a označíme "Rozbalit šablony pomůcek". Šablonu si uložíme.

Vyhledáme pomocí kláv. zkr. Ctrl + F část kódu jako <data:post.body/> a přepíšeme ho následujícím kódem:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style><p><data:post.body/></p><b:if cond='data:blog.pageType != &quot;item&quot;'>

<a expr:href='data:post.url'>číst více...</a>

</b:if>

</b:if>

Uložíme šablonu. Váš kód by měl vypadat takto: