Cara Membuat Tombol Share Media Sosial Dengan Jumlah Total Share / Counter - Komputerdia | Berbagi Tutorial

Cara Membuat Tombol Share Media Sosial Dengan Jumlah Total Share / Counter

.
.
komputerdia.com - Tombol share sosial media saat ini sangatlah berpengaruh sekali untuk peningkatan popularitas serta peningkatan ranking blog yang kita kelola. Pasalnya tingkat viralnya suatu artikel saat ini, bukan hanya ditentukan oleh SEO semata tetapi "campur tangan" sosial media juga untuk saat ini jauh sangat menentukan tingkat ke-Viralan sebuah konten artikel.

Dalam artikel kali ini saya akan mencoba menjelaskan bagaimana cara membuat tombol share sosial media yang telah dilengkapi dengan keterangan jumlah total share pada artikel tersebut. Untuk kalian yang belum sempat membaca artikel sebelumnya, kalian dapat membacanya pada artikel terkait berikut ini

Baca Artikel Lainnya:


Cara Membuat Tombol Share Media Sosial Dengan Jumlah Total Share / Counter

Membuat Tombol Share Sosial Media Dengan Keterangan Jumlah Share

  • Silahkan kalian login ke akun blogger
  • Cari kode ]]></b:skin> atau </style> dengan cara menekan tombol ctrl+f kemudian ketikkan perintah ]]></b:skin> atau </style>
  • Setelah itu silahkan copy dan tempelkan kode berikut ini tepat diatas kode ]]></b:skin> atau </style>
/* 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%}}
  • Langkah selanjutnya silahkan car kode <data:post.body/>, dan pastikan kode tersebut terletak didalam tag conditional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == &quot;item&quot;'>
  • Kemudian copy dan tempelkan kode dibawah ini tepat diatas 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'/>
  • Langkah selanjutnya silahkan carti kode </head>, kemudian copy dan pastekan kode dibawah ini tepat diatas kode </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  • Langkah terakhir, silahkan cari kode </body>, kemudian copy dan tempelkan kode dibawah ini tepat diatas 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>
  • Setelah semua kalian setting dengan benar, silahkan tekan tombol simpan
  • Lihat hasilnya dan semoga tutorial ini bermanfaat untuk kalian semuanya
.
.

Berlangganan Artikel terbaru (free):

Post a Comment