Cara Memasang Tombol Share Keren di Blogspot

Cara Memasang Tombol Share Keren di Blogspot - Menambahkan widget sosial media keren blogger di bawah postingan atau di atas kotak komentar sangat disarankan karena setelah membaca seluruh postingan blog, pengunjung akan membuat keputusan apakah akan membagikan artikel atau tidak.
Cara Memasang Tombol Share Keren di Blogspot
Untuk blogger mana pun, tugas mencari dan menulis konten saja tidak cukup. Salah satu faktor kunci keberhasilan meningkatkan traffic blog adalah dengan memasang tombol widget sosial media keren blogger populer saat ini seperti, Google Plus, Facebook, Twitter dan Whatsapp.

Pada artikel di bawah ini, kami akan menunjukkan kepada Anda cara memasang tombol share media sosial di blog di bawah postingan.

Baca Juga: Panduan lengkap Cara Search Engine Optimization (SEO) Ramah Website

Cara Memasang Tombol Share Keren di Blog

edit html

1. Silahkan login akun Blogger >> Tema >> Edit HTML
2. Kemudian letakkan kode tombol share di bawah ini tepat diatas kode ]]></b:skin>
/* Tombol Share */
.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}
3. Setelah itu letakkan kode HTML social media berikut ini tepat di bawah kode <data:post.body/> (yang kedua atau ketiga), silahkan coba semuanya sampai berhasil.
<div id='share-container'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div id='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>
4. Yang terakhir anda harus meletakkan kode font awesome tepat diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
5. Simpan tema dan lihat apakah pemasangan kode-kode diatas berhasil atau tidak.

Apabila ada kesalahan, maka tombol share media sosial keren tidak akan terpasang di bawah halaman postingan blog. 

Cara Memasang Tombol Share Media Sosial Keren di Lengkap

Kali ini Cara Memasang Tombol Share Media Sosial Keren di Lengkap. Tombol share yang pertama di atas kurang lengkap, maka kami akan membuat tombol share versi yang lumayan lengkap, dengan 4 tampilan yaitu facebook, twitter, google plus dan whatsapp. Jika anda tekan tombol plus (+) maka akan muncul tombol share media sosial yang lain seperti telegram, pinterest, linkedin, tumblr, line, blogger share dan BBM.

Untuk lebih jelasnya bisa dipasang terlebih dahulu. Silahkan ikuti langkah-langkahnya berikut ini:
Cara Memasang Tombol Share Media Sosial Keren di Lengkap

1. Silahkan login akun Blogger >> Tema >> Edit HTML
2. Kemudian letakkan kode berikut ini tepat diatas kode ]]></b:skin>
/* Share Button Keren */
.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share_btnper{margin:35px auto 0;padding:0;text-align:center;display:block}
.showother{display:none}
.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.share_btn ul li{display:inline-block;overflow:hidden}
.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:inline-block;text-align:center;height:40px;line-height:40px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;border-radius:99em;overflow:hidden}
.share_btn i{font-size:16px;padding:0;margin:0;line-height:40px;text-align:center}
.shareplus{padding:0;background:#aaa;cursor:pointer}
.share_btn a:hover{background:#333}
.share_btn li a.fb{background:#4867aa}
.share_btn li a.tw{background:#1da1f2}
.share_btn li a.gp{background:#dc4a38}
.share_btn li a.pt{background:#ca2128}
.share_btn li a.le{background:#0673ab}
.share_btn li a.tr{background:#43556e}
.share_btn li a.em{background:#141b23}
.share_btn li a.ln{background:#00c300}
.share_btn li a.bm{background:#000}
.share_btn li a.wa{background:#4dc247}
.share_btn li a.tg{background:#22a9f7}
.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8}
.BlackBerry-Icon {width:42px;height:42px;padding-top:7px}
#hideshare{display:none}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}
3. Kemudian letakkan kode HTML berikut ini tepat dibawah kode <data:post.body/> (yang kedua atau ketiga) silahkan coba semuanya sampai berhasil.
<div class='share-wrpaper' id='share_btnper'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div class='share_btn'><ul>
<li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/></a></li>
<li><a class='tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='wa' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:19px!important'/></a></li>
<li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hideshare&apos;).style.display=&apos;inline-block&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div></li><li><div id='hideshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hideshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div></li></ul>
<ul class='showother' id='showother'>
<li><a class='tg' expr:href='&quot;tg://msg?text=&quot; + data:post.title + &quot; - &quot; + data:blog.url' rel='nofollow' target='_blank' title='Share on Telegram'><i aria-hidden='true' class='fa fa-telegram' style='font-size:20px!important'/></a></li>
<li><a class='pt' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li>
<li><a class='le' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li>
<li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share On Line'>
<svg class='icon icons8-LINE' viewBox='0 0 48 48'>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
</svg>
</a></li>
<li><a class='em' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li>
<li><a class='bm' expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target='_blank' title='Share On BBM'>
<svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'>
<rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/>
<g>
<path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
<path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
<path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
<path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
</g>
</svg>
</a></li>
</ul>
</div>
</div>
4. Terakhir letakkan kode font awesome tepat diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
5. Simpan tema dan lihat hasilnya.

Sekian tutorial Cara Memasang Tombol Share Keren di Blogspot, semoga berhasil.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel