Blogger pentru dispozitivele mobile

Conform anuntului facut de Blogger in draft, in data de 17 Decembrie 2010 a fost lansata in test optiunea de vizualizare a blogurilor intr-un format special daca sunt accesate de pe un dispozitiv mobil (telefon mobil).

Odata activata aceasta optiune, vizitatorii blogului, daca intra de pe un telefon mobil, vor fi redirectionati in mod automat catre versiunea pentru mobil a blogului tau.

Cum activezi versiunea pentru mobil?

1. Te conectezi la Blogger in Draft;
2. Selecteaza Setari si apoi Email si mobil;
3. Pentru inceput apasa pe Previzualizare pentru mobil pentru a vedea cum arata blogul tau in versiunea pentru mobil;
4. Daca esti multumit selecteaza Da, doresc ca pe dispozitivele mobile sa se afiseze versiunea pentru mobil a sablonului meu;
5. Nu uita sa apesi pe butonul Salvati setarile.

Acum tot ce iti ramane de facut este sa-ti accesezi blogul cu un telefon mobil ca sa vezi cum arata!

Noutati de la Blogger in 2011

Potrivit articolului What’s New With Blogger postat pe Blogger Buzz, anul 2010 a fost un an bun pentru Blogger:

• conform Alexa, Blogger este pe locul 6 in categoria Top sites;
• in anul 2010 au fost publicate mai mult de jumatate de miliard de posturi, care au fost citite de mai mult de 400 de milioane de utilizatori;
• au fost aduse multe imbunatatiri interfetei cat si optiunilor disponibile in Blogger: Pagina de design a sabloanelor, statistici in timp real si widgetul postari populare , sabloanele pentru telefoanele mobile, etc.

Ca si "bonus", Blogger a fost catalogat drept cel mai bun serviciu de blogging cu cel mai mare up time, conform celor de la Pingdom.

Prin urmare daca decideti sa va apucati de un blog, faptul ca acesta va fi functional 24/24 este un atu in plus pentru platforma blogspot!

In 2011 cei de la Blogger promit o serie de noutati interesante:

• un nou editor de postari
  
  
• un tablou de bord (dasboard) nou
  
  
• si altele care inca nu au dorit sa le dezvaluie :)

Widget nou: Urmariti prin e-mail!

Pe data de 16 Martie 2011, pe pagina Blogger Buzz a fost anuntata lansarea oficiala a noului widget oferit de Blogger: Urmariti prin e-mail.



Acest widget ofera cititorilor blogului tau o modalitate simpla de a fi la curent cu ultimele noutati de pe blog, acestea fiind livrate direct in casuta de mail a celor care s-au abonat.

Pentru a adauga pe blog acest widget trebuie sa:

1. Te conectezi la Contul de Blogger, selectezi Design si apoi in functie de unde vrei sa apara pe blog selecteaza Adaugati un obiect gadget;
2. In noua fereastra selecteaza widgetul Urmariti prin e-mail si apoi apasa pe butonul Salvati;

Daca vrei sa te abonezi la acest blog, introdu e-mailul tau in casuta de mai jos:

La cati mai multi abonati :)

Optimizarea titlului posturilor din blogul tau

Titlul paginii este textul care apare in partea de sus a browser-ului tau.
Important este, ca titlul paginii reprezinta linkul din rezultatele motoarelor de cautare pe care se face click si se ajunge pe blogul tau. Din punct de vedere SEO (Search Engine Optimisation), titlul paginii este unul din elementele cele mai importante ale blogului tau in ceea ce priveste pozitia paginii respective in pagina de rezultate a motoarelor de cautare (SERP - Search Engine Results Page).

Un titlu de pagina daca este bine construit si cuprinde cuvinte cheie ce descriu cel mai bine continutul postului din blogul respectiv, atunci traficul pe blogul tau poate creste substantial.

In cazul blogurilor create pe platforma Blogger / Blogspot, titlul unei pagini (sau postari) este alcatuit din titlul blogului si titlul postului:




Aceasta structura nu este benefica din punct de vedere SEO, deoarece in SERP, Google afisaza maxim 70 de caractere din titlul paginii.

In exemplul de mai sus cuvintele cheie pentru pagina respectiva sunt: domeniu blogspot si domeniu personalizat si dupa cum se observa cuvintele "domeniu personalizat" nu apar in titlul paginii.

Pentru a beneficia de titlul complet al acestei pagini, el ar trebui sa arate asa:



Trebuie acordata prioritate titlului de post fata de titlul blogului:

1. Te conectezi la Contul de Blogger;
2. Selectezi Design si apoi Editati HTML;
3. Inainte de a efectua modificarea fa-ti o copie de siguranta a sablonului;
4. Cauta in sablon, linia:
   

   1	<title><data:blog.pageTitle/></title>

5. Si inlocuieste-o cu:
   

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

   2	<title><data:blog.pageTitle/></title>

   3

   <b:else/>

   4	<title><data:blog.pageName/> | <data:blog.title/></title>

   5

   </b:if>

6. Salveaza!

In urma acestei schimbari titlul postului va fi prezentat in intregime, iar cuvintele cheie din el vor face ca mai multi vizitatori sa ajunga pe blogul tau.

• Daca ti s-a parut util tutorialul poti sa dai un Like, pentru a afla si altii de el.
• Ai vreo sugestie sau intrebare, nu ezita sa lasi un comentariu mai jos.

Ce sunt linkurile dofollow / nofollow?

Daca ai citit cate ceva despre SEO este foarte posibil sa fi intalnit termenii dofollow si nofollow si te-ai intebat ce reprezinta. In acest tutorial voi incerca sa-ti explic ce reprezinta aceste "atribute" ale link-urilor si cu ce te pot ajuta ele.





Un link text obisnuit, scris in HTML, are urmatoarea forma:

