» » CARA MEMBUAT FLOATING SOCIAL SHARE BUTTON VOL 1 DI BLOGSPOT

CARA MEMBUAT FLOATING SOCIAL SHARE BUTTON VOL 1 DI BLOGSPOT

Ivankgribatako
Add Comment
WIDGET SOSIAL MEDIA
Rabu, 30 Desember 2015
ADDING FLOATING SOCIAL SHARE BUTTON FOR BLOGGER VOL 1




*  Buka blog mu
*  pilh template
*  edit HTML
*  cari kode ini ]]></b:skin>
*  dan copy kode dibawah dan letakkan diatas kode ]]></b:skin>
.twistMe {
  position: fixed;
  bottom: 25%;
  padding: 0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistMe label:hover {
  cursor: pointer;
}
.twistMe label {
  text-align: center;
  width: 62px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  display: block;
  font-size: 12px;
  padding: 1px 0px;
  border-radius: 0;
  transition: all .4s ease-in-out;
  position: absolute;
  margin-top: 305px;
}
input.ShowHideButton:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
}
input.ShowHideButton ~ .ShowHideMe {
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -webkit-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);
  -moz-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);
}
input.ShowHideButton:checked ~ .ShowHideMe {
  margin-left: -75px;
}
input.ShowHideButton {
display: none;
}
.twistBlogger-Floating-SocialBar {
  display: inline-block;
  margin: 0px;
  float: left;
  background: #DFDFDF;
  padding: 0;
  z-index: 9999!important;
  border-radius: 1px;
}
.twistBlogger-Floating-SocialBar > ul {
  padding: 0;
  margin:0;
}
.twistBlogger-Floating-SocialBar > ul > li {
  margin: 0px 0px 1px -1px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 5px 0px 0px 0px;
  height: 70px;
  width: 63px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: #000000;
}
.twistBlogger-Floating-SocialBar .tab-overlay .fa {
  font-size: 25px;
  text-align: center;
  text-shadow: 0px 0px 20px #FFFFFF;
  color: #FFFFFF;
  padding: 9px 9px;
  line-height: 1.7em;
}
.twistBlogger-Floating-SocialBar .tab-warp {
  perspective: 500px;
  perspective-origin: 0% 50%;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 0% 50%;
  -moz-perspective: 500px;
  -moz-perspective-origin: 0% 50%;
}
.twistBlogger-Floating-SocialBar .facebook-button-tab .tab-overlay {
  background: #4965B4;
}
.twistBlogger-Floating-SocialBar .googleplus-button-tab .tab-overlay {
  background: #E06352;
}
.twistBlogger-Floating-SocialBar .tweeter-button-tab .tab-overlay {
  background: #00A8E8;
}
.twistBlogger-Floating-SocialBar .linkedin-button-tab .tab-overlay {
  background: #0077B5;
}
.twistBlogger-Floating-SocialBar .tab-overlay {
  margin-top: -5px !important;
  height: 70px;
  width: 63px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 99999;
}
.twistBlogger-Floating-SocialBar .tab-wrap {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twistBlogger-Floating-SocialBar .tab-flip .tab-overlay {
  display: block;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.twistBlogger-Floating-SocialBar .tab-flip:hover .tab-overlay {
  display: block!important;
  width: 0px;
  opacity: 0.5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transform: translateX(-5px) rotateY(-95deg);
  -webkit-transform: translateX(-5px) rotateY(-95deg);
  -moz-transform: translateX(5px) rotateY(-95deg);
  transform-origin: 0% 100%;
}
.twistBlogger-Floating-SocialBar .count {
  padding-top: 4px;
  height: 25px;
  position: absolute;
  background: #3A3939!important;
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  bottom: 100%;
  font-family: sans-serif;
  font-weight: bold;
  left: 0;
  right: 0;
  font-size: 15px;
  z-index: 1!important;
}
.twistBlogger-Floating-SocialBar .count.h4:after {
  content: "\f064";
  top: 5px;
  border-radius: 50px;
  font-family: fontawesome;
  font-size: 15px;
  left: 4px;
  position: absolute;
  width: 0;
  height: 0;
}
.twistBlogger-Floating-SocialBar .share-btn {
  margin: 0px 0px 1px 0;
  background: #3A3939;
  position: relative;
  text-align: center;
  font-family: cursive;
  font-weight: bold;
  font-size: 13px;
  padding: 0px 0px 1px 0px;
  border: 0;
  color: #FFFFFF;
}
*  kemudian cari kode ini </body>
*  trus copy kode dibawah dan letakkan diatas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='twistMe'>
  <input class='ShowHideButton' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-backward'/></label>
  <div class='ShowHideMe'>
<div class='twistBlogger-Floating-SocialBar'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
    </div>
    </div>
<ul>
<li>
<div class='facebook-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-facebook'/>
</div>
</div>
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/>
</div>
</li>
<li>
<div class='googleplus-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-google-plus'/>
</div>
</div>
<div class='g-plusone' data-size='tall'/>
</div>
</li>
<li>
<div class='tweeter-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-twitter'/>
</div>
</div>
<a class='twitter-share-button' data-count='vertical' data-via='ivankGribatako' href='https://twitter.com/ivankGribatako'>Tweet</a>
</div>
</li>
<li>
<div class='linkedin-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-linkedin'/>
</div>
</div>
<script data-counter='top' type='IN/Share'/>
</div>
</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>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script type='text/javascript'>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));
</script>
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>
</b:if>
*  jangan lupa di save yaa

 ###  SELAMAT  MENCOBA  TEMAN  ###
Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)