Simple Blog 1 - Template Blogger nhẹ, load nhanh

Simple Blog 1 là mẫu giao diện đơn giản, 2 cột, màu sắc tươi sáng. Mẫu template này mình đã tối ưu hóa một số chỗ để đặt được tốc độc load khá nhanh tuy nhiên vẫn đầy đủ các tính năng cần thiết

Demo - Download

Điểm nổi bật 

• Tộc độ Load nhanh - Kiểm tra
• Responsive - Kiểm tra
• Tối ưu hóa SEO
• Hỗ trợ đặt Ads
• Bài viết liên quan
• Button mạng xã hội, chia sẻ bài viết
• Trang 404
• ....

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

1. Thiết lập Logo

<!-- Logo Start -->
....
<img alt='Simple Blog1' src='https://lh3.googleusercontent.com/-6CNRtpDd6tE/VyV7B8qKRyI/AAAAAAAAC70/P4J8jvCsUyI8gwzvgIt1gcKuaaCwBTXZgCCo/s534/logo.png'/>
....
<!-- Logo End -->

2. Thiết lập Menu

<!-- Menu Start -->
....
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
</ul>
....
<!-- Menu End -->

3. Thiết lập Button mạng xã hội

<!-- Social Button Start -->
<li class='social'><a href='#'><i class='fa fa-rss'/></a></li>
<li class='social'><a href='#'><i class='fa fa-instagram'/></a></li>
<li class='social'><a href='#'><i class='fa fa-google'/></a></li>
<li class='social'><a href='#'><i class='fa fa-twitter'/></a></li>
<li class='social'><a href='#'><i class='fa fa-facebook'/></a></li>
<!-- Social Button End -->

4. Thiết lập xem Blog trên Mobile

5. Thiết lập quảng cáo

<div class='post-ads'>
<a href='#'><img src='https://lh3.googleusercontent.com/-ADueFXWoFUg/VyQeIDqb5rI/AAAAAAAAC5A/EhY0KFFVkowMveWrwG0xgQ1qkndSTOmtACCo/s400/ads-head.png'/></a>
 </div>

Lời kết : Đây là template đầu tiên mình thiết kế và chia sẻ, mong được sự góp ý của các bạn

Recent Post có thumbnail cho Blogger

Recent Post ( Bài đăng mới nhất ) là tiện ích giúp bạn thông báo tới người đọc những bài viết mới nhất trên Blogger của mình. Cũng giống như Related Post thì tiện ích Recent Post rất cần thiết đối với các Blog, thế nhưng mặc định Blogger lại không hỗ trợ tiện ích này, vô cùng đáng tiếc.

Bài viết này, mình sẽ hướng dẫn các bạn tạo tiện ích Recent Post cho Blogger. Mẫu Recent Post này có đặc điểm là hiển thị thumbnail ( hình thu nhỏ ), thu gọn bài viết, ngày tháng năm...

Recent Post có thumbnail cho Blogger

Bước 1 : Đăng nhập vào Blog => Bố cục ( Layout ) => Thêm tiệc ích HTML/Javascript => Chèn đoạn code dưới đây vào

<script style='text/javascript' src='https://googledrive.com/host/0B8m8ZEdYUIBwakxYaHNHNW1oQ2M/'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Tùy chỉnh : Các bạn để ý đoạn code sau, sửa lại theo ý muốn, true là có, false là không

var numposts : Số bài viết hiển thị
var showpostthumbnails : Hiển thị Thumbnail hay không
var displaymore  : Hiển thị đường dẫn đọc tiếp ( Readmore )
var displayseparator : Không cần quan tâm
var showcommentnum : Hiển thị số lượng comment
var showpostdate : Hiển thị ngày tháng
var showpostsummary : Hiển thị nội dung thu gọn bài viết
var numchars : Số lượng kí tự nội dung thu gọn

Bước 2 : Thêm đoạn code sau vào phía trên để được mẫu tiện ích giống như trong ảnh demo

/* Recent Post Start */
ul.recent_posts_with_thumbs {padding:0;list-style:none;}
li.clearfix {clear:both;padding-bottom:10px;margin-bottom:10px;}
img.recent_thumb {width:72px;height:72px;margin-right:10px;float:left;}
.recent-post-sum {padding:5px 0px;}
/* Recent Post End */

Bước 3 : Save Template lại.

Chúc các bạn thành công

Tiện ích bài đăng liên quan cho Blogger

Tiện ích bài đăng liên quan hay Related Posts là một tiện ích khá cần thiết với các Blog. Tiện ích này giúp tăng thời gian người đọc ở trên website của bạn bằng cách gợi ý cho họ đọc các bài viết khác cùng chuyên mục.