• <a href="http://tutoriale-blog.blogspot.com/">Tutoriale Blog</a> => Tutoriale Blog

Pe langa title="titlu-site", target="_blank", unui link i se poate adauga si atributul rel="nofollow". Acest atribut "spune" motoarelor de cautare: STOP - nu te duce catre acest link! Utilizatorii nu vor vedea nici o diferenta inte un link dofollow si unul nofollow.

Mai jos este acelasi link ca cel de sus, dar are atributul nofollow:

• <a href="http://www.blog-help.net/" rel="nofollow">Blog Help</a> => Blog Help

In mod implicit toate linkurile sunt dofollow.

Daca vizual nu este nici o diferenta, probabil te intrebi cum recunosti linkurile cu nofollow?

Poti vedea lucrul acesta uitandu-te in sursa paginii, dar este destul de anevoios. O metoda foarte simpla este folosirea add-on-urilor pentru Mozilla Firefox: NoDoFollow, iar pentru Chrome: NoFollow.

Noi sabloane dinamice de la Blogger

Se pare ca cei de la Blogger se tin de cuvant si incep sa lanseze noi optiuni pentru blogurile create pe platforma lor.

Pe data de 31 Martie 2011 pe blogul oficial Blogger Buzz se anunta lansarea a 5 noi sabloane dinamice, ce vor putea fi modificate dupa bunul plac al utilizatorilor, atu-urile acestor sabloane fiind:

• toate posturile vor fi afisate pe o singura pagina, vizitatorul nefiind nevoit sa paraseasca pagina respectiva;
• diverse modalitati de vizualizare a blogurilor;
• imbunatatirea vitezei de incarcare a blogului: imaginile se vor incarca in timp ce sunt vizualizate;

Adauga butonul Tweet de la Twitter in fiecare post

Asemanator butonului Like de la Facebook si acest buton de la Twitter faciliteaza impartasirea informatiei din posturile blogului tau, in reteaua sociala Twitter. In acest tutorial vei invata cum sa adaugi acest buton pe blogul tau!

Ce este Twitter?

Conform descrierii lor:

Twitter is a real-time information network that connects you to the latest information about what you find interesting. Simply find the public streams you find most compelling and follow the conversations.

Pasii necesari pentru adaugarea butonului Tweet

1. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
2. Pentru orice eventualitate, fa o copie de siguranta a blogului;
3. Bifeaza casuta Extindeti sabloanele control;
4. Cauta (CTRL + F) in sablonul blogului, linia:
   

   1	<data:post.body/>

5. Introdu codul de mai jos imediat dupa linia cautata la pasul anterior:
   

   1	<!-- Butonul Tweet de la Twitter -->

   2	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

   3	<div style='text-align:left;padding:5px 5px 5px 0;'>

   4	<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='TutorialeBlog' href='http://twitter.com/share'>Tweet</a>

   5	<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

   6

   </div>

   7

   </b:if>

   8	<!-- www.blog-help.net -->

Configurarea butonului Tweet

1. Pentru modificarea butonului trebuie sa schimbati parametrii din linia 4, cea cu galben:
   
   

   Tipul butonul	Atribut	Valoare
   	data-count	vertical
   	data-count	horizontal
   	data-count	none

   
   
2. La data-via= in loc de TutorialeBlog trebuie sa introduci numele contului tau de Tweeter;
3. Poti pozitiona butonul la inceputul postului: copiaza codul de la pasul 5 inainte de <data:post.body/>;
4. Daca doresti ca butonul sa apara si pe paginile statice din blog, elimina linia 2 si 7;

Cand esti multumit de modificarile facute salveaza sablonul si ar trebui ca fiecare post al tau sa aiba cate un buton de Tweeter.

Daca ti s-a parut util acest tutorial nu te sfii sa dai un Like :) sau sa lasi un comentariu mai jos.

Widgetul AddThis

In acest tutorial va prezint widgetul oferit de AddThis - The #1 Bookmarking & Sharing Service.

Widgetul ofera posibilitatea de a partaja informatia din posturile blogului pe retelele de socializare: Facebook, Tweeter, Google Buzz, StumbleUpon, etc.



Avantajul folosirii widgetului AddThis este ca nu mai trebuie adaugate separat butoanele pentru fiecare retea de socializare in parte cum este cazul butonului Like de la Facebook sau a butonului Tweet de la Twitter.

Odata instalat widgetul, blogul tau va dispune de majoritatea retelelor de socializare existente.

Instalarea widgetului

1. Acceseaza pagina Get AddThis;
2. Selecteaza platforma unde vei instala widgetul. In cazul nostru platforma Blogger;
3. Mai jos, selecteaza stilul pentru butoane;
4. Daca doresti si serviciul de Statistici (dar trebuie sa iti faci cont) lasa selectata optiunea Yes, I want analytics, daca nu, selecteaza No, just give me the button code;
5. Ultimul pas, apasa pe Get the Code si vei fi redirectionat catre o pagina de unde poti copia codul si unde ti se explica cum il poti integra pe blog in fiecare post sau in bara laterala a blogului.

Daca te descurci in HTML si CSS te poti uita peste Galeria de butoane, dar pentru instalarea widgetului va trebui sa introduci manual in template-ul blogului cod HTML, CSS si JavaScript.

Daca ti s-a parut util acest tutorial poti sa dai un Like, sau sa lasi un comentariu mai jos.

Introducere in Pagina de Design a Sabloanelor

Dupa ce ti-ai creat blogul te gandesti sa aduci cateva modificari asupra aspectului.
Poti realiza lucrul acesta intr-un mod foarte simplu cu ajutorul optiunii Pagina de design a sabloanelor oferita de Blogger.

Ce trebuie sa faci?

• Te conectezi la contul de Blogger si selectezi optiunea Design aferenta blogului ce vrei sa-l modifici;
• In pagina de Desing da click pe optiunea Pagina de design a sabloanelor.

