Social media link dạng trôi nổi cho blogspot

Ai ai cũng muốn mình có một gì đó bắt mắt cho blog mình vậy tại sao chúng ta không thử "SOCIAL MEDIA LINKS" dạng trôi nổi được Yolks lấy từ WP chuyển sang blogger cho anh em mình tha hồ tận dụng.

1. Copy css

Trong template, các bạn tìm đoạn code sau:

]]></b:skin>

Rồi thêm đoạn CSS sau vào trên đoạn code vừa tìm được:

/*** SOCIAL MEDIA LINKS ***/

.social-media{
  position: fixed;
  top:220px;
  right:0;
  z-index:4;
  overflow: hidden;
  width: 180px;
}

.social-media li{margin: 5px 0 5px 148px;}

.social-media a{
  display:block;
  width: 200px;
  background: #fff;
  -moz-box-shadow:0px 0px 4px #f7d654;
  -webkit-box-shadow:0px 0px 4px #f7d654;
  box-shadow:0px 0px 4px #f7d654;
  border: 1px solid #fff;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 110%;
  background: #f2b428;
  background:#f2b428 url(http://www.traselcristal.es/wp-content/themes/atom/i/t-tl.png) no-repeat left top;
  color: #fff;
}

.social-media a:first-letter{
  font-size: 150%;
  font-weight: bold;
  margin-right: 5px;
}

.social-media .twitter a{
  background-color:#9AE4E8;
  -moz-box-shadow:0px 0px 4px #9AE4E8;
  -webkit-box-shadow:0px 0px 4px #9AE4E8;
  box-shadow:0px 0px 4px #9AE4E8;
}

.social-media .facebook a{
  background-color:#3b5998;
  -moz-box-shadow:0px 0px 4px #3b5998;
  -webkit-box-shadow:0px 0px 4px #3b5998;
  box-shadow:0px 0px 4px #3b5998;
}

.social-media .flickr a{
  background-color:#fe0093;
  -moz-box-shadow:0px 0px 4px #fe0093;
  -webkit-box-shadow:0px 0px 4px #fe0093;
  box-shadow:0px 0px 4px #fe0093;
}

.social-media .myspace a{
  background-color:#0d366d;
  -moz-box-shadow:0px 0px 4px #0d366d;
  -webkit-box-shadow:0px 0px 4px #0d366d;
  box-shadow:0px 0px 4px #0d366d;
}

2. Thêm code

Bạn tiếp tục tìm đoạn code sau:

</body>

Và thay thế bằng đoạn code sau:

<ul class="social-media slide-left amount-140">
<li class="rss"><a class="fadeThis" href="http://vnsharingall.blogspot.com/feeds/posts/default?alt=rss" title="RSS Feeds">RSS</a></li>
<li class="twitter"><a class="fadeThis" href="link của bạn" title="Twitter updates">Twitter</a></li>
<li class="facebook"><a class="fadeThis" href="link của bạn" title="Facebook page">Facebook</a></li>
</ul> 
</body>

3. Thêm js

<script src='http://www.traselcristal.es/wp-content/themes/atom/c.php?file=js%2Fjquery.atom.js&amp;ver=1.1.5' type='text/javascript'/>
<script src='http://www.rorpieth.es/?atom_jquery=1&amp;ver=1.1.5' type='text/javascript'/>

Kết quả sẽ tương tự như trong hình demo dưới đây.

Kết quả sau khi thêm code