Membuat Slide Social Share Botton Di Bawah Postingan

Membuat Slide Social Share Botton Di Bawah Postingan

Bola Hero Gawai

Membuat Slide Social Share Botton Di Bawah Postingan

Ini hanyalah sebagai alternatif jika Anda merasa bosan dengan tampilan social share widget yang telah ada di blog Anda. Memberikan efek slide pada social sharing widget ini akhirnya memberikan suasana yang lebih aktraktif pada halaman postingan blog Anda.

Kita menambahkan perintah dengan onclick event untuk menciptakan efek slide pada widgetnya dengan memanfaatkan margin pada widgetnya sehingga widgetnya bisa bergeser ke kiri atau ke kanan. Dengan perintah onclick event yang sederhana ini kita bisa menciptakan efek animasi pada sebuah element yang statis seperti pada animasi gif di bawah ini.

Membuat Social Share Botton Slide Di Bawah Postingan


Tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini.

Kode CSS
Silahkan simpan di atas kode </style> atau ]]></b:skin>


#shareonbox{padding:0;position:relative;margin:20px 0;}
#sharebox{background-color:#fff;border: 1px solid #eee;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);font-size:16px;padding:10px 0 11px 10px;position:relative;transition:all .8s ease-in-out;width:98%;margin-left:-800px;cursor:pointer;}
#sharetitle{background-color:#fff;border: 1px solid #eee;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);font-size:14px;font-weight:700;font-family: 'Roboto', sans-serif;font-style:italic;padding:10px 0 11px 10px;position:absolute;top:0;left:0;width:98%;transition:all .8s ease-in-out;cursor:pointer;}
#sharetitle:hover{background:#eee;}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:0 8px 2px;margin-top:-4px;}
a.more:hover{background:#0f6bc9;}

Kemudian simpan kode HTML-nya di bawah kode yang seperti di bawah ini


    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Kode HTML


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shareonbox'>
<div id='sharebox' onclick='document.getElementById(&apos;sharetitle&apos;).style.left=&apos;0px&apos;;sharebox.style.margin=&apos;0 0 0 -800px&apos;;'>
<span class='title-share' style='float:left;margin-right:30px;font-size:18px;font-weight:700;font-family: Roboto, sans-serif;color:#666;text-transform:uppercase'>Share this article :</span>
<div style='margin-right:30px;margin-top:-1px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>+</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
<div id='sharetitle' onclick='document.getElementById(&apos;sharetitle&apos;).style.left=&apos;-800px&apos;;sharebox.style.margin=&apos;0&apos;;'>
Apakah Anda menyukai postingan ini? Silahkan share dengan klik di sini
</div>
</div>
<div style='clear: both;'/>
</b:if>

Pastikan template Anda sudah memiliki javascript SDK Facebook seperti di bawah ini di bawah kode <body>


<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Bagi templatenya yang menggunakan kode &lt;!--</body>--&gt;&lt;/body&gt; pastikan juga Anda sudah memasang javascript Google+ seperti di bawah ini


<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Setelah itu silahkan SAVE template Anda dan lihat hasilnya di halaman postingan blog Anda. Selamat mencoba...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

34 Comments Add Comment

wah, pada bulan puasa ini ternyata ada tutorial kejutan hehe :)

Balas

Hehehe iya sis sambil ngabuburit :)

Balas

ada ol di fb mas, mau chat bentar hehe :)

Balas

Bener bner kereeen kang..

Balas

Keren juga slide shownya

Balas

Hehehee lumayan sebagai pilihan alternatif kang :)

Balas

Hehehe makasih mas :) silahkan dicoba :)

Balas

Beda si akang bulan puasa penuh dengan slide-slide'an wae hehe
Mantapzz kang

Balas

ijin disimpan kang sangat menarik sekali untuk diterapkan di blog
makasih sharenya kang adhy :)

Balas

hihihi makin keren aja nih kang...
Cobain dulu ah!!

Balas

Epss, yang paling keren nya lagi,,
kang Adhy udah Maen GA :D
Sukses ya kang

Balas

Tambah pinter aja sekarang mas Adhy

Balas

waw maskollis muncul sobhh

Balas

Keren kang sosial share, btw blognya tambah keren ni kang adhy udh ada adsensenya lagi

Balas

Wah sepertinya kedatangan master nich :)

Balas

Saya malah fokusnya pada komentar yang pertamax itu mas ... :D

Balas

Sekalian tanya Mas Adhy, bagaimana caranya agarr link yang ada pada komentar ini jika di klik akan muncul pada tab baru. :D Dulu saya tau caranya, tapi sekarang lupa ... :).

Thanks before.

Balas

Hehehe muhun kang meh gogolosoran hehehe :)

Balas

Sama-sama mas :) silahkan dicoba :)

Balas

Iya nih Alhamdulillah Maskolis muncul lagi kang hehhehe :)
@Maskolis makasih sudah mampir di sini mas...ditunggu aktifitas ngeblognya lagi :)

Balas

Hehehehe iya mas dikasih pinjem sama temen mas :)

Balas

Makasih mas :)

Balas

Heehehe ada apa mas :)
Maksudnya link pada nama komentatornya? Jika mas Nazar pakai threaded comment hack maka itu sudah ada dan akan muncul di tab baru. Namun jika pakai threaded comment default blogger coba pakai trik ini http://www.kompiajaib.com/2012/10/membuat-komentar-blog-seo-friendly.html

Balas

pantasan blog maskolis ada perubahan :)

Balas

Iya sis Maskolis sudah mulai mengupdate lagi postingannya, mengupdate blog-blog demo dan template yang error :-bd :-bd

Balas

wih....! bulan puasa sesepuhnya turun gunung....!

Balas

maskolis Jos gandoss :D

Balas

saya sangat berterima kasih dengan artikel ini, sebab banyak yang saya ketahui dan saya pahami tentang tutorial khususnya kode-kode dan javascrift

Balas

Iya mas :) alhamdulillah udah ditengok sesepuh :)

Balas

Sama-sama mas, saya juga belajar sudah hampir 2 tahun secara otodidak :) yang penting jangan gampang menyerah dan ikuti tutorialnya dengan benar dan harus benar-benar pakai logika kita dalam memahami kode-kodenya.

Balas

wah keren sekali kang :) simpan kodenya

Balas

Thanks dah sharing! :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


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 Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×