Thứ Tư, 25 tháng 5, 2016

Seri hướng dẫn Blogger cơ bản cho người mới

Hiện nay, chúng ta có khá nhiều lựa chọn để xây dựng một Blog cho riêng mình. Trong đó, có hai CMS ( Content Management System ) đang rất được ưa chuộng đó là Wordpress và Blogger. Cả hai nền tảng đều có ưu và nhược điểm riêng song thực sự cả Wordpress và Blogger đều rất đáng để sử dụng.


Tuy Blogger khó có thể so sánh được với Wordpress nhưng Blogger vẫn có những lợi thế hơn hẳn như : miễn phí, dễ dàng cài đặt và sử dụng........ Chính vì thế, tại sao bạn không thử lựa chọn Blogger để xây dựng một Blog cho mình ?

Trong Seri bài viết này, mình sẽ hướng dẫn chi tiết nhất có thể để ngay cả những bạn chưa biết gì cũng có thể sử dụng được Blogger thuần thục. Tuy nhiên, mình cũng xin nhấn mạnh đây chỉ là seri hướng dẫn cơ bản mà thôi, còn để nâng cao hơn nữa hay theo dõi các bài viết thủ thuật khác trên Blog.

Bạn sẽ học được gì trong seri này ?

Minh tin rằng, sau khi theo dõi loạt bài viết này, các bạn sẽ có cái nhìn tổng quan nhất về Blogger cũng như lợi ích, tiềm năng của nó. Bên cạnh đó, bạn sẽ nắm bắt được cách sử dụng các chức năng có sẵn của Blogger

Những ai nên theo dõi seri này ?

Tất cả mọi người. Seri này mình hướng dẫn khá chi tiết để những bạn hoàn toàn chưa biết gì về Blogger cũng có thể nắm bắt được. Chỉ cần bạn có niềm đam mê, chịu khó tìm tòi, học hỏi thì chắc chắn không gì là không thể

Bạn cần chuẩn bị gì trước khi theo dõi seri này ?

Để bắt đầu sử dụng Blogger, có một số điều bạn cần chuẩn bị như sau
  • 1 tài khoản Gmail
  • 1 số kiến thức cơ bản về HTML và CSS ( Không bắt buộc )

Seri này gồm những nội dung gì ?

Đây là nội dung mình sẽ viết trong seri này, các bạn nên xem qua để nắm bắt đươc

Thứ Hai, 23 tháng 5, 2016

Hướng dẫn cách tạo trang 404 cho Blogger

404 là lỗi rất hay gặp, lỗi này xảy ra khi bạn truy cập vào một đường link không còn tồn tại ( do nội dung cũ hoặc lí do nào đó bị xóa ) trên website đó.


Thông thường, để giải quyết lỗi này, các blogger hay tạo trang 404 ( 404 Eror Page ) để thông báo cho người đọc biết rằng liên kết này đã hỏng và điều hướng người dùng đến trang chủ hoặc một liên kết khác.

Hướng dẫn cách tạo trang 404 cho Blogger

Để tạo trang 404 cho Blogger, chúng ta sẽ sử dụng thẻ điều kiện <b:if> , một ít HTML và CSS. Các bạn thêm đoạn code sau vào dưới thẻ <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
.........
</b:if>

trong đó ..... là nội dung bạn muốn hiển thị trên trang 404, có thể là một đoạn text, hoặc một đoạn HTML và CSS

Nếu các bạn không rõ lắm về HTML vs CSS thì có thể sử dụng luôn mẫu mình giới thiệu sau đây


Bước 1 : Chèn đoạn code phía trên thẻ </head>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600&subset=latin,vietnamese' rel='stylesheet' type='text/css'/>

Mình sẽ sử dụng font Open Sans, nếu như các bạn thích sử dụng font này thì sử dụng font khác nhé.

Bước 2 : Chèn đoạn code sau dưới thẻ <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error404'>
<div id='error-text'>
<span>404</span>
<p>Sorry, the page you are looking for could not be found</P>
<p><a  href="http://www.abcxyz.blogspot.com">HOME PAGE</a></p>
</div>
</div>
</b:if>

trong đó abcxyz.blogspot.com là đường dẫn blog của bnaj

