Membuat Tombol Share Melayang Lengkap Dengan Jumlah Share -Tombol share dalam blog sangat penting peranannya terutama dalam meningkatkan peringkat blog kita di search engine seperti google. Oleh karena itu tombol share dalam suatu template merupakan suatu keharusan jika blog atau website anda ingin dikenal luas atau untuk mencari uang dari mbah google.
Banyak manfaat jika blog anda memasang tombol share di blog diantarnya adalah memudahkan pengunjung untuk mengshare atau membagikan artikel anda kepada orang lain.
Dengan semakin banyak orang membaca atau mengklik artikel anda akan semakin mudah artikel anda nangkring di halaman pageone google. Hal yang diidam-idamkan oleh setiap para blogger.
Dari segi keuntungan mungkin seperti yang saya uraiakan diatas,
Lantas apa kerugian, ya seperti kode-kode yang lain semakin banyak widget yang kita pasang jelas akan semakin lama kecepatan loading akses artikel kita.
Padahal mesin pencari lebih suka template yang fast loading tidak terlalu banyak widget, begitu juga pembaca ingin cepat - cepat membaca yang dia cari.
Tapi kode disini setelah saya coba tidak terlalu signifikan terhadap kecepatan loading blog masih wajar. Jadi sebaiknya dipikirkan lagi sebelum anda memasang pada template blog anda. Namun jika blog anda sudah ada tombol share tidak salah juga anda tanpa memasangnya. Jika tidak ada silahkan dicoba cara dibawah ini.
Banyak manfaat jika blog anda memasang tombol share di blog diantarnya adalah memudahkan pengunjung untuk mengshare atau membagikan artikel anda kepada orang lain.
Dengan semakin banyak orang membaca atau mengklik artikel anda akan semakin mudah artikel anda nangkring di halaman pageone google. Hal yang diidam-idamkan oleh setiap para blogger.
Dari segi keuntungan mungkin seperti yang saya uraiakan diatas,
Lantas apa kerugian, ya seperti kode-kode yang lain semakin banyak widget yang kita pasang jelas akan semakin lama kecepatan loading akses artikel kita.
Padahal mesin pencari lebih suka template yang fast loading tidak terlalu banyak widget, begitu juga pembaca ingin cepat - cepat membaca yang dia cari.
Tapi kode disini setelah saya coba tidak terlalu signifikan terhadap kecepatan loading blog masih wajar. Jadi sebaiknya dipikirkan lagi sebelum anda memasang pada template blog anda. Namun jika blog anda sudah ada tombol share tidak salah juga anda tanpa memasangnya. Jika tidak ada silahkan dicoba cara dibawah ini.
Disini saya akan membagikan cara Membuat Tombol Share Melayang Lengkap Dengan Jumlah Share seperti tampak pada gambar dibawah ini
#Feature yang ada di tombol share ini antar lain
1) Menampilkan jumlah total share
2) Menampilkan jumlah tiap media sosial share
3) Adanya tombol hide untuk menyembunyikan tombolnya jika mengganggu pembaca
4) Sudah responsive
Untuk menerapkan atau memasang tombol share melayang ini silahkan ikuti step by step cara yang saya jelaskan dibawah ini.
Semoga anda tidak kesulitan mengikuti apa yang saya uraikan dibawah ini, karena saya juga masih belajar menulis agar tulisan saya mudah dipahami oleh pembaca blogger.
Berikut langkah-langkah untuk membuat tombol share dengan jumlah sharenya
# 1 Masuk ke Dasboard blogger > Template > Edit HTML, sebelumnya saya menyarankan untuk membackup template anda dulu untuk menghindari kegagalan penerapan kodenya.
# 2 Copy link FontAwesome 4.2.0 dibawah ini di bawah <head>, tetapi jika sudah ada link seperti dibawah anda, maka lewati langkah nomer 2 ini.
Catatan : Akan tetapi jika link font Awesome anda lebih rendah dari seri ini maka sebaiknya anda menggantinya.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
# 3 Tambahkan kode link Google javaScript Library ini dibawah <head> juga, tetapi jika sudah ada maka lewati juga langkah ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/># 4 Kemudian copy kode CSS berikut ini dan letakkan kode ini diatas kode </head>, untuk mencarinya klik Ctrl+F dan ketikkan kode </head> di kotak pencarian lalu tekan enter.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.twistblogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.twistBlogger_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.twistBlogger_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
transform-origin: 50% 0%!important;
-webkit-transform-origin: 50% 0%!important;
-moz-transform-origin: 50% 0%!important;
-ms-transform-origin: 50% 0%!important;
-o-transform-origin: 50% 0%!important;
opacity: 1;
-webkit-transform: translateX(0px) rotateY(-180deg);
-moz-transform: translateX(0px) rotateY(-180deg);
-ms-transform: translateX(0px) rotateY(-180deg);
-o-transform: translateX(0px) rotateY(-180deg);
transform: translateX(0px) rotateY(-180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 50px 0px 0px 50px;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
margin-left: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.twistBlogger_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>
Catatan : Jika tombol share ini ingin ditampilkan pada perangkat seluler maka hapus kode display: none !important; warna kuning diatas.
# 5 Langkah ke lima adalah copy juga kode HTML dibawah ini. Dan letakkan kode tersebut dibawah kode <div class='post-footer-line post-footer-line-3'>.
Akan ada 2 (dua) nama kode seperti diatas. Letakkan pada kode yang kedua
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='twistBlogger_SocialBar'>
<input class='ShowHide_Button' id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-left'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
<div class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='h6'>SHARES</div>
</div></div>
<ul>
<li class='button_facebook'>
<a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @TwistBlogger - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-btn").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
</b:if>
</b:if>
Catatan : ubah @TwistBlogger yang ditandai kuning dengan nama twiter anda.
Memang sangat banyak kode yang harus diterapkan, makanya diawal tadi saya mengingatkan anda untuk membackup semua template anda jika ada kegagalan pada penerapan templatenya
Penting :
Jika anda ingin menghapus salah satu tombol yang tidak ingin digunakan cari tombol mulai dari <li> sampai dengan </li>.
Sekarang setelah kode tersebut anda terapkan lalu simpan. Dan silahkan lihat hasilnnya. Oh ya tombol ini hanya akan tampil pada halaman postingan bukan homepage.
Jika anda mengalami kendala dalam mempraktekkan cara ini pada template anda silahkan berkomentar dibawah.
Demikian tutorial blog cara memasang tombol share melayang berserta jumlah sharenya. Jika anda senang dengan artikel ini luangkan waktu 1 menit untuk mengshare dan atau melikenya.
Tags:
Tutorial Blog