Thêm thanh tool bên cạnh website

Hôm nay yeusharevip blogspot xin share với các bác thủ thuật mới
Thanh tool social sẽ nằm bên phải - màu sắc bắt mắt và luôn cố định  tại 1 vị trí trên trang web nhằm giới thiệu link các social network của bạn , dù bài có dài nó sẽ luôn ở 1 chỗ trên cao .

1- thêm widget - html/javascript vào theme của bạn

2- add style

<style type="text/css">ul#social {    position: fixed;    margin: 0px;    padding: 0px;    top: 10px;    left: 0px;    list-style: none;    z-index:9999;}ul#social li {    width: 100px;}ul#social li a {    display: block;    margin-left: -2px;    width: 100px;    height: 70px;        background-color:#fff;    background-repeat:no-repeat;    background-position:center center;    border:1px solid #AFAFAF;    -moz-border-radius:0px 10px 10px 0px;    -webkit-border-bottom-right-radius: 10px;    -webkit-border-top-right-radius: 10px;    -khtml-border-bottom-right-radius: 10px;    -khtml-border-top-right-radius: 10px;    -moz-box-shadow: 0px 4px 3px #000;    -webkit-box-shadow: 0px 4px 3px #000;}ul#social .twitter a{     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGQ1PCgwgFENsynIf0Mi13GS3jqBtnPXjLiYgSPAH-NcGWuaNqW2zGmO-iwvBH_apnJ-w3__lj8X1bgwgc-IJBx_jOEUQ1VmqYlHHzSzRicUutB4sPaGelcuq4GjWzQ9f-AnEI7EoJoo/s1600/Twitter.png)no-repeat;background-position:center center;}ul#social .googleplus a      {    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrH4Eb5mixnZsSEn315dPQnRs3cbjZ9UfV56PQ2HOj4LJcPyXhW3QC3QJKuLFfx0mYcOXNmmSUhQHg70kEIdvFldUxF7pL7fR8ivD7SeN76TibLAkiG3QDh7IuKgebwUt2FWt2NczQaI/s1600/GOOGLE+PLus.png)no-repeat;background-position:center center;}ul#social .facebook a      {    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMYHDMqIGfsm2iFZ8ZNeHvnkN9ASWHcwAqUBv8xae7D1IJ79ewAmG15Y-9Dzh2QFtSKFPkBe45Q0JflBT1cmggoDRF9tCE9vc87iZ8biL_cm4DEHxhaRV3Tbq_FEkGiYOTSFhhji9qHE/s1600/Facebook.png)no-repeat;background-position:center center;}ul#social .rss a      {    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLa7yNMqF1aAbrJQbZ0D0UB2a2SXmwxOB5VSJfYL7szESQtEDfHGTmK3Wim6UNHtQUhCJ79FRzUoSY1LtWuO9U41cyFiSYKhkUqKOZkNrI8ioZCqbr1dBxmt6JRiTrn1jODllssucTT_k/s1600/rss.png)no-repeat;background-position:center center;}ul#social .pinterest a   {    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1A59Lf52cGlJe88Y1GuJgn733ZeXCeayeJ4-VPe4CCq4r5qdtc4j-DKpy6S5j_2Zzow3Fv4RXtzAbRZYgpg0mN6tJbFdidg9CweasEXFA7Nyk9VQiCTtn8Cg7wjaNvNvAh2g9rBn5_kM/s1600/Pinterest.png)no-repeat;background-position:center center;}</style>

3 add script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type='text/javascript'>$(function () {    $('#social a').stop().animate({        'marginLeft': '-85px'    }, 1000);    $('#social > li').hover(        function () {            $('a', $(this)).stop().animate({                'marginLeft': '-2px'            }, 200);        },        function () {            $('a', $(this)).stop().animate({                'marginLeft': '-85px'            }, 200);        }    );});</script>

4 add html

<ul id='social'> <li class='twitter'><a href='#' title='Twitter'></a></li> <li class='googleplus'><a href='#' title='Google Plus'></a></li> <li class='facebook'><a href='#' title='Facebook'></a></li> <li class='rss'><a href='#' title='Rss'></a></li> <li class='pinterest'><a href='#' title='Pinterest'></a></li></ul>

5- thay link của bạn vào href
6 -nguồn bài http://www.bloggerwidgetgenerators.com/

Nếu có thắc mắc, hãy để lại comment phía dưới nhé, quản trị viên của yeusharevip blogspot sẵn sàng trợ giúp bạn
chúc các bác thành công!!