Tạo social sticky menu cho blog

Chắc hẳn trong số các bạn có rất nhiều người đã biết đến sticky menu - một dạng menu nằm cố định một chỗ ngay cả khi bạn cuộn trang. Bài viết này mình sẽ chia sẻ một dạng menu như vậy, nhưng nó gọi là social sticky menu. Các bạn có thể xem hình trên hoặc Xem demo

Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML.

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </body>:

<!--Social Sticky Menu by kjmagic.blogspot.com-->
<div class='clear'/>
<style>
/* Social Sticky Menu by kjmagic.blogspot.com */
ul#kjnavigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#kjnavigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#kjnavigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#kjnavigation li a:hover{
background-color:#CAE3F2;
}
ul#kjnavigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#kjnavigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6xZdQZgn5guMW8fIF7cxpNpq-WmWVNf3bEvXoq-NACw3fv8NN9Hlp5S4CzEzCgoPitXSuov3z6G2YFDuBVl3Yke5Lgbq9lAxkGMa9pXsCeDfpyAXsR89DQbvrTJXTFuLIzibG0h2oJA/h120/kjmagicfb.png);
}
ul#kjnavigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8UmFFKtHpz3jFby4eW0GmxMOqTK5XjpPDSc65Et4pJNnYhZSMSARWSkXiTxke5vv6MYAsw6Khd2dMQJZJoGvMP42ACZBz44nVmBjF_r40jp4RqrZQ7fNcu72cqJmD2wDTcJuNO4gXdk/h120/kjmagictwitter.png);
}
ul#kjnavigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCZzZ5aKDoR9m6royaKDvrDOJdqTwRwMfxf4lyvQbW9E7cYzsh6pVv0m9hXKQoMQNd79GN1Ai6zzF-RASz62aGCcFnOUHeKi529-TI-M29DJbafOLWuuPScGi_tTBrHVEkGzg55WEDzq8/h120/kjmagicgplus.png);
}
ul#kjnavigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp756-v1mKmgVUYc547AWn4KsaaTcZOUt2rXHLCDrXSSpVUIhQ6eTg6vkH-cakxDrAdPnsN_Gyu24Byb76SStyg8fDWDOzL-urUVbMkjnPOlHQTb73VTgjPJpU2nxNEeYuDy5gYoR-XKQ/h120/kjmagicrss.png);
}
ul#kjnavigation .Contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFNTkvxY3FszSEWgpjxXLN8yXoW8PeXZXhA2PHOVL7WBriQkcm5F2gYWiju9n9ujvlrgQS3K5HIwx6u0xr0qdwK1kbEf_5yFwqv-oGGif-_BDTJPJxpdqgBA_zEjuZVnwbLRGftPndAw/h120/kjmagiccontact.png);
}
</style>
<script src='http://yourjavascript.com/10424552340/kjmagic-ssm.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#kjnavigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#kjnavigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id='kjnavigation'>
<li class='facebook'><a href='http://facebook.com/kj.magician'>Facebook</a></li>
<li class='twitter'><a href='http://twitter.com/quocdoantrinh'>Twitter</a></li>
<li class='googleplus'><a href='https://plus.google.com/your-gplus-id'>Google+</a></li>
<li class='rss'><a href='http://feeds.feedburner.com/KjMagic'>RSS</a></li>
<li class='Contact'><a href='http://kjmagic.blogspot.com/p/lien-he_26.html'>Contact</a></li></ul>
<!--/Social Sticky Menu by kjmagic.blogspot.com-->

Sửa những chỗ mình đánh dấu thành ID tương ứng và URL trang liên hệ của bạn. Bây giờ lưu lại và xem kết quả.

Chúc thành công !