Membuat Share Button With Counter di Blogger

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Share Button With Counter di Blogger, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Tutorial, Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Cara membuat widget share button dengan counter untuk blogger baru saya ketahui pada blog Igniel, pada blog tersebut sudah memasang widget share button tersebut. Karna tampilannya simple dan elegan jadinya saya share saja dari pada saya tidak posting apa-apa mending saya posting dengan ilmu yang saya ketahui.

Saya yakin dengan Anda memasang widget share button ini, blog Anda menjadi lebih elegan. Dengan tampilannya yang simple blog Anda tidak akan menjadi berat loadingnya. Jika Anda ingin memakai Sticky pada widget share button ini, di bawah ini saya juga membagikan tutorial nya, berikut tutorialnya.

Membuat Share Button With Counter di Blogger

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu copy kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Share Button dengan Counter untuk Blogger */

.igniel-share-button {float:left;display:inline-block}

.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 {display: inline-block; width:35px}  .igniel-share-button .igniel-share ul {margin: 0; padding: 0;}

.igniel-share-button .igniel-share ul li {border-radius:5px;-moz-border-radius:5px;list-style: none; list-style-type: none; padding: 0; margin-bottom:10px; width: 39px; height: 45px; display:block; font-size: 12px; overflow: hidden; text-align: left; 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; line-height: 25px; height: 100%; display: block; text-decoration: none;}

.igniel-share-button .igniel-share ul li .fa { color: #fff; font-size:13px; font-weight: normal; font-family: FontAwesome; display: inline-block; text-align: center; padding: 0;width: 39px;height:24px;line-height:24px;background-color: rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.05); }

.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;height:25px} .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;height:25px} .igniel-share-button .igniel-share .btn_stumbleupon:hover {

background: #d23614; }

.igniel-share-button .igniel-share .btn_tumblr {background: #314358;height:25px} .igniel-share-button .igniel-share .btn_tumblr:hover {

background: #2e3f52; }

.igniel-share-button .igniel-share .share.h6 {font-weight:bold;color:#008c5f;text-transform:normal;border-bottom:4px solid #cc0000} .igniel-share-button .igniel-share .share {width:40px;height:auto;border-radius:0px;-moz-border-radius:0px;border:0}

.igniel-share-button .igniel-share .share .count.h4 {font-size: 22px; font-weight: bold; text-shadow: none; text-decoration: none; font-family: 'Roboto',sans-serif; text-align: center; color: #cc0000; margin:0; padding: 0px; border: none; }

.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 {position: relative; color: #fff;text-align:center;min-width: 12px;padding: 0px 5px;margin-top:-3px}

Silakan gunakan kode dibawah ini untuk memanggil button share menjadi muncul

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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>

<div class='share h6'>SHARE</div>

</div>

</li>

                <li class='btn_twtr'>

<a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>

<div class='wrap1'><i class='fa fa-twitter'></i></div>

<div class='wrap'>Tweet</div>

<div class='share-btn' data-service='twitter'>

<div class='count'></div></div>

</a>

</li>

                <li class='btn_fb'>

<a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>

<div class='wrap1'><i class='fa fa-facebook'></i></div>

<div class='wrap'>Share</div>

<div class='share-btn' data-service='facebook'>

<div class='count'></div></div>

</a>

</li>

                <li class='btn_gplus'>

<a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'>

<div class='wrap1'><i class='fa fa-google-plus'></i></div>

<div class='wrap'>Share</div>

<div class='share-btn' data-service='google'>

<div class='count'></div></div>

</a>

</li>

                <li class='btn_pntrst'>

<a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'>

<div class='wrap1'><i class='fa fa-pinterest'></i></div>

<div class='wrap'>Share</div>

<div class='share-btn' data-service='pinterest'>

<div class='count'></div></div>

</a>

</li>

              </ul>

         </div></div></b:if>

Silakan Anda taruh kode di atas di widget maupun ke dalam HTML. Jika Anda ingin menggunakannya di HTML maka cari kode 'post-body entry-content' dan pastekan kode di atas di bawah kode tersebut

Jika ada masalah atau kesalahan sebaiknya Anda hubungi saya lewat komentar, secepatnya akan saya jawab jika saya sedang keadaan online.