Demo Online - Download Hôm nay mình share template blogger chuẩn seo cho các bạn,mình thấy template này khá hay,có thể làm 1 trang blogger cá nhân hoặc làm 1 trang tin tức chuyên nghiệp Chúc các bạn thành công - Cick để xem nhiều template chuyên nghiệp |
Share template tết 2014 blogger chuẩn seo
Hôm nay mình share template tết 2014 kết hợp tối ưu hóa SEO cho bạn,template blogger này kết hợp màu dễ nhìn và thân thiện với người dùng,ưu điểm lớn nhất của template blogspot này là dễ quản lý,
Share template blogger tối ưu hóa SEO mới nhất hiện nay
Hôm này minh share template blogspot chuẩn seo mới nhất,mình cũng đã dùng template này nó cũng khá hay và dễ quản lý,vì mình đã từng dùng nên mình đã kết hợp SEO cho template này,ưu điểm của nó là load rất nhanh,mình cũng đã kết hợp khung bài viết liên quan,ô comment Reply .
Share template blogger responsive chuẩn đẹp
Hôm nay mình share template blogger responsive.Đâylà một trong những template blogspot tốt nhất hiện nay,cố định nav-bar và template mang một kiểu dáng thanh lịch dễ nhìn,dễ quản lý.Mình cũng đã thêm nút xã hội đơn. Kết hợp màu sắc sáng làm cho template nổi bật hơn.
Share template Syahira - Responsive Blogger chuẩn seo
Hôm nay mình share template blogger seo mới nhất hiện nay,kết hợp nhiều tính năng,nó load nhanh khá mượt,đây là 1 template chuyên nghiệp new.Xem nhiều template blogspot chuyên nghiệp khác
Share Maxxiz Responsive Blogger Template Chuẩn Seo
Responsive Blogger Maxxiz là một mẫu blogger / blogspot với cách bố trí đẹp.rất thân thiện với người sử dụng.Thiết kế đẹp có thể dùng làm một trang blog tin tức hoặc làm những trang blog khác.Với sự kết hợp màu sắc hài hòa và chuyên nghiệp
Thứ Hai, 2 tháng 12, 2013
share template Sevida chuẩn seo
Menu ngang tap 2 cột cho blogger
Demo Demo Online |
+"Lợi thế" của thủ thuật blogger này, đó là các tab phụ khi sắp xếp trong hai cột không phải là rất dài, do đó nó sẽ được gọn gàng và không gian ít hơn,
+Đăng nhập Blogger -- Mẫu -- Chỉnh sửa HTML
- Tìm ]]></b:skin> và thêm vào trước nó đoạn code sau
/* Share vusteven.info+ Thay thanh menu của bạn bằng đoạn code sau
----------------------------------------------- */
#menucol {
width:961px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #FF4444;
text-align:left;
display: block;
text-decoration: none;
padding:10px 36px 11px;
font:bold 11px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglzpcx2bfMBLc5cnHVXQ6hcwIpVoVOntZXacSS9SqCzveXFvZwOuPy0DDiGlv1vGKU_o1wBDE0HXw3YAOElvA4HuBvmO6NA862D5lc0zuG59b9AdBrP3_VRqtTiEzyR8_Fxt4v1EU4Qw/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgggfPHV4LuJffOc2dPKWEOv2djjaQEkmjDNjAf2vqhiozhJasvoZca9TWTO_AAxqtl5ezHn83CAq17gDagPEkljotarfInGg8aUh26zi_E8qyryIQxNwMIc10eY27pGwVhEqLC72DGkA/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://www.vusteven.info/'>Tab 1 Title Here</a></li>
<li><a href='http://www.vusteven.info/'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.6</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.7</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://www.vusteven.info/'>Tab 6 Title Here</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
Chúc các bạn thành công
Làm danh sách youtube cho blogger của bạn
Demo |
<script>
//<![CDATA[
/*share vustven.info*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}
$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');
var ctnr = listctnr.parent();
var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';
listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';
listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';
listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';
listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);
if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();
listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();
listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}
var size = 0;
if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');
if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);
if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}
if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')
if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);
if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}
if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}
ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;
var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}
for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}
function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}
var maxScroll;
var scroll;
if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;
if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }
var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}
if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}
function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}
stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}
ctnr[0].speed = speed;
}
}
function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}
ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}
function move() {
if (ctnr[0].isChanging == false) {return;}
setArrowOpacity();
var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}
listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}
if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}
ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});
this.startMoving = startMoving;
this.stopMoving = stopMoving;
if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});
return this;
};
if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;
if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return this;
}
}
$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);
$(function(){
$("#vusteven-tabs a").click(function(){
var container = $("#vusteven-content");
container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqkQGVe5jbb1ThRzsjnWhNVFJY9P1DbA7n9WRalV7Q9MJ7VX53Dr7WiwqWiNaVxkfpD32XYLrIV0stsYvva4qGtGnoF8BTJqQRKtSWlpkwahWYj6b_iQeNlXPdFeoMD-RPRTX9hC2h3Uo/s1600/loading.png' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#vusteven-tabs").hoverscroll({vertical:true,width:8,height:330,arrows:false});
$("#vusteven-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});
function loadvideo (hash){if(hash){hash = hash.slice(3);$("#vusteven-content").html(video[hash]);$("#vusteven-tabs li").removeClass("actVid");$("#vusteven-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#vusteven-content").html(video[1]);$("#vusteven-tabs li").removeClass("actVid");$("#vusteven-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>
+ Tìm ]]></b:skin> và thêm đoạn code sau vào trước nó
/* share vusteven.info */
#vusteven {
background:#000;
clear:both;
margin:0 auto;
padding:5px;
width:619px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#vusteven,
#vusteven-content,
#vusteven-tabs {height:350px;overflow:hidden;}
#vusteven-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#vusteven-tabs {float:right;width:300px;margin:0;}
#vusteven-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vkvhdQa6fb3knenPUwygUwkDM0pzLJ8aaSigPx5lUXgZd5ZVSp9eUWYpfnxA_3GOS8r5MgLF__3UJ676GXAsEGoybNJSygdPcpjD8fNN5C2CVtVp829HMfRw-Eif8K7VM_kCYtqdUwA/s1600/tab_backgr.jpeg) repeat-x top left;float:right;height:60px;padding:5px;width:145px;list-style:none;}
#vusteven-tabs li a {padding:0 !important;border:0 !important;}
#vusteven-tabs li.hover {background:#333;}
#vusteven-tabs li.actVid {background:#555;}
#vusteven-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#vusteven-tabs li span.vidTit {
display:block;
color:#CD332D;
font-size:14px;
font-weight:bold;
text-decoration:none;
}
#vusteven-tabs li .vidDesc {
display:block;
color:#fff;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
#vusteven-tabs a {text-decoration:none;}
#vusteven-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#vusteven-tabs li a:hover {background: none !important;}
- Lưu lại-- Bố cục -- Thêm tiện ích HTML / Javascript
<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/DLOfRNo7sFw" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/MZ61J9AhXEA" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/NIDopi1ZEPE" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="vusteven">
<div id="vusteven-content"></div>
<ul id="vusteven-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/DLOfRNo7sFw/default.jpg" class="thumb-vid" /><span class="vidTit">Phúc BCS </span><span class="vidDesc">Những mảnh đời </span></a></li>
<li><a href="#vid2"><img src="//i2.ytimg.com/vi/MZ61J9AhXEA/default.jpg" class="thumb-vid" /><span class="vidTit">Boulevard</span><span class="vidDesc">Dan Byrd (VietSub)</span></a></li>
<li><a href="#vid3"><img src="//i2.ytimg.com/vi/NIDopi1ZEPE/default.jpg" class="thumb-vid" /><span class="vidTit">Unbreak my heart</span><span class="vidDesc"> Darin (VietSub)</span></a></li>
<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
</ul>
</div>
Chúc các bạn thành công
Download Microsoft Office 2013 full bằng 1 link
+ Microsoft Office 2013 Professional Plus (32-bit)
- Download
+ Microsoft Office 2013 Professional Plus (64-bit)
- Download
Hoặc : Download
+ Chú ý: Nếu bạn đang sử dụng Windows 8 chỉ cần nhấp đúp là có thể mở file và cài đặt File có định dạng IMG một cách đơn giản.
+ Up thêm link cho các bạn
+Office 2013 32Bit | 890.3 MB
- Download
+Oficce 2013 64Bit | 985.0 MB
- Download
Chúc các bạn thành công !
Chủ Nhật, 1 tháng 12, 2013
Thêm nút trả lời cho blogger comment
Demo |
+ Đang nhập blogger --- Mẫu --- Chỉnh sửa HTML
- Tìm <data:commentpostsdbymsg/> và thêm vào sao nó đoạn code sau
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Reply]</a></span>
Chú ý: bạn hãy thay BlogID thành ID của bạn
Chúc các bạn thành công
Thứ Bảy, 30 tháng 11, 2013
Widget bài viết ngẫu nhiên cho blogger
Demo Demo Online |
<div class="newsfea">Chú Ý: 5 là số bài muốn hiển thị
Bài viết ngẫu nhiên
</div>
<div style="border: 1px solid color:rgb(194, 194, 194) height: 231px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 250px;">
<style type="text/css">
ul.vusteven_recent_comments{list-style:none;margin:0;padding:0;}
.vusteven_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.vusteven_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.vusteven_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.vusteven_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<ul id="random-posts"><script type="text/javaScript">
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='no';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javaScript">
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+" ";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo54M-YoZn-2qFzXGbGiHmXvsD3YuXEG-NyM6QKCCr0bcVYMqN5p8ghTQqn6SNIri5lvNjQuVRvx4WixObsmnVK3BI3iKT-kEXaxSADYC52VXmEcPTbbs-PsGqfSC2Qz-BLJ5adKOa58/"}}};document.write('
<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div>
<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>
');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both">
</div>
</li>
')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script> </ul>
</div>
150 là số ký tự hiển thị,muốn hiển thị kèm theo bình luận thì thay no bằng yes
chúc các bạn thành công !