Nếu các bạn để ý thì trên blogviet có một thanh công cụ bên trái có các icon nhỏ như Twitter, Facebook, FriendFeed, Blogger….giúp bạn đọc dễ dàng truy cập các tính năng đó mà không cần phải tìm kiếm nhiều.
Để triển khai thủ thuật này cũng khá đơn giản và chỉ cần 2 bước là bạn đã có các floating icons như ý muốn.
Trước hết các bạn hãy tìm các icons nào mà mình thích trên mạng rồi lưu lại. Tốt nhất là upload lên host của mình để giảm tải thời gian tải trang. Kích thước các icon nên vừa phải dạng favicon khoảng 32×32px rồi làm theo các bước sau.
Như blogviet đã nói trong bài viết Tạo Rotating Banner Trên Thesis Mà Không Cần Plugin thì các thủ thuật sẽ chỉ xảy ra trên 2 file custom.css và custom_functions.php mà thôi. Thủ thuật này cũng không phải ngoại lệ.
Bước 1:
Chèn đoạn mã sau vào file custom_functions.php rồi lưu lại.
add_action('thesis_hook_before_header', 'sitewide_left_feedback_buttons');
function sitewide_left_feedback_buttons() { ?>
<div id="feedback">
<a href="http://twitter.com/blogviet" id="twitter" target="_blank" title="Follow @blogviet on Twitter">Follow @blogviet on Twitter</a>
&lt;a href=&quot;http://feedburner.google.com/fb/a/mailverify?uri=blogvietdotinfo&quot; id=&quot;rss&quot; target=&quot;_blank&quot; title=&quot;Đăng ký tin RSS của Blog <a href="http://eblogviet.com/tag/bidvertiser-banner" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a> qua Email&quot;&gt;Đăng ký tin RSS của Blog Kiếm Tiền qua Email&lt;/a&gt;
&lt;a href=&quot;http://eblogviet.com/contact/&quot; id=&quot;email&quot; title=&quot;Liên hệ&quot;&gt;Liên hệ&lt;/a&gt;
&lt;a href=&quot;http://www.facebook.com/blogviet&quot; id=&quot;facebook&quot; title=&quot;Tham gia facebook cùng Blog <a href="http://eblogviet.com/tag/bidvertiser-for" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&quot; target=&quot;_blank&quot;&gt;Tham gia facebook cùng Blog <a href="http://eblogviet.com/tag/bidvertiser-chi" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&lt;/a&gt;
&lt;a href=&quot;http://friendfeed.com/tvtinh&quot; id=&quot;friendfeed&quot; title=&quot;Tham gia FriendFeed với BlogViet&quot; target=&quot;_blank&quot;&gt;Tham gia FriendFeed với BlogViet&lt;/a&gt;
&lt;a href=&quot;http://iloveblogviet.blogspot.com&quot; id=&quot;blogger&quot; title=&quot;Trang blog dự phòng của Blog <a href="http://eblogviet.com/tag/bidvertiser-la" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&quot; target=&quot;_blank&quot;&gt;Trang blog dự phòng của Blog <a href="http://eblogviet.com/tag/bidvertiser-conversion"" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&lt;/a&gt;
&lt;a href=&quot;http://tumblr.blogviet.info/&quot; id=&quot;tumblr&quot; title=&quot;Tham gia Blog <a href="http://eblogviet.com/tag/bidvertiser-conversion" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a> trên Tumblr&quot; target=&quot;_blank&quot;&gt;Tham gia Blog <a href="http://eblogviet.com/tag/bidvertiser-banner" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a> trên Tumblr&lt;/a&gt;
&lt;a href=&quot;http://m.blogviet.info/&quot; id=&quot;mobile&quot; title=&quot;Xem Blog <a href="http://eblogviet.com/tag/bidvertiser" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a> trên Mobile&quot; target=&quot;_blank&quot;&gt;Xem Blog Kiếm Tiền trên Mobile&lt;/a&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;a href=&quot;http://eblogviet.com/wp-login.php&quot; id=&quot;login&quot; title=&quot;Login into Blog <a href="http://eblogviet.com/tag/bidvertiser-chi" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&quot;&gt;Đăng nhập vào Blog <a href="http://eblogviet.com/tag/bidvertiser-la" style="color:#0000FF;text-decoration:underline;" target="_blank" rel="nofollow" onmouseover="self.status='Kiếm Tiền Trên Mạng Với Bidvertiser';return true;" onmouseout="self.status=''">Kiếm Tiền</a>&lt;/a&gt;
&lt;/div&gt;
&lt;?php }
Trước khi lưu hãy thay các link trong đó thành các link của bạn nhé:
Bước 2:
Chèn đoạn mã sau vào file custom.css và thay các link tới hình ảnh tương xứng mà bạn đã upload lên host của mình:
/* Left Side Social Media Icons */
.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://cdn.eblogviet.com/wp-content/uploads/2009/09/twitter3.png')}
.custom #feedback #rss {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/RSS3.png')}
.custom #feedback #email {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/contact-new-3.png')}
.custom #feedback #facebook {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/facebook3.png')}
.custom #feedback #friendfeed {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/10/friendfeed3.png')}
.custom #feedback #blogger {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/10/blogger_icon.png')}
.custom #feedback #tumblr {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/tumblr4.png')}
.custom #feedback #mobile {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/Mobile3.png')}
.custom #feedback #login {background: url('http://cdn.eblogviet.com/wp-content/uploads/2009/09/login_user_3.png')}
Sau đó lưu lại và kiểm tra trên blog của mình xem thế nào nhé. Hiện tại tính năng này đã được thử nghiệm và chạy tốt trên FireFox và IE 7 và 8. Trên IE6 sẽ không như mong muốn.
Chúc các bạn thành công
Theo Serrandinho Blog
7 phản hồi
Tips này hay đấy. Mà chèn vào đâu cũng được đâu nhất thiết là thesis nhỉ ?
.-= SEO Tips´s last blog ..What are the Best Practices for Designing Landing Page =-.
Vì thesis họ dùng các lệnh dạng hook mà theme thông thường không dùng nên em e không add vào các theme khác được trừ khi nó có cùng cấu trúc framework chẳng hạn như ThemeHyBrid News của Justin Tadlock chẳng hạn :-) Bác thử xem có add được không, em cũng chỉ phán đoán thế thôi :wink:
Cái thesis này nhìn mê quá nhỉ, chỉ tội hok có $ :D
.-= Ẹt´s last blog ..VOTE đê!!! Bạn thích màn kiss của cặp nào nhất =-.
Cũng bình thường thôi bác ạ, quan trọng là mình thích theo kiểu gì thì tweak theo kiểu đó để tránh đụng hàng thôi mà :lol:
Lúc đầu em cũng làm theo cách anh Tỉnh nhưng về sau lại xóa đi dùng plugin cho nhanh. Nặng hơn 1 tí nhưng dễ điều khiển ở admin panel :D
Bạn nào không dùng Thesis mà muốn cài floating icons thì có thể tham khảo bài của Minh.
http://minhmeo.info/wordpress/plugin/floating-icons-with-cute-profiles.html
.-= Minh Mèo´s last blog ..Google Public DNS – Sự thay thế cho OpenDNS =-.
Uh, anh đã từng dùng cả 2 cách nhưng sau thấy nó cũng ảnh hưởng đến site speed mà sang năm loading speed lại trở thành yếu tố đánh giá thứ hạng nên bỏ và sắp code lại blog cho nhẹ nhất có thể đây :)
7 phản hồi