Mẫu bài đăng liên quan này là do một Blogger người Châu Á ( 90% là người Indonesia ) viết ra và được sử dụng ở rất nhiều Blog. Ưu điểm của tiện ích này so với một số mẫu Related Post khác chính là tính năng. Tiện ích này hỗ trợ các bạn hiển thị hình ảnh thu nhỏ ( thumbnail ), tiêu đề, tóm tắt nội dung, đường dẫn đọc thêm ( read more ), tooltip.... Các bạn có thể xem qua demo tại đây

Tiện ích bài đăng liên quan cho Blogger

Bước 1 : Chèn đoạn code dưới đây vào trên thẻ đóng </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[  
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex, showRelatedPost;
(function(n, m, k) {
  var d = {
    widgetTitle: "<h4>Artikel Terkait:</h4>",
    widgetStyle: 1,
    homePage: "http://www.dte.web.id",
    numPosts: 7,
    summaryLength: 370,
    titleLength: "auto",
    thumbnailSize: 72,
    noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    containerId: "related-post",
    newTabLink: false,
    moreText: "Baca Selengkapnya",
    callBack: function() {}
  };
  for (var f in relatedPostConfig) {
    d[f] = (relatedPostConfig[f] == "undefined") ? d[f] : relatedPostConfig[f]
  }
  var j = function(a) {
      var b = m.createElement("script");
      b.type = "text/javascript";
      b.src = a;
      k.appendChild(b)
    },
    o = function(b, a) {
      return Math.floor(Math.random() * (a - b + 1)) + b
    },
    l = function(a) {
      var p = a.length,
        c, b;
      if (p === 0) {
        return false
      }
      while (--p) {
        c = Math.floor(Math.random() * (p + 1));
        b = a[p];
        a[p] = a[c];
        a[c] = b
      }
      return a
    },
    e = (typeof labelArray == "object" && labelArray.length > 0) ? "/-/" + l(labelArray)[0] : "",
    h = function(b) {
      var c = b.feed.openSearch$totalResults.$t - d.numPosts,
        a = o(1, (c > 0 ? c : 1));
      j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + d.numPosts + "&callback=showRelatedPost")
    },
    g = function(z) {
      var s = document.getElementById(d.containerId),
        x = l(z.feed.entry),
        A = d.widgetStyle,
        c = d.widgetTitle + '<ul class="related-post-style-' + A + '">',
        b = d.newTabLink ? ' target="_blank"' : "",
        y = '<span style="display:block;clear:both;"></span>',
        v, t, w, r, u;
      if (!s) {
        return
      }
      for (var q = 0; q < d.numPosts; q++) {
        if (q == x.length) {
          break
        }
        t = x[q].title.$t;
        w = (d.titleLength !== "auto" && d.titleLength < t.length) ? t.substring(0, d.titleLength) + "&hellip;" : t;
        r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
        u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "&hellip;" : "";
        for (var p = 0, a = x[q].link.length; p < a; p++) {
          v = (x[q].link[p].rel == "alternate") ? x[q].link[p].href : "#"
        }
        if (A == 2) {
          c += '<li><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + '</span> <a href="' + v + '" class="related-post-item-more"' + b + ">" + d.moreText + "</a></span>" + y + "</li>"
        } else {
          if (A == 3 || A == 4) {
            c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + v + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></div>" + y + "</li>"
          } else {
            if (A == 5) {
              c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + v + '" title="' + t + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-tooltip">' + w + "</span></a>" + y + "</li>"
            } else {
              if (A == 6) {
                c += '<li><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + "</span></span>" + y + "</div></li>"
              } else {
                c += '<li><a title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></li>"
              }
            }
          }
        }
      }
      s.innerHTML = c += "</ul>" + y;
      d.callBack()
    };
  randomRelatedIndex = h;
  showRelatedPost = g;
  j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);
//]]>  
</script>
</b:if>

Bước 2 : Chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị tiện ích. Theo mình vị trí hợp lí là ở phía dưới bài viết, tức là chèn vào phía dưới thẻ <div class='post-footer'>

<!-- Related Post Widget Start -->
  <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
  &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop></b:if>];
  var relatedPostConfig = {
  homePage: &quot;<data:blog.homepageUrl/>&quot;,
  widgetTitle: &quot;&lt;h4&gt;Related Posts :&lt;/h4&gt;&quot;,
  numPosts: 5,
  summaryLength: 100,
  titleLength: &quot;auto&quot;,
  thumbnailSize: 60,
  noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NksjHamBO2GWnEYmJo4uTieqyseH-XPGjPnOwc-aP2QfjIfYp1596kqUx8PrC0lkkBLBJGrCUEVl7jhchUAaOdT6rdBEmpMRnYvM1Auftt-6BvFKaN6CHlvYnUnPM_SFNKFY_zA7xPmT/w60-c-h60/no-image.png&quot;,
  containerId: &quot;related-post&quot;,
  newTabLink: false,
  moreText: &quot;Read More...&quot;,
  widgetStyle: 2,
  callBack: function() {}
  };
  </script>