Meniul Sabloane

• In cadrul acestui meniu poti selecta diverse sabloane oferite de Blogger cat si temele aferente acestora. Nu te grabi si uita-te la toate pentru a vedea care ti se potriveste;
• Dupa ce te-ai hotarat la un sablon, treci la urmatorul meniu, Fundal.

Meniul Fundal

• Aici poti modifica Imaginea de fundal cu una oferita de Blogger, fie cu una proprie ce o poti incarca din calculator;
• Si poti selecta o alta tema de culori pentru blogul tau.

Meniul Aspect

In meniul Aspect vei gasi 3 optiuni:

• Aspectul continutului: poti modifica numarul si pozitia barilor laterale;
• Aspectul subsolului: poti modifica numarul de spatii continute de subsol, respectiv un spatiu, doua sau trei;
• Reglati latimea: poti regla latimea (in pixeli) pentru elementele blogului (in functie de ce ai ales la Aspectul continutului): tot blogul, bara din stanga sau cea din dreapta.

Meniul Avansat

Dum cum este si denumit, in cadrul acestui meniu poti efectua modificari mai ample asupra blogului. Poti schimba:

• fontul si culoarea textului din blog;
• culorile fundalurilor, Fundal exterior, Fundal principal si Fundal de antet;
• culorile pentru link-uri;
• fontul si culoarea textului din Titlul blogului cat si cea din Descriere;
• ...

Finish!

Dupa ce ai experimentat cu diverse culori, fonturi, etc, si crezi ca ai terminat ai doua optiuni:

• fie apesi pe Aplicati sablonul in blog si toate setarile facute de tine vor fi salvate si aplicate blogului, sau
• daca nu esti multumit de modificarile facute, apasa pe Inapoi la Blogger si apoi pe Leave this Page, astfel nu se va aduce nici o modificare asupra blogului.

• Daca ti s-a parut util tutorialul poti sa dai un Like, pentru a afla si altii de el.
• Ai vreo sugestie sau intrebare, nu ezita sa lasi un comentariu mai jos.

Cum schimb Blogger Favicon?

Ce este favicon?

Favicon este iconita ce precede URL-ul in bara de adrese a browser-ului.

Cum schimb favicon-ul?

1. Iti poti face propria iconita:
   
   • cu ajutorul unui program de grafica;
   • poti cauta pe internet una gata facuta care crezi ca s-ar potrivi blogului tau;
   • sau poti sa folosesti siteuri ce genereaza iconite pe baza unei imagini. O lista de astfel de siteuri o poti gasi aici Justskins.com;