Bước 3 : Chèn đoạn code sau phía trên thẻ ]]></b:skin>

#error404{font-family:'Open Sans';text-align:center;font-weight:700;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;background:#039BE6}
#error-text{top:30%;position:relative;font-size:20px;color:#eee}
#error-text span{position:relative;color:#fff;font-size:200px;padding:0 20px;border-radius:5px;font-weight:700;letter-spacing:3px;transition:all .5s}
#error404 p{margin-top:50px;color:#6CC5F1}
#error-text a{padding:15px 20px;border-radius:20px;border:1px solid #fff;color:#fff;text-decoration:none;font-weight:400}

Bước 4 : Save template lại và test

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

Thứ Bảy, 21 tháng 5, 2016

The One Template Blogger - Template Blogger đơn giản, responsive

Đây là mẫu template mình lấy ý tưởng từ một theme wordpress của 7uptheme. Mẫu template nhìn chung cũng khá đơn giản, phù hợp cho các blog chia sẻ thủ thuât, game, phim....



Một số tính năng
  • Responsive
  • Tối ưu hóa SEO
  • Ads Ready
  • Breadcrumb
  • Mobile Friendly
  • Bài viết liên quan 
  • Button mạng xã hội, chia sẻ bài viết 
  • Bài viết mới nhất
  • Author Box
  • .......
Hướng dẫn cài đặt

1. Thay Logo

<!-- Logo -->
  <a href='/'><img src='https://lh3.googleusercontent.com/-15Ye4ooxcdY/VyBW0rhImwI/AAAAAAAAC2c/vQ0SV7aO6DoXlLrmmez0WYJ5YIn9ekalgCCo/s240/logo.png'/></a>
<!-- Logo -->

2. Chỉnh sửa Menu 

<!-- Menu -->
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Featured</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='#'>Business</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='#'>Mobile</a></li>
<li><a href='/'>Fashion</a></li>
<li><a href='/'>Shop</a></li>
<li><a href='/'>Travel</a></li>
<li><a href='/'>Spot</a></li>
</ul>
<!-- Menu -->

Menu ở Footer

<!-- Menu Footer -->
<ul>
<li><a href='#'>SUBSCRIBE</a></li>
<li><a href='#'>ADVERTISE</a></li>
<li><a href='#'>SITE MAP</a></li>
<li><a href='#'>PRESS CENTER</a></li>
<li><a href='#'>CUSTOMER CARE</a></li>
<li><a href='#'>CONTACT US</a></li>
<li><a href='#'>NEWSLETTER</a></li>
<li><a href='#'>WIRED STAFF</a></li>
<li><a href='#'>JOBS</a></li>
<li><a href='#'>RSS</a></li>
</ul>
<!-- Menu Footer -->

3. Chỉnh sửa button mạng xã hội

<!-- Social Footer -->
<ul>
  <li><a class='s1' href='#'><i class='fa fa-facebook'/></a></li>
  <li><a class='s2' href='#'><i class='fa fa-twitter'/></a></li>
  <li><a class='s3' href='#'><i class='fa fa-google-plus'/></a></li>
  <li><a class='s4' href='#'><i class='fa fa-youtube'/></a></li>
  <li><a class='s5' href='#'><i class='fa fa-pinterest'/></a></li>
  <li><a class='s6' href='#'><i class='fa fa-instagram'/></a></li>
</ul>
<!-- Social Footer -->

4. Chỉnh sửa Author Box 

<!-- Author Box -->
<div class='author-name'>
ABOUT AUTHOR / The One
  </div>
<div class='author-content'>
<div class='author-ava'>
<a href='#'><img alt='' class='avatar avatar-96 photo avatar-default' height='96' src='http://0.gravatar.com/avatar/?s=96&amp;d=mm&amp;r=g' srcset='http://0.gravatar.com/avatar/?s=192&amp;d=mm&amp;r=g 2x' width='96'/>  </a>
</div>
<div class='author-info'>
<p>Suspendisse potenti. Maecenas tristique condimentum lectus, a convallis nulla pellentesque a. Quisque ut est vitae leo finibus pharetra quis id sem. Integer quis eleifend felis, lacinia blandit dolor. Integer fringilla posuere dictum. Fusce lobortis eu mi id mattis. Nunc eu metus mi. Sed ac elementum tellus.</p>
<ul class='author-social'>
<li><a href='#'><i class='fa fa-google-plus'/></a></li>
<li><a href='#'><i class='fa fa-facebook'/></a></li>
<li><a href='#'><i class='fa fa-twitter'/></a></li>
<li><a href='#'><i class='fa fa-linkedin'/></a></li>
<li><a href='#'><i class='fa fa-youtube'/></a></li>
<li><a href='#'><i class='fa fa-vimeo'/></a></li>
</ul>
</div>
</div>
<!-- Author Box --> 

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



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

