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

Unknown

Trik Blog

3 Okt 2013

Belum ada komentar

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXPvELiJ7dpG-KzKjjY9IVo_zjUL1SWquGe20Wql8uSE7X65BYCC7wga2hUWqLKRyxzP2pjFd1zJLd4LmUFl_Doa0sorXozmt2eyRpWc-j9UkbOX-k6rH4h98RmIUNoyTu3Oru1uHJKo/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.