Thứ Ba, ngày 08 tháng 12 năm 2015

Code Breaking News Widget (Tin Mới) Đẹp cho Blogspot

Ở nhiều trang tin tức người ta thường có 1 hoặc nhiều widget chạy ngang điểm những tin tức mới những bài viết mới và tác dụng của nó sẽ kéo thành viên ở lại trang lâu hơn bởi những tin nóng những tin hay mà nếu như bình thường người xem sẽ không để ý
Nếu dạo qua các trang tin tức các bạn có thể thấy một thanh ngang được đặt lên đầu trang với tiêu đề là “Tin mới”, “Tiêu điểm”,… hiển thị các bài viết mới với hiệu ứng load sinh động rất thu hút người đọc. Đó gọi là Breaking News Widget (hay Widget Tin tức mới).



Bạn muốn Blog của mình cũng làm được như thế? Bài viết này sẽ hướng dẫn các bạn thực hiện làm một Breaking News Widget như sau:


Tạo Headline Breaking News cho Blog

Bước 1: Vào phần Chỉnh sửa HTML
Bước 2: Copy đoạn CSS sau vào trước thẻ </head>
<style type='text/css'>
#headlinenews {
    position: relative;
    background: #fff;
    border-bottom: 5px solid #5FC6EB;
    border-top: 5px solid #5FC6EB;
    display: block;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    margin: 0 auto 20px;
    padding: 5px 30px;
    width: 980px;
}
#news {
    float: left;
    margin-left: 90px;
    font-size: 12px;
}
#news a {
    background: none !important;
    color: #5FC6EB !important;
    font: bold 12px/22px Tahoma;
    text-decoration: none;
}
.titlenews {
    background: #5FC6EB;
    color: #fff;
    display: block;
    float: left;
    font: bold 12px/22px Arial;
    padding: 9px;
    margin-top: -10px;
    position: absolute;
}
ul.shsocial {
    background#34495e;
    float: right;
    margin: -8px 0;
}
ul.shsocial li {
    float: left;
    list-style: none outside none;
    border: none;
}
ul.shsocial li a {
    background-color: transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:34px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
    ul.shsocial li.fb a {
        background-position: 0 0
    }
    ul.shsocial li.gp a {
        background-position: -96px 0
    }
    ul.shsocial li.rs a {
        background-position: -192px 0
    }
    ul.shsocial li.tw a {
        background-position: -256px 0
    }
    ul.shsocial li.fb a:hover {
        background-position: 0 -32px
    }
    ul.shsocial li.gp a:hover {
        background-position: -96px -32px
    }
    ul.shsocial li.rs a:hover {
        background-position: -192px -32px
    }
    ul.shsocial li.tw a:hover {
        background-position: -256px -32px
    }
</style>

<script src='http://google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA' type='text/javascript'/>
<script src='http://googledrive.com/host/0B_6O--IFsYfoc0dhYW1rOXRBMXc' type='text/javascript'/>

Bước 3: Lưu mẫu
Bước 4: Bạn vào Bố cục => Thêm tiện ích => HTML/Javascrip và chèn vào
<div id='headlinenews'>
<span class='titlenews'>Bài viết mới</span>
<div id='news'>
<script type='text/javascript'>
 var cssfeed=new gfeedrssticker("example1", "example1class", 5000, "_new")
 cssfeed.addFeed("Feed Blog", "http://www.codeseo.net/feeds/posts/default")
 cssfeed.displayoptions("date")
 cssfeed.setentrycontainer("span")
 cssfeed.filterfeed(10, "date")
 cssfeed.entries_per_page(1)
 cssfeed.init()
 </script>
</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/' target='_blank' title='rss'>
</a></li>
</ul>
</div>

– Thay các trang mạng xã hội(màu vàng) tương ứng của bạn
– Thay www.codeseo.net thành địa chỉ blog của bạn
Chú ý
Nên để Widget ở vị trí phía trên Bài viết ( dưới header) vì độ dài cần thiết cho Breaking news là khá lớn.
Bước 5: Lưu Widget lại
Chúc bạn thành công!