Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat/Memasang Widget Social Share Di Bawah Postingan

Membuat/Memasang Widget Social Share Di Bawah Postingan - widget social share memang penting untuk memenuhi kebutuhan blog agar sebagai upaya untuk menyebarluaskan postingan blog kita ke dalam jejaring-jejaring sosial seperti facebook, twitter, RSS, dll. Tombol share sangat penting untuk meningkatkan pengunjung ke blog. Namun untuk menarik perhatian pengunjng blog agar mau berbagi artikel yang dibaca ke berbagai jejaring sosial, tentunya anda membutuhkan tombol share yang menarik. Berikut Cara Membuat/Memasang Widget Social Share Di Bawah Posting Blog :

1. Pada Dashboard Blogger anda klik Template > Edit Html > Lanjutkan (centang kotak Expand Widget Templates).
2. Gunakan tombol Ctrl + F untuk mencari kode <data:post.body/>
3. Copy salah satu kode dibawah kemudian letakan di bawah kode <data:post.body/>
<style>
.sharebelow a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(http://3.bp.blogspot.com/-vslV5wtB7Hc/T_iYKWWojFI/AAAAAAAAAKc/IBi91mIC0b8/s1600/sharebelow.png) no-repeat; }
.sharebelow a.googleplus { background-position: 0px -348px; }
.sharebelow a.googleplus:hover { background-position: 0px -406px; }
.sharebelow a.pinterest { background-position: 0px -464px; }
.sharebelow a.pinterest:hover { background-position: 0px -522px; }
.sharebelow a.delicious { background-position: 0px 0px; }
.sharebelow a.delicious:hover { background-position: 0px -58px; }
.sharebelow a.digg { background-position: 0px -116px; }
.sharebelow a.digg:hover { background-position: 0px -174px; }
.sharebelow a.stumbleupon { background-position: 0px -812px; }
.sharebelow a.stumbleupon:hover { background-position: 0px -870px; }
.sharebelow a.technorati { background-position: 0px -928px; }
.sharebelow a.technorati:hover { background-position: 0px -406px; }
.sharebelow a.twitter { background-position: 0px -928px; }
.sharebelow a.twitter:hover { background-position: 0px -986px; }
.sharebelow a.facebook { background-position: 0px -232px; }
.sharebelow a.facebook:hover { background-position: 0px -290px; }
.sharebelow a.reddit { background-position: 0px -580px; }
.sharebelow a.reddit:hover { background-position: 0px -638px; }
.sharebelow a.rss { background-position: 0px -696px; }
.sharebelow a.rss:hover { background-position: 0px -754px; }
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="shareandbookmark">
</div>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/> <!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/> <!-- Delicious -->
 <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/> <!--Stumble--> <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if>
</div>
<div style="clear:both"/>
4. Simpan dan lihat hasilnya.

Berlangganan artikel via email

6 Response to "Membuat/Memasang Widget Social Share Di Bawah Postingan"

Thank atas infonya, kebetulan ane lagi buat RSS feed untuk blog ane

Balas
avatar
Anonymous

wah izin terapin ke blog saya ya, thanks :D

Balas

Wah bagus nih tutorialnya sob. Saya coba nanti. Salam kenal sob. Jangan lupa berkunjung balik dan kasih komentar di blog saya ya sob, hehe :)

Balas

Blog saya => http://kang-hilman.blogspot.com/

Balas

pusing nih abdirafiakmal.blogspot.com

Balas

thanks gan berhasil,,ane pasang disini http://balaikamih.blogspot.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat/Memasang Widget Social Share Di Bawah Postingan" ini bermanfaat, share ke jejaring sosial.
Konversi Kode