TapKoin

Cara Memasang Tombol Share Floating di Blog

ADS GOOGLE
» » Cara Memasang Tombol Share Floating di Blog

Cara Memasang Tombol Share Floating di Blog

Dede Ubed 29 September 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

ads
Posted by Dede Ubed, Published at 29 September and have 2 komentar
Dede Ubed

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 March 31, 2018 at 12:12 PM
✖

Makasih, kebetulan sy lagi belajar ini, sangat bermanfaat

Balas
avatar
Dede Ubed April 1, 2018 at 9:11 AM
✖

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

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

Advertisement

IKLAN DISINI