Share Template Blogspot Deco Mag Magazine

Bố cục toàn trang Template Deco Mag

•  Responsive Flexslider chuyên nghiệp
• Responsive Ad Widget (Google Adsense Support)
• YouTube Video Support (Any post style)
• 4 Column Footer Area
• CSS3 + HTML Dropdown Menu
• Author Info Widget
• Responsive Site Map Widget
• Custom Error 404 Page

Lời kết : Việc cấu hình và sử dụng Template blogspot Deco Mag không quá khó khăn, tương tự như các Template khác với việc tạo nhãn, đăng post và đặt nhãn vào bố cục của website.

Dưới đây là link demo và download

• Link demo : Template Blogspot Deco Mag
• Link download : Download Template Blogspot Deco Mag

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger

Bước 1: Đăng nhập vào Dashboard Blogger
Bước 2: Chọn Bố Cục» Thêm Tiện Ích »  HTML rồi tống đoạn code này vào:

<style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>

Xong rồi, bạn thử ra ngoài và click vào một link xem hiệu ứng này có hoạt động không!. Nhớ like nhé

Thêm tiện ích Top Comment cho Blogger

- Ảnh minh họa

Hướng dẫn tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

1. Truy cập vào trang quản trị Blogger:
2. Vào Bố cục (Layout), chọn vị trí muốn hiển thị widget xếp hạng bình luận, và thêm tiện ích (Add widget):
3. Chọn Tiện ích HTML/JavaScript, và dán toàn bộ đoạn code sau vào :

<style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 8; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4Fofd82M-444sMY7WzM6GiCpSLw5VxWSI0yupMJLw8zxVwcV7wqmTXK8xk9V8Bzi6B7lNQj0um5kHiKTkdt5vuGqdRE_FqKyHw51ICHWhceyiSjReJTt5jExljalpiKoYHyE0AMvYoCN/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-USuXUG5TXOozxYM4qLrZDKuAMgNathb2k-ShK0eEgv5Zr1jPBK1sPY_g-Z4qyp3CEPTAHmZrYVMkZAGGJQY-tzuYoUp2-eVx653TJMGMBq1-IedOKnNUEKnoxco5FPd7xWrg9wOq2po/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
   
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

4. Bấm lưu và xem kết quả

Tùy chỉnh

Các Bạn có thể thay đổi

• Số lượng người hiển thị bằng cách tìm var maxTopCommenters = 8; và thay thế 8 thành số bạn muốn
• Kích thước avatar người bình luận tìm var sizeAvatar = 33; Thay đổi 33 thành kích thước bạn muốn

Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger

[Demo]

Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới

CSS

Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin> trong template

#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2s8Vyx8tuDx9-bMXUrkTe6VA9UnpVa6BO8SuIYKU_JT6Bbg-pRAR0EZAgdBYtjzZZ7gHsBWr-D4bGFZC_reGsO8ehYz1xilJcMez_dxWS4hK8N0RVg0dNTJ6V9IVPadYTZ5vPZujRB78/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}

Bạn có thể thay thế  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2s8Vyx8tuDx9-bMXUrkTe6VA9UnpVa6BO8SuIYKU_JT6Bbg-pRAR0EZAgdBYtjzZZ7gHsBWr-D4bGFZC_reGsO8ehYz1xilJcMez_dxWS4hK8N0RVg0dNTJ6V9IVPadYTZ5vPZujRB78/s1600/loading.gif thành link ảnh muốn hiện khi chuyển trang

Script

Chèn đoạn code bên dưới trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Lưu lại và xem kết quả. Chúc các bạn thành công

Bán template ngoctuan-star.blogspot.com

Xem trướcMua Ngay

Đặc điểm của Template BMAG - Magazine Responsive

1. Thiết kế hoàn toàn Responsive
2. Mạnh mẽ Admin Panel mới
3. Chủ đề Lựa chọn: Translator / đóng hộp phong cách Switcher / Hình ảnh Di chuyển hoạt hình mới
4. Màu sắc không giới hạn & Fonts
5. Thiết kế hoàn toàn tùy biến
6. Công cụ tìm kiếm tối ưu (SEO)
7. Bài Giao diện Kiểu: Đầy đủ rộng / Sidebar phải / trái Sidebar với mã ngắn mới
8. 9 Trang chủ Giao diện Thùng đồ nghề Style với mã ngắn mới
9. Chính Giới thiệu bài viết với hai lựa chọn (gần đây hay ngẫu nhiên)
10. Mát tin tiện ích mã với hai lựa chọn (tên hay nhãn hiệu này gần đây)
11. Hỗ trợ Facebook & Twitter Biểu đồ Mở thẻ mới
12. Adsense Ready với phụ tùng mới để thêm quảng cáo trong bài viết
13. jQuery và CSS3 hiệu ứng
14. Tiện ích xã hội truy cập
15. Dễ dàng tùy biến jQuery Dropdown Menu
16. Cross Browser tương thích
17. Bài viết Preview đã sẵn sàng
18. Chữ biểu tượng Awesome tích hợp
19. Hỗ trợ ngôn ngữ RTL
20. LTR / RTL Switcher Từ OneClick mới
21. Bài viết liên quan theo bài viết
22. Chất lượng hình ảnh Full
23. Hỗ trợ hình ảnh bên thứ 3 và ngón tay cái youtube
24. Bài viết ngẫu nhiên / Bài viết gần đây / Bình luận vật dụng gần đây với mã ngắn
25. Popup liên lạc Mẫu Mỹ
26. Tabs Widget
27. Tùy chỉnh Widget
28. Threaded Blogger Bình luận
29. Lỗi 404 trang
30. Bài viết mã ngắn
31. Dễ dàng để tạo trang Liên hệ
32. faceook như hộp với shortcode
33. Tất cả các vật dụng chủ đề và các tùy chọn dễ dàng để tùy chỉnh không cần phải sử dụng mã số
34. Ý kiến Blogger, Disqus và Facebook trong các thẻ bằng cách sử dụng tùy chọn shortcode
35. Cho phép nhận xét Disqus với Disqus chỉ Shortname
36. Đặt bài viết pagination số từ các chủ đề lựa chọn bảng
37. Pagination Hiển thị / Ẩn nhà cho bài viết gần đây từ bảng điều khiển tùy chọn chủ đề.

Font Awesome Icons và cách sử dụng

Hôm nay,Star Tuấn xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Thời gian này Tuấn đang thay áo có Blog Star Tuấn nên cũng tìm hiểu thêm một số thủ thuật để làm đẹp cho blog. Tình cờ tuấn đọc được bài viết về Font Awesome icons thấy khá là có ích nên chia sẻ cùng các bạn luôn tuấn hy vọng sẽ có ích cho các bạn.

Font Awesome Icons và cách sử dụng

Font Awesome theo tuấn thì vô cùng thú vị và hữu ích, nó là một công cụ cần thiết cho các coder sự tiện dụng dễ dàng chỉnh sửa mà lại thay thế cho rất nhiều icon bằng hình ảnh. Bài viết này được Star Tuấn blog chỉnh sửa và rút gọn từ nguồn chính nếu bạn muốn tìm hiểu kỹ hơn thì có thể xem thêm tại: http://fortawesome.github.io/Font-Awesome, bạn có thể xem thêm ở trang này. Bây giờ các bạn cùng mình bắt tay vào thực hiện nhé.

Trước tiên là cài đặt font cho Blogspot

Việc đầu tiên các bạn hãy đặt đoạn code sau dưới thẻ </head> :
<link rel ="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
Nếu bạn không muốn có sự cố gì hãy tải lại file css về và up lên host của chính bạn cho dễ quản lý nhé.

