Kamis, 31 Mei 2012

Cara Membuat Widget Like, Tweet, Dan Google+ di Bawah Posting Blog


By on 16.20

Blazer Blog, Social Sharing - Kali ini saya akan memperkenalkan kepada anda widget terbaru jejaring sosial, yaitu cara membuat tombol like facebook, tweet, dan google plus di bawah posting blog anda dengan gaya dan penampilan yang keren. Langsung saja cara membuatnya.


1. Login ke Blog kamu.
2. Pilih Rancangan, Pilih Edit HTML, jangan lupa Centang Expand Widget Template nya.
3. Cari kode <data:post.body/>
4. Setelah ketemu copy kode di bawah ini dan letakan tepat di bawah kode nomor 3.
<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
height: 103px;
background: url(http://1.bp.blogspot.com/-qcBN3og2WQM/T8ISDO_9fsI/AAAAAAAAA-g/tzqQMigA-x4/s1600/latesthack.png) 0 -7px no-repeat;
width: 500px;
margin-left: 65px;
}
.promote_twitter {
width: 130px;
height: 38px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 13px;
text-align: center;
}
.promote_facebook {
width: 115px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 63px 0 0 28px;
text-align: center;
}
.promote_google {
width: 65px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 28px;
text-align: center;
}
</style>
<div class='promote_post_bg'>
<div class='promote_twitter'>
<a class='twitter-share-button' data-via='blazer_blog' href='https://twitter.com/share'>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</div>
<div class='promote_facebook'>
<div>
<b:if cond='data:post.isFirstPost'>
<script>
(function (d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
</div>
</div>
<div class='promote_google'>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone annotation="none" size='medium'></g:plusone>
</div>
</div>
</b:if>
Simpan dan lihat hasilnya, ganti yah kode yang berwarna merah dengan username twitter kamu.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

4 komentar:

  1. mas cara kita menghilangkan widget yg kita pasang melalui EDIT HTML gemama caranya

    BalasHapus

  2. Promo Fans^^poker :
    - Bonus Freechips 5.000 - 10.000 setiap hari (1 hari dibagikan 1 kali) hanya dengan minimal deposit 50.000 dan minimal deposit 100.000 ke atas
    - Bonus Cashback 0.5% dibagikan Setiap Senin
    - Bonus Referal 20% Seumur Hidup dibagikan Setiap Kamis

    BalasHapus