Memasang Sosial Sharing Widget Blogger

Selasa, Mei 01, 2012 Diposting oleh Unknown

Social Sharing dan Bookmarking

Cara kerja widget ini adalah Mengijinkan kepada pengunjung untuk membagikan konten anda ke situs jaringan sosial yang mereka pilih dengan sumber aslinya.

1. Ikuit langkah berikut:
2. Masuk ke Blogger anda>Design>Edit Html
3. Cari kode berikut ]]></b:skin>
Letakan CSS berikut diatasnya

#SLearning-Share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#SLearning-Share ul li {display: inline;background:none;margin:0;padding:0;}
#SLearning-Share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6kvCeJD6MkxH_gw16u2ppCCJBqZNaJfDtQjQbPfY9Yj5uHybo-CaaZQIJ-dFaOmMkCP2yTgKJEbCi8ulGVn5AQ5eY1O548uOdPeFUzCMthxp48i-O5b-l1tAhdMG5aBcO2YkqggzKHi_y/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#SLearning-Share ul li a.twitter {background-position: -0px -0px; }
#SLearning-Share ul li a.twitter:hover {background-position: -0px -33px; }
#SLearning-Share ul li a.facebook {background-position: -32px -0px; }
#SLearning-Share ul li a.facebook:hover {background-position: -32px -33px; }
#SLearning-Share ul li a.stumbleupon {background-position: -64px -0px; }
#SLearning-Share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#SLearning-Share ul li a.digg {background-position: -192px -0px; }
#SLearning-Share ul li a.digg:hover {background-position: -192px -33px;}
#SLearning-Share ul li a.reddit {background-position: -160px -0px; }
#SLearning-Share ul li a.reddit:hover {background-position: -160px -33px;}
#SLearning-Share ul li a.google {background-position: -128px -0px; }
#SLearning-Share ul li a.google:hover {background-position: -128px -33px;}
#SLearning-Share ul li a.del-icio-us {background-position: -480px -0px; }
#SLearning-Share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#SLearning-Share ul li a.mixx {background-position: -96px -0px; }
#SLearning-Share ul li a.mixx:hover {background-position: -96px -33px; }
#SLearning-Share ul li a.technorati {background-position: -416px -0px; }
#SLearning-Share ul li a.technorati:hover {background-position: -416px -33px;}
#SLearning-Share ul li a.linkin {background-position: -256px -0px; }
#SLearning-Share ul li a.linkin:hover {background-position: -256px -33px;}
#SLearning-Share ul li a.yahoobuzz {background-position: -448px -0px; }
#SLearning-Share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#SLearning-Share ul li a.myspace {background-position: -512px -0px; }
#SLearning-Share ul li a.myspace:hover {background-position: -512px -33px;}
#SLearning-Share ul li a.more {background-position: -576px -0px; }
#SLearning-Share ul li a.more:hover {background-position: -576px -33px;}

4. Selanjutnya, Cari salah satu kode dibawah ini

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

<b:if cond='data:blog.pageType == "item"'> <data:post.body/>

<div class='post-footer'>

5. Kemudian letakan kode berikut setelahnya

<b:if cond='data:blog.pageType == "item"'>
<div id='SLearning-Share'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.sitelearning.net/2012/05/memasang-sosial-sharing-widget-blogger.html=" + data:post.url + "&title=" + data:post.title '/></li>
</ul>
</div>
</b:if>

6. Simpan Template anda

Semoga bermanfaat

Tags: Belajar blog

Share your views...

0 Respones to "Memasang Sosial Sharing Widget Blogger"

Posting Komentar

Sebelum memberikan komentar, silahkan menjadi anggota sitelearning terlebih dahulu, Terimakasih

It's all about sharing information online | Site learning: Memasang Sosial Sharing Widget Blogger