| Tweet |
Cara Membuat Widget Social Share Melayang
Coba simak
baik-baik tips ini :
Oke
langsung aja ya..
Iseng-iseng lagi cari update offline ESET V4 dari mbah
google buat komputer yang ada dirumah, eh taunya saya nemu site ini. di site
tersebut saya tertarik dengan widget social share nya yang bisa melayang :D
(maklum newbi) jadi serasa menarik dipandang mata. hehehe
Akhirnya saya coba untuk berselancar lagi mencari source
code widget tersebut di mbah google, dan ada blog yang menerangkan bagaimana
cara membuat widget melayang tersebut di blognya gan aciu tapi diblognya sobat
ini hanya ada social share (Like FB, stumbleupon, digg, twitter, LinkedIn).
Terinspirasi dari sana saya coba merubah sedikit isi source code nya, sehingga
social share yang saya inginkan bisa terwujud dan melayang di blog saya. hehe
maaf kepada gan aciu saya merubah sedikit source code nya.
:D
Social share yang saya inginkan seperti ini:
Mungkin ada sobat blogger yang tertarik pasang widget social
share melayang tersebut bisa lihat caranya disini:
1. Masuk ke Blogger
anda & login.
2. Klik Rancangan
>> Elemen Laman
3. Tambah Gadget dan
pilih HTML/JavaScript
4. Masukan Script
dibawah ini di kolom konten (Judul kosongkan saja)
<!-- Floating social
media buttons by http://catatan-ts.blogspot.com/ --> <style>
#floatingbuttons { background: #aaa; background: -webkit-gradient(linear, left
top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa)); background:
-moz-linear-gradient(top, #f2f2f2, #aaa); border: 1px solid #808080; color:
#fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0;
position: fixed; text-decoration: none; bottom:30%; left:0; z-index:10;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px
rgba(0,0,0,0.3); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
#floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; }
.addbuttons { clear:both; color:#fff; font-size:9px; text-align:center;
padding-top:3px; font-family:tahoma, verdana, helvetica, arial, sans-serif;
font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff;
background:none; } .addbuttons a:hover { color:#fff; background:none; }
.sharebuttons { font-size:8px; } </style> <div id='floatingbuttons'
title="Share this post!"> <div class='floatbutton'
id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
href="" send="false" layout="box_count"
width="10" show_faces="false"
font=""></fb:like> </div>
<div
class='floatbutton' id='sharefb'> <a name="fb_share"
type="box_count"
href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script> </div>
<div
class='floatbutton' id='twitter'> <a
href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical"
>Tweet</a> <script src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script> </div>
<div
class='floatbutton' id='google+1'>
<!-- Place this tag in
your head or just before your close body tag -->
<script
type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>
<!-- Place this tag
where you want the +1 button to render -->
<g:plusone
size="tall"></g:plusone> </div> </div>
5. Klik Simpan dan
lihat hasilnya.
Selamat mencoba dan semoga berhasil.
bagi yang berkomentar silahkan..
BalasHapus