Demo MXfluity Responsive Blogger Template 

                                                Demo MXfluityDownload MXfluity Right

Ưu điểm của MXfluity Responsive Blogger Template 

• Load nhanh, giao diện mượt
• Tối ưu SEO
• Hỗ trợ cả những trình duyệt IE9, Chrome, Firefox...
• Thêm Emoticon trong phần bình luận

Hướng dẫn cài đặt

Cấu hình menu TOP

Tại bảng điều khiển Blogger ~> Mẫu -> Edit HTML
Sau đó tìm thêm đoạn mã sau: (Sử dụng Ctrl+F)

<Ul id = 'navinti'>
<Li> <a expr:href='data:blog.homepageUrl'> Home </a> </ li>
<Li> <a href='#'> Về </a> </ li>
<Li> <a href='#'> Lưu trữ </a> </ li>
<Li> <a href='#'> Comments </a> </ li>
<Li class = 'dgnsub'> <a href='#'> Với Sub menu </a>
<Ul class = "sub-menu ẩn '>
<Li> <a href='#'> Sub menu </a> </ li>
<Li> <a href='#'> Sub menu </a> </ li>
<Li> <a href='#'> Sub menu </a> </ li>
<Li> <a href='#'> Sub menu </a> </ li>
</ Ul>
</ Li>
</ Ul>

Thay thế # với địa chỉ liên kết của bạn

Script nhận xét gần đây (Recent Comment)
Nhập đoạn mã sau vào widget HTML 

<Div id = "rcentcomnets"> </ div><Script type = 'text / javascript'>RecentComment ({adminBlog: ""});</ Script>

Cài đặt chi tiết (mặc định) đối với Script Nhận xét gần đây (Recent Comment)

RecentComment ({
url_blog: "",
id_containrc: "#rcentcomnets"
numComments: 5,
avatarSize: 50,
nhân vật: 100,
loadingClass: "loadingxx"
defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZPAaMjutSKMdp7HT87bwWMav7Wo734eN79n9ybgNr_DsZV7Bo-G7eUxx2EtdbHfrwXQhTgsuFxM9Z0J526ozw6BzD9ORRgv0RP6j3HiUE-8qBKuN44eRmQqR4N6CygYGAQzNnuAQcarY/s70/user-anonymous-icon.png",
maxfeeds: 50,
MonthNames: ["January", "tháng hai", "Mar", "Tháng Tư", "May", "June", "July", "Tháng Tám", "September", "Tháng Mười", "November", "Tháng mười hai" ],
adminBlog: ""
});
 

Cài đặt Emoticon

 Tại bảng điều khiển Blogger ~> Mẫu -> Edit HTML
Sau đó tìm đoạn mã sau:

emoticonx ({
emoRange: "# comments p, div.emoWrap",
putEmoAbove: "iframe # comment-editor",
topText: "Nhấn vào đây để xem mã!",
emoMessage: "Để chèn biểu tượng cảm xúc, bạn phải thêm ít nhất một dấu cách trước mã ".
});

. emoRange = tác dụng biểu tượng cảm xúc sẽ được hiển thị 
. putEmoAbove = nơi tượng cảm xúc hình ảnh sẽ được hiển thị 
topText = Các văn bản phía dưới các ví dụ hình ảnh của biểu tượng cảm xúc. 
emoMessage = tin nhắn văn bản sẽ xuất hiện khi những hình ảnh được nhấp biểu tượng cảm xúc hình ảnh mẫu NB: kêu gọi biểu tượng cảm xúc mã là hai lần mỗi bọc trong một thẻ có điều kiện khác nhau.

JSON cài đặt tìm kiếmTại bảng điều khiển Blogger ~> Mẫu -> Edit HTML
Sau đó tìm thêm đoạn mã sau: (Sử dụng Ctrl+F)

var searchFormConfig = {  
numPost: 9999, // số lượng tối đa các kết quả
summaryPost: true, // 'true' nếu bạn muốn hiển thị một mô tả của bài
summaryLength: 100, // Số ký tự gửi bản tóm tắt
resultTitle: "Kết quả Từ khóa", // kết quả tìm kiếm Tiêu đề
noResult: "Không có kết quả", // mô tả 'không tìm thấy'
resultThumbnail: true, // 'true' để hiển thị bài thumbnail
thumbSize: 50, // kích thước và độ phân giải hình ảnh thu nhỏ
fallbackThumb: "http: //1.bp.blogspot. com / -htG7vy9vIAA / Tp0KrMUdoWI / AAAAAAAABAU / e7XkFtErqsU / S1600 / grey.gif "// dự phòng thumbnail cho không đăng hình
};

PS: Nếu bạn muốn thay đổi màu sắc của màu đỏ với màu sắc khác xin vui lòng thay thế mã màu #C20404 với mã hex màu sắc mà bạn muốn sử dụng công cụ Hex Color Code Generator . Các mã màu #C20404 có tổng cộng 6 lần, vì vậy cần phải thay thế tất cả.

MyTimeLine - Template Blogspot tạp chí

LIVE DEMO FREE DOWNLOAD 

MyTimeLine là template blogspot tạp chí khá đẹp với giao diện bắt mắt, chuẩn SEO, thích hợp cho blogspot tin tức hay tạp chí

♥ Hướng dẫn cài đặt. 

Các bạn download về file RAR, sau đó giải nén ra được 2 file MyTimeLine và __MACOSX

Vào thư mục MyTimeLine sẽ thấy 4 files sau

Thư mục Recent Post, Rencent Comments and Random Post cho phép các bạn tạo widget bài viết mới, bình luận mới hay bài viết ngẫu nhiên. 

      Code

Recent Post

<div id="recentpostxx"></div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

rccpostsx({

numpostx:4,

id_cintainrp:"#recentpostxx",

cmtext:"Comments",

thumbSize:60,

contjumlah:100

});

});

//]]>

</script>

Recent Comments

<div id="recentcommnetsx"></div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

rccommnetsx({

id_containrc:"#recentcommnetsx",

numComments:4,

avatarSize:50,

characters:100,

adminBlog:""

});

});

//]]>

</script>

Random Post

<div id="randompostxx"></div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

RandomPost({

MaxPost:6,

RandompostActive:true,

idcontaint:"#randompostxx",

ImageSize:200,

tagName:false

});

});

//]]>

</script>

♥ Chú ý 

Các bạn có thể tùy ý sử dụng những tính năng đó. Ngoài ra, để hiển thị bài viết theo thẻ hay theo nhãn, hãy điền tagName như thế này : ex:label blogger ---> tagName:"blogger"
Để thay đổi cách hiển thị bài viết mới hãy đặt hàm RandompostActive có giá trị false như thế này : RandompostActive : false 

Phần hướng dẫn thay đổi link trên thanh menu cùng với ảnh profile đã có sẵn trong file Config. Các bạn có thể tham khảo thêm

Để nhận mẫu vui lòng để laị mail của bạn bên dưới và sẽ nhận được templates và hướng dẫn cài đặt chi tiết nhất về MyTimeLine - Template Blogspot tạp chí này. 

Vienna Lite V2.0 Blogger Template Responsive là template blogpsot chuẩn seo và được nâng cấp từ mẫu Vienna Lite V1.0 được thế kế đẹp với giao diện Responsive chuẩn seo.

LIVE DEMO FREE DOWNLOAD

Hướng dẫn cài đặt
Về phần cài đặt chỉ cài đặt mỗi widget comments còn lại tất cả chỉ dùng tiện ích mặc định của blogger thôi nhé.

Code widget comments

<style scoped='' type="text/css">

#HTML4 .widget-content {max-height:300px;overflow:auto;}

ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments

function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDaPqGx77_w2QrW1YBzWafWT5W3DWfl7iui3cLlaM8Mc_aISAR10qKi0Ej4vRmPayrDK6Z_J2RuYneUi83S3FNyJ557i0Rqcb9OsGR0G7LR7ymrZnaQyJ5kGe9gLCBCgwVLoDkQ9y5f_l/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHlUSugI6x829EDXre-cwTIKLb1IKfaZJ4g55r72-oZ4kBqZwiF2QVhb5pmv4r6QffPlr3k3QXQCzRrbphEm-wPd6uoXWq1jhVW6foHn2H5gtqZQtMGNsnjalKOUECJn3INYU-E52n5Ge/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQYleqPpHwF7eAnhoE_uCSXmCxZ_9eKuctf63Ku9vc9oF_bfwuBGfH7BpdJ9Chug5l4zBY4WwYLUQSJH4FNiYvH9BCegY8zq-WdZ7rM7IvyHp8ej9fCbefaRDDNRg0KR7j5Ki6k-ZiAVn/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;

//]]>

</script>

<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=arlinacomments&amp;max-results=15"></script>

Để nhận mẫu vui lòng để laị mail của bạn bên dưới và sẽ nhận được templates và hướng dẫn cài đặt chi tiết nhất về Vienna Lite V2.0 Blogger Template Responsive này.