THUTHUAT30S: Blogspot Tips

Home Posts filed under Blogspot Tips

Widget Auto Recent Post cho blogspot

Một tiện ích Widget cực hay và đẹp dành cho các bạn tô điểm thêm cho blogspot của mình đó là Auto recent bài post với hiệu ứng Slider đẹp mắt.
Các bước thực hiện:
Đăng nhập Blogger - Bố cục - Thêm tiện ích - HTML / Javascript
Copy đoạn code bên dưới vào

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://YOURURL.blogspot.com" // Add your blog URL
});
</script>

Thay dòng màu đỏ thành địa chỉ blog của bạn nhé.

Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot

01:37
Download

Breadcrumb là một tập hợp các đường link có phân cấp để người dùng biết mình đang ở đâu để từ đó dễ dàng hơn trong việc sử dụng website. Nghe thì có vẻ phức tạp nhưng thực ra nó là cái dòng: Trang chủ » Blogspot Tips » Breadcrumb đơn giản chuẩn HTML5 ngay phía trên tiêu đề bài đăng.

Nếu blog của bạn chưa có Breadcrumb thì bạn nên thêm thành phần này vào ngay vì nó rất có lợi cho SEO và thân thiện với người dùng. Cách làm lại cực kỳ đơn giản.

Bước 1: Vào chỉnh sửa template rồi tìm đến dòng: ]]></b:skin> rồi thêm vào phía trên nó code css sau:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Tiếp tục tìm đến mã này:

<b:includable id='main' var='top'>

Thay thế nó bằng code bên dưới:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Trang chủ</span></a></span>
<b:loop values='data:post.labels' var='label'>
» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Khác</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Bài viết cho nhãn <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Tạo hiệu ứng phóng to ảnh khi rê chuột vào cho blogspot

18:42
Download

Bài viết này chia sẻ cho các bạn, hiệu ứng phóng to hình ảnh khi rê chuột vào. Hiệu ứng này cũng chỉ sử dụng CSS nên tốc độ tải trang bạn có thể hoàn toàn yên tâm.

Đăng nhập vào Blogger - Mẫu - Chỉnh sửa HTML

Thêm đoạn code bên dưới vào và save lại ra trang chủ xem thành quà.

.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height:100%;
}

Tối ưu Thẻ Meta Title, Description và Keyword và Thẻ tiêu đề robot tùy chỉnh blogspot

22:48
Download

Bổ sung Tính năng SEO Website
1. Tối ưu Thẻ Meta Title, Description và Keyword
Thêm Code trước thẻ đóng </Head>:

<b:if cond=’data:blog.pageTitle == data:blog.title’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond=’data:blog.metaDescription != ""’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
<meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if>
<b:if cond=’data:blog.pageType == "archive"’>
<meta content=’noindex, nofollow’ name=’robots’/>
<b:else/>
<b:if cond=’data:blog.pageType == "index"’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
<meta content=’index, follow’ name=’robots’/>
</b:if> <b:else/>
<b:if cond=’data:blog.pageTitle != data:blog.title’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if></b:if>

>> Nếu dùng code này thì ko cần sửa code robots.txt

2. Tối ưu thẻ Meta FB, G+

Thêm đoạn Code trước thẻ đóng </Head>:

<link href=’https://plus.google.com/+beehiep/about’ rel=’author’/>
<link href=’https://plus.google.com/+beehiep/posts’ rel=’publisher’/>
<meta content=’vi_VN’ property=’og:locale’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>

Bạn có thể chỉnh sửa các thông tin theo G+ và info để phù hợp với blogger của bạn.Như vậy là bạn đã sửa xong các chức năng cơ bản nhất hỗ trợ SEO tăng thứ hạng cho website rồi.

Tạo bộ đếm số người online trên blog của bạn

05:54
Download

Nếu bạn có một trang web hoặc blog, có lẽ bạn sẽ muốn nhìn thấy ai ghé thăm bạn. Bạn có muốn tìm hiểu có bao nhiêu du khách trên trang web của bạn? Tìm hiểu nơi họ sinh sống trên thế giới. Kiểm tra khi bạn đã có hầu hết những người trực tuyến.

Cài đặt số liệu thống kê trên trang web của bạn là rất dễ dàng. Không có đăng ký và họ là hoàn toàn miễn phí! Chỉ cần copy đoạn code html bạn thấy bên dưới và dán nó vào tất cả các trang bạn muốn theo dõi.

Sao chép mã này vào trang của bạn:

