joi, 24 septembrie 2009

Widget "Postari asemanatoare" cu imagine de la LinkWithin


Widget-ul cu "Postari asemanatoare" este unul din cele mai utile widget-uri de instalat pe un blog si astfel s-au creat mai multe metode de a fi afisate. De la inceputul acestui blog si pana acum v-am prezentat si eu vreo doua metode de astfel de widget-uri.


Primul pe care l-am prezentat este un widget care apare la sfarsitul fiecarei postari si care afiseaza sub forma de link-uri text, titlurile articolelor asemanatoare din aceeasi categorie.

Al doilea widget afiseaza de asemenea la sfarsitul fiecarei postari titlurile, dar insotite de imaginea in format mic a pozei care se gaseste in articol. Si de aceasta data postarile asemanatoare sunt alese tot din categoria din care face parte si articolul respectiv.

Acum va voi prezenta un widget Postari asemanatoare creat de LinkWithin. Acest widget este foarte asemanator cu cel dinainte, diferenta este ca acesta alege postarile la intamplare si in plus are un mare avantaj: o instalare foarte simpla.




Daca v-ati convins de utilitatea acestui widget si doriti sa-l puneti pe blog atunci trebuie sa urmati acesti pasi:

1. Intrati pe site-ul LinkWithin
2. Odata intrati veti observa in partea dreapta a paginii un formular cu ajutorul caruia va puteti face cateva setari pentru widget.



3. Introduceti datele cerute
- in prima casuta introduceti adresa voastra de email
- in a doua casuta introduceti adresa blogului vostru
- la optiunea Platform introduceti numele platformei pe care aveti hostat blogul. In cazul nostru alegeti Blogger
- a patra optiune va cere sa alegeti cate link-uri sa fie afisate sub postare. Aveti grija la latimea coloanei de postare a sablonului vostru. Un element al acestui widget are o latime de 110pixeli.
- la a cincea optiune va cere sa bifati casuta daca aveti un sablon cu fundalul de culoare inchisa.

4. Dati clic pe butonul Get Widget!
Veti fi dus pe o alta pagina unde vi se v-a arata foarte clar cu ajutorul imaginilor cum trebuie sa procedati pentru a instala widget-ul pe blogul vostru.

Daca doriti sa renuntati la widget tot ce trebuie sa faceti este sa va duceti la Aspect --> Elemente de pagina, sa gasiti gadget-ul cu numele LinkWithin (sub Postari de blog) si sa-l eliminati.


vineri, 18 septembrie 2009

Optiune noua - Comentarii cu avatar pe Blogger

Incepand de astazi Blogger suporta avatar in dreptul autorului comentariului. Avatarul care va apare in dreptul autorului este de fapt poza profilului vostru de pe Blogger.
Deci, daca vreti ca avatarul vostru sa apara in dreptul comentariului pe orice blog blogspot trebuie mai intai sa atasati o poza la profilul vostru.




Acest lucru se poate face prin accesarea link-ului Editati fotografia din pagina Tablou de bord a profilului vostru Blogger. Veti fi dus spre o pagina unde aveti posibilitatea sa alegeti o fotografie fie din calculatorul vostru, fie de pe internet.
Nu uitati sa salvati modificarea facuta.

In al doilea rand trebuie sa va duceti la Setari --> Comentarii si sa va asigurati ca la optiunea Vreţi să fie afişate imaginile din profil în comentarii? este bifat Da.

In mod normal acum toate comentariile pe care le-ati facut pe un blog blogspot ar trebui sa aiba inainte de numele vostru si poza pe care ati uploadat-o




Rezolvare probleme
Daca aveti un sablon default de la Blogger ar trebui sa nu fie nici o problema, dar daca ati incarcat un sablon gasit pe internet e posibil ca avatarul sa nu apara. In acest caz iata ce trebuie sa faceti:

Duceti-va la Aspect --> Editati html si neaparat salvati o copie a sablonului in calculator. Acest lucru se face pentru a reveni la forma lui actuala in caz ca ceva nu merge cum trebuie.

Bifati casuta de extindere a sablonului si cautati aceasta linie de cod (folositi Ctrl+F):

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

Un pic mai jos codul vostru ar trebui sa arate ca partea de cod pe care eu am scris-o cu rosu:

          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>