<!-- Related Post Widget End -->

Điều chỉnh :

• numPosts : Số bài viết hiển thị
• summaryLength : Số kí tự của nội dung trích dẫn
• titleLength : Chiều dài tiêu đề ( không khuyến kích điều chỉnh )
• thumbnailSize : Kích thước hình ảnh
• noImage : Hình ảnh mặc định khi bài viết không có hình ảnh
• moreText : Đường link đọc thêm. Thay Read More bằng Đọc thêm, Đọc tiếp hay gì gì đó

Bước 3: Tùy chỉnh giao diện của tiện ích bằng cách  thêm đoạn code CSS dưới đây vào trên thẻ   ]]></b:skin>. Đây là đoạn CSS mình sử dụng trong Demo phía bên trên, các bạn hoàn toàn có thể chỉnh sửa lại nếu không thích

.related-post {
  padding-bottom: 10px;
  margin-top: 10px;
  border-bottom: 1px solid #e3e3e3;
}
.related-post ul {
  padding: 0;
}
.related-post-item-thumbnail {
  float: left;
  margin-right: 8px;
}
.related-post-item-title {
  display: block;
  font-weight: 700;
  color: #111;
  font-size: 14px;
  margin-bottom: 4px;
}

Bước 4 : Save template lại.

Lời kết : Tiện ích bài đăng liên quan không những góp phần giúp bạn SEO tốt cho Blog mà còn tăng đáng kể lượt xem bài viết trên Blog. Chính vì những ưu điểm đó, các bạn nên thêm ngay tiện ích này vào Blog của mình. Bài viết trên đây chưa khai thác hết toàn bộ các tính năng của mẫu tiện ích này, mà chỉ khai thác các tính năng cơ bản. Bạn nào có khả năng thì có thể tự nghiên cứu thêm. Chúc các bạn thành công

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Khung thông tin tác giả ( Author Box ) là một widget nhỏ nhưng khá hữu ích, nó giúp người đọc có thể dễ dàng tìm thấy thông tin về tác giả bài viết.

Một số đặc điểm nổi bật

• Dễ dàng sử dụng
• Responsive.
• Button mạng xã hội.
• Giao diện đơn giản.

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mình sẽ sử dụng FontAwesome để tạo icon cho mạng xã hội, nên nếu bạn nào chưa thêm FontAwesome vào Blog thì thêm vào nhé.

Bước 2 : Thêm đoạn code dưới đây vào phía sau thẻ <div class='post-footer'> hoặc bất kì chỗ nào bạn muốn để khung tác giả

<div class="post-author-box">
<div class='post-author-box-content'>
<div class="post-author-box-image">
<img alt="" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrrla5wRDXfwde8nhGRz2nCZfIywOmJJ-NGyDrsc4b-XTEH0JUwuBPKQecAIEG1S8XPK1a2f5_IYDhOMsFdD4ag75i0hlwteQR3W1-ltaU-hfiXb9gzVMBgve7oaIz_bQE7MTLacPGdXD/s1600/business_Fotolia-Subscription-Monthly_145K.jpg" width="100">
</div>
<div class="post-author-box-name">
<h4>Nguyễn Quang Tiến</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class='post-author-box-social'>
<a href='#'><i class="fa fa-facebook"></i></a>
<a href='#'> <i class="fa fa-twitter"></i></a>
<a href='#'> <i class="fa fa-google-plus"></i></a>
<a href='#'> <i class="fa fa-linkedin"></i></a>
<a href='#'><i class="fa fa-pinterest"></i></a>
</div>
</div>

Các bạn chỉnh sửa lại các thông tin về tác giả và đường link mạng xã hội cho đúng

Bước 3 : Thêm đoạn code dưới đây vào trên thẻ ]]></b:skin>

