joi, 8 aprilie 2010

"Sexy-bookmarks" pentru Blogger care foloseste site-uri sociale romanesti

Acum cateva zile va prezentam widget-ul Sexy bokmarks pentru Blogger, in care site-urile sociale folosite erau toate straine. Astazi am sa prezint acelasi widget dar cu site-uri romanesti.



Ideea mi-a venit cand am vazut acest articol despre un plugin Wordpress numit Ro Social Bookmarks si care faciliteaza bookmark-ul postarilor catre 13 site-uri sociale romanesti, gen FTW, VoxRo, Ghidoo, Recomanda, Proddit, etc.

Asa ca am modificat cate ceva prin codul CSS creat de CSSReflex si cate ceva prin codul html care genereaza butoanele si face trimiterea catre site-urile sociale romanesti.
De asemenea o modificare importanta a fost aplicata si pozei care cuprinde butoanele. A fost greu pentru ca nu sunt chiar avansat in Photoshop si nu am gasit nici pe net vreo serie de icoane dedicate acestor site-uri.
Daca cineva care se pricepe bine la Photoshop e dispus sa faca niste icoane 32 pe 28 pentru aceste site-uri il rog sa ma contacteze.

Inainte sa trecem la instalare trebuie sa va mai spun ca widget-ul cuprinde butoane catre 11 site-uri sociale si v-a apare la sfarsitul fiecarei postari.

Demo

Instalarea primului widget de social bookmarking pentru Blogger care foloseste site-uri romanesti
1. Intrati la Aspect --> Editati Html si faceti o copie a actualului sablon, in caz ca ceva nu merge cum trebuie sa puteti reveni la el prin simpla incarcare a lui.

2. Bifati casuta care extinde codul sablonului (important)



3. Cu ajutorul combinatiei de taste Ctrl+F cautati urmatorul cod:

</head>


si inainte de el adaugati urmatorul cod CSS:

<style type='text/css'> div.sexy-widget { height:54px; background:url('http://1.bp.blogspot.com/_i6co2fwMbTo/TS1onWljjFI/AAAAAAAAMlg/Ov_GEcOqX20/s1600/sexxy2.png') no-repeat left bottom; position:relative; width:540px; }
div.sexy-widget span.sexy-parteadreapta { width:17px; height:54px; background:url('http://1.bp.blogspot.com/_i6co2fwMbTo/TS1onWljjFI/AAAAAAAAMlg/Ov_GEcOqX20/s1600/sexxy2.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-widget ul.social { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-widget ul.social li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-widget ul.social a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-bookmark9, .sexy-bookmark9:hover, .sexy-bookmark2, .sexy-bookmark2:hover, .sexy-bookmark4, .sexy-bookmark4:hover, .sexy-bookmark5, .sexy-bookmark5:hover, .sexy-bookmark1, .sexy-bookmark1:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-bookmark3, .sexy-bookmark3:hover, .sexy-bookmark7, .sexy-bookmark7:hover, .sexy-bookmark8, .sexy-bookmark8:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-bookmark10, .sexy-bookmark10:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-bookmark6, .sexy-bookmark6:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-bookmark11, .sexy-bookmark11:hover { background:url('http://1.bp.blogspot.com/_i6co2fwMbTo/TS1n4kY1PcI/AAAAAAAAMlc/4bRzFTyQDks/s1600/sexy.jpg') no-repeat !important; }
.sexy-bookmark9 { background-position:-300px top !important; }
.sexy-bookmark9:hover { background-position:-300px bottom !important; }
.sexy-bookmark2 { background-position:-500px top !important; }
.sexy-bookmark2:hover { background-position:-500px bottom !important; }
.sexy-bookmark4 { background-position:-100px top !important; }
.sexy-bookmark4:hover { background-position:-100px bottom !important; }
.sexy-bookmark5 { background-position:-50px top !important; }
.sexy-bookmark5:hover { background-position:-50px bottom !important; }
.sexy-bookmark1 { background-position:left top !important; }
.sexy-bookmark1:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-blogpoint { background-position:-700px top !important; }
.sexy-blogpoint:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-bookmark8 { background-position:-350px top !important; }
.sexy-bookmark8:hover { background-position:-350px bottom !important; }
.sexy-bookmark7 { background-position:-450px top !important; }
.sexy-bookmark7:hover { background-position:-450px bottom !important; }
.sexy-bookmark10 { background-position:-250px top !important; }
.sexy-bookmark10:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-bookmark6 { background-position:-550px top !important; }
.sexy-bookmark6:hover { background-position:-550px bottom !important; }
.sexy-bookmark3 { background-position:-150px top !important; }
.sexy-bookmark3:hover { background-position:-150px bottom !important; }
.sexy-bookmark11 { background-position:-753px top !important; }
.sexy-bookmark11:hover { background-position:-753px bottom !important; }
 </style>

4. Din nou folosindu-va de combinatia de taste Ctrl+F cautati acest cod:

<data:post.body/>

si imediat dupa el adaugati acest cod:
 <div class='sexy-widget'><ul class='social'>
<li class='sexy-bookmark1'><a expr:href='&quot;http://digg.ro/adauga-articol?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la DiggRo'/></li>
<li class='sexy-bookmark2'><a expr:href='&quot; http://www.recomanda.ro/recomanda_club/adauga?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Recomanda'/></li>
<li class='sexy-bookmark3'><a expr:href='&quot; http://blogro.info/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la BlogRO'/></li>
<li class='sexy-bookmark4'><a expr:href='&quot; http://blogpoint.ro/add_url.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la BlogPoint'/></li>
<li class='sexy-bookmark5'><a expr:href='&quot; http://www.ftw.ro/node/add/drigg/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la FTW'/></li>
<li class='sexy-bookmark6'><a expr:href='&quot;http://preferate.net/add.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Preferate'/></li>
<li class='sexy-bookmark7'><a expr:href='&quot; http://proddit.com/submit?url=&quot; +  data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Proddit'/></li>
<li class='sexy-bookmark8'><a expr:href='&quot; http://voxro.com/node/add/drigg/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Vox.Ro'/></li>
<li class='sexy-bookmark9'><a expr:href='&quot; http://zilei.ro/submit/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Zilei.Ro'/></li>
<li class='sexy-bookmark10'><a expr:href='&quot; http://www.ghidoo.ro/nodes/new?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Ghidoo'/></li>
<li class='sexy-bookmark11'><a expr:href='&quot; http://polimedia.us/fain/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adauga la Polimedia'/></li>
</ul><span class='sexy-parteadreapta'/></div>
Previzualizati si daca widget-ul apare pe blog puteti salva sablonul si apoi il puteti testa.

Observatii si indicatii:
- daca widget-ul depaseste latimea coloanei de postare de pe blogul vostru atunci stergeti una sau mai multe linii de cod din codul de la punctul 4.
Exemplu:

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Furl'/></li>
Stergand una din aceste linii practic stergeti unul din butonoanele din widget.
Apoi ca widget-ul sa arate bine v-a trebui sa modificati latimea acestuia. Pentru a schimba latimea trebuie sa umblati la numarul scris cu verde in codul de la punctul 3.
- daca dupa acest cod: <data:post.body/>  mai aveti alt widget adaugat, puteti incerca sa puneti codul de la punctul 4 dupa codul widget-ului respectiv.
- puteti incerca sa puneti codul de la punctul 4 si dupa sau inainte de una din aceste linii:

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

- daca vreti ca widget-ul sa nu apara pe pagina de pornire ci doar in pagina postarii atunci codul de la punctul 4 il puneti intre aceste doua linii astfel:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Codul de la punctul 4
</b:if>

- La accesarea anumitor site-uri de social bookmarks, dupa logare s-ar putea sa nu fiti redirectionati catre pagina de propunere a articolului. Nu este o problema din widget, ci din platforma utilizata de respectivul site.
Solutie: mai dati o data clic pe iconita site-ului respectiv, in pagina cu articolul dvs.
Anumite site-uri de social bookmarking pot face update la functiile platformei utilizate, rezultand o alta structura a linkurilor sau restrictionarea anumitor linkuri. In acest caz va trebui sa promovati manual articolul pe un astfel de site.(textul de la aceasta linie e copiat de pe blogul Dream Webdesign)

11 comentarii:

  1. Respect pentru efortul făcut.

    RăspundețiȘtergere
  2. Multumesc mult. Sper ca bloggerii sa-l foloseasca :)

    RăspundețiȘtergere
  3. pe blogul meu iconitele de pe pagina principala nu merg ! merg numai in postare ! :( intra si vezi te rog http://onlinecnm.blogspot.com

    RăspundețiȘtergere
  4. alijah eu am intrat acum si se vad si pe prima pagina.
    Ai rezolvat intre timp?

    RăspundețiȘtergere
  5. se vad iconitele dar merge numai cea de la dig ! la restu cand se conecteaza le baga linkul blogului meu inaintea linkului lor si imi da ca nu a fost gasita pagina pe blogger :| intra si da un click te rog sa vezi ce vreau sa spun

    RăspundețiȘtergere
  6. Am vazut problema, dar nu imi dau seama din ce cauza celelalte nu merg. Incearca sa adaugi din nou codul de la punctul 4.

    RăspundețiȘtergere
  7. cum pot schimba sau sterge scrisu acela sharing is sexy nul gasesc in HTML in cod pls help am stat 2 ore sa citesc tot ~X( :P

    RăspundețiȘtergere
  8. Acuma ca FTW nu mai este, ai putea pune in loc la FTW pe Cica.ro care este acuma noul ftw.ro.

    RăspundețiȘtergere
  9. pe blogul meu nu reusesc sa setez sa mi apara titlurile tuturor postarilor (sub forma de lista.cuprins). Apare doar Capitolul (sa i zic asa) din care fac parte .
    Ce trebuie sa fac?
    Multmesc.

    RăspundețiȘtergere
  10. Te referi la vreun widget sau la gadgetul Etichete?

    RăspundețiȘtergere
  11. multumesc , ai facut o treaba de cinste, caut de foarte mult timp acest cod pentru platforma blogger! l.am adaugat pe mostwantedblog.org si functioneaza excelent !

    RăspundețiȘtergere