Thứ Hai, 16 tháng 5, 2016

Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

Trong quá trình tối ưu hóa, làm SEO cho Blogspot, chắc chắn các bạn đã nghe đến file robots.txt. Vậy, robots.txt là gì ? Tác dụng của nó là gì ? Tối ưu hóa ra sao ? Bài viết này sẽ giúp bạn trả lời tất cả nhưng câu hỏi trên


Robots.txt là gì ? Tác dụng của nó là gì ?

Robots.txt là một file txt đơn giản có thể được tạo bởi Notepad và chỉ chứa một vài dòng code bên trong đó. Robots.txt được sử dụng để hướng công cụ tìm kiếm đến những trang bạn cần index, đồng thời không cho phép bot index những trang bạn không muốn index. Do đó robots.txt có vai trò khá trong khi làm SEO cho Blogger

Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

Bước 1 : Đăng nhập vào Blogger => Cài đặt

Bước 2 : Chọn Tùy chọn tìm kiếm sau đó để ý phần Trình thu thập thông tin và lập chỉ mục

Bước 3 : Nhấn Chỉnh sửa ở phần Robots.txt tùy chỉnh sau đó chọn



Bước 4 : Chèn đoạn code dưới đây vào và ấn Lưu thay đổi

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html
Sitemap: http://abcxyz.blogspot/feeds/posts/default?orderby=UPDATED

Thay abcxyz.blogspot bằng đường link blog của bạn

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

Thứ Ba, 10 tháng 5, 2016

Cách tạo Sitemap cho Blogger và submit lên Google Webmaster Tool

Trong bài viết hướng dẫn SEO cho Blogspot, mình có đề cập đến vấn đề tạo sitemap và submit lên Webmaster nhưng chưa cụ thể, chi tiết. Bài viết này, mình xin đề cập cụ thể, chi tiết hơn để tất cả các bạn nắm bắt được

Xem thêm : Hướng dẫn cách SEO cho Blogspot toàn tập ( Cập nhật )


Sitemap hay XML Sitemap là gì

"Site" là website, "map" là bản đồ. Như vậy Sitemap chính là một bản đồ thu nhỏ của Blog, nó liệt kê tất cả các liên kết có trên Blog

Tại sao cần tạo và submit sitemap lên Google Webmastertool

Sau khi bạn submit sitemap , các bot tìm kiếm sẽ dễ dàng hoạt động, lần theo các liên kết trong sitemap và đưa nó vào hệ thống lưu trữ của Google. Bên cạnh đó, việc này giúp bot dễ dàng cập nhật các liên kết, từ đó giúp index bài viết nhanh hơn.

Cách tạo Sitemap cho Blogger và submit lên Google 

Bước 1 : Các bạn truy cập vào https://www.google.com/webmasters/tools, đăng nhập và lựa chọn website cần submit sitemap

Giao diện làm việc
Bước 2 : Tại cột phía bên trái, chọn Thu nhập dữ liệu => Sơ đồ trang Web => Thêm/Kiểm tra sơ đồ trang Web



Bước 3 : Chèn đoạn code sau đây vào và nhấn Gửi

atom.xml?redirect=false&start-index=1&max-results=500

Như vậy là đã hoàn thành. Công việc của bạn là đợi Google cập nhật các liên kết trên Blog và thường xuyên vào Webmaster Tool để kiếm tra. Chúc các bạn thành công

Thứ Năm, 5 tháng 5, 2016

Thêm tiện ích Email Subscribe cho Blogger

