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.

3 komentar: