 |
| Breaking News Widget đẹp cho Blogspot |
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:
 |
| Breaking News |
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo645sjVnYLmadGY7pFumRn083BnYQePKgsrx38tai7M8wd233VHH7rW49UzH8NGMFnloL6qiMpMvkPdYSlVp1zpYkrKzT5vXMyi_qSm6IrmgRaAmyb87-kn9VgjrWQqVeJqy1NN23UNqw/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"/>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo645sjVnYLmadGY7pFumRn083BnYQePKgsrx38tai7M8wd233VHH7rW49UzH8NGMFnloL6qiMpMvkPdYSlVp1zpYkrKzT5vXMyi_qSm6IrmgRaAmyb87-kn9VgjrWQqVeJqy1NN23UNqw/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://trumcode.blogspot.com/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 đỏ) tương ứng của bạn
- Thay trumcode.blogspot.com thành địa chỉ blog của bạn
Bước 5: Lưu Widget lại
Chúc bạn thành công!
------ Tungcoder ------