2. Dupa ce te-ai hotarat la o iconita, trebuie sa o uploadezi undeva (Picassa, Flickr, etc.). Dupa ce ai uploadat-o, salveaza calea catre ea, o sa fie ceva de genul http://..../favicon.ico;
3. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
4. Cauta in sablonul blogului linia <b:skin><![CDATA[ si introdu codul de mai jos imediat inaintea acesteia:
   

   1	<link href='URL-ul iconitei tale' rel='shortcut icon' type='image/x-icon'/>

5. Salveaza sablonul si vizualizeaza blogul;
   
6. In locul iconitei vechi ar trebui sa vezi noua iconita.

Structura si partile componente ale unui blog

Probabil ai auzit de multe ori de termenii header (antet), sidebar (bara laterala), footer (subsol), navbar (bara de navigare), dar nu ai fost sigur ce sunt. Inainte de a te apuca sa aduci modificari blogului tau ti-ar fi util sa cunosti cu exactitate rolul acestora in "anatomia" unui blog.

Partile componente ale unui blog:

1. Antet (Header) - de obicei antetul este format din doua componente:
   
   • blog title - titlul blogului ales de tine;
   • description - o proprozitie prin care descrii blogul;
2. Bara de navigare (Navbar) - pe langa Blogger Navbar (vezi tutorialul Cum elimin sau ascund Blogger Navbar?), de obicei, mai exista sub Antent, o bara de navigare ce contine linkuri catre paginile importante ale blogului;
3. Bara laterala (Sidebar) - in mod normal contine widgeturi (cele mai recente posturi, blogroll, etichete, etc.)
4. Post Area - contine posturile blogului si de obicei poti selecta cate posturi sa apara pe prima pagina;
5. Subsol (Footer) - asemanator cu barile laterale, in subsol pot fi introduse widgeturi, linkuri sau alte informatii mai putin importante pentru vizitatorii blogului.

Cu ajutorul extensiei Firebug, pentru Mozilla Firefox, iti va fi foarte usor sa identifici elementele structurale ale unui blog.

Cum creez o lista de linkuri

In acest tutorial iti voi prezenta trei modalitati pentru a crea o lista de linkuri. In cazul Blogger, orice lista de linkuri presupune adaugarea unui nou widget pe blog.

1. Te conectezi la contul de Blogger -> Design -> Elemente de pagina;
2. In functie de locul pe blog unde vrei sa apara widgetul, selecteaza Adaugati un obiect gadget.

1. Widget HTML/Javascript

• In campul Titlu poti introduce ce doresti (Parteneri, Blogroll, etc.);
  
• In campul Continut introduci linkurile, acestea trebuie sa aiba forma:
  
  <a href="URL-SITE" target="_blank" title="TITLU-SITE">NUME-SITE</a>
  
  • URL-SITE - trebuie sa fie neaparat de forma http://www.;
  • target="_blank" - deschide linkul respectiv intr-o noua fereastra, astfel vizitatorul nu o sa paraseasca blogul tau;
  • title="TITLU-SITE" - poti sa dai un titlu pentru siteul respectiv insa nu este obligatoriu;
• AVANTAJE: aceasta metoda este cea mai flexibila, datorita optiunilor pe care le ai pentru configurarea si aspectul linkurilor;
• DEZAVANTAJE: necesita unele cunostinte de HTML si CSS.

2. Widget Lista de bloguri

• Pentru a adauga un link nou in aceasta lista apasa pe Adaugare blog la lista dvs.
• Este de ajuns introducerea URL-ului catre blogul/siteul respectiv, automat el va aparea in lista fara a mai fi nevoie de introducerea altor date din partea ta, cum ar fi numele linkului respectiv;
• Te poti juca cu optiunile oferite de acest widget si sa le selectezi pe cele care crezi ca se potrivesc mai bine cu blogul tau.
• AVANTAJE: usurinta in utilizare si numarul mare de optiuni;
• DEZAVANTAJE: limitare privind aspectul.

3. Widget Lista de linkuri

• Lista de linkuri este foarte asemanatoare cu cea de bloguri, dar are mai putine optiuni;
• Trebuie introdus URL-ul siteului si numele acestuia;
• AVANTAJE: usurinta in utilizare;
• DEZAVANTAJE: limitare privind aspectul.

Daca ti s-a parut util tutorialul poti sa dai un Like sau lasi un comentariu mai jos.

Ce este RSS

RSS, abrevierea pentru Really Simple Syndication sau Rich Site Summary este un format pentru furnizarea de continut web actualizat folosit de utlizatorii internetului pentru a urmarii site-urile lor favorite.

Utilitatea RSS-ului

Intr-un trecut nu prea indepartat, urmarirea de noi informatii pe siteurile sau blogurile favorite se putea realiza in cateva moduri:

1. Memorarea adresei web si din cand in cand vizitarea ei prin introducerea URL-ului in browser;
2. Salvarea paginii web dorite prin aplicarea unui semn de carte (bookmark). Aceasta metoda este destul de des intalnita si acum, deoarece printr-un singur click poti ajunge pe site-ul dorit.

Din pacate, cele doua "metode" prezentate mai sus, necesita implicarea directa a utilizatorului si cate o data nu sunt si cele mai eficiente pentru ca:

• poti rata informatiile noi daca uiti sa intri o perioada pe siteul sau blogul respectiv;
• poti sa pierzi timp daca intri pe siteul sau blogul dorit si acesta nu a fost actualizat cu stiri noi;
• iti va fi greu sa ti evidenta siteurilor pe care le-ai vizitat sau nu, atunci cand numarul acestora se va mari.

Datorita RSS-ului nu va trebui sa iti faci probleme ca cele de mai sus pentru ca toate informatiile noi de pe siteurile tale preferate vor ajunge la tine fara intarziere si in mod automat!

Cum este posibil lucrul acesta?

Pentru a beneficia de utilitatea RSS-ului aveti nevoie de doua lucruri:

1. Un cititor de "feed-uri" RSS. Cele mai populare cititoare de feed-uri gratis sunt Google Reader, Bloglines si My Yahoo. Daca folositi browser-ul Opera nu trebuie sa mai apelati la un cititor de feed-uri pentru ca are deja inclus un astfel de modul, iar daca folositi Mozilla Firefox puteti instala o extensie pentru a citi feed-urile.
2. Aboneaza-te la "feed-urile" RSS dorite. Pentru abonare uitati-va dupa pictograma RSS, sau un buton langa aceasta pictograma cu denumirea "Subscribe". De exemplu pentru a va abona la fluxul de stiri a siteului Blog Help, apasati pe pictograma RSS din sectiunea "Afla ultimele noutati" sau introdu adresa ta de mail si vei primi stirile automat in casuta ta de mail.

Daca vi s-a parut util acest articol sau aveti vreo intrebare, sugestie va rugam sa lasati un comentariu mai jos.

Notiuni introductive in limbajul HTML

Inainte de a incepe sa va modificati sablonul sau tema aleasa pentru blog, va sunt necesare cateva cunostinte minime despre HTML si CSS.

Ce inseamna HTML?

• HTML reprezinta abrevierea de la Hyper Text Markup Language si este codul care sta la baza paginilor web (siteuri, bloguri, etc.);
• limbajul HTML nu trebuie confundat cu un limbaj de programare, el este un limbaj de marcare;
• limbajul de marcare combina textul cu instructiuni de marcare (tag-uri) in cadrul aceluiasi fisier;
• Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm.

Etichetele HTML

In general instructiunile de marcare sunt numite etichete HTML (tag-uri).

• Etichetele HTML sunt cuvinte cheie incadrate intre "<" si ">", precum <html>;
• In mod normal etichetele HTML sunt pereche, una pentru inceput <html> si una pentru sfarsit </html>;
• Etichetele pentru inceput si sfarsit mai sunt numite etichete de deschidere si inchidere.

Documentele HTML = Pagini Web

Documentele HTML contin text simplu, neformatat, si etichete HTML, rezultand pagini web. Este mult mai raspandita expresia de pagina web fata de document HTML, dar ambele inseamna acelasi lucru.

Scopul unui browser web (Internet Explorer, Mozilla Firefox, Opera, Chrome, etc.) este de a citi si interpreta documentele html, redandu-le sub forma de pagini web. Browserul nu afisaze etichetele HTML, ci le interpreteaza pentru a "stii" cum sa afiseze textul dintr-un document HTML:

<html>
<body>
...
<h1>Antet</h1>
...
<p>paragraf</p>
...
</body>
</html>

In exemplul de mai sus:

• Datorita etichetelor <html> si </html> browserul interpreteaza textul dintre acestea ca si pagina web;
• Informatia vizibila in browser este incadrata de etichetele <body> si </body>;
• Textul dintre <h1> si </h1> este afisat ca antet;
• Textul dintre <p> si </p> este afisat ca paragraf.

Editarea codului HTML

Pentru editarea codului HTML este de ajuns cel mai simplu editor text, cum ar fi Notepad din cadrul Windows-ului. Daca doriti puteti utiliza programe mai complexe cum ar fi Dreamweaver.

Acestea sunt cateva notiuni elementare, daca doriti sa aflati mai multe despre limbajul HTML (si nu numai) gasiti resurse si tutoriale, explicate pe intelesul tuturor la adresa: w3schools.

• Daca vi s-a parut util tutorialul puteti sa dati un Like, pentru a afla si altii de el.
• Aveti vreo sugestie sau intrebare, nu ezitati sa lasati un comentariu mai jos.

Adauga butonul Like de la Facebook in fiecare post

Ok, deci ai un blog si vrei sa adaugi butonul Like de la Facebook in fiecare post al blogului. Probabil te intrebi:

Cu ce ma ajuta acest buton?

Este o modalitate foarte simpla pentru vizitatorii blogului tau de a impartasi informatia gasita in cadrul posturilor tale, aceasta ajungand sub forma unui link in reteaua de socializare Facebook.

Beneficiul tau datorita raspandirii informatiei prin aceasta metoda, va rezulta in mai multi vizitatori pe blogul tau.

Pasii necesari pentru adaugarea butonului Like

1. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
2. Ca de obicei, o copie de siguranta a blogului, nu strica;
3. Bifeaza casuta Extindeti sabloanele control;
4. Cauta in sablonul blogului linia:
   

   1	<data:post.body/>

5. Introdu codul de mai jos imediat dupa linia cautata la pasul anterior:
   

   1	<!-- Butonul Like de la Facebook -->

   2	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

   3	<div style='float:left;padding:5px 5px 5px 0;'>

   4

   <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp; layout=standard&amp;show_faces=false&amp; width=450&amp;action=like&amp; font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>

   5

   </div>

   6

   </b:if>

   7	<!-- www.blog-help.net -->

6. Poti aduce cateva modificari butonului Like, daca schimbi parametrii din linia 4:
   
   

   Cum o sa arate butonul	Atribut	Valoare
   	layout	standard
   	layout	button_count
   	colorscheme	dark
   	action	recommend

   
   Pentru mai multe detalii despre cum poti configura butonul poti intra pe pagina oficiala de la Facebook: Like Button
7. La momentul actual butonul este pozitionat jos in partea stanga a fiecarui post. Poti schimba pozitia acestuia:
   
   • La inceputul postului: copiaza codul de la pasul 5 inainte de <data:post.body/>;
   • Schimba atributul lui float din linia 3, din left in right;
8. Daca ai facut toate modificarile dorite, apasa Salvati Sablon si ar trebui sa te bucuri de noul tau buton Like.

Daca ti s-a parut util acest tutorial si pentru faptul ca tot am vorbit atat despre butonul Like, nu te sfii sa dai un Like :) sau sa lasi un comentariu.

Fa-ti o pagina pe Facebook pentru blogul tau

Acest tutorial nu este destinat in mod special blogurilor de pe platforma Blogger / Blogspot, poate fi utilizat pentru orice tip de site / blog.
Pentru a-ti putea crea o pagina pe Facebook pentru blogul, siteul tau, trebuie in primul rand sa ai cont de utilizator pe Facebook.
Daca inca nu ai cont, iti poti crea aici: Facebook.

Pasii necesari pentru crearea unei pagini pe Facebook

1. Acceseaza linkul Create a Page;
2. In partea dreapta ai meniul Official Page, selecteaza Brand or Product si apoi ultima optiune din meniul derulant, Website;
3. Introdu numele dorit pentru pagina. Gandeste-te bine la numele ales, pentru ca ulterior nu il mai poti schimba;
4. Bifeaza casuta I'm the ... si apasa pe Create Official Page;
5. Initial pagina ta pe Facebook o sa arate ca cea de jos. Acum nu iti mai ramane decat sa introduci informatiile dorite de tine.

Dupa ce ti-ai creat peagina pe Facebook, e timpul ca si vizitatorii blogului tau sa afle lucrul acesta.

• Daca ti s-a parut util tutorialul poti sa dai un Like, pentru a afla si altii de el.
• Ai vreo sugestie sau intrebare, nu ezita sa lasi un comentariu mai jos.

Cum adaug Facebook Like box pe blog?

In acest tutorial vei afla cum sa adaugi Facebook Like box pe blogul tau.
Acest "social plugin" poate fi folosit doar dupa ce in prealabil ti-ai creat o pagina pe Facebook pentru blogul tau.

Acest tutorial ca si cel de sus, poate fi pus in aplicare pentru orice tip de blog (Blogger, Wordpress, etc.) sau site.

Ce poti face cu Facebook Like box?

• sa vezi cati vizitatori ai blogului au dat Like paginii tale;
• este foarte comod pentru vizitatorii blogului sa dea Like, fara a fi nevoiti sa viziteze pagina de Facebook;
• poti afisa in interiorul ei ultimele posturi din blogul tau.

Afla-ti URL-ul paginii de Facebook

1. Te conectezi la Facebook;
2. Accesezi sectiunea Account, din dreapta sus, apoi Manage Pages de unde selectezi pagina dorita;
3. Copiaza URL-ul din bara de adrese a browser-ului.

Configureaza Like box-ul

1. Acceseaza pagina de configurare a Like box-ului;
2. In campul Facebook Page URL introdu URL-ul paginii tale de Facebook si apasa Enter;
3. Poti face diverse setari casetei, iar atunci cand esti multumit apasa pe Get Code;
4. Se va deschide o caseta, iar tu copiaza codul din prima sectiune, cea cu iframe;

Adauga Like box-ul pe blog

1. Te conectezi la Contul de Blogger, selectezi Design si apoi in functie de pozitia unde vrei sa apara pe blog acest widget selecteaza Adaugati un obiect widget;
2. Selecteaza HTML/JavaScript si introdu codul copiat la pasul anterior;
3. Salveaza si bucura-te de noul widget adaugat!

Daca ti s-a parut util tutorialul poti sa dati un Like, pentru a afla si altii de el.
Ai vreo sugestie sau intrebare, nu ezita sa lasi un comentariu mai jos!

Adauga butonul Send de la Facebook in fiecare post

De curand Facebook a lansat un nou serviciu pentru partajarea informatiilor: butonul Send. Cu ajutorul acestuia puteti sa:

• partajati postari de pe bloguri sub forma unui mesaj cu prietenii de pe Facebook;
• postati informatia respectiva pe grupurile de pe Facebook;
• trimiteti un e-mail cu informatia respectiva.

Diferenta dintre butonul Like si butonul Send este ca informatia nu mai este transmisa pe profilul tau de Facebook si astfel vizibila pentru oricine, ci este transmisa doar catre persoanele pe care tu le selectezi!

Urmareste tutorialul de mai jos pentru a afla cum sa adaugi acest buton in fiecare post.

Adauga doar butonul Send

1. Te conectezi la Contul de Blogger -> Design -> Editati HTML;
2. Pentru orice eventualitate fa o copie de siguranta a sablonului;
3. Bifeaza Extindeti sabloanele control si cauta in sablonul blogului linia:
   

   1	<data:post.body/>

4. Imediat dupa aceasta insereaza codul de mai jos:
   

   1	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

   2	<div style='float:left; padding:5px 5px 5px 0;'>

   3	<script src='http://connect.facebook.net/ro_RO/all.js#xfbml=1' type='text/javascript'></script>

   4	<fb:send expr:href='data:post.url' font='' send='true' colorscheme='light'></fb:send>

   5

   </div>

   6

   </b:if>

5. Salveaza!

Adauga butonul Like si butonul Send

1. Urmeaza pasii anteriori, dar insereaza codul de mai jos:
   

   1	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

   2	<div style='float:left;padding:5px 5px 5px 0;'>

   3	<script src='http://connect.facebook.net/ro_RO/all.js#xfbml=1' type='text/javascript'></script><fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>

   4

   </div>

   5

   </b:if>

2. Daca ai deja pe blog butonul Like, atunci inlocuieste codul care l-ai adaugat pentru acesta, cu codul de mai sus, asa vei dispune de ambele butoane.

Repozitionarea butoanelor

Daca folosesti unul din codurile de mai sus, butonul / butoanele vor fi pozitionare la sfarsitul postarilor in partea stanga, dar le poti repozitiona la:

• inceputul postarii: codul trebuie inserat inainte de <data:post.body/>;
• dreapta: schimba atributul lui float din left in right;
• daca doresti ca butoanele sa apara si pe paginile statice, elimina din cod prima si ultima linie (1 si 5 sau 1 si 6)

Daca tutorialul ti s-a parut folositor trimite-l si prietenilor sau da un Like :)

