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.
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='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Kode HTML
<b:if cond='data:blog.pageType == "item"'>
<div id='shareonbox'>
<div id='sharebox' onclick='document.getElementById('sharetitle').style.left='0px';sharebox.style.margin='0 0 0 -800px';'>
<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('sharetitle').style.left='-800px';sharebox.style.margin='0';'>
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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Bagi templatenya yang menggunakan kode <!--</body>--></body> pastikan juga Anda sudah memasang javascript Google+ seperti di bawah ini
<script type='text/javascript'>
(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>
Setelah itu silahkan SAVE template Anda dan lihat hasilnya di halaman postingan blog Anda. Selamat mencoba...