komputerdia.com - Tombol share sosial media dikala ini sangatlah besar lengan berkuasa sekali untuk peningkatan popularitas serta peningkatan ranking blog yang kita kelola. Pasalnya tingkat viralnya suatu artikel dikala ini, bukan hanya ditentukan oleh SEO semata tetapi "campur tangan" sosial media juga untuk dikala ini jauh sangat memilih tingkat ke-Viralan sebuah konten artikel.
Share yaitu suatu kegiatan membuatkan file atau data yang ditujukan untuk khalayak umum, dikala ini istilah share sudah sangat terkenal sekali, bahkan istilah share ini sudah banyak dipakai untuk mempopulerkan sesuatu.
Diantara banyaknya acara share dikala ini, salah satunya yaitu kegiatan share yang dilakukan pada website atau blog. Langkah ini dilakukan guna untuk mempopulerkan suatu thread atau goresan pena biar sanggup diterima dan dibaca oleh banyak orang
Dalam artikel kali ini saya akan mencoba menjelaskan bagaimana cara menciptakan tombol share sosial media yang telah dilengkapi dengan keterangan jumlah total share pada artikel tersebut. Untuk kalian yang belum sempat membaca artikel sebelumnya, kalian sanggup membacanya pada artikel terkait berikut ini
Share yaitu suatu kegiatan membuatkan file atau data yang ditujukan untuk khalayak umum, dikala ini istilah share sudah sangat terkenal sekali, bahkan istilah share ini sudah banyak dipakai untuk mempopulerkan sesuatu.
Diantara banyaknya acara share dikala ini, salah satunya yaitu kegiatan share yang dilakukan pada website atau blog. Langkah ini dilakukan guna untuk mempopulerkan suatu thread atau goresan pena biar sanggup diterima dan dibaca oleh banyak orang
Dalam artikel kali ini saya akan mencoba menjelaskan bagaimana cara menciptakan tombol share sosial media yang telah dilengkapi dengan keterangan jumlah total share pada artikel tersebut. Untuk kalian yang belum sempat membaca artikel sebelumnya, kalian sanggup membacanya pada artikel terkait berikut ini
Baca Artikel Lainnya:
- Cara Mengganti Warna Adress Bar Browser Smartphone Sesuai Dengan Warna Blog
- 13 Cara dan Trik Paling Ampuh Untuk Mempercepat Loading Blog
- Cara Membuat Multi Tab Sidebar Responsive Di Blogger
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 isyarat berikut ini sempurna diatas isyarat ]]></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 isyarat tersebut terletak didalam tag conditional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == "item"'>
- Kemudian copy dan tempelkan isyarat dibawah ini sempurna 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='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " (by: @igniel) "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='"https://plus.google.com/share?url=" + data:post.url' onclick='j4vascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); 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='"https://www.tumblr.com/share/link?url=" + data:post.url' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); 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='"https://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=680,height=500"); 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 isyarat </head>, lalu copy dan pastekan isyarat dibawah ini sempurna diatas isyarat </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
- Langkah terakhir, silahkan cari isyarat </body>, lalu copy dan tempelkan isyarat dibawah ini sempurna diatas isyarat </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 akibatnya dan semoga tutorial ini bermanfaat untuk kalian semuanya