Trên blog Hư Trúc, bạn có thể truy cập nhanh được các liên kết đến trang hỏi đáp, hổ trợ yahoo, mail, feed,… thông qua các icon bên trái. Trên trang hỏi đáp, đã có nhiều bạn thắc mắc và HT cũng đã trả lời một số nhưng có lẽ vẫn chưa làm hài lòng các bạn. Bài viết này HT sẽ một lần nữa hướng dẫn để các bạn có thể áp dụng vào website/blog của bạn.

Float Icon

Float Icon

Để tạo có được kết quả như vậy cũng không khó khăn gì cả, chỉ đơn giản áp dụng code HTML và CSS mà thôi.

Đầu tiên các bạn thêm đoạn HTML sau vào web/blog của bạn (Vị trí thì ở đâu cũng được, nên đặt ở cuối trang để không ảnh hưởng lắm với trình duyệt không hổ trợ)

<div id="feedback">
	<a href="http://twitter.com/hutruc" id="twitter" target="_blank" title="Follow @hutruc on Twitter">Follow @hutruc on Twitter</a>
	<a href="http://feeds.feedburner.com/hutruc" id="rss" target="_blank" title="Subscribe to HuTruc's Blog via RSS Email">Subscribe to HuTruc's Blog via RSS Email</a>	
	<a href="http://hutruc.com/about/contact" id="email" title="Contact Us">Contact Us</a>
	<a href="http://hutruc.com/hoi-dap" id="faq" title="Hỏi Đáp">Hỏi Đáp</a>
	<a href="ymsgr:sendim?hutruccom&m=Hello" id="htryahoo" title="Yahoo">Yahoo</a>
</div>

Bạn có thể thêm/bớt các icon cho phù hợp.

Sau đó thêm đoạn CSS sau để trang trí và “định vị” các icon này.

/***** float button http://hutruc.com *****/
.custom #feedback {background: transparent; width: 3.2em; position: fixed; top: 35%; left: 0.55%;}
.custom #feedback a {display: block; text-indent: -9999px; height: 3.2em;}
.custom #feedback #twitter {background: url('http://farm5.static.flickr.com/4039/4202593819_4154dd37da_o.png')}
.custom #feedback #rss {background: url('http://farm3.static.flickr.com/2570/4203352920_40750399b4_o.png')}
.custom #feedback #email {background: url('http://farm3.static.flickr.com/2624/4202593869_f320392d0f_o.png')}
.custom #feedback #linkin {background: url('http://farm3.static.flickr.com/2765/4247581049_ef74d3a506_o.png')}
.custom #feedback #faq{background: url('http://farm3.static.flickr.com/2793/4273453364_9bb4271b1a_o.png')}
.custom #feedback #htryahoo{background: url('http://farm3.static.flickr.com/2775/4461374237_3e8aab6ecd_o.png')}
/***** end float button http://hutruc.com *****/

Chúc bạn thành công.