SIDOBEY

Cara Memasang Tombol Share Floating di Blog

ADS GOOGLE
» » Cara Memasang Tombol Share Floating di Blog

Cara Memasang Tombol Share Floating di Blog

D2Ubed September 29, 2017 2 komentar
Short URL:
Cara membuat Tombol Share media social Floating di blog - Tombol share media social merupakan salah satu tombol yang sangat di perlukan di dalam blog,dan biasa nya tombol share media social ini di letakan oleh para blogger umum nya di bagian bawah postingan ataupun di bagian atas postingan blog
Namun tidak sedikit pula saat ini banyak blogger yang menyimpan Tombol share ini berada di bagian kiri blog sehingga tampilan nya lebih unik dan menarik juga lebih terlihat oleh para pengjung blog sehingga memudahkan nya untuk menshare salah satu artikel yang di sukainya ke akun media social yang mereka miliki

Dan untuk memasang tombol share media social dengan gaya floating ini banyak situs yang menyediakan nya dengan gratis seperti pada artikel terdahulu saya yang share tentang memasang tombol share floating seperti pada artikel kali ini

Pemasangan Tombol Share Floating social media di blog

Namun pada pembahasan terdahulu saya share tentang cara pemasang tombol shrae dengan gaya floating ini di ambil dari salah satu situs penyedia yang dimana anda dapat mengambil kode dan memasang nya di blog anda secara gratis

Baca Juga : Cara memasang tombol share floating di halaman postingan

Begitu juga kali ini saya akan bebagi cara bagaimana cara pemasangan tombol share flotaing di blog,namun bukan dari penyedia situs gratis kita akan mendapatkan kode nya,tetapi kali ini saya sudah menyediakan kode yang dimana anda hanya perlu meletakan kode di bawah ini di template blog anda

Dan untuk cara pemasangan nya dapat anda ikuti tutorial pemasangan di bawah ini
  • Silahkan anda masuk ke DashBoard Blogger anda menggunakan email dan juga pasword nya
  • Setelah berada di bagain Dashboard silahkan anda klik template
  • Lalu kemudian klik Edit Html
  • Setelah berada di bagian edit html silahkan anda letakan kode berikut sebelum kode </head> dan untuk memudahkan anda dalam pencarain kode tersebut,silahkan anda tekan tombol Ctrl+F secara bersamaan,kemudian letakan kode berikut sebelum kode tesebut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/*------------------------------------------------------------

Floating Social Share Button Bar Version 2.0

Designed by:: http://www.twistblogger.com

Shares by:: http://www.infotrens.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 *****************

------------------------------------------------------------*/

.infotrens_SocialBar {

  position: fixed;

  bottom: 30%;

  padding: 0;

  left:0;

  background: none;

  text-align: center;

  margin: 0 auto;

  z-index: 99999999;

}

.infotrens_SocialBar label:hover {

  cursor: pointer;

  opacity:1;

}

.infotrens_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;

}

.infotrens_SocialBar .social_menu {

  display: inline-block;

  float: left;

  list-style:none;

  max-width:50px;

  margin: 0;

  padding: 0;

}

.infotrens_SocialBar .social_menu .button_facebook {

  background: #3a579a;

}

.infotrens_SocialBar .social_menu .button_facebook:hover {

  background: #314a83;

}

.infotrens_SocialBar .social_menu .button_twitter {

  background: #00abf0;

}

.infotrens_SocialBar .social_menu .button_twitter:hover {

  background: #0092cc;

}

.infotrens_SocialBar .social_menu .button_googleplus {

  background: #df4a32;

}

.infotrens_SocialBar .social_menu .button_googleplus:hover {

  background: #be3f2b;

}

.infotrens_SocialBar .social_menu .button_pinterest {

  background: #cd1c1f;

}

.infotrens_SocialBar .social_menu .button_pinterest:hover {

  background: #ae181a;

}

.infotrens_SocialBar .social_menu .button_stumbleupon {

  background: #ea4b24;

}

.infotrens_SocialBar .social_menu .button_stumbleupon:hover {

  background: #c7401f;

}

.infotrens_SocialBar .social_menu .button_linkedin {

  background: #2554BF;

}

.infotrens_SocialBar .social_menu .button_linkedin:hover {

  background: #224EB4;

}

.infotrens_SocialBar .social_menu .button_facebook .count,

.infotrens_SocialBar .social_menu .button_twitter .count,

.infotrens_SocialBar .social_menu .button_googleplus .count,

.infotrens_SocialBar .social_menu .button_pinterest .count,

.infotrens_SocialBar .social_menu .button_stumbleupon .count,

.infotrens_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;

}

.infotrens_SocialBar .social_menu > ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.infotrens_SocialBar .social_menu .share {

  background: #FFF;

  color: #807F7F;

  font-size: 11px;

  height: 45px !important;

}

.infotrens_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;

}

.infotrens_SocialBar .social_menu .share .h6 {

  padding-bottom: 3px;

  font-family: sans-serif;

  margin: 0px !important;

  line-height: 1.5em;

  font-size: 11px;

}

.infotrens_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;

}

.infotrens_SocialBar .social_menu > ul > li a {

  display: block;

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  padding: 5px 0px;

  cursor: pointer;

  text-decoration: none;

}

.infotrens_SocialBar .social_menu > ul > li:hover {

  border-left: 5px solid rgba( 0,0,0,.3);

  width: 40px;

}

.infotrens_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;

}

.infotrens_SocialBar .social_menu > ul > li:hover i {

  opacity: 0.9;

}

@media only screen and (min-width:768px) and (max-width:979px) {

.infotrens_SocialBar {

  bottom: 20% !important;

}

}

@media only screen and (min-width:480px) and (max-width:767px) {

.infotrens_SocialBar {

  bottom: 15% !important;

}

}

 @media only screen and (max-width:479px) {

.infotrens_SocialBar {

  bottom: 10% !important;

  display: none !important; /*---delete this code line to make it appear on mobile--*/

}

}

</style>

</b:if>
Perhatikan kode yang berwarna merah,jika kode jQuery tersebut sudah ada di template anda,kode tersebut tidak usah di pasang
  • Langkah selanjut nya,silahkan anda lagi kode </body> pada umum nya kode tersebut berada di bagian akhir template,dan setelah ketemu silahkan anda letakan kode berikut tepat di atas kode tersebut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='infotrens_SocialBar'>
  <input class='ShowHide_Button' id='trens' type='checkbox'/>
  <label for='trens'><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='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @TwistBlogger - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); 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='&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'><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='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &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'><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='&quot;   http://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=626,height=500&quot;   );   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='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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 = document.location.href.toLowerCase();
    $.getJSON('http://sharecount.twistblogger.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>
  • Kemudian Save template dan lihat hasil nya
Nah itu lah cara pemasangan tombol share floating media social di halaman postingan blog dengan menggunakan kode,semoga artikel ini bisa membantu sobat blogger semua,salam blogger

Posted by D2Ubed, Published at September 29, 2017 and have 2 komentar
D2Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


2 komentar

avatar
Berbagai Info 30 Maret 2018 pukul 22.12
✖

Makasih, kebetulan sy lagi belajar ini, sangat bermanfaat

Balas
avatar
Jalak Ikal 31 Maret 2018 pukul 19.11
✖

Sama-Sama Gan...........

Balas

Advertisement

IKLAN DISINI