Meniu derulant pentru widgetul etichete

Printre cele mai des intalnite si utilizate widgeturi este si widgetul Etichete (Labels).
Pentru organizarea eficienta a unui blog, fiecarui post ar trebui sa i se atribuie o eticheta (se pot aplica si mai multe).
Rolul widgetului Etichete este de a afisa toate etichetele folosite pe blogul respectiv, iar atunci cand este selectata o eticheta anume, vor fi afisate toate posturile cu eticheta respectiva.
Odata cu cresterea numarului de posturi, automat se va extinde si lista de etichete, putand sa ocupe un spatiu destul de insemnat pe blogul tau.

Prin parcurgerea acestui tutorial vei invata cum sa modifici widgetul etichete astfel incat sa afiseze etichetele intr-un meniu derulant.

Adauga pe blog widgetul Etichete

1. Te conectezi la contul de Blogger -> Design -> Elemente de pagina;
2. In functie de locul pe blog unde vrei sa apara widgetul, selecteaza Adaugati un obiect gadget si apoi Etichete;

Crearea meniului derulant

1. Daca ai deja widgetul etichete pus pe blog nu mai sunt necesari pasii anteriori;
2. Fa-ti o copie de siguranta a sablonului;
3. Cauta in codul sablonului linia:
   

   1	<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

