Widgetul "Sexy-bookmarks" acum si pentru Blogger

"Sexy-bookmark" este un foarte popular pluggin pentru platforma Wordpress. Pus pe blog el lasa vizitatorii sa-si salveze postarile preferate pe anumite site-uri sociale, ajutand totodata si blogul respectiv prin aducerea de vizitatori de pe site-urile respective.

Acum datorita blogului CSSReflex (Add Sexy Bookmarks to Blogger) acest widget este disponibil si pentru platforma Blogger.


Odata instalat widget-ul v-a apare dupa fiecare postare iar vizitatorul cu un simplu clic poate sa-si salveze articolul preferat. Instalarea are un grad de dificultate mediu.

Demo

Instalarea widget-ului
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-bookmarks { height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuy-Tsab5jHe2-OcK2tKUkFFBZoouMHPmWtKy7zHmOlpT5pOSQ6cACevrIdDlzQNBWFrSXBc9tAHJbldK7E1QGdLu_xM3BjzpFMPjp4Xbq3WSEzRPZyOSOOFl_8eo1DAMsxTNqUxJAOAD/s1600/sexxy2.png') no-repeat left bottom; position:relative; width:540px; }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuy-Tsab5jHe2-OcK2tKUkFFBZoouMHPmWtKy7zHmOlpT5pOSQ6cACevrIdDlzQNBWFrSXBc9tAHJbldK7E1QGdLu_xM3BjzpFMPjp4Xbq3WSEzRPZyOSOOFl_8eo1DAMsxTNqUxJAOAD/s1600/sexxy2.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials 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-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmapmUsrD_TV71U5qNOWQfK7MDT8v0FnVyeSw5lx8TIRVzZtHCqheHdYPcah-iDt2QN1m_L9F15UbFVjLfbV6VMWaKHDWr5cU_mKz2FbywpPD3WrcCqBYq-j6EQZa6xEaS7_a8207vG_w1/s1600/i44.tinypic.com-1znbj83.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious: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-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email: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-bookmarks'><ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Technorati'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Reddit'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on DesignFloat'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' target='_blank' title='Share on Twitter'/></li>
<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>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/TotulDespreBlogger' rel='nofollow' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Email'/></li>
</ul><span class='sexy-rightside'/></div>

Previzualizati si daca widget-ul apare pe blog puteti salva sablonul si apoi il puteti testa.

Observatii si indicatii:
- shimbati adresa de feed a blogului meu cu cea a blogului vostru (codul scris cu rosu)
- 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 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 puteti pune intre aceste doua linii astfel:

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

Codul de la punctul 4

</b:if>