Daca codul vostru este diferit dar incepe cu eceasta linie <dl id='comments-block'>  atunci selectati tot codul incepand chiar cu ea si pana la aceasta linie  <data:commentPostedByMsg/> (fara ea) si in locul ei copiati codul scris cu rosu in grupul de coduri de mai sus.

Previzualizati si daca nu apare nici o eroare atunci puteti sa salvati si apoi sa va duceti sa faceti un comentariu de proba.

Rezolvare problema comentarii numerotate
Daca ati urmat acest tutorial si aveti comentarii numerotate pe blog atunci in locul codului scris cu rosu trebuie sa copiati codul de mai jos care cuprinde si modificarile necesare pentru acest truc.

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
        <b:loop values='data:post.comments' var='comment'>
          <dt class='comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>


marți, 15 septembrie 2009

Rezolvare probleme cu optiunea Read more

De curand Blogger a introdus optiunea Read more pe blogurile blogspot. Aceasta optiune era asteptata de mult, iar echipa de la Blogger a facut ca aceasta optiune sa fie introdusa intr-un mod foarte usor si anume prin apasarea unui buton din bara de unelte a editorului de text. Apasand pe buton vedem ca in modul html al editorului se adauga o linie de cod care practic marcheaza intreruperea textului.

<!-- more -->

Din pacate aceasta optiune vine si cu cateva probleme pentru sabloanele existente. In postul de astazi va voi arata cateva probleme care apar si cum sa le rezolvati.



1. Prima problema care mi s-a semnalat este ca atunci cand adaugi optiunea de Read more la un articol sidebarul din dreapta cade sub coloana de postare.
Daca observati ca aceasta problema apare si la blogul vostru atunci trebuie ca dupa ce apasati butonul de Read more sa intrati in modul html al editorului si sa aveti grija ca acest cod care desparte textul

<!-- more -->

sa nu apara intre aceste 2 taguri <div>...</div>.
Deci textul vostru in format html nu trebuie sa arate asa:

<div style="text-align: center;">
textul care se vede
<!-- more -->
textul care se vede doar in pagina postarii
</div>

ci asa:

<div style="text-align: center;">
textul care se vede
</div>
<!-- more -->
textul care se vede doar in pagina postarii

Daca totusi trebuie sa despartiti textul acolo atunci inlocuiti cuvantul div cu span si codul va arata asa:

<span style="text-align: center;">
textul care se vede
<!-- more -->
textul care se vede doar in pagina postarii
</span>




2.Permitand accesul la codul sablonului, de-a lungul timpului s-au creat foarte multe noi sabloane compatibile cu Blogger, care ofera codul intr-un format xml si care incarcat pe blog inlocuieste tot codul original al sablonului.
De aici vine si urmatoarea problema. Dupa publicare desi articolul este taiat, link-ul de Read more nu apare la sfarsit. Aici practic trebuie sa introduceti un grup de cod care lipseste sablonului vostru.

Rezolvare:
Duceti-va la Aspect --> Editati html si bifati casuta care extinde codul sablonului. Apoi cautati acest cod:

<data:post.body/>

veti gasi acest grup de coduri:

    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Adaugati codul de mai jos imediat dupa acest grup de coduri:
Nota: Aveti grija ca el sa nu existe deja si defapt alta sa fie problema.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Acesta e practic codul care va afisa link-ul vostru.

3. O a treia problema ar fi ca desi butonul de Read more este apasat, textul nu este intrerupt deloc.

Rezolvare: 
Intrati in modul html al editorului si uitati-va la codul care intrerupe textul. Aveti grija ca el sa nu arate asa: <!--more--> ci asa <!-- more -->

Observati spatiul lasat inaite si dupa cuvantul more la codul cel bun.

Deocamdata aceste 3 probleme au fost semnalate. Voi posta aici solutia la alte probleme pe masura ce ele vor aparea. Daca vor mai aparea.


duminică, 13 septembrie 2009

Image Magnify - Zoom pe pozele din Blogger

La cererea Loredanei va prezint un script JavaScript care face poza sa se mareasca de 3 ori atunci cand cineva da clic pe ea.
Scriptul este unul foarte usor de instalat si este preluat de pe site-ul Dynamic Drive.

Din nou am sa va rog sa va hostati singuri scripturile pentru a nu risca sa ramaneti fara latime de banda si sa nu mai functioneze. Pentru a vedea cum sa va hostati singuri scripturile JavaScript cititi acest tutorial facut de mine.

Peteti vedea scriptul in actiune dand clic pe poza de mai jos.