4. Inlocuieste linia cautata anterior cu urmatorul cod:
   

   01	<b:widget id='Label1' locked='false' title='Labels' type='Label'>

   02	<b:includable id='main'>

   03	<b:if cond='data:title'>

   04	<h2><data:title/></h2>

   05

   </b:if>

   06	<div class='widget-content'>

   07	<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>

   08	<option>Alege o eticheta</option>

   09	<b:loop values='data:labels' var='label'>

   10	<option expr:value='data:label.url'><data:label.name/>

   11	(<data:label.count/>)

   12

   </option>

   13

   </b:loop>

   14

   </select>

   15	<b:include name='quickedit'/>

   16

   </div>

   17	</b:includable>

   18	</b:widget>

Poti aduce urmatoarele modificari:

• latimea meniului din 100% cu o alta valoarea - linia 7;
• in loc de "Alege o eticheta" poti introduce un mesaj dorit de tine - linia 8;
• daca nu vrei sa apara numarul de posturi in dreptul etichetei sterge linia 11;

Cum elimin sau ascund Blogger Navbar?

Nu iti place cum arata sau nu ti se pare folositoare bara de navigare (Blogger Navbar) si vrei sa nu mai apara pe blogul tau?

Urmeaza pasii de mai jos pentru a o elimina:

1. Te loghezi in contul de Blogger;
2. Click pe Design si apoi pe Editati HTML;
3. Pentru siguranta, descarca sablonul actual;
4. Cu ajutorul functiei Search (Ctrl + F) a browser-ului tau cauta ]]></b:skin>;
5. Chiar deasupra acesteia introdu codul de mai jos:

