Tombol Share di bawah postingan menggunakan Font Awesome

adscblog

Tombol share merupakan salah satu alat untuk meningkatkan trafic blog,dengan tombol inilah artikel yang berada di blog kita akan menyebar ke berbagai akun social sehingga traffic blog kita akan begitu melesat tinggi,banyak sekali tombol share yang di buat oleh master blogger maksud saya banyak sekali pariasi nya sehingga kita para blogger akan merasa bingung tombol share mana yang harus di pasang di blog.

Selain tombol share nya yang komplit juga pariasi yang di buat oleh master blog ini begitu indah yang membuat kita bingung untuk memilih,tetapi menurut saya tidak perlu mewah untuk memasang tombol share di blog yang penting pengaruh loading ke blog bagus.

Percuma kita membuat pareasi pada tombol share dengan begitu indah nya tetapi menghalangi dan menghambat terhadap loading blog yang nanti nya akan membuat para pengunjung kesal untuk membuka suatu artikel yang lama dan akhirnya akan meninggalkan blog kita.

Jadi menurut saya pasang lah tombol share yang sewajar nya tidak perlu berlebihan yang penting menarik aja,tetapi jika anda tertarik dengan suatu tombol share yang walaupun agak berat sedikit terhadap loading page ya itu terserah terhadap pemilik blog

Cara memasang tombol share counter responsive menggunakan font awesome di postingan

Tombol share banyak sekali macam nya seperti pada artikel sebelum nya saya juga pernah share tentang memasang tombol share bisa anda baca di artikel sebelum nya melalui link di bawah ini

Baca : Cara membuat tombol share di bawah postingan

Namun kali ini beda dengan artikel sebelum nya cuman beda pariasi nya aja semua nya sama akan men share ke layanan social seperti facebook,twitter dan Google+ tetapi tergantung anda memilih yang mana untuk memasang nya di bawah postingan

Jika anda tertarik dengan pemasangan tombol share dengan Font Awesome ini bisa anda ikuti langkah langkah pembuatan nya di bawah ini di antara nya

• Masuk ke blogger
• kemudian pilih template
• edit Html setelah masuk ke template anda silahkan kan anda cari kode berikut </b:skin> dan letakan kode berikut sebelum kode tersebut

/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
 @media only screen and (max-width: 979px) {
 .arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}

• Kemudian silahkan anda cari lagi kode <data:post.body/> biasanya kode tersebut ada dua atau tiga,silahkan anda letakan saja kode berikut di bawah kode yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='arlina_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ArlinaDesign - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-twitter'/></div>
  <div class='wrap'>Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-google-plus'/></div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-pinterest'/></div>
  <div class='wrap'>Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-linkedin'/></div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
</li>
</ul>
</div>
</div>
</b:if>

• Setelah itu silahkan anda letakan kode berikut sebelum kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by twistedshape.blogspot.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>

• Dan kemudian save dan lihat hasil nya

Pastikan di template anda sudah terdapat Font Awesome nya

 Nah itulah cara pembuatan tombol share di sertai counter di bawah postingan dengan menggunakan font awesome semoga artikel ini bisa membantu dan bermanfaat untuk para blogger,salam blogger.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 11 Oktober and have 0 komentar