Cara Memasang Tombol Share Keren di Blogspot

Cara Memasang Tombol Share Keren di Blog – Sobat Pena Indigo 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.

Baca:  Cara Mudah Memasang Fanspage Facebook di Blog

Advertisement

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

cara memasang tombol share keren di blogspot

tombol share

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(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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

 

Membuat Tombol Share Keren di BloggerBlog 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('http://3.bp.blogspot.com/-3ypydr9U3DI/U9DHOBQy-vI/AAAAAAAAAbs/hvhfDPIpevI/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.

Baca Juga: Cara Membuat Contact Form (Contact Us) Keren di Blog

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.

4 Comments

Leave a Reply