Cara Membuat Tombol Sosial Share Dengan Efek Slider

Cara Membuat Tombol Sosial Share Dengan Efek Slider

Cara Membuat Tombol Sosial Share Dengan Efek Slider

Social Share With Sliding Efect
Cara Membuat Tombol Sosial Share Dengan Efek Slider.  Pada postingan saya kemarin tentang Cara Membuat Menu Melayang Saat Di Scroll Mouse silahkan dibaca dan untuk memperindah tampilan tombol sosial share yang ada di blog kita, sobat tinggal menambahkan tombol seperti yang ada di blog ini. Lihat di bawah postingan!

Keberadaan tombol sosial share di blog relative dibutuhkan karena fungsinya yang dapat mempermudah pengunjung untuk men share artikel langsung dari blog kita, dan pada kesempatan  ini saya akan berbagi cara membuat tombol sosial share efek slider, prosesnya sangat sederhana dan hanya dibutuhkan ketelitian dalam meletakan kode-kode yang saya siapkan dibawah, efek slider yang ada pada tombol sosial ini sangat ringan dan responsive sehingga tidak akan mengganggu tampilan maupun loading blog sobat di versi desktop dan versi mobile dan tampilannya yang cukup menarik sehingga tambah mempercantik blog sobat sekalian.


Jika anda tertarik silahkan simak langkah-langkahnya sebagai berikut.

Sliding Social Share
Sliding Social Share Button

Cara Membuat Tombol Sosial Share Dengan Efek Slider

Langkah-1 :  Login ke akun blogger anda
Langkah-2 :  Klik Template » Edit HTML
Langkah-3 :  Gunakan  Ctrl+F  untuk mencari kode berikut ]]></b:skin> atau </style>
Langkah-4 :  Setelah ketemu letakan CSS script dibawah ini tepat diatas kode ]]></b:skin> atau </style>


#button-share{width:100%;overflow:hidden;background: rgba(0, 0, 0, 0.80);text-align:center;margin:15px 
auto;padding:0;padding:15px 0 10px}
#button-share span{position:relative;font-size:11px;color:#fff;margin:12px}
#button-share .share{background:#fcfcfc;position:relative;display:inline-
block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1)}
#button-share .slide-share{z-index:2;display:inline-block;height:40px;line-
height:40px;left:0;position:absolute;width:140px;margin:0 auto}
#button-share .slide-share p{text-transform:uppercase;font-family:'Racing Sans One';font-
weight:400;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 
auto}
#button-share .share .slide-share{transition:all 0.4s ease-in-out}
#button-share .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
#button-share .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
#button-share .google #___plusone_0{width:90px!
important;top:10px;right:10px;position:absolute;display:block;z-index:1}
#button-share .facebook .slide-share,.twitter .slide-share,.google .slide-share{background:#2c3e50}
#button-share .facebook:hover .slide-share,#button-share .twitter:hover .slide-share,#button-share .google:hover .slide-share{left:140px;opacity:0.6}


Langkah-5 : Letakan script dibawah ini di atas code </head>


<script type='text/javascript'>
  window.___gcfg = {lang: 'id'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>


Langkah-6 : Kemudian letakan kode berikut ini dibawah kode <data:'post.body'/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-share'>
 <div class='facebook share'>
  <div class='slide-share'>
  <p>FB Share</p>
  </div>
<div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'/>
 </div>
 <div class='facebook share'>
  <div class='slide-share'>
  <p>FB Like</p>
  </div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>
 </div>
 <div class='google share'>
  <div class='slide-share'>
  <p>G Plus</p>
  </div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
 </div>
 <div class='twitter share'>
  <div class='slide-share'>
  <p>Tweet Me</p>
  </div>
<a class='twitter-share-button' data-count='horizontal' data-related='antoncabon' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
 </div>
</div>
</b:if> 


Langkah-7 : Terakhir save template.



Selesai.


Demikianlah sedikit tentang cara memasang tombol sosial share dengan efek slider di blog, semoga bermanfaat dan selamat mencoba.



DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×