Tích hợp hiệu ứng hộp đèn (Lightbox) cho hình ảnh trong Blogger

Bài viết này mình sẽ hướng dẫn các bạn tích hợp hiệu ứng hộp đèn cho blog. Hiệu ứng hộp đèn nó trông như ảnh này nhé

Bình thường, để thêm hiệu ứng hộp đèn cho blog, bạn chỉ cần làm như sau:
Đăng nhập Blogger ~> Vào Cài đặt ~> chọn Bài đăng và nhận xét ~> Tại cột Hiển thị hình ảnh với hiệu ứng Hộp đèn, chọn Có ~> Sau đó Lưu cài đặt

Tuy nhiên đối với những blog sau khi làm vậy vẫn không hiển thị hiệu ứng hộp đèn thì bạn làm thêm bước nữa:

Vào Mẫu ~> Chỉnh sửa HTML
Tìm đến thẻ <data:post.body/> (Đây là thẻ hiển thị nội dung bài viết)
Với những template mặc định thì <data:post.body/> thường được bao bởi thẻ div này

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>

  Nguyên nhân blog của bạn không hiển thị được hiệu ứng hộp đèn là do template thiếu class='post-body'. Giờ bạn chỉ cần thêm class='post-body' bao quanh thẻ <data:post.body/> là xong

<div class='post-body'>
<data:post.body/>
</div>

Làm xong thì Lưu mẫu lại và xem kết quả nhé.

Chia sẻ bộ thẻ Meta full cho blogger năm 2018

Đây là bộ thẻ Meta Full năm 2018 dành cho blogger bộ thẻ này mình sưu tầm được nên post lên cho các bạn nào cần. Một số thẻ khá mới các bạn có thể tra trên google để tìm hiểu nhé.

<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<meta content='8E9FA6B68F4DC51D2E4130F5237F1DC3' name='msvalidate.01'/>
<meta content='uaJPi95ua-Gq8fhf8PYmJVfehY' name='alexaVerifyID'/>
<meta content='bqCvQd96fKEsDINdw8IsohwclFYFVWsaiGO7zZ1Zfcg' name='google-site-verification'/>
<meta content='de2d42a190998ae52a42b8fcd7f05c12' name='p:domain_verify'/>
<meta content='blogger' name='generator'/>
<meta content='index,follow' name='Googlebot'/>
<meta content='index,follow,noodp' name='robots'/>
<meta content='noodp' name='robots'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='https://www.facebook.com/huynhphung.websfy' property='article:publisher'/>
<meta content='https://www.facebook.com/huynhphungblogger' property='article:author'/>
<link href='https://plus.google.com/u/0/114911979260821967359/posts' rel='publisher'/>
<link href='https://plus.google.com/u/0/114911979260821967359/about' rel='author'/>
<link href='https://plus.google.com/u/0/114911979260821967359' rel='me'/>
<meta content='309376869532794' property='fb:app_id'/>
<meta content='100002919372380' property='fb:admins'/>
<meta content='Copyright @ Tôi Là Quản Trị 2014-2017 © All Rights Reserved.' name='copyright'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/></title>
<meta content='index,follow' name='robots'/>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
</b:if>
<!-- DNS Prefetch -->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<!-- End DNS Prefetch -->
<!-- Full Meta SEO START -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function()
{location.pathname= &quot;&quot;}, 7000); </script>
</b:if>
<!-- TRANG LABEL -->
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta content='index,follow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='noodp,noydir' name='robots'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/></b:if>
<meta content='data:blog.pageName' property='og:site_name'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' expr:title='data:blog.pageName' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link expr:href='data:blog.canonicalHomepageUrl' hreflang='vi' rel='alternate'/></b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<link expr:href='data:blog.canonicalUrl' hreflang='vi' rel='alternate'/>
</b:if></b:if>
<!-- Full Meta SEO END -->

