Cara Memasang Tombol Share Keren di Blogspot Dengan Mudah

Cara Memasang Tombol Share Keren di Blog – Sobat Mamang Obet tentu pernah melihat tombol share yang dipasang pada samping postingan blog, diatas artikel dan dibawah artikel postingan blogspot. Ini bertujuan agar artikel kita dapat di share oleh pengunjung blog ke media sosial seperti Google Plus, Facebook dan Twitter.

Nah, Pada postingan kali ini saya akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini dibuat oleh Mas Sugeng yang dipasang di beberapa template populernya dengan tulisan Please share, kini anda dapat memasangnya diblog dengan mudah. Kurang lebih tampilannya seperti gambar berikut ini:

Cara Memasang Tombol Share Keren di Blog Ala Mas Sugeng Dengan Mudah

1. Silahkan login akun Blogger >> Template >> Edit HTML
2. Selanjutnya cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi.

/*Tombol Share*/
.tombol-share-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0OMpRisb8jcq8H9ZlV3rUMRRCWJikr9hrWrFz7Roq-kodG1nZnZH9Y5s1mspUhG3x01qezI3qgljUoDeXyxZL1l3ZYIX4jGg8O86yp4-OK9Y_15fNaQgsQi1dXDw4PnEQE7FeqUg6tfZ/s1600/share.png) no-repeat 300px 10px;margin:20px 0 15px;overflow:hidden;}
.tombol-share-keren{margin:0 0;height:67px;float:left}
.tombol-share-keren .share{float:left;margin-right:10px;display:inline-block}
.tombol-share-keren .tweet {margin-top: 41px;}

3. Lalu cari kode <data:post.body/> biasanya terdapat lebih dari satu, silahkan pilih yang ke dua atau yang terakhir.

4. Jika sudah ketemu, silahkan pasang kode berikut tepat dibawah kode ini <data:post.body/>

<div class='tombol-share-box'>
<div class='tombol-share-keren'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

5. Jika pemasangan diatas sudah selesai, selanjutnya cari kode </body> kemudian pasang kode dibawah ini tepat diatas kode tersebut.

<script>
window.___gcfg = {lang: 'id'};
(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>
<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 id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

6. Selesai dan lihat hasilnya

Dengan cara diatas tombol share akan muncul dibawah artikel blog, Jika tidak muncul coba perhatikan pemasangan kode HTML dibawah kode <data:post.body/> Silahkan coba satu persatu sampai muncul dibawah postingan blog.

Membuat Tombol Share Keren di Blogger Ala Bamz

Blog Bamz merupakan salah satu master pembuat template blogspot yang cukup populer, karyanya banyak digunakan blogger yang suka tampilan simple dan ringan. berikut tombol share yang sering digunakan oleh blog bamz.

Sebelum memasang tombol share, sebaiknya anda backup template terlebih dahulu untuk menghindari kesalahan yang fatal.

1. Login blogger >> pilih menu Template >> edit HTML

1. Lalu letakkan kode CSS berikut tepat diatas kode </style>

.tombol-share-penaindigo{width:100%;height:43px;margin-bottom:10px}
.tombol-share-fb-cont,.tombol-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.tombol-share-tw-cont,.tombol-share-other-cont,.tombol-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
.tombol-share-fb-cont,.tombol-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.tombol-share-fb,.tombol-share-tw,.tombol-share-gp,.tombol-share-li,.tombol-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVFz55vZE5YO1KnsTy6zTx84nzPw2zixRu5TAAbvh7GfJcVFKl7VimYmnsDbd-Z4tvxcJOD5Cg5KLQxKhsU7Ing9NYN7CAxCirceEJXN4iyJ8RIH1dhcFbzE866M4jvphs1qCKw7nId4/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-share-fb-label{color:#2d609b}
.tombol-share-fb-label,.tombol-share-tw-label,.tombol-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-share-tw{background-position:0 -43px}
.tombol-share-tw-label{color:#00c3f3}
.tombol-share-gp{background-position:0 -86px}
.tombol-share-gp-label{color:#f00}

2. Kemudian letakkan kode HTML berikut tepat diatas kode <data:post.body/>

<div class='tombol-share-penaindigo'>
<div class='tombol-share-fb-cont'>
<a class='tombol-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a>
<a class='tombol-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-share-tw-cont'>
<a class='tombol-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
<a class='tombol-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-share-other-cont'>
<a class='tombol-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
<a class='tombol-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
</div>

3. Silahkan Save dan lihat hasilnya.

Jika tidak ada kesalahan, maka tombol share keren sudah terpasang dibawah halaman postingan blog anda.

Sekian informasi singkat tentang Cara Memasang Tombol Share Keren di Blog semoga dapat bermanfaat dan artikel anda dapat dibagikan ke berbagai media sosial. Jika tutorial ini bermanfaat silahkan share dengan tombol media sosial yang sudah tersedia.

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: