Tuesday, August 9, 2011

Floating Social Network Share

Kali ini, saya akan kongsikan kepada anda semua cara-cara untuk buat floating widget yang boleh dimuatkan dengan perkara-perkara yang munkin anda minat, step untuk melakukannya juga mudah, yang dimana, kalau saya mampu expresskan dlm 2 patah perkataan, sangat mudah, dan jika didalam tiga patah perkataan......err, saya rasa, takperlulah sampai ke tahap extream kut... 

cara yang digunakan didalam floating kali ini jauh berbeza daripada hidden sidebar yang saya pernah pakai dulu, ini kerana, sidebar yang dahulu menggunakan CSS attribute fixed, manakala, cara yang bakal saya terangkan ke anda ini menggunakan cara CSS attribute absolute. Didalam masa yang sama, kita akan menggunakan JQuerry untuk memastikan effecting pada widget yang akan dihasilkan nampak lebih menarik. :)

berikut adalah step-stepnye.

info : saya sedang menggunakan layout blogger draft yang dimana munkin berbeza daripada layout home blogger anda.

step 1 : masuk ke tab layout, kemudian add a gadget HTML and JAVASCRIPT. kemudian masukkan coding dibawah 

masuk ke option layout(draft) ataupun page layout - page element (lama)
masukkan satu widget HTML/JavaScript

<style>
#sharebox {
float: left;
margin-left: -78px;  /*Sangat Penting Untuk Align kedudukan floating div anda.*/
background: #fff;
position: absolute;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-radius: 7px 0px 0px 7px;
border-radius: 7px 0px 0px 7px;
-webkit-box-shadow: -2px 0px 2px 1px #000000;
-moz-box-shadow: -2px 0px 2px 1px #000000;
box-shadow: -2px 0px 2px 1px #000000;
z-index:200;
width:65px;
padding-left:5px;
padding-top:3px;
}
</style>

<div id='sharebox'>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like font='segoe ui' href='' layout='box_count' send='true' show_faces='true' width='55'/></fb:like>
<div style="margin-top:3px;">
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<script type='text/javascript'>var __buzrr_style=&quot;big_blue_buzzicon_bg&quot;&gt;</script><script src='http://cdn.buzrr.com/js/button.js' type='text/javascript'/>

</div>


PENERANGAN :
1) code yang berwarna biru telah dioptimize untuk sharing widget anda, sekiranya anda ingin kekalkan item seperti like button, retweet or buzz, biarkan sahaja code diatas tanpa perlu mengubahnya. sekiranya anda ingin add item, paste didalam lingkungan code berwarna merah tersebut.

2) Sekiranya anda mahir didalam CSS, anda boleh mengubah code berwarna ungu tersebut.

masukkan code kedalam HTML/JavaScript, Kemudian clik save
dicadangkan agar anda meletakkan widget HTML/JavaScript anda pada bahagian atas Post


view blog anda, dan klik button diatas untuk melakukan perubahan alignment.

step 2 : setelah anda berpuas hati dengan alignment div anda, sekarang anda perlu memasukkan code JQuery dibawah kedalam Edit HTML anda untuk memastikan div anda tadi scroll mengikut viewing. Pilih option Edit HTML anda (bg draft home, pilih template dan pilih edit HTML kemudian paste script dibawah SEBELUM <b:skin> ataupun SELEPAS <head> tag

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>


<script type='text/javascript'>
$(document).ready(function() {


var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;


$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

setelah berpuas hati dengan alignment floating anda, sekarang tiba masa untuk masukkan javascript jquery

paste code script yang diberikan dan save. 

0 comments:

Post a Comment

Eddytech menggunakan sistem comment yang tidak memerlukan anda untuk memasukkan "captcha" bagi memudahkan eddytech untuk mendapat feedback daripada anda :)