<!-- Local SEO meta start -->
<meta content='Vietnamese' name='geo.country'/>
<meta content='VN-SG' name='geo.region'/>
<meta content='14.058324;108.277199' name='geo.position'/>
<meta content='14.058324, 108.277199' name='ICBM'/>
<meta content='Vietnam' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='vi_VN' property='og:locale:alternate'/>
<meta content='all' name='audience'/>
<meta content='all' name='robots'/>
<meta content='vi' http-equiv='content-language'/>
<meta content='Vietnamese' name='language'/>
<meta content='vi-VN' name='language'/>
<meta content='Vietnamese' name='country'/>
<meta content='VN' name='language'/>
<meta content='Ho Chi Minh' name='city'/>
<meta content='Viet Nam' name='country'/>
<meta content='Ho Chi Minh' name='geo.placename'/>
<meta content='#4080ff' name='theme-color'/>
<meta content='#4080ff' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#4080ff' name='apple-mobile-web-app-status-bar-style'/>
<!-- Local SEO meta end -->
<!-- [ Social Media meta tag ] -->
<meta content='@pc8x' name='twitter:site'/>
<meta content='@pc8x' name='twitter:creator'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- [ Social Media meta tag end ] -->

Nguồn: https://www.toilaquantri.com

Widget Recent post đẹp cho blogspot

1. Đăng nhập blogger - Bố cục - thêm tiện ích - HTML Javascript

Copy đoạn code bên dưới dán vào

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qfW77njb0Lw7Mn35W7sudkUF6c2dlKTe493Weknb8TvIEN_ksi8BZobMtG8_R7dU3k5Q8E4unciYAu-Jm-tSRwp_vbzruHtyg-gKruhKgo65Sna3paaLIjUZoSMEvPYaFNaEmM58FfKF/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Save và hưởng thành quả!

Threaded Comments for Blogger With Awesome Style

Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogspot. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:

<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới

 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Save và hưởng thành quả!

[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Sticky Widget cố định cho Blog là widget sẽ chạy theo màn hình khi cuộn trang xuống hoặc cuộn trang lên.

Với cách cố định Widget này sẽ giúp người truy cập nhanh vào các menu, hoặc bạn cần làm nổi bật một nội dung widget nào đó. Đặc biệt nó rất hay được dùng cho các trang cần cố định banner quảng cáo.

Để thực hiện Code cố định Widget (Sticky widget) khi cuộn trang cho Blogspot các bạn chỉ việc copy toàn bộ đoạn code phía dưới đây và chèn vào trước thẻ </body> trong template blogspot của các bạn.

<style>
.GICO_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>
<script>
//<![CDATA[
StickyWidget("ID Widget"); // enter your widget ID here
function StickyWidget(elem) {
    var GCVN_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
    var width = GCVN_sticky.offsetWidth;
    var iniClass = GCVN_sticky.className + ' GCVN_sticky';
    window.addEventListener('scroll', GICO_sticking, false);
    function GICO_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            GCVN_sticky.className = iniClass + ' GICO_sticking';
            GCVN_sticky.style.width = width + "px";
        } else {
            GCVN_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

 Chú ý: Bạn thay ID Widget thành ID Widget mà bạn muốn cố định.

Tạo Nút Lên Đầu Trang (Back To Top) Cho Blogspot

Hướng dẫn tạo nút Lên đầu trang (Back to top) với hiệu ứng animation cực đẹp cho Blogspot


Bước 1: Đăng nhập vào trang quản lý Blogger.com chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML . Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>

<style type='text/css'>
/* Sonar Effect */
@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
/* To top */
.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219, 0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0) scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0) rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}
.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}
.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0) scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0) rotate(0deg);transition:all .4s;}
.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}
.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s infinite;animation:sonar-effect 1s ease-in-out .1s infinite}
.vikkatotop{bottom:20px;right:20px;}
</style>
<div class='vikkatotop hider'>
<i class='fa fa-angle-up'></i>
</div>
<script type='text/javascript'>
//<![CDATA[
// Back to top button
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
//]]>
</script>

Bước 3: Cuối cùng các bạn chọn Lưu chủ đề và load lại trang của mình để xem thành quả. Chúc các bạn thành công

Hướng dẫn tạo Menu cho Blogspot bằng Widget tùy chỉnh

