Selasa, 12 Maret 2013

Menampilkan sharing is caring di blogger

Pertama agar template blog aman alangkah baiknya backup terlebih dahulu template blog anda dengan cara klik Template lalu klik cadangkan/pulihkan yang berada di pojok kanan, terakhir tinggal klik unduh template lengkap.

Berikut cara-caranya :
1. loggin ke Blogger.
2. Kemudian Klik tab .
3. Lalu klik .

4. Selanjutnya klik dan atau tulisan "Expand Template Widget".

5. Cari kode ]]></b:skin> menggunakan CTRL+F , dan copy kode di bawah , lalu paste tepat di atas kode ]]></b:skin>
<style type='text/css'>
/* Sharing Is Caring
----------------------------------------------- */
div.beauty-bookmarks {
  height:54px;
  background:url(&#39;http://f.cl.ly/items/0D2w3g2G1V2d2e3D1G1n/sharing-sexy-BG.png&#39;) no-repeat left top;
  position:relative;
  width:540px;
}
div.beauty-bookmarks span.beauty-rightside {
  width:17px;
  height:54px;
  background:url(&#39;http://f.cl.ly/items/0D2w3g2G1V2d2e3D1G1n/sharing-sexy-BG.png&#39;) no-repeat right top;
  position:absolute;
  right:-17px;
}
div.beauty-bookmarks ul.socials {
  margin:0 !important;
  padding:0 !important;
  position:absolute;
  bottom:0;
  left:10px;
}
div.beauty-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.beauty-bookmarks ul.socials a {
  display:block !important;
  width:48px !important;
  height:29px !important;
  font-size:0 !important;
  color:transparent !important;
}
 .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
  background:url(&#39;http://f.cl.ly/items/3y0M3X0X103d1T391o2s/sharing-sexy.png&#39;) no-repeat !important;
}
.beauty-furl {background-position:-300px top !important;}
.beauty-furl:hover {background-position:-300px bottom !important;}
.beauty-digg {background-position:-500px top !important;}
.beauty-digg:hover {background-position:-500px bottom !important;}
.beauty-reddit {background-position:-100px top !important;}
.beauty-reddit:hover {background-position:-100px bottom !important;}
.beauty-stumble {background-position:-50px top !important;}
.beauty-stumble:hover {background-position:-50px bottom !important;}
.beauty-delicious {background-position:left top !important;}
.beauty-delicious:hover {background-position:left bottom !important;}
.beauty-yahoo {background-position:-650px top !important;}
.beauty-yahoo:hover {background-position:-650px bottom !important;}
.beauty-blinklist {background-position:-600px top !important;}
.beauty-blinklist:hover {background-position:-600px bottom !important;}
.beauty-technorati {background-position:-700px top !important;}
.beauty-technorati:hover {background-position:-700px bottom !important;}
.beauty-myspace {background-position:-200px top !important;}
.beauty-myspace:hover {background-position:-200px bottom !important;}
.beauty-twitter {background-position:-350px top !important;}
.beauty-twitter:hover {background-position:-350px bottom !important;}
.beauty-facebook {background-position:-450px top !important;}
.beauty-facebook:hover {background-position:-450px bottom !important;}
.beauty-mixx {background-position:-250px top !important;}
.beauty-mixx:hover {background-position:-250px bottom !important;}
.beauty-script-style {background-position:-400px top !important;}
.beauty-script-style:hover {background-position:-400px bottom !important;}
.beauty-designfloat {background-position:-550px top !important;}
.beauty-designfloat:hover {background-position:-550px bottom !important;}
.beauty-syndicate {background-position:-150px top !important;}
.beauty-syndicate:hover {background-position:-150px bottom !important;}
.beauty-email {background-position:-753px top !important;}
.beauty-email:hover {background-position:-753px bottom !important;}
</style> 
6. Langkah selanjutnya cari <data:post.body/> copy dan paste code di bawah tepat di bawah kode <data:post.body/>
<!--sharing-is-caring-starts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <center>
<div class='beauty-bookmarks'>
   <ul class='socials'>
      <li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
      </li>
      <li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
    <li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
      <li class='beauty-syndicate'><a href='http://feeds.feedburner.com/TaufikInsanKamil' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' title='Subscribe to RSS'/>
      </li>
      <li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='centeredPopup(this.href,&apos;myWindow&apos;,&apos;500&apos;,&apos;500&apos;,&apos;yes&apos;);return false' target='_blank'/>
      </li>
   </ul>
   <span class='beauty-rightside'/>
</div>
</center>
    </b:if>
    <!--sharing-is-caring-ends-->

Oke skian postingan kali ini :)
WASSALAMMUALAIKUM.WR.WB

Posting Komentar