Instalare script

Urmati calea Aspect --> Editati html si gasiti urmatorul cod (foloti Ctrl+F):

</head>

Dupa ce l-ati gasit chiar inainte de el copiati codul de mai jos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/myfilesdan/jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Apoi salvati sablonul.

Acum, pentru ca scriptul sa functioneze trebuie sa umblam la codul html al fiecarei poze pe care o punem in postarea noastra.
Atentie: Codul nu functioneaza la imaginile care au atribuit un link.

Codul unei imagini fara link asa cum ne trebuie noua arata cam asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" style="width:200px; height:150px" />

Pentru ca imaginea sa se mareasca trebuie sa adaugam acest atribut Css  class="magnify" la codul imaginii.

Codul va arata asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" class="magnify" style="width:200px; height:150px" />

Metoda de mai sus este pentru pozele care nu sunt adaugate prin metoda pusa la dispozitie de Blogger. Pentru ca scriptul sa functioneze si la pozele adaugate prin metoda Inserati imagine trebuie sa facem niste modificari si la acest cod.

Daca va uitati la codul unei imagini adaugate astfel el arata cam asa:

<a href="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s1600-h/Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" /></a>


In prima faza trebuie sa scoatem link-ul imaginii. Faceti codul sa arate asa:

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" />

Acum adaugatii atributul Css  class="magnify":

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" class="magnify" />

Acum cand reveniti in modul normal de editare a textului pozitionati imaginea in ce parte doriti.
Publicati postarea si vedeti daca scriptul functioneaza.

miercuri, 9 septembrie 2009

Blogger - Blogspot introduce optiunea Read more pe blog

Dupa cum va anuntam intr-un post mai vechi, pe 23 august Blogger a implinit 10 ani de la infintare si cu aceasta ocazie va lansa o noua serie de optiuni pe care cu totii ni le-am dorit.


Asta seara a fost introdusa o noua optiune pe care am asteptat-o cu totii si anume Read more sau Aflaţi mai multe.
Read more poate fi introdus in postare cu ajutorul noului buton afisat pe bara de instrumente a editorului.




Dupa ce ati scris articolul dati clic unde vreti sa intrerupeti textul si apoi apasati butonul
de Read more . In locul unde textul va fi intrerupt va apare o bara punctata.


Noul buton Read more e valabil doar in noul editor pe care Blogger l-a introdus de curand, dar si daca preferati vechiul editor puteti introduce noua optiune. Dupa ce scrieti textul intrati in modul Editati Html al editorului si acolo unde vreti sa intrerupeti textul introduceti urmatorul cod:

<!-- more -->


Dupa publicare link-ul care v-a duce catre pagina unde se afla tot postul va avea titlul de Aflaţi mai multe »
Daca vreti sa modificati acest text urmati calea Aspect --> Elemente de pagina si aici la elementul Postari de blog dati clic pe Editati si in fereastra care se deschide modificati textul in casuta din dreptul optiunii Textul linkului paginii de postare:


Salvati.
Nu uitati sa va abonati la feed-ul blogului pentru a fi la curent ultimele noutati care apar pe Blogger.


luni, 7 septembrie 2009

Cum sa faci un cuprins (TOC - Table of contents) al blogului

Aceast widget este un cuprins sau un sitemap al blogului, sau in engleza Table of contents - TOC.
Practic acest widget extrage toate link-urile (postarile) din blog si le aranjeaza ca pe un cuprins de carte. Intai este afisata categoria si sub ea toate postarile care fac parte din acea categorie. Se actualizeaza singura si pe deasupra indica si care sunt ultimele 10 postari prin afisarea in dreptul lor a cuvantului New!!

Widget creat de Table of Contents for Blogger.    Deschidere tab nou


Demo  Deschidere tab nou

Cum sa folositi acest widget

Un avantaj al acestui widget este ca functioneaza si daca codul este pus in postare prin metoda Adaugati Html. Deci puteti crea o pagina noua in care sa introduceti codul de mai jos, puteti sa-i dati un titlu de genul Cuprins sau Table of contents sau cum doriti voi, iar link-ul postarii sa-l puneti in meniul blogului. Ar fi bine ca pagina sa fie publicata cu o data mai in urma pentru a nu aparea pe prima pagina a blogului.

-->

Deci sa recapitulam. Daca vreti sa puneti acest widget pe blog trebuie sa urmati pasii de mai jos:

1. Ducati-va la Postare noua si dati un titlu paginii pe care o veti crea.
2. Dati clic pe Editati html pentru a intra in modul de scriere html.
3. In modul de scriere html a editorului copiati codul de mai jos.

<script style="text/javascript" src="http://cuprins-blog.googlecode.com/files/cuprins-blog.js"></script>
<script src="http://bloggerajutor.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Schimbati adresa blogului meu cu adresa voastra.

-->

4. Daca vreti ca postarea sa nu apara pe prima pagina a blogului dati clic pe link-ul "Optiuni de publicare" din partea de jos a editorului si bifati casuta "Planificat pentru". Apoi setati o data mai veche.

5.Publicati postarea.

6. Copiaza link-ul postari si adaugati-l in meniu.

sâmbătă, 5 septembrie 2009

Pune pe blog un set de bannere 125x125 pentru spatiu publicitar

Daca sunteti dintre acei bloggeri care au succes si vindeti spatiu publicitar pe blog atunci stiti ca cele mai folosite dimensiuni pentru banere sunt 125x125px.
Desi multi folosesc Css-ul pentru a plasa si controla banerele eu va voi arata un mod foarte simplu de a afisa anunturi 125x125 pe blog cu ajutorul tabelelor(table).


Duceti-va la Aspect --> Elemente de pagina --> Adaugati un obiect gadget si alegeti optiunea HTML/JavaScript.
In campul pentru continut adaugati codul de mai jos si salvati.:

<table align="center" border="0">
  <tbody>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg">
</td>
    </tr>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>
  </tbody>
</table>
Acum de cate ori sunteti solicitati de catre advertiseri sa puneti bannerul lor pe blog, tot ce trebuie sa faceti este sa inlocuiti codul scris cu rosu cu codul pe care vi-l dau ei.




Daca sunteti norocosi si ati epuizat deja cele 4 spatii pentru publicitate, si vreti sa adaugati inca doua spatii, atunci copiati codul de mai jos dupa ultimul </tr> din cod

<tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>

Dupa ce le adaugati pe blog ar fi bine sa inlocuiti 2 sau 3 poze cu alte bannere de la site-uri unde sunteti afiliati si sa lasati doar un singur banner cu Advertise here.Ar fi bine ca acest ultim banner sa duca catre o pagina de contact unde advertiserii sa poata sa va contacteze usor.




Puteti folosi si aceste bannere create de mine


     

Widget cu posturi la intamplare (random) pe Blogger

Am sa va prezint in continuare un nou widget creat de Blog Godown si pe care eu il consider foarte folositor, el crescand numarul de afisari ale blogului. Este la fel de important ca widget-ul cu Postari recente, dar cu deosebirea ca acesta aduce in atentia vizitatorilor si posturi mai vechi. Datorita functiei de a afisa posturi random acest widged poate afisa articole chiar si de la inceputul blogului.

Widget-ul poate afisa articolele in doua feluri:
1. Doar titlul postari
2. Titlul postari plus sumar (cate cuvinte doriti)

Instalarea este una foarte usoara, facandu-se prin metoda adaugarii unui obiect gadget.




Metoda 1
Adaugarea widget-ului doar cu titlul postarii



Urmati calea Aspect --> Elemente de pagina --> Adaugati un obiect gadget. Alegeti optiunea HTML/JavaScript si in campul pentru continut copiati codul de mai jos.
Puteti modifica numarul de postari care sunt afisate prin schimbarea vumarului 7 cu ce numar doriti.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
 }document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggodown.com">Blog Godown </a></span>

Salvati.




Metoda 2
Adaugarea widgetului cu titlul si sumar



Urmati calea Aspect --> Elemente de pagina --> Adaugati un obiect gadget. Alegeti optiunea HTML/JavaScript si in campul pentru continut copiati codul de mai jos.
Puteti modifica numarul de postari care sunt afisate prin schimbarea vumarului 5 cu ce numar doriti.
Puteti modifica numarul de cuvinte care apar in sumar prin schimbarea numarului 10 cu ce numar doriti.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;var wordnumber=5;</script>
<script style="text/javascript" src="http://bloggertipspro.googlepages.com/random-posts-with-summary.js">
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggodown.com">Blog Godown </a></span>

Salvati.

Nu uitati ca va puteti hosta singuri scripturile JavaScript prin metoda prezentata la aceasta pagina.