Bài viết này sẽ hướng dẫn các bạn tạo cho mình Menu blogspot chuyên nghiệp. Như các bạn đã biết việc tạo Menu cho blogspot có rất nhiều cách thường là sử dụng chỉnh sửa trong code là chính. Đối với những bạn lập trình viên hoặc những bạn có kinh nghiệm về Blogger thì không có gì là khó nhưng đối với các bạn mới bước tìm hiểu về blogger cũng như thiết kế web thì không hề dễ dàng tý nào. Bây giờ chúng ta bắt đầu việc tạo Menu này nhé, thực hiện theo các bước bên dưới đây.

Bước 1: Vào chủ đề - Chỉnh sửa HTML . Copy đoạn code bên dưới vào trước thẻ </body>

<script>
//<![CDATA[
$(document).ready(function(){
//this widget was built by Raintemplates.com
var searchtxt = "Search";
var _0xc283=['$.1y($.1m[":"],{o:k(a,c,b){U 0===$(a).n().1j().1o(b[3])}});k V(){$(".t j:H(:o(l))").B(k(){$(e).1x("j:o(l)").18&&$(e).i("a").2q("1h").1a(\'<h K="L://M.N.O/P/h" S="0 0 C.4 C.4" 1z="W" 1O="W"><1Q 29="2k.3 X.6 11.7 1p.5 21.2 X.6 0 F.8 11.7 1H.9 C.4 F.8 " G="#1M"/></h>\');$("<D/>",{I:$(e).1T(".t j:H(:o(l))"),1W:e})})}$(".t").B(k(){1X a=$(e).i("1Y");26(a.J(\':2a("2c")\'))V(),$(e).m("2m","2p"),$(e).m("f","2s"),$(e).m("1f-1g","u-1i"),$(e).i(".v-1k-1l").Z(),$(e).i(".v-1n").m("f","r-w"),$(e).i(".1q").Z(),a.I(\'\\1r!--1s v J 1t u.Q--\\1u<a R="//u.Q">1v 1w</a>\'),$(".x").18?$(e).T(\'<g f="x"></g>\'):$(1A).T(\'<g f="1B-1C x"></g>\'),$(".r-w D j D j a").B(k(){$(e).n($(e).n().1D(/[l]/,""))}),$(".r-w").1a(\'<g f="1E"><a R="1F:1G(0)" f="y-1I"><h G="#1J" S="0 0 z.A 1K.1L" K="L://M.N.O/P/h"><Y f="1N-1" d="1P,z.10.4,3.4,0,0,1,0-4.1R.1S,p.1U-.3-.1V.p,24.p,0,1,1,12.14,1Z.20.2,24.2,0,0,1-13.22-4.23-.p-.25.16,z.10.4,3.4,0,0,1-4.16,27.A,24.28.6,17.6,0,1,0,12.14,6.8,17.19,17.19,0,0,0,15.A,24.2b"></Y></h></a><E 2d-2e="2f-8" 2g="/y" f="2h-E" 2i="2j"><s f="2l-y-s 1b" 2n="q" 1b="\'+2o+\'" 1c="n" 1d=""><s 1d="2r" f="1e" 1c="1e"/></E></g>\');2t U!1;$(e).2u({2v:"1"})});',
"|","split","||||||||||||||this|class|div|svg|find|li|function|_|attr|text|startsWith|39|||input|LinkList|raintemplates|widget|nav|container|search|57|93|each|407|ul|form|112|fill|not|html|is|xmlns|http|www|w3|org|2000|com|href|viewBox|wrapInner|return|raintemplatesmenu|512|91|path|remove|68a3|203|33||53||81||length|62|append|placeholder|type|value|submit|data|version|hasdrop|linklist|trim|item|control|expr|content|indexOf|273|clear|x3c|This|by|x3e|Blogger|Templates|next|extend|width|idlist|rain|contain|replace|searchbox|javascript|void|315|box|dddddd|58|68|888|cls|height|M1|polygon|81L14|37|nextUntil|5l|39A24|appendTo|var|h2|48|8a24||86|33l||27L5|if|0ZM15|4A17|points|contains|4Z|Raintemplates|accept|charset|utf|action|navbar|method|get|386|sb|id|name|searchtxt|listmenu1|addClass|Search|menulist|else|css|opacity",
"","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?_0xc283[4]:b(parseInt(a/e)))+(35<(a%=e)?String[_0xc283[5]](a+29):a.toString(36))};if(!_0xc283[4][_0xc283[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return _0xc283[7]};a=1}for(;a--;)c[a]&&(d=d[_0xc283[6]](new RegExp(_0xc283[8]+b(a)+_0xc283[8],_0xc283[9]),c[a]));return d}(_0xc283[0],62,156,_0xc283[3][_0xc283[2]](_0xc283[1]),0,{}));
});
//]]>
</script>

Bước 2:  Thêm CSS cho nó đẹp hơn ( Mặc định màu nên Menu là màu đen )

<style>
.rain-contain.container{
max-width:1040px;
margin:0 auto;
}
.LinkList{opacity:0;}
.menulist {
width:100%;
height:48px;
background:#333;
color:#fff;
position:relative;
}
.menulist h2 {display:none}
.menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited {
color:#fff;
text-decoration:none;
font-size:15px;
}
.menulist .r-nav ul li {
display:inline-block;
position:relative;
margin:0px 20px;
height:48px;
line-height:48px;
}
.menulist .r-nav ul li ul {
position:absolute;
left:-10px;
min-width: 250px;
background:#222;
opacity:0;
z-index:-1;
}
.menulist .r-nav ul li ul li {
display:block;
border-bottom: 1px solid #555;
}
.menulist .r-nav a:hover {
opacity:0.8;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menulist .r-nav ul li ul li:last-child {
border:none;
}
.menulist .r-nav ul li:hover ul {
opacity:1;
z-index:10;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-name: raintemplates-hang;
animation-name: raintemplates-hang;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.hasdrop svg {
width:13px;
height:13px;
position:relative;
top:3px;
left:8px;
}
.menulist .r-nav ul li:hover svg{
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.search-box svg {
display:none;
}
.r-nav {
position: relative;
width: 100%;
height: 100%;
}
.searchbox form, .searchbox input{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
.searchbox input.sb-search-input.placeholder {
height: 29px;
border: none;
padding-left: 12px;
font-size: 13px;
}
.searchbox .submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtwUAyx3MVQUAzHk85JzaWrDQHkl5VVjUxs3Ku0BhiNZmksyG2r0FLbF6oWhnDBgiBETxs7c2IiaQIcCBCmuEtlVQxG59iSmvsL8KIZNhHClCWZ9WeH54ttGEh_ua9FGHWjbhO_0H2yWh/s50/search.png) no-repeat;
border: none;
height: 16px;
width: 16px;
background-size: 100%;
margin-right: 10px;
font-size: 0px;
}
@-webkit-keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}</style>

Tiếp theo vào trong Bố cục thêm tiện ích - Link List ( Danh sách liên kết)

Phần tiêu đề bạn ghi đầy đủ tên như trong hình nhé.

Cách thêm Menu bạn làm như sau:

New Site Name : Tên menu chính ví dụ tôi đặt là " Trang chủ" sau đó add link

Tương tự bạn tạo thêm các nội dung khác: Ví dụ là là " Giới thiệu". 2 tên này sẽ nằm ngang theo thứ tự khi bạn tạo xong.

Tạo menu con (Sub menu) : ví dụ tôi muốn tạo 1 menu con có tên "Thư ngõ " nằm trong menu "Giới thiệu" . Cách tạo vẫn như cách 1 nhưng ta thêm dấu _ đằng trước nó ví dụ (_Giới thiệu ). Tương tự cho các menu con bên trong.

Bước 3: Thêm thư viện cho Menu 

Copy đoạn code bên dưới vào sau thẻ <head>

 <script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>

Lưu ý: Nếu trong template của bạn đã có thư viện này thì vui lòng bỏ qua bước này.

Chúc các bạn thành công. Bạn có thể comments bên dưới để được hỗ trợ 

Xem demo tại đây: http://navigationdropdown.blogspot.com

Thanks ! https://raintemplates.com

Cách thêm Widget (thêm tiện ích) vào Blogspot

1. Cách thêm một tiện ích widget thông thường

Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên PC8X' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

 Xem nhiều trên PC8X là tiêu đề bạn đặt cho tiện ích

sidebar1, HTML99 là thứ tự của các layer widget. nếu save nó báo đỏ thì đổi số cho khác vì nó rùng lặp. khi tạo cái khác cũng thế

VD: tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích

VD HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rỏ cho

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...

1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cụng để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào

2. Chỉ cho phép widget hiển thị ở từng bài viết

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 Đây là thủ thuật nhằm thêm tiện ích trên toàn bộ các bài viết:

3. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 5. Widget chỉ hiển thị trên các trang Static pages

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Tạo phân trang (Page Navigation) cho Blogspot

Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

 Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ </body> trong Template

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var perPage=10;
 var numPages=2;
 var firstText ='First';
 var lastText ='Last';
 var prevText ='« Previous';
 var nextText ='Next »';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+'/'+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
 //]]>
 </script>
 </b:if>
 </b:if>

 Bước 2: Chỉnh sửa lại URl Label

Ở bước này chúng ta sẽ sửa lỗi không hiển thị phân trang khi xem các bài viết trong 1 Label. Các bạn hãy tìm và sửa tất cả

expr:href='data:label.url'

và bạn sửa nó thành

expr:href='data:label.url + "?&amp;max-results=10"'

 Bước 3: Viết CSS

Chúng ta đều cần phải ngồi viết lại CSS cho nó để nó được đẹp hơn và hòa hợp với Template hiện tại. Vì vậy, mỗi người sẽ có một cách viết CSS riêng. Tuy nhiên, mình cũng xin được chia sẻ đoạn CSS mà mình đã viết sẵn cho những bạn không biết viết CSS hay là không có thời gian,…

Các bạn chỉ việc copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> của mình là được.

#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a, .showpage a, .pagecurrent {font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
 .displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#359BED;text-decoration:none;color: #fff;}
 #blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf {display:none!important}
 #blog-pager .pages {border:none;}

 Đây là một thủ thuật bạn nên thực hiện nếu như blog của mình có nhiều bài viết nhé! Chúc các bạn thành công!

Bài viết tham khảo nguồn tại : https://mocgin.com

Hướng dẫn tạo Recent Post hiển thị theo Label

Bước 1: Vào blogger.com > Template > Edit HTML
Bước 2: Dán code bên dưới vào trên thẻ </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0} .newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;} .newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0} .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden} .newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0} .newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;} .newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .newarlinalabel2 h2:before{content:&#39;\f0c3&#39;;}.newarlinalabel3 h2:before{content:&#39;\f143&#39;;} .newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:right;font-weight:400;} .newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6} .newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726} .newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent} .newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent} .newarlinalabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .newarlinalabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} .newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important} .newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none} .newarlina_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9} .newarlina_right{width:250px;width:47.5%;float:right;margin:0;padding:0} ul.newarlina_thumbs{margin:0;padding:0} ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0} ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px} ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s} ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;} ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9} ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0} ul.newarlina_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden} ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s} ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;} span.newarlina_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none} span.newarlina_title2{font-size:16px;line-height:1.4em;margin:0 0 3px} span.newarlina_title a{color:#333} span.newarlina_title a:hover{color:#ff675c;text-decoration:none} span.newarlina_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0} span.newarlina_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.newarlina_meta a{color:#aaa;display:inline-block} span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px} span.newarlina_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} span.newarlina_meta_comment a:hover{color:#ff675c!important} span.newarlina_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none} @media screen and (max-width:1024px) { .newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;} .newarlina_left {width:50%;float:left;margin:0;padding:0;border-right:none} .newarlina_right {width:46%;float:right;margin:0;padding:0;} ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;} ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;} ul.newarlina_thumbs li {margin:0;padding:0;} span.newarlina_title2 {font-size:20px;line-height:1.2em;} span.newarlina_summary {font-size:14px;}} @media only screen and (max-width:768px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs2 li{border-bottom:0} span.newarlina_summary,.newarlina_left{display:none} span.newarlina_title{margin:0 0 5px} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:480px){ #newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}} @media only screen and (max-width:320px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px) { .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[ function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")} //]]>
</script>
<script type='text/javascript'> var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjNI4QPq4HlogebY-I7FhqN1d5-Is96Jm4Wak86uVhNZ_TfRnlceesjqEGqfcxF7EHvWrKIS2ZZU4og7kfPa2nV4DttjWN-3B9ss0Ss256cvk9eoX2LHqrsU-_S2cyx22GpiNENQkOLLa/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPW7FdOFXkf3ov5zQpnoGMZuxITGObV8huJzPR7BHmKrHWRFQZPo-p82Z2LROj7am7Qg55fhZSQCbJSi69-cRGF6uCcFn_G4Ew4aaN8vClAPY8hwdrxFowOWCqUi3riJsu1SYws0mmgE_n/s1600/newarlinathumb_small.png&quot;; </script>
</b:if>
</b:if>

Bước 3: Sao chép mã dưới đây vào trước 

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newarlinalabel1-wrapper'>
<b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newarlinalabel2-wrapper'>
<b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

Tiếp theo, trở ra phần Bố cục và thêm tiện ích vào, bạn gọi label ra, bằng cách điền tên label bạn muốn hiển thị theo nhãn.

Hướng dẫn tạo nút trở về đầu trang bằng jQuery

Nút trở về đầu trang (back to top hay là scrollTo Top) một ví dụ sử dụng jQuery là một sự cần thiết cho tất cả website hiện nay, tuy nhỏ nhưng rất có ích dành cho các bạn lười kéo chuột chỉ cần bấm vào link sẽ lên trên đầu trang web. Chức năng back to top rất tiện lợi cho người dùng thường được khách hàng yêu cầu khi xây dựng website.

Hôm nay trong bài này mình muốn hướng dẫn các bạn xây dựng tính năng này dựa trên nền jQuery. Miêu tả là khi ở đầu trang thì ta không thấy link back to top nhưng khi kéo xuống 1 đoạn sẽ thấy link và khi bấm nút go to top thì sẽ lên trên đầu trang đồng thời cũng mất đi link go scrollTo Top này.

1. Đầu tiên chúng ta chèn link back to top vào trong website, thường là ở dưới cùng còn năm trong thẻ body hay nói cách khác là trước thẻ đóng của body trong kịch bản HTML.

<a class="on_top" href="#top" style="display: block;"><i class="fa-arrow-circle-up fa"></i></a>

 2. Sau đó chúng ta tiến hàn style CSS cho link chúng ta được đẹp mắt, bạn có thể dùng image, hay là FA icon cũng được tùy vào sở thích của mỗi người. Ví dụ này mình dùng FA Icon.

<style>
a.on_top { opacity:0.6; display: none;}
a.on_top:hover{
background-color: #007bb6;
color: #fff;
border: 1px solid #007bb6;
opacity:1;
}
a.on_top i{ font-size: 20px;}
a.on_top {
border-radius: 6px;
background-color: #333333;
padding: 10px 20px;
white-space: nowrap; color: #fff;
position: fixed;
bottom: 75px;
right: 30px;
height: 44px;
}
</style>

Lưu ý : display:none để khi load trang lên sẽ không thấy link go to top , position:fixed để khi bạn kéo thanh cuộn trang web thì link sẽ chạy theo ở 1 vị trí cố định nào đó.

3. Thư viện jQuery

<script>
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('#on_top').fadeIn();
        } else {
            $('#on_top').fadeOut();
        }
    });
    $('#on_top').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>