Tiện ích Email Subscribe là một tiện ích khá quan trọng đối với các Blog. Tiện ích này có thể đem lại một lượng truy cập ( traffic ) khá lớn, đều đặn thông qua việc gửi email thông báo bài viết mới tới độc giả. Cụ thể, khi một độc giả Subscribe trên Blog của bạn tức là đồng ý theo dõi Blog, họ sẽ nhận được email thông báo mỗi khi bạn update bài viết mới.



Tiện ích Email Subscribe mình giới thiệu trong bài viết này sẽ sử dụng Feedburner. Feedburner là một dịch vụ tạo nguồn cấp RSS cho website với một số chức năng như tự động gửi bài viết qua email, thống kê người đọc RSS.... 

Để tạo nguồn cấp RSS cho Blog, các bạn vào feedburner.google.com sau đó đăng kí với email và địa chỉ Blog của mình. Cuối cùng, copy phần username để sử dụng về sau

Thêm tiện ích Email Subscribe cho Blogger


Bước 1 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Do mình sử dụng font Roboto và icon từ Font Awesome nên mới thêm đoạn code trên, bạn nào am hiểu thì có thể tự tùy chỉnh lại

Bước 2 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>

#subscribe-box {width: 355px;max-width: 100%;margin: 0 auto;background: url('https://lh3.googleusercontent.com/-L0_icbQHvEE/VytOKAzj1KI/AAAAAAAAC94/pnK13TfWtmckvfXrlrwm8qiR28KTCwz7ACCo/s355/header.png') no-repeat #fff;background-size: 100% 10px;height: auto;padding-top: 10px;padding-bottom: 20px;font-family: 'Roboto';border-radius: 8px;border: 1px solid #e3e3e3;}
.subscribe-text {background: #f7f7f7;padding: 30px 50px;tet-align: center;color: #b8b8b8;font-size: 30px;font-weight: 300;}
.emailfield {padding: 4%;padding-bottom: 0;}
#subscribe-box .emailfield input {background: #f9f9f9;color: #b8b8b8;padding: 15px 10px;margin-top: 10px;font-size: 13px;border: 2px solid #EBEBEB;border-bottom: 4px solid #EBEBEB;border-radius: 8px;width: 92%;transition: all 0.4s ease-in-out;font-family: 'Roboto';}
#subscribe-box .emailfield input:focus {background: #fff;outline: none;color: #888;}
#subscribe-box .emailfield .submitbutton {background: #F27669;font-family: 'Roboto';color: #fff;font-weight: 700;font-size: 18px;border: none;border-radius: 8px;border-bottom: 4px solid #D96A5D;outline: none;width: 100%;cursor: pointer;transition: all 0.4s ease-in-out;margin-bottom: 10px;}
#subscribe-box .emailfield .submitbutton:active {outline: none;border: none;background: #D96A5D;color: #fff;}
#subscribe-box .emailfield .submitbutton:hover {background: #D96A5D;color: #fff;}
.subscribe-social {color: #b8b8b8}
.subscribe-social {display: block;text-align: center;}
.subscribe-social p {margin-bottom: 30px;}
.icon-button {padding: 10px 15px;color: #fff;text-decoration: none;border-radius: 8px;}
.icon-button i {margin-right: 3px;}
.twitter {background: #5DC2E6;}
.facebook {background: #578EE8;}

Bước 3 : Tạo một Widget HTML/Javascript mới trong Bố cục và điền đoạn code dưới đây vào

<div id="subscribe-box">
<div class='subscribe-text'>Sign up in seconds</div>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Sign me up!" />
</form>
</div>
<div class='subscribe-social'>
<p>..or you can skip that and sign up via</p>
<a class="icon-button twitter" href="#" rel="nofollow" target="_blank" title="Twitter Tweet"><i class="fa fa-twitter"></i><span>Twitter</span></a>
<a class="icon-button facebook" href="#" rel="nofollow" target="_blank" title="Facebook Share"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</div>
</div>

thay toàn bộ USER-NAME bằng username bạn lấy ở trên và đường dẫn của icon Facebook, Twitter

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


Simple Fast Seo - Template Blogger Responsive, thân thiện SEO

Simple Fast SEO là mẫu template blogger có thiết kế khá đơn giản nhưng tương đối đầy đủ các tính năng cần thiết cho một Blog. Template này có thể hiển thị tốt trên các kích thước màn hình khác nhau Desktop, Table, Mobile...



Một số tính năng
  • Responsive
  • Tốc độ Load nhanh
  • 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
  • Bài viết mới nhất
  • Breadcrumb
  • Mobile Friendly
  • ....
Hướng dẫn cài đặt

1. Thiết lập Menu

Menu trên cùng + Button mạng xã hội

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>404</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<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>
 </ul>

Menu trên cùng khi hiển thị trên Mobile

<select class='sfs-menu-1-mobile' id='sfs-menu-1-mobile'>
<option value='#'>Home</option>
<option value='#'>About</option>
<option value='#'>Contact</option>
<option value='#'>404</option>
<option value='#'>About</option>
<option value='#'>Sitemap</option>
</select>

Menu chính

<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>

2. Thiết lập Subscribe Box

<div class='subscribebox'>
<h4>Subscribe via Email</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=nguyentien&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
<input id='subscribe-input' name='email' placeholder='Email Address..' type='text'/>
<input name='uri' type='hidden' value='nguyentien'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe-button' type='submit' value='Subscribe Now'/>
</form>
</div>

3. Thiết lập Logo

Các bạn vào Bố cục, chỉnh Widget giống trong hình


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

<div class='sfs-head-ads'><a href='#'><img src='https://lh3.googleusercontent.com/-x-ZbkHe1_q4/VyoC6qWluwI/AAAAAAAAC88/9GYixFNwcugpHn_qTWskb3Q3BIkk7HZKACCo/s1024/top-ad.jpg'/></a> </div>

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


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



Thứ Tư, 4 tháng 5, 2016

Hướng dẫn tạo tiện ích Breaking New cho Blogger

Tiện ích Breaking New là tiện ích khá phổ biến ở các trang báo chí, tin tức... được dùng để hiển thị các bài viết mới trên Blog. Có thể thấy, tiện ích này có tính năng khá giống với tiện ích Recent Post mình đã giới thiệu nhưng có ít tính năng, giao diện đơn giản hơn.



Bước 1 : Thêm đoạn CSS dưới đây vào phía trên thẻ ]]></b:skin>

#breaking-new {display: block;float: left;height: 40px;line-height: 20px;overflow: hidden;width: 100%;border:1px solid #e3e3e3;}
.breaking-new-title {background: #66cc99; color: #fff;display: block;float: left; font: bold 12px/22px;padding: 9px;position: absolute;}
#breaking-new-post {float: left; margin-left: 100px;}
#breaking-new-post ul,
#breaking-new-post li {list-style: none; margin: 0; padding: 0;}
#breaking-new-post li {height:40px;}
#breaking-new-post li a {background: none !important;color: #333 !important;font: bold 12px/22px;text-decoration: none;line-height:40px;display:block;}

Bước 2 : Thêm đoạn Script vào trên thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var url_blog = 'http://simplefastseo-nt.blogspot.com', // Replace With your Blog Url
    numpostx = 20; // Maximum Post
  $.ajax({
    url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      var posturl, posttitle, skeleton = '',
        entry = data.feed.entry;
      if (entry !== undefined) {
        skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
          for (var j = 0; j < entry[i].link.length; j++) {
            if (entry[i].link[j].rel == "alternate") {
              posturl = entry[i].link[j].href;
              break;
            }
          }
          posttitle = entry[i].title.$t;
          skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
        skeleton += '</ul>';
        $('#breaking-new-post').html(skeleton);
        function tick() {
          $('#breaking-new-post li:first').slideUp(function() {
            $(this).appendTo($('#breaking-new-post ul')).slideDown();
          });
        }
        setInterval(function() {
          tick()
        }, 5000);
      } else {
        $('#breaking-new-post').html('<span>No result!</span>');
      }
    },
    error: function() {
      $('#breaking-new-post').html('<strong>Error Loading Feed!</strong>');
    }
  });
});
//]]>
</script>

Thay http://simplefastseo-nt.blogspot.com bằng link blog của bạn

Bước 3 : Thêm đoạn code này vào vị trí muốn hiển thị Breaking New

<div id='breaking-new'><span class='breaking-new-title'>Latest Post</span>
<div id='breaking-new-post'>Loading...</div>
</div>

Bước 4 : Save Template

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