.post-author-box-content {border : 1px solid #11A3D4;min-height:100px;padding:15px;border-bottom:none;color:#2D3438;}
.post-author-box-image img {float:left;border-radius:50%;margin-right:35px;width:100px;height:100px;}
.post-author-box-name h4 {color:#11A3D4;font-wight:bold;font-size:20px;margin-top:10px;margin-bottom:0;}
.post-author-box-social {clear:both;background-color:#11A3D4;padding:10px 15px;color:#fff;font-size:20px;}
.post-author-box-social a {margin-right:10px;color:#fff;}
@media screen and (max-width:640px) {
.post-author-box {text-align:center;}
.post-author-box-image img {float:none;margin:0 auto;}
}

Cuối cùng Save template lại. Chúc các bạn thành công

Cách thêm button chia sẻ mạng xã hội cho Blogger

Button chia sẻ mạng xã hội ( Social Share Button ) là một widget cần thiết mà mọi Blog nên có. Đây là một cách thức hiệu quả và miễn phí để tăng truy cập cho Blog. Khi người đọc tìm được một thông tin, một bài viết hữu ích trên Blog của bạn, họ sẽ muốn chia sẻ nó lên mạng xã hội và đã gián tiếp quảng bá cho Blog của bạn.

Bài viết này mình sẽ hướng dẫn các bạn cách thêm button chia sẻ mạng xã hội vào Blogger cụ thể, là vào phần bài viết.

Demo

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mục đích của việc này là chúng ta sẽ sử dụng Font Awesome để tạo các icon, biểu tưởng mạng xã hội

Bước 2 : Thêm đoạn code dưới đây vào vị trí bạn muốn hiển thị button

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet' class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share' class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>

<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share' class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' class="icon-button linkedin "><i class="fa fa-linkedin"></i><span></span></a>

<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' class="icon-button pinterest "><i class="fa fa-pinterest-p"></i><span></span></a>

Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-header'>
Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-footer'>

Bước 3 : Thêm đoạn code vào trên thẻ ]]></b:skin> để thấy hiệu ứng

.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}

.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;width:0}

.icon-button:hover span{width:40px;height:40px;border-radius:40px;margin:-20px}

.icon-button:hover i{transform:rotate(360deg)}

