Cara Membuat Button Share Ke Media Sosial Dengan Counter

Cara Membuat Button Share Ke Media Sosial Dengan Counter


Pelajar Design - Pada kesempatan ini saya akan membagikan sebuah tutorial Cara Membuat Button Share Ke Media Sosial Dengan Counter. Dengan Counter ini kita bisa tahu berapa kali jumlah artikel kita di share pada media sosial seperti Facebook, Twitter, Path dan lain-lain.

Beberapa Keuntungan Dan Kekurangan  Button Share

Ada beberapa keuntungan dan kekurangan apabila ada orang yang meng-share artikel kita ke media sosial, yaitu :

Keuntungan

  1. Pageviews ( Pengunjung ) Naik.
  2. Rangking Alexa Turun.
  3. Penghasilan Bertambah.
  4. Blog Semakin Terkenal.
  5. Mendapat Backlink Gratis.
  6. Dll.

Kekurangan

  1. Persentase Jingling ( Auto Visitor ) Besar.
  2. Visitor Media Sosial Melonjak.
  3. CPC ( Cost Per Click ) Adsense Turun.
  4. Rawan Banned ( Bila Dianggap Spam )
  5. Dll

Cara Membuat Button Share Ke Media Sosial Dengan Counter

1. Masuk ke Blogger.com.
2. Pilih menu TEMA > Edit HTML.
3. Tambahkan kode CSS dibawah ini SEBELUM / DIATAS kode ]]></b:skin> atau </style>. Apabila kalian ingin menyimpan kode dibawah SEBELUM kode </style>, pastikan pilih kode yang ada DI DALAM tag kondisional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == &quot;item&quot;'>.

