Social Bookmark với hiệu ứng ẩn hiện đẹp cho blog

Hôm nay mình sẽ giới thiệu với các bạn một mẫu Social Bookmark với một hiệu ứng ẩn hiện khá bắt mắt.

View demo

#Cách làm

1. Đăng nhập Blogger
2. Mẫu > Thêm tiện ích > HTML/Javascrip
3. Dán code dưới vào

<style>
#socialmenu_btrix { 
  margin:0; 
  padding:0; 
  width: 30em; 
  height: 4.5em; 
  overflow:hidden; 
  } 
#socialmenu_btrix li { 
  display:inline; 
  list-style-type:none; 
  } 
#socialmenu_btrix li a { 
  display:block; 
  float:left; 
  text-decoration:none; 
  margin:0; 
  } 
#socialmenu_btrix li a img { 
  opacity:0.7; 
  margin:0.5em; 
  border:0; 
  float:left; 
  } 
#socialmenu_btrix li a span { 
  display:none; 
  } 
#socialmenu_btrix li a:hover { 
  background:transparent; 
  } 
#socialmenu_btrix li a:hover span { 
  width:7em; 
  color:#aaa; 
  display:block; 
  cursor:pointer; 
  float:left; 
  } 
#socialmenu_btrix .h2 { 
  margin:0 5px; 
  padding:0; 
  color:#fc0; 
  font-variant:small-caps; 
  font-size:1em; 
  border:0; 
  }
  
  </style>
  <ul id="socialmenu_btrix"> 
  <li> 
    <a href="https://www.facebook.com/quockhanh.bui.50"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77vi6_srhKrw73MLmnHCyrQAvBty5Wu_yv2XaW-S7yOiQdQH7ZlT6jUhyphenhyphenWSc7c9T2B1xQfcrGE-ICT8RNsVDtjWwc0HDZwqMOKq6slGT0GX80_j8kwT-fa0xl4YKiqAT1srlFdtEwtFc/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> 
     <span><br /> 
      <b class="h2">Facebook</b><br /> 
      Add to facebook 
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="https://plus.google.com/+QuốcKhánhBùi2641998"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTGsPVRVvgtYAlHfkTmDIIPI8sghu0VmXRcKPMQ17NFWSqmSUWFfDyjhudPCQMSq9iHfrQObv6diru79fE9RkiU5sshXN32pBIp4I73nQmxx7kVMUCCKez1dG0M3sFNRhxF7mHbHVLT4/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> 
     <span> 
      <br /> 
      <b class="h2">Google Plus</b><br /> 
      Add to Google Plus
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://feeds.feedburner.com/blogkhanh98"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5w1EfAKXi6_BnWXQvBJo9YnMP7sl1UL5hmbDjYY_0Ba1IkjR4EbWpfxrfBlkZJkiW-LEA-KoA6WGfmNqDcqLjjSmRNGFIsP4ol4eJeB8U7jVXhxKzaMU9fbuDJjeFr1V4_jEW7Nu6tQ/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> 
     <span><br /> 
      <b class="h2">Rss Feed</b><br /> 
        Subscribe
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWgxUmKAT4E8cLwoHnIg1eIqX9YCsYdvJU6_6lUZPUh-K0OP93s2zUyID5sA8dSRpQl9_wEtauYMsv9p6jubcCNuyN6InOMYsNjSmzH68oXMEukbMcaoR1p_ptjlKM8GQ6XU-mx4l6y_M/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> 
     <span><br /> 
      <b class="h2">Stumbleupon </b><br /> 
      add to stumble
     </span> 
    </a> 
   </li> 
    <li> 
    <a href="https://twitter.com/chelskivn29"> 
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkkG_kJy9hxQqr2A5_8h6M8oXGsiW1zm2RzVWbYNR5iYxDNxk1uKYrNHa2Zg-MqA7J-iD-AaofTbt-JmIdA7eTZgcb9azT-9ykvQ-IXDhjbtYldXkhW0uNKk_m52KnoBpC1grj_NWIupw/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> 
     <span><br /> 
      <b class="h2">Twitter</b><br /> 
      add to twitter
     </span> 
    </a> 
   </li> 
  </ul> 

Lưu ý:

• Thay đoạn màu xanh thành liên kết đến trang cá nhân trên Facebook
• Thay đoạn màu đỏ thành liên kết đến tiểu sử G+ của bạn
• Thay đoạn màu cam thành liên kết đến Feeds của blog
• Thay đoạn màu tím đến trang Stumbleupon của bạn
• Thay đoạn màu xanh nhat đến trang Twitter của bạn

4. Lưu lại.

Nguồn Blogger Trix