//DAYA: Tutorial : Macamana nak letak icon kiri Facebook Twiterr and Formspiring (:

Assalamualaikum (: Good Morning ! hahaha , wah , pagi-pagi ak da bangun semangat nak buad tutorial nief . hehe ok . semalam ade kawan ak bertanya : ''dayah , mg buad gane button fb , twitter , formspring (bagi yg ade) tu ? Jeles ak !" hehe , alah , ak pun baru belajar jugakk (:

ok , sebelum ak start . ak nak kasi tau la . ak nief bukannyer pakar sangat dlam hal cenggini .hehe almaklum laf , Budak Baru Belajar (BBB) hehe . *eh melarat plak ak nief !

Tutorial kali ini berkenaan cara Letak icon statik pada Kiri blog supaya Facebook , Twitter dan Formspring anda senang dicapai terus oleh pengunjung blog anda ..

Sumber Code
Sumber code dibawah ini ak peroleh daripada Adamxis ( Terima kasih bebanyak =) sumber code asa beliau boleh diperolehi Disini ..

Cara Letak Icon Kiri Facebook Twitter

* Langkah 1 Go to >> Add page element >> Pilih Html

Langkah 2 Copy & Paste code di bawah

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

<a class='linkopacity' href=' http://www.facebook.com/USERNAME ' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://YOUR_Facebook_IMG_URL" /></a><br />

<a class='linkopacity' href=' http://twitter.com/USERNAME' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://YOUR_twitter_IMG_URL" /></a><br />

<a class='linkopacity' href=' http://formspring.me/USERNAME ' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='formspring'><img border="0" src="http://YOUR_Formspring_IMG_URL" /></a><br /></div>

Langkah 3 Edit kod di bawah yang berwarna merah dengan menggantikan dengan username korang. Contohnya : http://www.twitter.com/AkDayah.
Langkah 4 Edit kod di bawah yang berwarna biru, jika korang nak gantikan gambar widget ikut warna pilihan korang sendiri. Contohnya : dari original link http://YOUR_twitter_IMG_URL menjadi seperti ni http://1.bp.blogspot.com/-hvTCTyQZ5gI/TZiB92OO0wI/AAAAAAAABXc/F2RWWNyJNt0/s1600/oranges-twitter.png

Macam mana nak tukar image dan pilih image comel kat bawah ni ? Senang je, korang pilih je mana satu gambar kat bawah ni yang korang suka. Pilih >> Kemudian >> Right Click pada cursor >> Click copy image location >> Paste url image location tu di kod yang bewarna biru semasa langkah 4 tadi.

Biru Gelap

facebook:http://2.bp.blogspot.com/-8dwFP_FHRfU/TZhyUAPglFI/AAAAAAAABVk/F9BqZwNskrw/s1600/blue-dark-facebook.png

Twitter:http://4.bp.blogspot.com/-6LT7V23cvI4/TZhyUwowUaI/AAAAAAAABVs/-1KIGxhm7Tw/s1600/blue-dark-twitter.png

Formspring:http://3.bp.blogspot.com/-Uabo6yspKcs/TZhyUQxWwYI/AAAAAAAABVo/os3snsZdrtM/s1600/blue-dark-formspring.png

Biru Cerah

Facebook:http://2.bp.blogspot.com/-Ik0lJA6Wghs/TZhyVM0WIWI/AAAAAAAABVw/zYbJR7zbTIA/s1600/blue-light-facebook.png

Twitter: http://2.bp.blogspot.com/-Ik0lJA6Wghs/TZhyVM0WIWI/AAAAAAAABVw/zYbJR7zbTIA/s1600/blue-light-facebook.png

Formspring:http://4.bp.blogspot.com/-JSARKVFFKco/TZhyVaFxy1I/AAAAAAAABV0/x83YTwPP354/s1600/blue-light-formspring.png

Hijau

Facbook:http://2.bp.blogspot.com/-HTW225l9dI4/TZhyXJUpykI/AAAAAAAABWI/xv28Dq--m30/s1600/green-facebook.png

Twitter :http://1.bp.blogspot.com/-R1-w6A-78YE/TZhyXxX2GQI/AAAAAAAABWQ/T7fp8pr9kNQ/s1600/green-twitter.png

Formspring:http://2.bp.blogspot.com/-pjZZ_EoxGGo/TZhyXg-c-sI/AAAAAAAABWM/HCvveZqS2rU/s1600/green-formspring.png

Pink

Facebook:http://3.bp.blogspot.com/-kU9w2lr0_5M/TZhyYaUpiII/AAAAAAAABWU/CGGeAlcrxxc/s1600/pink-facebook.png

Twitter : http://2.bp.blogspot.com/-vXrrlV8rpaM/TZhyZFawpLI/AAAAAAAABWc/cQWnjAxyvR4/s1600/pink-twitter.png

Formspring:http://1.bp.blogspot.com/-wVup4JZ6-K4/TZhyY3Ohq4I/AAAAAAAABWY/cNCicqwCT0c/s1600/pink-formspring.png

Merah

Facebook:http://4.bp.blogspot.com/-_-fGDTFpFTs/TZhybHJAFZI/AAAAAAAABWs/zG1UPXjhpXg/s1600/red-facebook.png

Twitter: http://1.bp.blogspot.com/-NJVqpjA1B84/TZhyb2h6kcI/AAAAAAAABW0/TZWneMxwA0w/s1600/red-twitter.png

Formspring :http://1.bp.blogspot.com/-AoY27ebxxxY/TZhybVTB0lI/AAAAAAAABWw/maO_ilZIjHs/s1600/red-formspring.png

Kuning

Facebook:http://3.bp.blogspot.com/-HktmUO5jYNA/TZhydGBHDOI/AAAAAAAABXE/EDNzaOm_Trc/s1600/yellow-facebook.png

Twitter: http://2.bp.blogspot.com/-InEN9h_8zFk/TZhyTxBz2SI/AAAAAAAABVg/a3-2prh7W8c/s1600/yellow-twitter.png

Formspring :http://2.bp.blogspot.com/-InEN9h_8zFk/TZhyTxBz2SI/AAAAAAAABVg/a3-2prh7W8c/s1600/yellow-twitter.png

Unggu

Facebook :http://2.bp.blogspot.com/-MvzVXh-3mNk/TZhyaf8ueFI/AAAAAAAABWg/_JqBD8Gm4Vk/s1600/purple-facebook.png

Twitter: http://1.bp.blogspot.com/-2HkQb0OWnno/TZhya6d7woI/AAAAAAAABWo/80LDhT9ndqE/s1600/purple-twitter.png

Formspring :http://1.bp.blogspot.com/-DBQbIJrZj-4/TZhyalqP5pI/AAAAAAAABWk/8WHhFIACsmk/s1600/purple-formspring.png

Turqoise

Facebook:http://3.bp.blogspot.com/-YMfSR4PNo8k/TZhycEMWfpI/AAAAAAAABW4/2BC3ZOmxz0E/s1600/turqoise-facebook.png

Twitter: http://3.bp.blogspot.com/-f0V3uASAxRA/TZhycwMqjVI/AAAAAAAABXA/RxdSp6juHmU/s1600/turqoise-twitter.png

Formspring:http://4.bp.blogspot.com/-643ZxckQdQo/TZhycmAxGUI/AAAAAAAABW8/sVVdtZ-PZ80/s1600/turqoise-formspring.png

Hitam/Putih

Facebook:http://1.bp.blogspot.com/-aT7_FRkWTAg/TZhyWJUnIDI/AAAAAAAABV8/Q71r4H8sQOc/s1600/Gray-facebook.png

Twitter: http://4.bp.blogspot.com/-XDIRBfAzU34/TZhyW2Nal-I/AAAAAAAABWE/CpDdNA91rqk/s1600/gray-twitter.png

Formspring:http://1.bp.blogspot.com/-Q7qw7t2grLc/TZhyWWz_tXI/AAAAAAAABWA/jdiWU6jc0XM/s1600/Gray-formspring.png

Coklat

Facebook:http://2.bp.blogspot.com/-EfbGy54tyKU/TZh55_n3_II/AAAAAAAABXM/fB8fNjhh8Pk/s1600/brown-facebook.png

Twitter: http://4.bp.blogspot.com/-69VEvd6-4Ms/TZh6Dtu4cKI/AAAAAAAABXY/RDE3rqlOQ7w/s1600/brown-twitter.png

Formspring:http://4.bp.blogspot.com/-UyrXkHX25-4/TZh56NbF4VI/AAAAAAAABXQ/AOF1sejPWas/s1600/brown-formspring.png

Oren

Facebook :http://3.bp.blogspot.com/-3zyjUbl5l9Y/TZiCHdkm0uI/AAAAAAAABXo/Vdx3aOsD2iI/s1600/oranges-facebook.png

Twitter: http://1.bp.blogspot.com/-hvTCTyQZ5gI/TZiB92OO0wI/AAAAAAAABXc/F2RWWNyJNt0/s1600/oranges-twitter.png

Formspring:http://4.bp.blogspot.com/-cfqa-P-ATyw/TZiB-t3NXiI/AAAAAAAABXk/63DGm8CxeeI/s1600/oranges-formspring.png

--> Korang start copy di (http) ok (:

Tips : Bagi yang takde formspring, tak payang la letak code untuk formspring yer = ) Kepada yang nak letak gambar sendiri bagi image tu, kena edit dulu la gambar korang di photoshop baru lah cool ! Haha...

Done ! fuuh , penat ak menaip pagi -pagi buta nief . hehe .