/* Share Button Dengan Counter by IGNIEL.COM */
.igniel-share-button .igniel-share svg {width:25px;height:25px; vertical-align:-8px; text-align:left}
.igniel-share-button .igniel-share svg path {fill:#fff}
.igniel-share-button {display:block; margin-top:20px;line-height:0px; background:transparent; width:100%; max-width:738px; padding:20px 0; border-top:2px solid #dddfe2}
.igniel-share-button .igniel-share {display: block;} .igniel-share-button .igniel-share .wrap {text-align: center; margin: 0 auto; display: none; min-width: 40px;} .igniel-share-button .igniel-share .wrap1 {float:left; display: inline-block; width:50%; text-align:center}  .igniel-share-button .igniel-share ul {margin:0px; padding:0px;}
.igniel-share-button .igniel-share ul li {width:12.4%; margin-left:3px; line-height: 35px; list-style: none; list-style-type: none; padding:0px; display:inline-block; font-size: 12px; text-align:center; color: #fff; border: 1px solid rgba(0,0,0,0.04); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.igniel-share-button .igniel-share ul li a, .igniel-share-button .igniel-share ul li a:hover {color: #FFF !important; cursor: pointer; text-decoration: none;}
.igniel-share-button .igniel-share .btn_fb {background: #3a579a;} .igniel-share-button .igniel-share .btn_fb:hover { background: #314a83; }
.igniel-share-button .igniel-share .btn_twtr {background: #00abf0} .igniel-share-button .igniel-share .btn_twtr:hover { background: #0092cc; }
.igniel-share-button .igniel-share .btn_gplus {background: #df4a32;} .igniel-share-button .igniel-share .btn_gplus:hover { background: #be3f2b; }
.igniel-share-button .igniel-share .btn_pntrst {background: #cd1c1f;} .igniel-share-button .igniel-share .btn_pntrst:hover { background: #ae181a; }
.igniel-share-button .igniel-share .btn_linkedin {background: #2554BF;} .igniel-share-button .igniel-share .btn_linkedin:hover {
background: #224EB4; }
.igniel-share-button .igniel-share .btn_stumbleupon {background: #EB4823} .igniel-share-button .igniel-share .btn_stumbleupon:hover {
background: #d23614; }
.igniel-share-button .igniel-share .btn_tumblr {background: #314358} .igniel-share-button .igniel-share .btn_tumblr:hover {
background: #2e3f52; }
.igniel-share-button .igniel-share .share {width:auto; height:auto; line-height:0px; margin-bottom
:20px; margin-right:5px; border:0px}
.igniel-share-button .igniel-share .share .count.h4 {font-size:18px; font-weight:bold; font-family:Arial,sans-serif; text-align:center; color:#cc0000; margin:0px; padding:0px; position: relative; top:-17px}
.igniel-share-button .igniel-share .share .count.h4:after {font-weight:bold; font-size:11px; color:#008c5f; content:'SHARE'; display:block; position:relative; bottom:-18px}
.igniel-share-button .igniel-share .btn_fb .share-btn, .igniel-share-button .igniel-share .btn_twtr .share-btn, .igniel-share-button .igniel-share .btn_gplus .share-btn, .igniel-share-button .igniel-share .btn_pntrst .share-btn, .igniel-share-button .igniel-share .btn_linkedin .share-btn, .igniel-share-button .igniel-share .btn_stumbleupon .share-btn, .igniel-share-button .igniel-share .btn_tumblr .share-btn {display:block; overflow: hidden; width:50%; text-align:center; background-color: rgba(0,0,0,0.13); white-space:nowrap}
@media only screen and (max-width:1024px){.igniel-share-button .igniel-share ul li {width:11%}}
@media screen and (max-width:480px) {.igniel-share-button .igniel-share ul li{width:10%} .igniel-share-button .igniel-share .btn_fb .share-btn, .igniel-share-button .igniel-share .btn_twtr .share-btn, .igniel-share-button .igniel-share .btn_gplus .share-btn, .igniel-share-button .igniel-share .btn_pntrst .share-btn, .igniel-share-button .igniel-share .btn_linkedin .share-btn, .igniel-share-button .igniel-share .btn_stumbleupon .share-btn, .igniel-share-button .igniel-share .btn_tumblr .share-btn {display:none} 
.igniel-share-button .igniel-share .wrap1{width:100%}
.igniel-share-button .igniel-share .share{top:-5px; margin-right:0px}}
@media screen and (max-width:320px) {.igniel-share-button .igniel-share ul li{width:9%}}

4. Cari kode <data:post.body/>. Kemungkinan ada 3 kode yang sama, pastikan pilih kode yang ada DI DALAM tag kondisional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == &quot;item&quot;'>. Lalu tambahkan kode HTML dibawah ini SESUDAH / DI BAWAH kode <data:post.body/>.

<!-- Share Button Dengan Counter by IGNIEL.COM -->
<div class='igniel-share-button'><div class='igniel-share'>
  <ul>
    <li class='share'>
      <div class='share-btn' data-service='total'>
        <div class='count h4'/>
      </div>
    </li>
    <li class='btn_fb'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Facebook'>
        <div class='wrap1'><svg viewbox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg>
        </div>
        <div class='share-btn' data-service='facebook'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_twtr'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @igniel) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Twitter'>
        <div class='wrap1'><svg viewbox='0 0 24 24'> <path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg>
        </div>
        <div class='share-btn' data-service='twitter'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_gplus'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.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' title='Share to Google Plus'>
        <div class='wrap1'><svg viewbox='0 0 24 24'> <path d='M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z'/></svg>
        </div>
        <div class='share-btn' data-service='gplus'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_pntrst'>
      <a data-pin-config='beside' expr:data-img='data:post.thumbnailUrl' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &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' title='Share to Pinterest'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M13.25,17.25C12.25,17.25 11.29,16.82 10.6,16.1L9.41,20.1L9.33,20.36L9.29,20.34C9.04,20.75 8.61,21 8.12,21C7.37,21 6.75,20.38 6.75,19.62C6.75,19.56 6.76,19.5 6.77,19.44L6.75,19.43L6.81,19.21L9.12,12.26C9.12,12.26 8.87,11.5 8.87,10.42C8.87,8.27 10.03,7.62 10.95,7.62C11.88,7.62 12.73,7.95 12.73,9.26C12.73,10.94 11.61,11.8 11.61,13C11.61,13.94 12.37,14.69 13.29,14.69C16.21,14.69 17.25,12.5 17.25,10.44C17.25,7.71 14.89,5.5 12,5.5C9.1,5.5 6.75,7.71 6.75,10.44C6.75,11.28 7,12.12 7.43,12.85C7.54,13.05 7.6,13.27 7.6,13.5A1.25,1.25 0 0,1 6.35,14.75C5.91,14.75 5.5,14.5 5.27,14.13C4.6,13 4.25,11.73 4.25,10.44C4.25,6.33 7.73,3 12,3C16.27,3 19.75,6.33 19.75,10.44C19.75,13.72 17.71,17.25 13.25,17.25Z'/></svg>
        </div>
        <div class='share-btn' data-service='pinterest'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_linkedin'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Linkedin'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
        </div>
        <div class='share-btn' data-service='linkedin'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_tumblr'>
      <a data-notes='right' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Tumblr'>
        <div class='wrap1'><svg viewBox='0 0 512 512'><path d='M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z'/></svg>
        </div>
        <div class='share-btn' data-service='tumblr'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_stumbleupon'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=680,height=500&quot;);   return false;' rel='nofollow' title='Share to Stumbleupon'>
        <div class='wrap1'><svg viewBox='0 0 512 512'><path d='M274.5 216.4l23.1 12.8 36.5-12.3v-24.7c0-42.7-35.7-75.9-78.1-75.9 -42.3 0-78.1 31.1-78.1 75.4 0 44.4 0 113.1 0 113.1 0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-47.9H80.9c0 0 0 48 0 48.6 0 43.2 35 78.3 78.3 78.3 42.9 0 77.7-34.4 78.3-77.2v-111.7c0-10.2 8.3-18.5 18.5-18.5 10.2 0 18.5 8.3 18.5 18.5L274.5 216.4 274.5 216.4zM371.2 256.9v50.2c0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-49.2l-36.5 12.4 -23.1-12.8v48.8c0.4 42.9 35.3 77.6 78.3 77.6 43.2 0 78.3-35 78.3-78.3 0-0.6 0-48.6 0-48.6L371.2 256.9 371.2 256.9z'/></svg>
        </div>
        <div class='share-btn' data-service='stumbleupon'>
          <div class='count'/></div>
      </a>
    </li>
  </ul>
  </div></div>
<div class='clear'/>

Ganti @igniel dengan username Twiiter kalian

5. Apabila kalian belum memasang Script jQuery silahkan paste kode dibawah SEBELUM / DI ATAS kode </head>. Namun jika sudah jangan dipasang lagi.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

6. Kemudian kalian simpan kode buatan Mba Igniel dibawah ini SEBELUM / DI ATAS kode </body>.

<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Share Button Dengan Counter by IGNIEL.COM
$(document).ready(function(){
 ignielShareCounter = 'https://source.igniel.com/sharecounter';
 eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K a=["\\J\\M\\G\\F","\\D\\k\\j\\e","\\x\\h\\b\\C","\\d\\c\\c\\h","\\n\\g\\e\\o\\u\\h\\b\\n\\s\\i\\d\\e\\j\\e\\g\\i\\d\\n\\t","\\C\\d\\i\\b\\A\\j\\j\\o","\\g\\E\\e\\g\\b\\n\\G\\x\\d\\h\\b","\\x\\c\\z\\n","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\C\\d\\i\\b\\A\\j\\j\\o\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\F\\I\\b\\b\\c","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\c\\I\\g\\c\\c\\b\\h\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\B\\g\\e\\c\\b\\h\\b\\k\\c","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\B\\g\\e\\c\\b\\h\\b\\k\\c\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\n\\g\\e\\o\\b\\r\\g\\e","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\n\\g\\e\\o\\b\\r\\g\\e\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\c\\l\\z\\A\\n\\h","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\c\\l\\z\\A\\n\\h\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\G\\x\\d\\h\\b","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\E\\B\\n\\l\\k\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\k\\c\\l\\z\\A\\n\\b\\l\\B\\j\\e","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\k\\c\\l\\z\\A\\n\\b\\l\\B\\j\\e\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c","\\u\\r\\d\\c\\d\\v\\k\\b\\h\\y\\g\\i\\b\\s\\m\\c\\j\\c\\d\\n\\m\\t\\f\\w\\f\\p\\i\\j\\l\\e\\c\\p\\x\\O","\\F\\b\\h\\D\\d\\r\\g\\f\\o\\b\\k\\d\\n\\d\\x\\d\\e\\p\\f\\N\\b\\o\\f\\o\\j\\e\\b\\o\\k\\g\\f\\g\\e\\c\\b\\h\\e\\b\\c\\f\\d\\c\\d\\l\\f\\h\\b\\C\\h\\b\\k\\x\\f\\x\\d\\n\\d\\z\\d\\e\\L\\f\\o\\d\\o\\p","\\n\\j\\E","\\d\\D\\d\\P"];$[a[1b]]({1a:Y,1d:a[0],Z:a[1],R:{Q:$(a[4])[a[3]](a[2])},T:H(q){$(a[8])[a[7]](q[a[6]][a[5]]);$(a[10])[a[7]](a[9]);$(a[12])[a[7]](q[a[6]][a[11]]);$(a[14])[a[7]](q[a[6]][a[13]]);$(a[16])[a[7]](q[a[6]][a[15]]);$(a[18])[a[7]](a[17]);$(a[S])[a[7]](q[a[6]][a[19]]);$(a[U])[a[7]](q[a[6]][a[5]]+q[a[6]][a[11]]+q[a[6]][a[13]]+q[a[6]][a[15]]+q[a[6]][a[19]])},X:H(){W[a[1c]](a[V])}})',62,76,'||||||||||_0xe266|x65|x74|x61|x6E|x20|x69|x72|x63|x6F|x73|x75|x22|x6C|x6B|x2E|_0x1c15x1|x64|x3D|x5D|x5B|x2D|x3E|x68|x76|x6D|x62|x70|x66|x6A|x67|x54|x53|function|x77|x50|var|x2C|x4F|x43|x34|x78|id|data|20|success|21|22|console|error|ignielShareCounter|dataType|||||||||||url|24|23|type'.split('|'),0,{}));
});
//]]> </script>
</b:if>

7. Simpan dan lihat hasilnya.

Bagaimana artikel tentang Cara Membuat Button Share Ke Media Sosial Dengan Counter? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

Referensi : https://www.igniel.com/2018/02/social-share-button-counter.html

You may like these posts