Monday, January 16, 2012

Cara pasang Floating Button di sisi blog



Untuk memasang Floating button di sisi blog seperti yang boleh anda lihat di sisi kanan blog ini, hanya ikut beberapa langkah yang mudah di bawah

Langkah 1

Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan URL akaun anda pada kod yang di bold. Anda juga boleh menggantikan icon asal dengan icon anda sendiri.

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:240px; right:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBi_6zkBaN6b5C7nt7eIFyMjHNG0pLsHNLq47mdHKaxCRzU6TUxGwg5lSwhIgvHtMZ9rmUmdUwUn80QY2w2z5hhF1IKW1mxk-rQoxsJRybiT9qLZMadoBMeNEe6nS_doWXMcqWhV6ZdwTl/s320/icongb.PNG" /></a><br />
<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi83qsfv8SiTwwv2t-WDWT9l4PeSfX4F0XmDZTSF55EseMqfvmFUEyKgc3YLN1Bm2eWEr3mWetkMxkJ-5ENt3P1lraraTUlnWt7DkSB8XygpZD6UmV6__mIkp50rbVJHjyfy-mx0Nn4lPBy/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiH6JwRm3zqS0wugUNsS7_96ar12BMJpgaj13DmWgPoxcr13D11UGDCSaRlrmelv9yY_2a5B71YaDz33lagorjpMFQ972m0WNdLe9CIo4p8qzrjuTCX8uOyf6wy4JvqeYEeJTkGXz4mdjE/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://maribinablog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkdYczGSpC4zEQRfcIhz5BOp8jDZ2XV7lPI9mbF_GKaE_WnbkvtRJDbreeFwVBQqSYrGJX5M3s4YPbPr3LsITJiax6zfJytvEisGDeDuBPpEfzj85HOcFIivOeqa3nT9sW_2DSV0kyLRd/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVi9iczCFnF2Ps6EyDYlIOMsAVtQvzhzWNc9OyrO6UBbZr3ECL4cyQmmQQfmucK0Dl2cIVGN2YVcx_wlz4RaG22I0NuDyC9OMYnpUKfvLJkzt_ba2xe5x98NUpXErJ3x6509CUADMtxOVF/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm9xPULsUV_E5tdoO3f7OG_rV0SmwHP612wLHKn2jrcxE2b2MXei9iWg7Is2AEh6anbqqkb724URNsk1kNLBT1-V40JOJENvlwlzvt-I-atd_xgdUgvoPNMinzTzgklYiRtWnGebuXgO11/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPIMMAj9UmkXXbAFoRgFTT-d48v_-Mu0OyZdvAlXjCecUoZIoRDX2LCqGg5fy2ijIlun1U1H6KCTsDhSFC1-6S9Rr2Zr9V2V8RIh0yzJKwxRJSiMmFKE2JnkW8vR7fGMe6k7T7CBAyLPR/s320/flickr.png" /></a><br />

</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Anda boleh mencari icon di  http://www.iconspedia.com

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...