<script id="_wauv3a">var _wau = _wau || []; _wau.push(["classic", "rx5v7mxwi3pl", "v3a"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Tăng Tốc Độ Tải Trang cho Website hoặc Blogger

22:03
Download

Một trong những yếu tố quan trọng nhất để cải thiện SEO trang web của bạn là tốc độ tải trang của bạn.
Thủ thuật này sẽ trì hoãn hiển thị hình ảnh cho đến khi văn bản được hiển thị đầu tiên, điều đó sẽ làm giảm các HTTP Requests, qua đó sẽ cải thiện rõ ràng tốc độ load trang trên website của bạn.
Vào Mẫu-> Chỉnh sửa HTML và dán đoạn code bên dưới vào trước thẻ

<script type="text/javascript">
//<![CDATA[
(function(a) { a.fn.lazyload=function(b){var c={threshold: 0,failurelimit:0,event:"scroll",effect:"show",container:window;};if(b) { a.extend(c,b);}var d=this;if("scroll"==c.event) { a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)) { a(this).trigger("appear");}else { if(e++>c.failurelimit){return false;}}});var f=a.grep(d,function(a) { return!a.loaded;});d=a(f);})}this.each(function() {var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"));}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)) {if(c.placeholder){a(b).attr("src",c.placeholder);}else {a(b).removeAttr("src");}b.loaded=false;}else {b.loaded=true;}a(b).one("appear",function() {if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true;}).attr("src",a(b).attr("original"));}});if("scroll"!=c.event) {a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear");}})}});a(c.container).trigger(c.event);return this;};a.belowthefold=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop();}else {var d=a(c.container).offset().top+a(c.container).height();}return d<=a(b).offset().top-c.threshold;};a.rightoffold=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft();}else {var d=a(c.container).offset().left+a(c.container).width();}return d<=a(b).offset().left-c.threshold;};a.abovethetop=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).scrollTop();}else {var d=a(c.container).offset().top;}return d>=a(b).offset().top+c.threshold+a(b).height();};a.leftofbegin=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).scrollLeft();}else {var d=a(c.container).offset().left;}return d>=a(b).offset().left+c.threshold+a(b).width();};a.extend(a.expr[":"], {"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})";})})(jQuery);$(function() {$("img").lazyload({placeholder: "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50";})})
//]]>
</script>

Xóa viền hình ảnh - các mẫu templates trên blogspot

22:00
Download

Mẫu template mặc định của Blogspot các hình ảnh thường có viền boder bao quanh. Đối với các bạn đã chuyên về template thì bạn sẽ thấy nó làm cho cái giao diện trên blog mình xấu đi Bài hôm nay của mình sẽ hướng dẫn các bạn cách xóa viền cho toàn bộ hình ảnh trên Blog và chỉ xóa viền cho một số hình ảnh. Trên bài viết này mình cũng đã loại bỏ đường viền cho hình ảnh, các bài khác thì đường viền còn nguyên.

Nếu bạn đang sử dụng Dynamic Views Templates - chế độ xem động mà muốn loại bỏ hết đường viền hình ảnh thì hãy sử dụng cách này.

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trước(trên) thẻ vừa tìm:

.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}

Nếu bạn không sử dụng mẫu Dynamic Views Templates thì hãy áp dụng cách này để loại bỏ đường viền cho toàn bộ hình ảnh.
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm một đoạn code trông như dưới, các bạn chỉ cần tìm với đoạn màu đỏ là ra đoạn code bên dưới

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Thay thế đoạn code vừa tìm bằng code dưới

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

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

Thêm bình luận (comment) Facebook từng bài đăng cho Blogspot

21:53
Download

Facebook Comments Blogspot

Bước 1:

Đăng nhập vào trang quản trị blog. Vào "Mẫu" chọn "Chỉnh sửa HTML"
Ấn tổ hợp phím Ctrl F, tìm thẻ </head>
Chèn đoạn code dưới đây vào trước thẻ "</head>".

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="8" data-width="766"></div>';
//]]>
</script>

Lưu ý: Các bạn có thể thay tùy ý các thông số dưới đây

data-num-posts="8": Số bình luận được phép hiển thị, nếu nhiều hơn thì tự động gộp lại.
data-width="766px": Chiều rộng của khung bình luận Facebook.

Bước 2: Ấn tổ hợp phím Ctrl F, tìm </body>

Chèn đoạn code bên dưới và trước thẻ "</body>".

<div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Chèn khung comment facebook vào nơi bạn muốn hiển thị trong blog

Bước 3: Copy đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> document.write(fbcm); </script> </b:if>

Thông thường ta sẽ chèn nó vào cuối bài viết. Các bạn Ctrl F, tìm dòng <b:include data='post' name='post'/>
Copy và dán đoạn code bên trên vào phía dưới dòng vừa tìm được.
Lưu ý: Một số mẫu template (giao diện) có nhiều hơn một dòng <b:include data='post' name='post'/>, các bạn chọn dòng đầu tiên tìm được nha, sau đó lưu lại, nếu thấy không được thì ta chọn dòng khác .

Bước 4: Save và xem thành quả.

Cách sửa lỗi H1: Zero that is really bad cho blogspot

18:42
Download

Hình ảnh lỗi H1 khi check SEO tại CHKME

Đăng nhập vào Mẫu - Chỉnh sửa HTML
Nhấn Ctrl + F và tìm code sau: <div id="header-inner">

Nhấn Enter lần nữa bạn sẽ thấy đoạn code như bên dưới

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+"_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'
style='display: block'/></a>
</div>

- Sau đó ta thêm thẻ <h1> vào ta được code sau:

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+"_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'
style='display: block'/></h1></a>
</div>

- Cuối cùng là save lại và quay lại trang checkseo để kiểm tra nhé. Chúc thành công!

Avatar bo tròn góc phần comment của Blogspot

04:25
Download

Mẫu có dạng như hình sau khi thêm code

Bài viết hướng dẫn các bạn tạo Avatar bo tròn của Blogger khi comment trên blog

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn code bên dười trước ]]>

.avatar-image-container,
.avatar-image-container img {
max-width: 50px;
width: 50px;
max-height: 50px;
height: 50px;
padding: 0;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}
.avatar-image-container{
border:3px solid #fff;
-webkit-box-shadow: 0 1px 2px #BBB;
-moz-box-shadow: 0 1px 2px #BBB;
box-shadow: 0 1px 2px #BBB;
}

- Chỉnh sửa lại cho phù hợp
max-width: 50px; Chiều rộng tối đa của avatar
width: 50px; Chiều rộng của avatar
max-height: 50px; Chiều cao tối đa của avatar
height: 50px; Chiều cao của avatar
border:3px solid #fff : Màu viền của Avatar

Tạo box shadow và bo viền cho hình ảnh bài viết blogspot

01:12
Download

Hình ảnh bài đăng đã được bo viền và hiệu ứng shadow

Bài viết hướng dẫn bạn tạo viền boder và shadow cho hình ảnh bài viết trên blog.

Đăng nhập vào Blogger - Mẫu - Tùy chỉnh - Nâng cao

- Trong khung hộp thoại CSS bạn copy đoạn code bên dưới dán vào

.post img{background:#fff;padding:4px;border:2px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;}

- Các thông số bạn tinh chỉnh tùy ý.

Hướng dẫn index bài viết của bạn lên Bing

23:52
Download

Giao diện trang index của Bing

Bài viết hướng dẫn index các bài viết của bạn lên công cụ tìm kiếm Bing , nó sẽ tăng lưu lượng tìm kiếm đáng kể khi các bài đăng của bạn được Bing index.

- Các bước thực hiện: Đầu tiên bạn đăng nhập vào Bing Webmaster Tools tại địa chỉ sau:

http://www.bing.com/toolbox/submit-site-url

- Sau khi vào bạn điền thông tin địa chỉ web/blog của bạn vào ô như hình

Nhập tên trang web/blog của bạn vào như hình

Cuối cùng bạn ấn gửi là xong!

Tạo Sitemap đẹp cho blogspot

22:03
Download

Bài viết hướng dẫn các bạn tạo sitemap cho blogspot. Lưu ý là sitemap này khác với sitemap mà bạn tạo để gửi trên Google master tool nhé.

Đây là dạng sơ đồ web/blog động nó cập nhật bài viết liên tục trên blog của bạn. Nó giúp cho người đọc có một cái nhìn tổng thể về trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm.

Cách tiến hành:

- Đầu tiên bạn vào Blog => Trang => Trang mới => Chọn HTML và dán đoạn mã code dưới đây vào và chọn Xuất bản.

<style>
/* Sitemap Thuthuat30s new update */
#tabbed-toc {
margin: 0 auto;
background-color: #FFFFFF;
border: 4px dashed rgb(48, 167, 229);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);
overflow: hidden;
position: relative;
color: #333;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color: #434B50;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:rgba(110, 193, 255, 0.68);
color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #6EC1FF;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 80%;
float: right;
background-color: white;
border-left: 2px dotted #30A7E5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14px;
color: #434B50;
line-height: 40px;
height: 35px;
padding: 0 12px;
text-decoration: none;
outline: none;
overflow: hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#333;
color:white;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#224C19;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://thuthuat30s.blogspot.com/" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Thuthuat30s</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://thuthuat30s.blogspot.com/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

- Thay dòng: http://thuthuat30s.blogspot.com/ thành địa chỉ blogspot của bạn.
- Cuối cùng là chúc bạn thành công.

LIVE DEMO SITEMAP

Hướng dẫn cấu hình file robots.txt cho blogspot

05:29
Download

File robotst.txt là gì và tầm quan trọng của nó đối với blogsppot thế nào thì chúng ta hãy cùng tìm hiểu nhé.

File robotst.txt là file đơn giản để các bộ máy tìm kiếm quản lý index nội dung bài viết trên website của bạn

Hướng dẫn tạo file robots.txt chuẩn cho blogspot của bạn.

- Đăng nhập vào Blogger - Cài đặt - Tùy chọn tìm kiếm

- Chọn "Robots.txt tùy chỉnh" >> "Bật nội dung robots.txt tùy chỉnh" như hình:

Hình ảnh minh họa cấu hình trang Robots blogspot

- Bước tiếp theo bạn copy đoạn code chuẩn bên dưới và dán vào nhé.

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

- Thay đổi dòng màu đỏ thành địa chỉ blogspot của bạn là xong.

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