Cách sử dụng font Awesome

Để sử dụng font Awesome thì việc đầu tiên là bạn phải năm đc tên icon mà mình muốn thêm vào. Để biết được điều này bạn có thể vào ĐÂY để tham khảo hoặc  tìm kiếm ngay trong bài viết này.

Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau 

<i class="fa fa-download"></i> Bạn sẽ được kết như hình phía trước code

Tiếp theo là phần biến hóa của font Awesome

1. Thay đổi kích thước icon

Ngoài ra các bạn cũng có thể tuỳ biến kích thước bằng các đặt các ký hiệu sau đằng sau tên của icon fa-lg (tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:

<i class="fa fa-download fa-lg"></i> fa-lg
<i class="fa fa-download fa-2x"></i> fa-2x
<i class="fa fa-download fa-3x"></i> fa-3x
<i class="fa fa-download fa-4x"></i> fa-4x
<i class="fa fa-download fa-5x"></i> fa-5x
Và kết quả chúng ta thu được:
fa-lg fa-2x fa-3x fa-4x fa-5x

2. Trình bày dạng danh sách

Các bạn có thể trình dưới dạng danh sách bằng cách:

• List icons
• can be used
• as bullets
• in lists

Bằng mã code sau:<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

3. Sử dụng icon động

Icon động thú vị phải không các bạn? Icon động theo tuấn sẽ giúp blog thêm bắt mắt hơn tạo nét riêng cho blog của bạn sử dụng làm các nút loding hay một số mũi tên v.v... nhẹ nhàng và tiện lợi không lo die link như cách sử dụng hình ảnh. Vậy thì làm thế nào để tạo icon động đây, các bạn chỉ việc thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:

Để có icon như trên Star Tuấn Blog's sử dụng đoạn code sau:<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
<i class="fa fa-refresh fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

4. Xếp chồng các icon lên nhau

Xoay đã rất thú vị rồi nhưng Font Awesome còn có thể làm các icon xếp chồng lên nhau bạn tin không? Không tin thì xem bên dưới nhé:
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
Sử dụng code:<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera

5. Xoay icon

Các bạn cũng có thể xoay icon cố định ở những góc độ mình thích hãy tham khảo đoạn code bên dưới nhé:
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Bạn có thể tham khảo đoạn code sau <i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Và cuối cùng là danh sách các icon dành cho bạn

Và đây là danh sách icon cho các bạn đỡ mất công tìm kiếm hiện tại có 479 icon. Star Tuấn Blog sẽ cập nhập thêm:

fa-glass "\f000"
fa-music "\f001"
fa-search "\f002"
fa-envelope-o "\f003"
fa-heart "\f004"
fa-star "\f005"
fa-star-o "\f006"
fa-user "\f007"
fa-film "\f008"
fa-th-large "\f009"
fa-th "\f00a"
fa-th-list "\f00b"
fa-check "\f00c"
fa-times "\f00d"
fa-search-plus "\f00e"
fa-search-minus "\f010"
fa-power-off "\f011"
fa-signal "\f012"
fa-cog "\f013"
fa-trash-o "\f014"
fa-home "\f015"
fa-file-o "\f016"
fa-clock-o "\f017"
fa-road "\f018"
fa-download "\f019"
fa-arrow-circle-o-down "\f01a"
fa-arrow-circle-o-up "\f01b"
fa-inbox "\f01c"
fa-play-circle-o "\f01d"
fa-repeat "\f01e"
fa-refresh "\f021"
fa-list-alt "\f022"
fa-lock "\f023"
fa-flag "\f024"
fa-headphones "\f025"
fa-volume-off "\f026"
fa-volume-down "\f027"
fa-volume-up "\f028"
fa-qrcode "\f029"
fa-barcode "\f02a"
fa-tag "\f02b"
fa-tags "\f02c"
fa-book "\f02d"
fa-bookmark "\f02e"
fa-print "\f02f"
fa-camera "\f030"
fa-font "\f031"
fa-bold "\f032"
fa-italic "\f033"
fa-text-height "\f034"
fa-text-width "\f035"
fa-align-left "\f036"
fa-align-center "\f037"
fa-align-right "\f038"
fa-align-justify "\f039"
fa-list "\f03a"
fa-outdent "\f03b"
fa-indent "\f03c"
fa-video-camera "\f03d"
fa-picture-o "\f03e"
fa-pencil "\f040"
fa-map-marker "\f041"
fa-adjust "\f042"
fa-tint "\f043"
fa-pencil-square-o "\f044"
fa-share-square-o "\f045"
fa-check-square-o "\f046"
fa-arrows "\f047"
fa-step-backward "\f048"
fa-fast-backward "\f049"
fa-backward "\f04a"
fa-play "\f04b"
fa-pause "\f04c"
fa-stop "\f04d"
fa-forward "\f04e"
fa-fast-forward "\f050"
fa-step-forward "\f051"
fa-eject "\f052"
fa-chevron-left "\f053"
fa-chevron-right "\f054"
fa-plus-circle "\f055"
fa-minus-circle "\f056"
fa-times-circle "\f057"
fa-check-circle "\f058"
fa-question-circle "\f059"
fa-info-circle "\f05a"
fa-crosshairs "\f05b"
fa-times-circle-o "\f05c"
fa-check-circle-o "\f05d"
fa-ban "\f05e"
fa-arrow-left "\f060"
fa-arrow-right "\f061"
fa-arrow-up "\f062"
fa-arrow-down "\f063"
fa-share "\f064"
fa-expand "\f065"
fa-compress "\f066"
fa-plus "\f067"
fa-minus "\f068"
fa-asterisk "\f069"
fa-exclamation-circle "\f06a"
fa-gift "\f06b"
fa-leaf "\f06c"
fa-fire "\f06d"
fa-eye "\f06e"
fa-eye-slash "\f070"
fa-exclamation-triangle "\f071"
fa-plane "\f072"
fa-calendar "\f073"
fa-random "\f074"
fa-comment "\f075"
fa-magnet "\f076"
fa-chevron-up "\f077"
fa-chevron-down "\f078"
fa-retweet "\f079"
fa-shopping-cart "\f07a"
fa-folder "\f07b"
fa-folder-open "\f07c"
fa-arrows-v "\f07d"
fa-arrows-h "\f07e"
fa-bar-chart "\f080"
fa-twitter-square "\f081"
fa-facebook-square "\f082"
fa-camera-retro "\f083"
fa-key "\f084"
fa-cogs "\f085"
fa-comments "\f086"
fa-thumbs-o-up "\f087"
fa-thumbs-o-down "\f088"
fa-star-half "\f089"
fa-heart-o "\f08a"
fa-sign-out "\f08b"
fa-linkedin-square "\f08c"
fa-thumb-tack "\f08d"
fa-external-link "\f08e"
fa-sign-in "\f090"
fa-trophy "\f091"
fa-github-square "\f092"
fa-upload "\f093"
fa-lemon-o "\f094"
fa-phone "\f095"
fa-square-o "\f096"
fa-bookmark-o "\f097"
fa-phone-square "\f098"
fa-twitter "\f099"
fa-facebook "\f09a"
fa-github "\f09b"
fa-unlock "\f09c"
fa-credit-card "\f09d"
fa-rss "\f09e"
fa-hdd-o "\f0a0"
fa-bullhorn "\f0a1"
fa-bell "\f0f3"
fa-certificate "\f0a3"
fa-hand-o-right "\f0a4"
fa-hand-o-left "\f0a5"
fa-hand-o-up "\f0a6"
fa-hand-o-down "\f0a7"
fa-arrow-circle-left "\f0a8"
fa-arrow-circle-right "\f0a9"
fa-arrow-circle-up "\f0aa"
fa-arrow-circle-down "\f0ab"
fa-globe "\f0ac"
fa-wrench "\f0ad"
fa-tasks "\f0ae"
fa-filter "\f0b0"
fa-briefcase "\f0b1"
fa-arrows-alt "\f0b2"
fa-users "\f0c0"
fa-link "\f0c1"
fa-cloud "\f0c2"
fa-flask "\f0c3"
fa-scissors "\f0c4"
fa-files-o "\f0c5"
fa-paperclip "\f0c6"
fa-floppy-o "\f0c7"
fa-square "\f0c8"
fa-bars "\f0c9"
fa-list-ul "\f0ca"
fa-list-ol "\f0cb"
fa-strikethrough "\f0cc"
fa-underline "\f0cd"
fa-table "\f0ce"
fa-magic "\f0d0"
fa-truck "\f0d1"
fa-pinterest "\f0d2"
fa-pinterest-square "\f0d3"
fa-google-plus-square "\f0d4"
fa-google-plus "\f0d5"
fa-money "\f0d6"
fa-caret-down "\f0d7"
fa-caret-up "\f0d8"
fa-caret-left "\f0d9"
fa-caret-right "\f0da"
fa-columns "\f0db"
fa-sort "\f0dc"
fa-sort-desc "\f0dd"
fa-sort-asc "\f0de"
fa-envelope "\f0e0"
fa-linkedin "\f0e1"
fa-undo "\f0e2"
fa-gavel "\f0e3"
fa-tachometer "\f0e4"
fa-comment-o "\f0e5"
fa-comments-o "\f0e6"
fa-bolt "\f0e7"
fa-sitemap "\f0e8"
fa-umbrella "\f0e9"
fa-clipboard "\f0ea"
fa-lightbulb-o "\f0eb"
fa-exchange "\f0ec"
fa-cloud-download "\f0ed"
fa-cloud-upload "\f0ee"
fa-user-md "\f0f0"
fa-stethoscope "\f0f1"
fa-suitcase "\f0f2"
fa-bell-o "\f0a2"
fa-coffee "\f0f4"
fa-cutlery "\f0f5"
fa-file-text-o "\f0f6"
fa-building-o "\f0f7"
fa-hospital-o "\f0f8"
fa-ambulance "\f0f9"
fa-medkit "\f0fa"
fa-fighter-jet "\f0fb"
fa-beer "\f0fc"
fa-h-square "\f0fd"
fa-plus-square "\f0fe"
fa-angle-double-left "\f100"
fa-angle-double-right "\f101"
fa-angle-double-up "\f102"
fa-angle-double-down "\f103"
fa-angle-left "\f104"
fa-angle-right "\f105"
fa-angle-up "\f106"
fa-angle-down "\f107"
fa-desktop "\f108"
fa-laptop "\f109"
fa-tablet "\f10a"
fa-mobile "\f10b"
fa-circle-o "\f10c"
fa-quote-left "\f10d"
fa-quote-right "\f10e"
fa-spinner "\f110"
fa-circle "\f111"
fa-reply "\f112"
fa-github-alt "\f113"
fa-folder-o "\f114"
fa-folder-open-o "\f115"
fa-smile-o "\f118"
fa-frown-o "\f119"
fa-meh-o "\f11a"
fa-gamepad "\f11b"
fa-keyboard-o "\f11c"
fa-flag-o "\f11d"
fa-flag-checkered "\f11e"
fa-terminal "\f120"
fa-code "\f121"
fa-reply-all "\f122"
fa-star-half-o "\f123"
fa-location-arrow "\f124"
fa-crop "\f125"
fa-code-fork "\f126"
fa-chain-broken "\f127"
fa-question "\f128"
fa-info "\f129"
fa-exclamation "\f12a"
fa-superscript "\f12b"
fa-subscript "\f12c"
fa-eraser "\f12d"
fa-puzzle-piece "\f12e"
fa-microphone "\f130"
fa-microphone-slash "\f131"
fa-shield "\f132"
fa-calendar-o "\f133"
fa-fire-extinguisher "\f134"
fa-rocket "\f135"
fa-maxcdn "\f136"
fa-chevron-circle-left "\f137"
fa-chevron-circle-right "\f138"
fa-chevron-circle-up "\f139"
fa-chevron-circle-down "\f13a"
fa-html5 "\f13b"
fa-css3 "\f13c"
fa-anchor "\f13d"
fa-unlock-alt "\f13e"
fa-bullseye "\f140"
fa-ellipsis-h "\f141"
fa-ellipsis-v "\f142"
fa-rss-square "\f143"
fa-play-circle "\f144"
fa-ticket "\f145"
fa-minus-square "\f146"
fa-minus-square-o "\f147"
fa-level-up "\f148"
fa-level-down "\f149"
fa-check-square "\f14a"
fa-pencil-square "\f14b"
fa-external-link-square "\f14c"
fa-share-square "\f14d"
fa-compass "\f14e"
fa-caret-square-o-down "\f150"
fa-caret-square-o-up "\f151"
fa-caret-square-o-right "\f152"
fa-eur "\f153"
fa-gbp "\f154"
fa-usd "\f155"
fa-inr "\f156"
fa-jpy "\f157"
fa-rub "\f158"
fa-krw "\f159"
fa-btc "\f15a"
fa-file "\f15b"
fa-file-text "\f15c"
fa-sort-alpha-asc "\f15d"
fa-sort-alpha-desc "\f15e"
fa-sort-amount-asc "\f160"
fa-sort-amount-desc "\f161"
fa-sort-numeric-asc "\f162"
fa-sort-numeric-desc "\f163"
fa-thumbs-up "\f164"
fa-thumbs-down "\f165"
fa-youtube-square "\f166"
fa-youtube "\f167"
fa-xing "\f168"
fa-xing-square "\f169"
fa-youtube-play "\f16a"
fa-dropbox "\f16b"
fa-stack-overflow "\f16c"
fa-instagram "\f16d"
fa-flickr "\f16e"
fa-adn "\f170"
fa-bitbucket "\f171"
fa-bitbucket-square "\f172"
fa-tumblr "\f173"
fa-tumblr-square "\f174"
fa-long-arrow-down "\f175"
fa-long-arrow-up "\f176"
fa-long-arrow-left "\f177"
fa-long-arrow-right "\f178"
fa-apple "\f179"
fa-windows "\f17a"
fa-android "\f17b"
fa-linux "\f17c"
fa-dribbble "\f17d"
fa-skype "\f17e"
fa-foursquare "\f180"
fa-trello "\f181"
fa-female "\f182"
fa-male "\f183"
fa-gittip "\f184"
fa-sun-o "\f185"
fa-moon-o "\f186"
fa-archive "\f187"
fa-bug "\f188"
fa-vk "\f189"
fa-weibo "\f18a"
fa-renren "\f18b"
fa-pagelines "\f18c"
fa-stack-exchange "\f18d"
fa-arrow-circle-o-right "\f18e"
fa-arrow-circle-o-left "\f190"
fa-caret-square-o-left "\f191"
fa-dot-circle-o "\f192"
fa-wheelchair "\f193"
fa-vimeo-square "\f194"
fa-try "\f195"
fa-plus-square-o "\f196"
fa-space-shuttle "\f197"
fa-slack "\f198"
fa-envelope-square "\f199"
fa-wordpress "\f19a"
fa-openid "\f19b"
fa-university "\f19c"
fa-graduation-cap "\f19d"
fa-yahoo "\f19e"
fa-google "\f1a0"
fa-reddit "\f1a1"
fa-reddit-square "\f1a2"
fa-stumbleupon-circle "\f1a3"
fa-stumbleupon "\f1a4"
fa-delicious "\f1a5"
fa-digg "\f1a6"
fa-pied-piper "\f1a7"
fa-pied-piper-alt "\f1a8"
fa-drupal "\f1a9"
fa-joomla "\f1aa"
fa-language "\f1ab"
fa-fax "\f1ac"
fa-building "\f1ad"
fa-child "\f1ae"
fa-paw "\f1b0"
fa-spoon "\f1b1"
fa-cube "\f1b2"
fa-cubes "\f1b3"
fa-behance "\f1b4"
fa-behance-square "\f1b5"
fa-steam "\f1b6"
fa-steam-square "\f1b7"
fa-recycle "\f1b8"
fa-car "\f1b9"
fa-taxi "\f1ba"
fa-tree "\f1bb"
fa-spotify "\f1bc"
fa-deviantart "\f1bd"
fa-soundcloud "\f1be"
fa-database "\f1c0"
fa-file-pdf-o "\f1c1"
fa-file-word-o "\f1c2"
fa-file-excel-o "\f1c3"
fa-file-powerpoint-o "\f1c4"
fa-file-image-o "\f1c5"
fa-file-archive-o "\f1c6"
fa-file-audio-o "\f1c7"
fa-file-video-o "\f1c8"
fa-file-code-o "\f1c9"
fa-vine "\f1ca"
fa-codepen "\f1cb"
fa-jsfiddle "\f1cc"
fa-life-ring "\f1cd"
fa-circle-o-notch "\f1ce"
fa-rebel "\f1d0"
fa-empire "\f1d1"
fa-git-square "\f1d2"
fa-git "\f1d3"
fa-hacker-news "\f1d4"
fa-tencent-weibo "\f1d5"
fa-qq "\f1d6"
fa-weixin "\f1d7"
fa-paper-plane "\f1d8"
fa-paper-plane-o "\f1d9"
fa-history "\f1da"
fa-circle-thin "\f1db"
fa-header "\f1dc"
fa-paragraph "\f1dd"
fa-sliders "\f1de"
fa-share-alt "\f1e0"
fa-share-alt-square "\f1e1"
fa-bomb "\f1e2"
fa-futbol-o "\f1e3"
fa-tty "\f1e4"
fa-binoculars "\f1e5"
fa-plug "\f1e6"
fa-slideshare "\f1e7"
fa-twitch "\f1e8"
fa-yelp "\f1e9"
fa-newspaper-o "\f1ea"
fa-wifi "\f1eb"
fa-calculator "\f1ec"
fa-paypal "\f1ed"
fa-google-wallet "\f1ee"
fa-cc-visa "\f1f0"
fa-cc-mastercard "\f1f1"
fa-cc-discover "\f1f2"
fa-cc-amex "\f1f3"
fa-cc-paypal "\f1f4"
fa-cc-stripe "\f1f5"
fa-bell-slash "\f1f6"
fa-bell-slash-o "\f1f7"
fa-trash "\f1f8"
fa-copyright "\f1f9"
fa-at "\f1fa"
fa-eyedropper "\f1fb"
fa-paint-brush "\f1fc"
fa-birthday-cake "\f1fd"
fa-area-chart "\f1fe"
fa-pie-chart "\f200"
fa-line-chart "\f201"
fa-lastfm "\f202"
fa-lastfm-square "\f203"
fa-toggle-off "\f204"
fa-toggle-on "\f205"
fa-bicycle "\f206"
fa-bus "\f207"
fa-ioxhost "\f208"
fa-angellist "\f209"
fa-cc "\f20a"
fa-ils "\f20b"
fa-meanpath "\f20c"

Chúc các ban thành công!

Hướng Dẫn Thêm Admin Control Panel Vào Blogger

Sau đây mình xin hướng dẫn các bạn thêm 1 thanh control pannel vào blog của mình
Admin Control Panel này do Mybloggerlab.com phát triển, Nó giúp bạn làm việc khá nhanh, Admin Panel này sẽ chỉ hiển thị cho admin hoặc tác giả của blog thấy thế nên nó sẽ chỉ xuất hiện khi bạn đăng nhập vào blogger của mình
Bằng cách sử dụng thanh điều khiển này bạn có thể nhanh chóng post bài viết mới,chỉnh sửa bài viết,chỉnh sửa layout website...
Ảnh Demo :

Ok, và bây giờ là hướng dẫn cách thêm nó vào blog :))