Giải thích 1 chút về đoạn code trên: $(this).scrollTop() > 100 tức là khi kéo xuống độ chừng 100px là sẽ xuất hiện link go to top, fadeIn: hiện, fadeOut: ẩn. Tiếp đến là bắt sự kiến Click và trược lên trên. OK như vậy là chúng ta đã hoàn thành tính năng back top top (Trờ về đầu trang). Chúc các bạn thành công.

Để dễ làm các bạn có thể đưa cả 3 code trên vào trong cùng 1 widget nhé.

Tạo Widget Liên Kết Bạn Bè với logo cho blogspot

1.  Blogger - Bố cục - Thêm Widget 
2. Copy đoạn code bên dưới và dán vào
3. Nhấn save và xem kết quả

<style>
.subs{margin-top:10px;font-size:14px;color:#4b4f56}
.buttondk{background:#f6f7f9;border:1px solid #ced0d4;float:right;height:30px;width:auto;margin-right: 10px;color:#4b4f56!important;padding:5px;font-weight:500;border-radius:2px;margin-top:-5px}
#lienketbanbe{overflow:auto;padding:0;margin:0;list-style:none}
.buttondk:hover{background:#3a5795!important;color:#fff!important;text-decoration:none!important}
#lienketbanbe li{padding:0;line-height:normal;display:block;float:left;text-align:left;width:31.5%;margin:0 5px 5px 0;}
#lienketbanbe a{display: block; font: 400 14px Roboto!important; color: #fff; width: 100%; height: 90px; position: relative;}
#lienketbanbe a i{color:#0174DF;font-size:10px}
#lienketbanbe a span{background: linear-gradient(transparent, #333); display: block; text-align: center; position: absolute; bottom: 0; left: 0; font-size: 12px; padding: 5px; box-sizing: border-box;width:100%}
#lienketbanbe a:hover span {background:rgba(0,0,0,.35)}
</style>
<div id="lienketbanbe">
<li><a href='http://www.shopthuthuat.com/p/hop-tac.html' target='_blank' title='Đặt liên kết với  Shop Thủ Thuật' style="background:#fff url(//i.imgur.com/3amhW6K.png) no-repeat center"><span>Đặt Liên Kết</span></a></li>
<li><a href='http://www.blogspotvn.com/' target='_blank' title='Chia sẻ template blogspot miễn phí, template blogger miễn phí' style="background:#fff url(//i.imgur.com/KUYSsOL.png) no-repeat center"><span>BlogSpotVN.com</span></a></li>
<li><a href='http://www.plusthuthuat.com/' target='_blank' title='Plus Thủ Thuật' style="background:#fff url(//i.imgur.com/8Bn7Q67.png) no-repeat center"><span>Plus Thủ Thuật</span></a></li>
<li><a href='http://www.phutungcb400.com/' target='_blank' title='phụ tùng đồ chơi xe cb400' style="background:#fff url(//i.imgur.com/UNxTzJa.png) no-repeat center"><span>Phụ tùng CB400</span></a></li>
<li><a href='http://www.anhbiavn.com/' target='_blank' title='Ảnh bìa chất' style="background:#fff url(//i.imgur.com/auwGfpz.png) no-repeat center"><span>Ảnh bìa chất</span></a></li>
<li><a href='http://www.caiwintainha.info/' target='_blank' title='Cài Win Tại Nhà' style="background:#fff url(//i.imgur.com/IkkGSJE.png) no-repeat center"><span>Cài Win Tại Nhà</span></a></li>
<li><a href='http://www.nhatthienkt.net/' target='_blank' title='nhatthienkt blog thủ thuật hay' style="background:#fff url(//i.imgur.com/sHNl1Ik.png) no-repeat center"><span>Nhatthienkt's Blog</span></a></li>
<li><a href="//www.thanhhuy-it.design " target="_blank" title="Thanh Huy IT" style="background:#fff url(//i.imgur.com/zHcGn5p.png) no-repeat center"><span>Thanh Huy IT</span></a></li>
</div>

Chúc thành công!

Popular Post Blogger Widget Kiểu Đánh Số và bo góc

Đăng nhập vào Blogger -> Chủ đề - Chỉnh sửa HTML
Copy đoạn code bên dưới thay cho code Popular mà bạn đang sử dụng

* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

/* CSS Bài viết phổ biến */
PopularPosts .widget-content { background: #f2f2f2; border: 1px solid #00acee; }
.PopularPosts h5 { background: #8C8C8C; color: #FFFFFF !important; padding: 12px 24px !important; margin: -1px -1px 0; }
.PopularPosts .widget-content { font-size: 15px; margin: 0 !important; }
.popular-posts ul { margin: 0 !important; padding: 0 !important; }
.popular-posts ul li { list-style: none; border-bottom: 1px solid #ccc; border-top: 1px solid #FFFFFF; padding: 0 !important; }
.popular-posts ul li:first-child  { border-top: 0; }
.popular-posts ul li:last-child  { border-bottom: 0; }
.popular-posts ul li:hover { background: #fafafa; text-decoration: none; }
.popular-posts ul li a { color: #404040; display: block; padding: 18px 24px; }
.popular-posts ul li a:hover { color: #262626; text-decoration: none; }
.popular-posts ul li .item-snippet { padding: 0 24px 18px; }
.PopularPosts img { background: #fff; border: 2px solid #CCCCCC; display: block; float: left; height: 48px; margin-right: 8px; padding: 3px; height:auto;width: 100%; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }

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

CSS giúp tạo Hình Ảnh Reponsive trong blogspot

Reponsive tức là hiển thị phù hợp nhất theo trình duyệt. Ví dụ như bạn có 1 hình ảnh rất lớn thì hiển thị ở pc nó to ra còn ở mobile thì nó nhỏ vừa với màn hình mobile nhưng vẫn giữ nguyên kích thước. Nôm na là vậy các bạn có thể xem ở demo hình bên dưới sẽ hiểu hơn công dụng của nó. Chủ yếu là để tương thích với nhiều thiết bị hơn mà không phải tác động nhiều

Responsive là công nghệ mới mà hiện nay hầu như mọi trang web đang áp dụng, công nghệ responsive tương thích với mọi loại màn hình hiển thị giúp cho website thân thiện hơn với người dùng và bài viết này sẻ hướng dẫn cách để hình ảnh hiển thị responsive cho website và blogspot

Css giúp hình ảnh tương thích với nhiều thiết bị. Code này thật ra sử dụng trong code bootrap css3. Áp dụng đối với blogger

1. Vào Blogger Dashboard > Template > Edit HTML.
2. Thêm đoạn css dưới đây vào trên thẻ ]]</b:skin>

.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

Sau đó lưu mẫu lại và xem kết quả.

Recent bài viết blogspot theo nhãn có hình ảnh thumb

Đăng nhập vào Blogger - Bố cục - Thêm tiện ích - HTML
Copy đoạn code bên dưới và dán vào

<style type="text/css">
.bsrp-gallery {
overflow:hidden;
    width: 1300px;
    clear: both;
    position: relative;
    margin: auto;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 6px 0 0px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
transition-duration: .4s;
background: ; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:bold;
height: 80px; /*--define a altura da legenda --*/
width: 140px; /*--define a largura da legenda --*/
position: absolute;
bottom:-100%;
text-align: center;
padding:100px 30px 30px 30px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery .bs-item:hover .ptitle {
bottom: 0%
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
opacity: 0.3;
}
</style>
<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KnsvVVq1v6v7Js-mwV2-vLO_C-RIocB1LHqfYZVcecrwBBHc6bnjnoAunP2VZwZ2diPyoqJwtt3h3roDkYRzqhhUOywutjYLXpqWyj2I1cmmAEVdVGWv6IkbIP1FKaC2GhxHbMslafSh/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>
<script>
  var bsrpg_thumbSize = 250;
  var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/default/-/label?max-results=5&alt=json-in-script&callback=bsrpGallery"></script>

Thay đổi các thông số sau để tùy chỉnh:

• var bsrpg_thumbSize = 250: kích thước hình ảnh bài đăng hiển thị thumb. Tùy vào widget của bạn và số bài viết hiển thị mà bạn chỉnh sao cho hợp lý.
• var bsrpg_showTitle = true : Hiển thị tiêu đề bài viết khi rê chuột. Nếu muốn ấn bạn thay true bằng false
• Thay chữ label thành tên nhãn mà bạn muốn hiển thị

Ngoài ra bạn cũng có thể tham khảo style thứ 2 như code bên dưới

<style>
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */
</style>
<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">
'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KnsvVVq1v6v7Js-mwV2-vLO_C-RIocB1LHqfYZVcecrwBBHc6bnjnoAunP2VZwZ2diPyoqJwtt3h3roDkYRzqhhUOywutjYLXpqWyj2I1cmmAEVdVGWv6IkbIP1FKaC2GhxHbMslafSh/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">
', item, '</div>
');
    }
    html.push('</div>
');
    document.write(html.join(""));
}
//]]>
</script>
<script>
  var bsrpg_thumbSize = 150;
  var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&amp;alt=json-in-script&amp;callback=bsrpGallery"></script>

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