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 == "item"'>
<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='"http://twitter.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://plus.google.com/share?url=" + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' 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.
Post a Comment