Đầu tiên bạn vào Template >> Edit HTML nếu bạn dùng tiếng việt thì Mẫu >> Chỉnh Sửa HTML
Sau đó bạn tìm thẻ ]]></b:skin> và thêm vào trên nó đoạn code sau:

.admin-controll,.admin-controll *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.admin-controll ul{position:absolute;top:-999em;width:100%}
.admin-controll ul li{width:100%;background:333333}
.admin-controll li:hover{visibility:inherit}
.admin-controll li{float:left;position:relative}
.admin-controll a{display:block;position:relative}
.admin-controll li:hover ul,.admin-controll li.sfHover ul{left:0;top:100%;z-index:99}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul{top:-999em}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul{left:100%;top:0}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul{top:-999em}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul{left:100%;top:0}
.mbl-admin-bar{margin:0;direction:ltr;color:#ccc;font:400 13px/32px "Open Sans",sans-serif;height:32px;position:fixed;top:0;left:0;width:100%;min-width:600px;z-index:99999;background:#222;float:left}
.mbl-admin-bar li a{display:block;color:#999999;padding:7px 15px;font-weight:400;text-decoration:none;font-size:14px}
.mbl-admin-bar li li a{font-size:13px;color:#999999;float:none;padding:0;width:0}
ul.children{color:#999999;background:#333333;font-size:13px;min-width:230px;padding:10px;float:right;margin-left:-98px}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover >a,.mbl-admin-bar li.current-cat >a,.mbl-admin-bar li.current_page_item >a,.mbl-admin-bar li.current-menu-item >a{color:#38b8f0;background:#333333}
.ul.children img{width:80px;height:auto;float:left;margin-right:10px}
ul.children a{margin-top:10px}
li.mright{float:right}
li.mblogo a{padding:3px 15px 3px 15px!important}
ul.child1{min-width:180px;color:#999999;background:#333333}
ul.child1 li a{padding:10px;width:100%;background:#333333}

 Tiếp theo bạn tìm thẻ <body> và thêm vào sau nó :

Code:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
 <span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
  <li class='mblogo'><a href="http://www.mybloggerlab.com"><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/s1600/v.pn'/></a></li>
  <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Dashboard</a></li>

  <li><a href="#"><i class="fa fa-pencil"></i> Posting</a>
<ul class='child1'>
  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> New Post</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> All Posts</a></li>
<li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/>Edit Post</a></li>
  </ul>
</li>
  <li><a href="#"><i class="fa fa-cogs"></i> Customize</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Edit Template</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comments</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> Pending Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> Spam Comments</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Settings</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> Basics</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> Post &amp; Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> Mobile &amp; Email</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> Language</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> Search Preference</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> Other</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>Stats</a></li>
  </ul>
</li>

<li class='mright'><a href='#'><i class='fa fa-signal'/> Howdy, Admin</a>
<ul class='children'>
<li><img src='https://lh6.googleusercontent.com/-qDI9hSzgE0A/Vgzr8s1G4YI/AAAAAAAAAMs/sXZQBeFdr1E/s250-no/clean-professional-logo.png'/>
<div class='mauthor'><br/>Syed Faizan Ali</div>
<a href='http://www.blogger.com/logout.g'> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

Save Template và vào lại web để tận hưởng thành quả 

 JusTa Khôi