Tutorial Letak Floating Icon di Tepi Blog

Apr 20, 2011

Home » Hal-hal Blog , Tutorial » Tutorial Letak Floating Icon di Tepi Blog

Tutorial Letak Floating Icon di Tepi Blog

Kali ni, saya nak share cara-cara untuk letak icon2 seperti facebook, twitter, feedburner, youtube, & flickr, serta home & back to top button, macam gambar kat bawah ni.. Sebelah kiri tu untuk blog ni, sebelah kanan tu pula adalah blog Ma Belle Conway.

1st sekali, pi kat Dashboard > Page Elements > Add a Gadget dan pilih Html/Javascript. Copy dan pastekan coding kat bawah ni di gadget tersebut.

<br></p><blockquote><div style="color: blue;"><style type='text/css'></div><div style="color: blue;">a.linkopacity img {</div><div style="color: blue;">filter:alpha(opacity=50);</div><div style="color: blue;">-moz-opacity: 0.5;</div><div style="color: blue;">opacity: 0.5;</div><div style="color: blue;">-khtml-opacity: 0.5;}</div><div style="color: blue;"><br> </div><div style="color: blue;">a.linkopacity:hover img {</div><div style="color: blue;">filter:alpha(opacity=100);</div><div style="color: blue;">-moz-opacity: 1.0;</div><div style="color: blue;">opacity: 1.0;</div><div style="color: blue;">-khtml-opacity: 1.0; }</div><div style="color: blue;"></style></div><div style="color: blue;"><br> </div><div style="color: blue;"><div style='display:scroll; position:fixed; top:240px; right:-12px;'></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://facebook.com/akaun facebook anda/</b>'  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/AVvXsEh4vuPivW3Xrl5OKKyJTGbC7Dz4O7LAnYTkQHSvOXBVocijGM06whTJirxa7wwjPBiODAA1T2vKf-WrokBiCZ5BCTIEXC6SwiZZTVKTHv0jZ8asEaiOsMtmdh2x7HvsSd9LqYpL8j4C8YbU/s320/facebook.png"  /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://twitter.com/akaun twitter anda/</b>'  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/AVvXsEiyr1XkYMTf2Zt6IW1paHyJLzxFSujfWlUrzSgjC24vGInF-NCN-NNdKD_CCEqfW9Kbb_PStXIHXhdME9CJoLq8ZbdVSniZbJNMt1KzEXgZbG04cLPpWQHfFMjzfK0OJHuoWeri5k-pdFWc/s320/twitter.png"  /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://feedburner.com/akaun feedburner anda/</b>'  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/AVvXsEgXvhERJCbBvM3rLx2XnS3qP0xhOZPARhdymBo6rdOz4LZ0Ke3N_iIHVGhbRoaU5TxMmeEOGvr7c08sVeUQ7BNk-nibBLEqQ2DdemZeueb6iZHg1Kp5ZifJaGYVrKCsvftYFI8I_Ti7E00j/s320/feedburner.png"  /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://youtube.com/akaun youtube anda/</b>'  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/AVvXsEgVD7caKKZTCFitXV2AaaASRScRrn8v6QwaOrRigVbPNApbjUf93XBBdRGWBjnUY_WCMk-3dOplW7v1adli9jAWjAQOXkqcwLmX1zsLRktjRu0Rb4ovC3d3CTVRmQqKXMf_A5HR7Kr7xMwD/s320/youtube.png"  /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://flickr.com/akaun flickr anda/</b>'  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/AVvXsEgpgNDDxJuE1gxRQFKekqYb9s_MvLz993gmaIu0niX6dB-5SpMQqklVuSyKHMvdweTW0C5xp1rnUnGx9lmdd7MtSE3C3rJ-qpCGCgyUea2wK__Aoy1iuDwalyD51K361S0DcJn6GVJIRis-/s320/flickr.png"  /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"></div></div></blockquote><p><span style="color: orange;"></span>

Sebelum save, jangan lupa untuk letak alamat akaun uols. Sekiranya takmo letak let say flickr, then uols just buang ajela coding untuk flickr. Kalau rasa dah bosan ngan icon tersebut, uols boleh tukar icon2 lain di http://www.iconspedia.com.

Dah setel tang icon, jom tengok coding untuk letak home & back to top button. Uols nak asingkan pon boleh, or nak paste kat ruang content Html bagi icon kat atas tu pon boleh. Macam saya, saya asingkan.

Kalau perasan, ade bottom: 100px, yang kaler biru tu uols leh tukar position mengikut kehendak uols. Sekalii lagi, jangan lupa untuk tukar kepada alamat website uols. Selamat mencuba.. ^_^

Add your FB profile picture to create the largest FB invite card ever. So large FB won't ignore us! Pledge your support and you could win an exclusive invite to DiGi's LIVE FB Party. More info CLICK HERE!