1	/* Ascunde Blogger Navbar */

2	#navbar { height: 0px; visibility: hidden; display: none; }

3	/* http://tutoriale-blog.blogspot.ro */

6. Este posibil ca in cazul anumitor sabloane sa trebuiasca inlocuit #navbar-iframe cu #navbar;
7. Apasa Previzualizati si daca este in regula poti Salva Sablonul;
8. Ai scapat de Blogger Navbar!

Pentru a activa din nou bara de navigare de la Blogger nu trebuie decat sa stergi codul de la pasul 5.

• Daca ti s-a parut util tutorialul poti sa dai un Like, pentru a afla si altii de el.
• Ai vreo sugestie sau intrebare, nu ezita sa lasi un comentariu mai jos.

Intampina-ti vizitatorii cu un mesaj de bun venit

Cand ai intrat pe blogul acesta ai vazut in partea dreapta un chenar galben cu un mesaj de bun venit?

In acest tutorial sunt prezentate etapele crearii unui astfel de mesaj cu care sa-ti intampini vizitatorii. Mesajul de intampinare apare o singura data: atunci cand vizitatorul ajunge pe blogul tau, dar imediat ce incepe sa navigheze pe blog, mesajul dispare.

Pentru realizarea acestui mesaj este nevoie de doua widgeturi:

• un widget text care sa contina mesajul;
• un widget HTML/Javascript care sa contina scriptul Java pentru a afisa mesajul o singura data pentru vizitator.

1. Te conectezi la contul de Blogger -> Design -> Elemente de pagina;
2. In functie de locul pe blog unde vrei sa apara mesajul de intampinare, selecteaza Adaugati un obiect gadget, selecteaza Text si introdu mesajul dorit;
3. Trebuie sa afli ID-ul widgetului creat anterior.
4. Creaza un nou widget HTML/Javascript (nu conteaza locatia lui) in care introduci codul de mai jos:
   
   
   

   1	<script type="text/javascript">

   2	YourBlogUrl="http://www.blog-help.net/";

   3	fromInternal=document.referrer.search(YourBlogUrl);

   4	getMessage=document.getElementById("TextID").style;

   5	if (fromInternal == -1)

   6	{ getMessage.display="block";}

   7

   </script>

5. In linia 2 inlocuieste http://www.blog-help.net cu URL-ul blogului tau si in linia 4 inlocuieste TextID cu ID-ul widgetului tau text;
6. Adauga in sablonul blogului urmatorul cod CSS: #TextID {display:none;}
7. Acum ai un mesaj cu care sa-ti intampini vizitatorii!

• Daca vi s-a parut util tutorialul puteti sa dati un Like, pentru a afla si altii de el.
• Aveti vreo sugestie sau intrebare, nu ezitati sa lasati un comentariu mai jos.

Cum adaug efectul fulgi de zapada pe blog

Vrei sa iti pregatesti blogul pentru iarna si sarbatorile acesteia, cu un efect de fulgi de zapada?

Nimic mai simplu, datorita unui script Java, creat de cei de la Techknowl:

1. Te conectezi la contul de Blogger -> Design -> Editati HTML;
2. Cauta in sablonul blogului linia: </body>;
3. Inaintea acesteia introdu codul de mai jos:
   

   1	<script src="http://cdn.techknowl.com/wp-content/uploads/2010/11/snowflakes.js" type="text/javascript"></script>

4. Salveaza si o sa vezi pe blogul tau cum din partea superioara a acestuia cad niste fulgi albi de zapada :)

De asemenea poti salva (aici) si modifica scriptul java:

var num = 60; //numar mai mare = mai multi fulgi
var timer = 20; //numar mai mare = viteza mai mare pentru fulgi

Dupa ce l-ai modificat va trebuie sa il uploadezi si sa urmezi pasii de mai sus, dar calea catre scriptul java o sa fie diferita, in functie de locatia unde l-ai uploadat.

1	<script src="URL_script_java" type="text/javascript"></script>

Cum schimb cursorul mouse-ului pe blog

Poate te-ai saturat de sageata alba, clasicul cursor de mouse si vrei sa-ti intampini vizitatorii blogului cu un cursor de mouse nou, care, eventual sa se integreze mult mai bine cu sablonul, tema aleasa de tine.

Acest truc functioneaza pentru orice site/blog, deci poate fi implementat si pe un site obisnuit, Blogspot sau pe un blog Wordpress.

Pasii necesari pentru schimbarea cursorului de la mouse sunt urmatorii:

