Tutorial:Floating Icon Link For Facebook,Twitter,Youtube,Flickr Dan Geng Blogger

Assalamualaikum dan salam sejahtera

Okay ! kali ni Ainol nak buat tutorial yang pertama Ainol , harap tutorial neyy menjadi.

(Jangan lupa backup dulu template design korang okay,mana tahu tak jadi,hehe !)

Tutorial yang Ainol nak buat neyy ialah bila korang klik icon yang mcm gambar contoh kat bawah neyy.
 Korang akan automaik terus ke akaun Facebook,Twitter,Youtube,Flickr dan Geng Blogger korang.

Contoh icon kat blog Ainol :

Tanpa membuang masa lagi , jom kita mulakan.

1. Log in blog korang dulu

2. Click Design → Page Elements → Add A Gadget →HTML/Javascript.

Pastekan kod yang korang copy kat dalam nie
(CTRL+C untuk copy)

``````````````````````````````````````````````````````````````````````````````` 
<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:40px; left:-12px;'>

<a class='linkopacity' href='http://facebook.com/URL AKAUN FACEBOOK KORANG/' 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/AVvXsEiy7Jg7jXHpbUMRb8UnXxmhopmLdq6CwwXT6ffnPBWyz7nHEe3hNoCCFJKDjPHjQxPaa8KjyosR9ePlhwRkTuvtlKg_ebFN_CYmkewGV0P8vzHNW9-5_68nGzi0a-7jcVhE61Fj7ex0_PW7/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/URL AKAUN TWITTER KORANG/' 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/AVvXsEjYYIkgI3DQlEE09v2vHw-XCFuaXWocG5RG_pGw-LA67W5CZ9LYAM4jXSyTZEZWnYLytcGupUs4082Jt_ZpeXLJNovu1LLC-GZRkn8DjlR0AfoXanzSUxIp8Oo-OUnNygDFG-_dovtTkIN3/s320/twitter.png" /></a><br />

<a class='linkopacity'href='http://youtube.com/URL AKAUN YOUTUBE KORANG/' 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/AVvXsEjZMRt7EZRNqw1Qcf7PCS83f63A1ZqilK2CHlg073o6xuT7a6qngcn_eTYrKDRUSsrYbKN8Jb2OboTHoLmYEjqGldibigT8ZbTX4AsA_z28-UePe59rxv3ol9bkRi6vEaVh0TmiFonXXQ4R/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/URL AKAUN FLICKR KORANG/' 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/AVvXsEg-mGYyc2fa_-SMnBhox60j00yTQK96DKNVWxOLWkMpZDf8rebx9eLO5_0809_yJghyphenhyphenKYy6fIMO79tPZSvwyolsiXA2nCxlA9A-uWhsg-DSeS6AtJXk7SrHNTdPWz7LIZxZtvg7Ua1YhIZl/s320/flickr.png" /></a><br />

<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/AVvXsEg7avt4imsoq_BpnD6otCeHQlwex9O3Tfpov1UPZ7H9KfFETfs8zatjjYNbMgYegXO2AFceBzQQWdhcJoF4tQ_YzoUDC5jq1kumOYgL3nLln0z1IJrAHbReftdjeM-8BPys08yRwteLOPCe/s320/icongb.PNG" /></a><br />

</div>

```````````````````````````````````````````````````````````````````````````````

Perkataan yang Ainol warnakan dengan warna merah tu adalah  korang nak pamerkan icon kat bahagian mana dalam blog korang,korang boleh pilih sama ada left atau right.

Perkataan yang warna biru tu pula korang kena tukarkan dengan url akaun korang

Contohnya :

"http://facebook.com/URL AKAUN FACEBOOK KORANG/" 

→ "http://www.facebook.com/ainolsyafik/"

Tapi kalau korang nak jadikan icon tu sebagai home page pun bolehh

korang just delete perkataan yg warna biru tu sahaja.

Akhir sekali,yang warna coklat korang boleh tukarkan dengan icon/gambar apa yang korang suka.
Tapi pastikan icon/gambar yang korang pilih  failnya tak lahh besar sangat.
Ainol syorkan korang guna format (.png) je atau nak senang tak payah tukar icon tersebut,guna icon/gambar yang Ainol dah bagi tu jea.

Okay,done!

Kalau tak ade error atau masalah lain korang boleh terus save dan siap ! 

Cuba cuba lahh , semoga berjaya !

Bye , salam !