.twitter span{background-color:#4099ff}

.facebook span{background-color:#3B5998}

.google-plus span{background-color:#db5a3c}

.linkedin span{background-color:#0976b4}

.pinterest span{background-color:#cc2127}

.icon-button i{background:none;color:white;height:40px;left:0;line-height:40px;position:absolute;top:0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;width:40px;z-index:10}

.icon-button .fa-twitter{color:#4099ff;border:1px solid #4099ff;border-radius:40px}

.icon-button .fa-facebook{color:#3B5998;border:1px solid #3B5998;border-radius:40px}

.icon-button .fa-google-plus{color:#db5a3c;border:1px solid #db5a3c;border-radius:40px}

.icon-button .fa-linkedin{color:#0976b4;border:1px solid #0976b4;border-radius:40px}

.icon-button .fa-pinterest-p{color:#cc2127;border:1px solid #cc2127;border-radius:40px}

.icon-button:hover i{color:white;border:none}

Lưu lại

Vậy là OK, giờ các bạn F5 lại Blog để xem thành quả, nếu có vướng mắc gì hãy để lại comment để được giúp đỡ. Chúc các bạn thành công

Selfy Blogger Template - Template cá nhân đơn giản

Selfy là template blogger đơn giản, tông màu chủ đạo là trắng và vàng. Mẫu giao diện này rất phù hợp với các blog cá nhân song bạn hoàn toàn có thể sử dụng cho các blog có nội dung khác. Đây là mẫu template được mình convert từ wordpress nên mình xin giữ nguyên tên của giao diện

Một số tính năg nổi bật

• 100% Responsive - Kiểm tra
• Tối ưu hóa SEO
• Tích hợp button chia sẻ bài viết
• Tích hợp Bài viết mới ( Recent Post )
• Tích hợp Bài viết liên quan
• Author Box
• Search Box
• Menu phân cấp
• Breadcrumb

Demo Download

Đây là template đầu tiên do Blog chia sẻ, mong các bạn góp ý để hoàn thiện và phát triển. Bạn nào copy thì nhớ ghi nguồn cho mình. Xin cảm ơn

Hướng dẫn tạo Breadcrumb cho Blogger

Breadcrumb là gì

Breadcrumb là một menu gồm các đường link phân cấp giúp người đọc định vị được vị trí của mình trên một trang web. Breadcrumb trở nên cực kì hữu ích nếu Blog của bạn có nhiều label khác nhau

Breadcrumb dùng để làm gì

Như đã nói ở trên, Breadcrumb sẽ giúp người đọc biết được mình đang ở vị trí nào, mục vào của Blog. Đồng thời, nó cũng giúp độc giả dễ dàng di chuyển đến các label chứa bài viết học đang đọc hoặc các trang khác trên Blog, từ đó tăng tỉ lệ click trên Blog

Bên cạnh đó, Breadcrumb cũng rất quan trọng trong việc SEO cho Blogger. Nó góp phần xây dựng hệ thống backlink nội bộ và tỉ lệ chuyển đổi giữa các trang trên Blog. Chính vì tầm quan trọng này mà Google hiển thị cả Breadcrumb trên kết quả tìm kiếm

Hướng dẫn tạo Breadcrumb cho Blogger

Bước 1 :  Các bạn tìm kiếm đoạn code <b:include data='top' name='status-message'/> trong template của mình sau đó thêm vào bên dưới nó đoạn code sau

<b:include data='posts' name='breadcrumb'/>

Như vậy,Breadcrumb sẽ hiển thị phía trên bài viết ( giống như trên Blog của mình )

Bước 2 : Tiếp tục tìm kiếm đoạn code <b:includable id='main' var='top'> và thêm vào bên trên nó đoạn code sau

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

» sẽ được dùng để ngăn cách giữa các đường link, bạn có thể thay thế bằng dấu - hoặc / túy ý thích

Đến đây, bạn đã tạo Breadcrumb cho Blog thành công, nếu như muốn làm đẹp thêm một chút thì tiếp tục bước 3.

Bước 3 : Các bạn thêm vào phía trên ]]></b:skin> đoạn CSS sau

.breadcrumbs {
margin-bottom:15px;
}
.breadcrumbs a {
padding: 4px 12px;
border: 1px solid #dđ;
border-radius: 30px;
text-decoration:none;
transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}
.breadcrumbs a:hover {
padding:4px 20px;
}

Chúc các bạn thành công.

Hiển thị bài viết trên trang chủ dưới dạng lưới (Grid) cho Blogger

Như đã nói trong bài trước, bài viết này mình sẽ hướng dẫn các bạn cách hiển thị bài viết dưới dạng lưới cho Blogger. Đây là một cách khá hay, hữu ích để các bạn tăng tính thẩm mĩ và độ chuyên nghiệp cho giao diện của blogger.

Trước khi, bắt đầu vào thủ thuật này, các bạn hãy đọc bài viết hướng dẫn tạo auto readmore cho blogger trên blog của mình vì mình sẽ áp dụng nó để thu gọn bài viết trên trang chủ. 

Xem thêm : Hướng dẫn tạo Auto Readmore cho Blogger

Kết quả cuối cùng các bạn xem tại đây

Hiển thị bài viết trên trang chủ dưới dạng lưới (Grid) cho Blogger

Bước 1 : Thu gọn bài viết hiển thị trên trang chủ. Mình sẽ lựa chọn auto readmore có sử dụng javascript và chỉnh phần trích dẫn 180 kí tự

Bước 2 : Để hiển thị dưới dạng lưới, chúng ta sẽ chỉnh chiều rộng ( width ) của bài viết và sử dụng float để tự động chèn vào vị trí trống. Cụ thể, các bạn chèn đoạn code này phía dưới thẻ </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Ở đây, vì mình muốn hiển thị grid 3 cột nên sẽ để width là 33.3333%, còn nếu các bạn muốn hiển thị 2 cột thì để 50%, hoặc 4 cột......

Như vậy là xong, nếu như các muốn thêm hiệu ứng khi hover như trong demo thì làm tiếp bước 3.

Bước 3 : 

Đầu tiên, các bạn phải sử dụng mẫu auto readmore như mình đã giới thiệu thì mới thấy được hiệu ứng

Thêm đoạn code dưới đây vào vị trí như trong hình ( phía sau +post_thumb_height+'px" /> )

<div class="overlay"></div>

Bước 4 :

Thay thế đoạn code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

ở phía trên bằng đoạn code dưới đây

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
.posts-thumb {position:relative}
.overlay {
background-color: #000;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0px;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 0;
}
.post:hover .overlay {
opacity:0.3
}
.posts-thumb {-webkit-transition: all 0.5s;
    transition: all 0.5s;overflow:hidden;margin-bottom:15px;}
.post-title {margin-bottom:15px;}
.post:hover .posts-thumb img {transform: scale(1.1) rotate(2deg);transition:0.5s}
</style>
</b:if>
</b:if>

Lời kết : Đây là thủ thuật rất đơn giản nên bài viết xin tạm dừng tại đây. Chúc các bạn thành công