1. Te conectezi la contul de Blogger -> Design -> Editati HTML;
2. Cauta (Ctrl+F) in sablonul blogului linia: <body>;
3. Imediat dupa aceasta linie introdu codul de mai jos:
   

   1	<style type="text/css">body, a, a:hover {cursor: url(http://bit.ly/bloghelpcursor), progress;}</style>

4. Salveaza sablonul si vizualizeaza-ti blogul: acum ai un nou cursor!

Schimbarea imaginii cursorului

Partea buna este ca poate fi folosita orice imagine pentru cursor. In loc de http://bit.ly/bloghelpcursor poti introduce URL-ul (de forma http://imagine.jpg) catre o alta imagine dorita de tine. Imaginea poate fi de orice fel, jpeg, png, gif.

Daca ti-a placut acest tutorial da un Like, sau daca nu te descurci si ai nevoie de ajutor nu ezita sa lasi un comentariu mai jos.

Adauga butonul Back to Top

Butonul Back to Top este un link, care odata apasat, trimite vizitatorul la inceputul paginii sau partea de sus a paginii. Pentru a vedea cum functioneaza, in partea stanga a acestei pagini sunt doua butoane, apasa pe cel din stanga si vei fi dus automat in partea de sus a paginii.


Acest buton este foarte util pentru vizitatorii blogului tau, mai ales atunci cand posturile tale sunt destul de lungi. De obicei acest buton este pozitionat in partea de jos a paginilor.

In acest tutorial iti voi arata cum sa adaugi un astfel de buton, Go to Top, care va avea o pozitie fixa pe pagina (chiar daca dai scroll), va putea fi apasat in orice moment.

Nota: Acest truc functioneaza si in Internet Explorer, dar butonul o sa apara in partea de jos a paginii.

1. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
2. Pentru orice eventualitate, fa o copie de siguranta a blogului;
3. Cauta (CTRL + F) in sablonul blogului, linia:
   

   1

   </body>

4. Varianta cu imagine: introdu codul de mai jos inaintea liniei cautate la pasul anterior:
   

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Du-ma sus"><img style="border: none;" src="CaleImagine"/></a>

   Inlouieste CaleImagine cu calea (URL-ul) catre imaginea pe care vrei sa o folosesti.
5. Varianta cu text:
   

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Du-ma sus">Textul tau</a>

   Inlouieste Textul tau cu textul dorit de tine.
6. Dupa ce salvezi ar trebui sa iti apara pe blog butonul Go to Top

Daca ti-a fost folositor acest tutorial poti sa dai un Like sau daca ai nevoie de ajutor nu ezita sa lasi un comentariu mai jos.

Formular de contact pentru Blogger

Doresti sa oferi vizitatorilor blogului tau o solutie "eleganta" de a te contacta? Atunci vei avea nevoie de un formular de contact, dar din pacate Blogger nu ofera aceasta optiune si va trebui sa apelezi la o solutie externa.

Cei de la EmailMeForm ofera o astfel de solutie usor de implementat, folosit si foarte fiabila.

Avantajele acestui formular de contact

• este gratis;
• functioneaza pe orice platforma: Blogger, WordPress, etc.;
• masuri contra spam foarte bune;
• nu necesita cunostiinte de programare;
• ofera diverse sabloane gata facute pentru formulare, deci nu va trebuie sa incepi de la zero.

Pasul 1

• Apasa aici pentru a-ti crea cont pe EmailMeForm.com

Pasul 2 - crearea formularului

• Dupa ce ti-ai creat contul, logheaza-te si apasa pe Templates iar apoi pe Customize;

• Poti sa modifici cum vrei tu formularul, ai foarte multe optiuni la dispozitie;
• Cand esti multumit de noul formular apasa pe Save Form;
• In fereastra care se deschide selecteaza 2. Modify email notifications for this form;

• La Recipients Emails introdu email-ul unde doresti sa-ti ajunga mesajele de pe blog;
• Apasa Save si apoi 3. Take me back to the Form Manager.

Pasul 3 - implementarea formularului pe blog

• Apasa pe Code si apoi selecteaza HTML Only;

• Codul copiat il poti introduce pe blogul tau, unde vrei, fie intr-o postare, pagina statica, etc.

Ultimul pas, testeaza-ti formularul creat!

Daca ti-a fost folositor acest tutorial da un Like sau daca nu te descurci lasa un comentariu mai jos si te voi ajuta :)

Cum adaug un footer cu 3 coloane

Daca ti-ai creat deja blogul si ai ales un template care nu disupune de un footer in care poti adauga widgeturi, atunci urmeaza pasii de mai jos pentru a adauga un astfel de footer blogului tau!

1. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
2. Pentru orice eventualitate, fa o copie de siguranta a blogului;
3. Cauta (CTRL + F) in sablonul blogului, linia unde este declarat footerul actual al blogului. Ar trebui sa gasesti ceva asemanator:
   

   1	<div id='footer'> ... </div>

   Daca ai continut (text, imagini, etc) in footer, codul de mai sus ar trebui sa fie mai lung. Elementul care inchide footerul este </div>;
   
4. Copiaza codul de mai jos si apoi adauga-l imediat dupa </div> - ul care inchide footerul:
   
   

   01	<!-- Footer cu 3 coloane (www.Blog-Help.net) -->

   02	<div id='new-footer-wrapper'>

   03	<div id='column1-wrapper'>

   04	<b:section class='new-footer' id='new-footer1' preferred='yes'/>

   05

   </div>

   06

   07	<div id='column2-wrapper'>

   08	<b:section class='new-footer' id='new-footer2' preferred='yes'/>

   09

   </div>

   10

   11	<div id='column3-wrapper'>

   12	<b:section class='new-footer' id='new-footer3' preferred='yes'/>

   13

   </div>

   14	<div style='clear: both;'/>

   15

   </div>

   16	<!-- Footer cu 3 coloane (www.Blog-Help.net) -->

5. Copiaza codul de mai jos si adauga-l in sectiunea CSS a blogului, inainte de ]]></b:skin>;
   

   01	/* CSS Footer cu 3 coloane (www.Blog-Help.net) */

   02	#new-footer-wrapper {background: #fff; margin: 0 auto;width:98%; padding: 0 10px  10px 0;}

   03

   04	#column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}

   05

   06	.new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}

   07

   08	.new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}

   09

   10	.new-footer .widget-content { padding: 0px 5px 5px 5px; }

   11

   12	.new-footer ul { list-style-type:square; margin-left:15px; }

   13	/* CSS Footer cu 3 coloane (www.Blog-Help.net) */

6. Salveaza si apoi apasa pe Elemente de pagina, unde ar trebui sa vezi cele 3 containere ale footerului;
   
   
7. Acum poti adauga ce widgeturi vrei in oricare din cele 3 coloane ale footerului

Prin adaugarea noului footer, cu cel "vechi" nu se va intampla nimic, cel nou, o sa fie pozitionat sub cel vechi. Daca doresti poti sa-l inlocuiesti pe cel vechi cu cel nou.

Daca nu te descurci lasa un comentariu pentru a te ajuta :)