Hiển thị bài viết ngẫu nhiên trên Sticky Floating Bar

Trước đây mình đã giới thiệu với một số mẫu sticky bar tuy nhiên những mẫu trước thì chỉ hiện thị một liên kết cố định. Hôm nay, mình sẽ hướng dẫn các bạn thực hiện thủ thuật hiển Hiển thị bài viết ngẫu nhiên trên Sticky Floating Bar.

DEMO

#1Lấy code Headlines trên Feedburner

1. Truy cập https://feedburner.google.com - nếu blog của bạn chưa có Feed thì xem cách đăng kí TẠI ĐÂY
2. > Publicize > BuzzBoost

Trong đó Number of items to display là số bài hiển thị
4. Lấy code được bôi đen trong hình minh họa dưới

Lấy đoạn code được bôi đen

Hãy ghi nhớ đoạn code trên vì lát nữa chúng ta sẽ cần tới nó.

#2Thêm vào Blogger

#2.1Thêm CSS

1. Đăng nhập Blogger

2. > Mẫu > Chỉnh sửa HTML

3. > Dán code dưới vào trên thẻ vừa tìm

/*--------Floating Sticky bar by www.MyBloggerTricks.com --------------*/ 
#creditfooter{display:none;} 
#MBT-Sticky-container { 
   height: 55px; 
background: #000; 
border-top: 5px dashed #FC8D59; 
border-bottom: 2px solid #FFFFFF; 
position: fixed; 
width: 100%; 
z-index: 99999; 
box-shadow: 1px 2px 9px #666; 
top:0px; } 
.feedburnerFeedBlock ul, .feedburnerFeedBlock ul li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    } 
    
    .feedburnerFeedBlock ul li a { color:#fff!important; text-decoration:none;} 
        .feedburnerFeedBlock ul li a:hover {text-decoration:underline;} 
.feedburnerFeedBlock ul{ 
    line-height:120%; 
    
    } 
.feedburnerFeedBlock ul li{ 
    padding:20px; text-align:center; font-family:georgia; font-size:17px; font-weight:bold; 
    
    display:none; /* hide the items at first only to display one with javascript */ 
    } 
#toggleButton { 
position: fixed; 
top: 19px; 
right: 10px; 
z-index: 999999999999; 
border-radius: 100px; 
padding: 5px 6px; 
font-size: 10px; 
border-width: 3px; 
border: 3px solid #FC8D59; 
background: #000; 
color: #FFF; 
cursor: pointer; 
} 
.sticky-gap { 
height: 80px; clear:both; 
}

#2.2Thêm Script

1. > Tìm thẻ </head>

2. > Dán code dưới vào trên thẻ vừa tìm

<script type='text/javascript'> 
//<![CDATA[ 
this.randomizer = function(){ 
    var length = $(".feedburnerFeedBlock li").length; // this is where we put the id of the list 
    var ran = Math.floor(Math.random()*length) + 1; 
    $(".feedburnerFeedBlock li:nth-child(" + ran + ")").show(); 
}; 
$(document).ready(function(){   
    randomizer(); 
}); 

$(document).ready(function() { 
$('#toggleButton').click(function() { 
if ($('#MBT-Sticky-container').is(':visible')) { 
$(this).val('▼'); 
} else { 
$(this).val('▲'); 
} 
$('#MBT-Sticky-container').slideToggle(); 
}); 
}); 
//]]> 
</script>

#2.3Thêm Jquery

Lưu ý: Nếu trong template của bạn đã có code dưới thì khỏi làm bước #2.3

Dán code dưới vào trên thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2' type='text/javascript'/>

#2.4Thêm HTML

1. > Tìm thẻ <body> hoặc <body expr:class='"loading" + data:blog.mobileClass'>

(Mẹo: Tìm với từ khóa <body )
2. > dán code dưới vào dứoi thẻ vừa tìm

<input id='toggleButton' type='button' value='▲'/> 
<div id='MBT-Sticky-container'> 
  <script src="http://feeds.feedburner.com/Blogkhanh98?format=sigpro" type="text/javascript"/>
    </div><div class="sticky-gap"></div>

Hãy thay thế đoạn code mà bạn đã lấy ở bước #1 vào đoạn code màu xanh.
3. > Save và xem kết quả.

MBT

Khanh blog

Search This Blog