Advertisement

Pentingnya Share Buttons Serta Cara Memasangnya Ke Dalam Posting Blog

B anyak pilihan untuk memasang tombol berbagi atau share buttons pada halaman blog, yang mana tombol untuk share postingan blog ini pada umumnya sering atau paling biasa kita jumpai diakhiran artikel. Manakala seorang pengunjung telah selesai membaca dan ingin membagikan artikel tersebut kedalam akun social medianya,maka tombol sharing tersebutlah yang menjadi solusi mudah untuk melakukan aksi tersebut.

Pentingnya share buttons di setiap posting blog


Manfaat tombol berbagi atau sharing buttons ini pun tidak bisa disepelekan dan dipandang sebelah mata keberadaannya, mengapa? Karena dia mampu mendongkrak jumlah pengunjung atau trafik kedalam blog itu sendiri yang mana imbasnya itu, tentu saja blog yang bersangkutan akan kebanjiran pengunjung. Dan jelas ini akan menguntungkan bagi kemajuan blog itu sendiri. Hal ini bisa sobat baca dalam 8 cara membuat blog ramai pengunjung, baik. Sekarang aku lanjutkan pada tata cara penempatan serta pemasangan tombol share this article atau tombol bookmark social media ini, step demi step hingga tertanam kedalam setiap postingan blog.

Pentingnya Share Buttons

Cara memasang tombol berbagi / share buttons


Login kedalam dasbor blog
Pilih template, untuk berjaga –jaga jika terjadinya error ada baiknya anda download/ cadangkan template terlebih dulu.
Pilih edit html
Kemudian cari kode seperti ini dalam template blog anda <data:post.body/>
Copy paste kode berikut ini dan simpan tepat di bawah kode <data:post.body/>


<style type='text/css'>
#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:#fff;}
#mintshare_mini {width:100px; height:35px;padding: 0 15px;
margin-top: 30px;
margin-bottom: 20px;}
#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:35px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background:#fff;
padding-left:5px;
cursor:pointer;}
#mintshare_mini a.sharetext img {
border: 0 none;
display: block;
margin-left: 10px;}
#mintshare_mini .flyout {
background: none repeat scroll 0 0 #AAAAAA;
height: 113px;
left: 40px;
position: relative;
top: -4px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;}
#mintshare_mini .flyout ul {
background:#fff;
list-style:none;
position:absolute;
top:-27px;
width:420px;
height:35px;
border-left:0;
left:50px;
padding-right:10px;
z-index: 1;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;}
#mintshare_mini .flyout ul li {float: left;}
#mintshare_mini .flyout ul li a{}
#mintshare_mini .flyout ul a img {}
#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;padding-left: 15px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;}
#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;}
#mintshare_mini .flyout ul li.drop-li:hover &gt; a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover &gt; a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_mini .get_mintshare {
font-size: 10px;
margin-left: 5px;
position: relative;
top: 2px;}
.relbg h5{
color: #fafafa;
font-weight: normal;}
</style>

<!-- MintShare Mini -->
<div id='mintshare_mini'>
<a class='sharetext'><b>Share This</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class='flyout'>
<ul class='icons'>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGYrR-2Cw8f76yOzia7SGrP5wlSdUCS3l9c4wlb5TrJbTlrI3D70efUUEIvy_uDrGoseibynagpShQVoiDjRSSEVPHHh3mVlZzlbNnqYZyPNEcCJtxMb-c0V8KnV4HTlu2whAAoYc63IJ/s1600/facebook_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1k1Fd36aL9Bb7UnFRDsZoxcUzPbyMbPyukGXcQM_4r3kGKmwx9fZZs1RgFsREeC64jF98gqfs9cRte6loYBfnkGL-rwOCGo17u_qLnxW88ziKn7WLEz9RKHF0G7jqzFZed1A9Lmi7odc/s1600/twitter_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieumWrgRgMEX8jbGsEf7EL1CjtYey1kNzAcx4i6YHp0hwxizlzRqwQnlrKAteRlBR6_7njREZBvndv7UQVrZEvKfjB_xHPp8DAaDSicYy5QIAtIF0quc7eLjz4Zl1BaRwodHOX6inVXq6i/s1600/stumbleupon_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjLpaRyVUhQcGWVjpoPeXpFctjkei21dE0b0vbUsslkjf7Pldn6NVo7Kr2vDCb2XISoQ1nAosULLTmaxjwFKumqyUspE8YTtNwlHocCuy5THwPUqCRDx92sCWg7gf-0guqfQCdQIu0NNO/s1600/digg_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url'><img alt='technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZovvZnEX_XJejqUvdINuF3EcJJ4YeMi4TEFMH_htsoTXIIuF-vY9j1g_PTPBA6LF1VfCD5LH13EOmWMu3MVaR21Aa5dPHipvts__hLfZTHdPIJZL2-DsR9XZMwPX8ZTF8iKe0QAo9sK7/s1600/technorati_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_DeggKIYYUk4ABbAP2mbchCx_VwxMBQD66OAiNaffEjAdV0CANwtq5edegHzlee-58T9Ig90tIBs7gwZnUZ4uUMGWJ77Tu2iQq1e6vwKatd1mKZaGuRko3hiD21vzXcLsVGW-cuDPOqd/s1600/reddit_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='myweb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJwTcsAweyH96pcA3jYnhxHg5l5ZQXj2MA4IB-lxlua5fwWRcVxeN7tGGEeyp2b1efxVEjbynZMlEF91Es59YhOk9NrL_XwWCn7R1tvUHjT5ckjTwcEG0vwETL7cPB6peV_uJ0gdHYXQso/s1600/yahoo_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7ixVG8B-MF7ZvTrotJAz5e-iz1mwxKsAZhyphenhyphensG_72aLRTAF_8NKUeAzxTu7MDCqP0y36ndbyrCfrHk4aA2wNaALi-lKukMrDGJrtnuoOShwvAQYFW5mD0Ud2rXjfx8m-kQd3dXPjjpo-R/s1600/delicious_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
</ul>
</div>
</div>
<!-- MintShare Mini End-->

Simpan template dan selesai.

Setelah selesai melakukan pemasangan share buttons tersebut kedalam setiap postingan, maka kini para pembaca postingan sobat bisa dengan mudah membagikan postingan blog sobat kemasing-masing media sosialnya. Baiklah, aku cukupkannn sampai disini saja artikel tentang pentingnya share buttons serta cara memasangnya kedalam posting blog, jika ada pertanyaan silahkan untuk menuliskannya dalam kotak komentar dibawah ini.

Post a Comment

0 Comments