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.