[Tips] - Auto Nofollow link trỏ ra ngoài cho blogpsot

Đặt thuộc tính Nofollow cho những link trỏ ra ngoài cho blogspot là một điều cần thiết cho việc seo blogspot, một phần giúp blogspot load nhanh hơn một phần giúp google bót coi trọng blog của mình hơn. Thay vì mỗi lần liên kết link bạn phải đặt Nofollow link thủ công thì hôm nay Khám Phá Blog's chia sẻ cách đặt thuộc tính Nofollow link một cách tự động.

Cách đặt Auto Nofollow link cho blogspot

Để làm việc này thì khá đơn giản, bạn chỉ cần đăng nhập vào Blogger > Mẫu (templates) > Chỉnh sửa HTML

Tìm đến thẻ đóng </head> và chèn đoạn js này lên trên nó

<!-- tu dong nofollow begin -->
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="'+ window.location.hostname +'"])').attr('rel', 'nofollow');
jQuery('a[href*="http://"]:not([href*="'+ window.location.hostname +'"])').attr("target", "_blank");
});
</script>
<!-- tu dong nofollow end -->

Sau đó lưu mẫu lại và bay giờ bất kỳ link nào bạn link kết ra ngoài thì nó sẽ Auto Nofollow cho bạn rất tiện lợi.

[Vip4] - Templates blogspot bán tour du lịch

Giới thiêu mẫu giao diện blogspot về lĩnh vực bán tour du lịch rất đẹp và chuyên nghiệp. Giao diện này được tích hợp giao diện mobile, tối ưu seo blogspot với thẻ heading , js và css load nhanh.

DEMO DESKTOP - DEMO MOBI

[demo]http://hdbtour.blogspot.com/[/demo]

[Vip3] - Templates blogspot bán chung cư blogspot

Tiếp tục gởi đến anh chị một mẫu giao diện bất động sản cho blogspot thích hợp làm site bán chung cư cho blogspot. Templates được thiết kế đơn giản nhưng không thiếu sự chuyên nghiệp, thiết kế 3 column sang trọng thích hợp cho công ty.

DEMO

Những ưu điểm của mẫu bất động sản này

• 3 column sang trọng
• Thiết kế đơn giản thích hợp cho seo
• Sẽ được tích hợp giao diện mobi và tối ưu thẻ heading nếu khách hàng yêu cầu
• Được hỗ trợ cài đặt ban đầu miễn phí từ A tới Z
• Được hỗ trợ để không bị lỗi hình ảnh khi xem bằng mạng VNPT

Để sở hữu templates này vui lòng liên hệ với chúng tôi
Mail : Admin@khamphablog.com
Hotline : 0967 84 99 34
[demo]http://chungcu-hd.blogspot.com/[/demo]

[Tips] - Làm sao để thêm facebook comments vào blogspot

Facebook là mạng xã hội lớn rất tốt cho việc seo blogspot, việc thêm facebook comments vào blogspot là rất cần thiết và tôi khuyên bạn nên thêm nó cho blog của mình. Vì người việc nam hiện nay lên đến trên 90% người dùng facebook.

Cách thêm comments facebook vào blogspot
Để thêm facebook comments vào blogspot thì chúng ta có 3 bước đơn giản sau
Bước 1 : Tìm đến thẻ </head> trong templates blogspot và thêm đoạn code sau trên nó

<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="5" data-width="560"></div>';
//]]>
</script>

• 560 là chiều rộng của facebook comments

Bước 2 : Chèn đoạn code sau trên 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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Bước 3 : Việc cuối cùng là chèn đoạn code này vào nơi cần hiển thị comments facebook

<script type='text/javascript'>
document.write(fbcm);
</script>

Lưu mẫu (templates) lại và kiểm tra kết quả. 

[Share] - Templates blogspot chuẩn seo chia sẻ thủ thuật

Nói đến một templates blogspot chuẩn seo thì nhiều người còn không biết templates blogspot chuẩn seo là nó như nào, có cái gì trong đó mà nó chuẩn seo. Các bạn tìm đến những templates chuẩn seo trên mạng phần lớn thì họ cài link ẩn trong templates và cho đó là chuẩn seo.

Vậy như thế nào là templates blogspot chuẩn seo?

1. Templates chuẩn seo ít nhất phải thỏa mãn những điều kiện sau :

• Chuẩn mobile friendly, tuyệt đối thân thiện với thiết bị di động (các bạn có thể check thử tại đây)
• Tối ưu css và js tăng tốc độ load cho blog
• Tối ưu các thẻ heading (các thẻ từ h1 đến h6) trong blogspot

2. Chia sẻ templates blogspot chuẩn seo

Như tiêu đề thì bay giờ mình sẽ chia sẻ một templates blogspot chuẩn seo thích hợp làm site chia sẻ thủ thuật và tất nhiên là thỏa mãn những vấn đề trên mình đã nêu ra các bạn có thể kiểm tra thử và nhận xét.

DEMO - DOWNLOAD

Hi vọng các bạn sẽ hài lòng với templates blogspot này mọi thắc mắc comments bên dưới để được hổ trợ, share lại nhớ để lại nguồn Khám Phá Blog đừng để danh tiếng blog của bạn bị ném đá.

[Tips] - Slider Image đơn giản cho blogspot

Slider Image (slider ảnh) là một tiện ích được các blogger thường hay dùng để thêm phần chuyên nghiệp cho blog của mình hơn. Nhưng đối với các seoer làm seo blogspot thì hộ thường chọn những slider image đơn giản nhất để góp phần tối ưu seo cho blogspot của họ.

Thêm slider image cho blogspot
1. Thêm css
Tìm đế thẻ ]]></b:skin> trong templates blogspot và thêm đoạn code này ngay trên nó

#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lnUYedlC4ExCKXpkGbg0oe7n-Z9LwRA30W3T5-iCA2U7rwL3o287SmbxOGvRAoDVQs66qTI64H0CQVzEVm4qjRhnFcjJ5C8GQ-iATqZzfDco4lV2-QRx3d1ly3AI4OA4anpqSFN6qqwh/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8eD-b0Xpnys3tmrO4BlPeX0BXAIZE0J1hfzhb4LZEHMUCEFB98GEBVF2X2BnFKanMGCMKtCYiO52j6efWCmQw2p00EH1Bst8YUW0RXICYVR2LECiTbvLULV-5S98HwUg8HGhyphenhyphenVAODYlnK/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEMkRMrn5aWyfeuh28DcySjoyHjJhYiadogVnVpdZDoP19m95GWr9Et-2vuNw_JdW4HKtqMm7HTnWK1e3qrG-7NJ_ciXQhakQ5-8Unji_tHMc0Ty0396zE2MzusK-ZGG5sZe4pNoSX_0z/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBAPwwGJ_j7IcFeIJAB-tqL0pbA7GuTfKfxQCwD6wDLPpSwvGf1icNOWFrF9CpV87SKpxNO-YF15XR2qAlfXwp5oWiUct5uJ-1HbVrJ3OoY9DFf21gHW_ZAdx4JTjyvVJlCacuLLShLJR/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb607fPD4QI_j-zxZOOZ1jb-jVLUAOyLjgjhiXvW0N9dX0MF5DCfXGfHNfSWHa0xMEiAqlA44dGPehyfgq6_rwBYevwhiks1jmQPhObbdQmule-d5OLkishQ5mdOvFxtBLSDnyVe9Qu-DX/s1600/arrow-left.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioi5iWEQNzfbFfTbtvoDAW9JsaIOPA1q8q8_HWTx9J1bTVZKb315E-f8Dxp4BfWupTbMHvdNBwpSx2MM8cA1ZjfKtvu091f6rwHAnO_d2XjKwfak6JzbMQgBNTXlfITGXkh38TPlqoTTDV/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

2. Thêm scripts
Tiếp tục tìm đến thẻ </head> và thêm trên nó đoạn code này

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

3. Đặt slider image
Bây giờ bạn chỉ cần chịn một vị trí thích và chèn đoạn code bên dưới vào là xong

<div id='featured'><a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo1'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span><a href="Link URL"><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo2'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Kham Pha Blog</a></span><a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span><a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo4'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span></div>

Trong đó

• Link url : thay bằng link bài viết khi click vào ảnh
• Image url : là url ảnh khi muốn chạy slider
• Có 1 đoạn text : đó là description (mô tả) của ảnh

Bây giờ lưu mẫu lại và kiểm tra thành quả thôi nào :D

[Tips] Menu phân cấp cho blogspot

Menu phần cấp hay gọi đúng là dropdown là menu xổ xuống theo dành cho những blog nhiều label (nhãn) giúp người đọc dễ dàng tìm đến nội dung họ cần. Hôm nay Khám Phá Blog sẽ giới thiệu cho các bạn một dạng dropdown không dùng js mà chỉ dùng css nhằm tăng tốc cho blogspot

Menu dropdown css3 cho blogspot

1. Thêm css

Đăng nhập vào templates blogspot tìm đến thẻ ]]></b:skin> và thêm đoạn code sau trên thẻ này

#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5t0eqVPK-OsMjolYrPBhZTX-e0a85DxwB0ovbKfNqg0mu9lIQLeenw6u-g8R7MzZHTNanILrtQceBvYjcgh0Z9W5vAIlSX19pLPw5U48vLSSN63BjzTMBGjvOuIOd1lsyhQPPLShxSItB/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
}

2. Chọn nơi đặt menu

Bay giờ bạn chỉ cần chọn địa điểm đặt menu và dán đoạn code bên dưới vào chổ đó, thường thì các bạn nên đặt menu vào trước thẻ </header>

<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQtv4XVqtiICqdwVUQ6L7py3v8bbiDJjOiltyM8tA7sJ14KfbEXxBwTT7YVsRMgw-dwE-jvJ1QwmySjNvP-E2YdLi8j3KeeT-12Z5uK4atJvDsKHV10W60w8wXSNluTHjD3vOdBR0GyqG/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTNmMypAAIP97_qf5Ff3Ex2f4-XhS1eDRDOmqCd3WhhRZ_Bgc9Uo72Ep8Nqtzjv0HjsC4WAlIBf49Fk4fwqbV8g8NWkbIY8GEVHjdk2dUTBLCGrh1ju2vhKsdE8aykyjxJF-cqFFrg1yb/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSrc53PGh24jDpsg2DT2dFoy6X76BvwGjWTK3uX4ihejwFmczAuevU9UZtZxNM6o5rGVwVzBYgqOsVagCpI5DvbAX4Vb35rcXfYAAapAmtYTVhK1tujfHuJz-KM0gF2T0CjC0iHD-RZe-/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBy848PjWUIKlVS4nw8ummkmctM2c961clXcKhemGG6gn4YKsSBAFjd_9WAQQCmpbMiugRoln3TVp7cIyVi1Qx-u22AyHMWfy_4u0Nvb97kfMkflTVLTdaxswSl7ACLl5klFh5_Su3hq39/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
</ul>
</nav>
<!-- menu-search form -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>

Bây giờ lưu mẫu lại và kiểm tra kết quả nhé.

[Tips] - Tối ưu title cho bài viết blogspot chuẩn seo

Title bài viết là một nơi chứa từ khóa rất quan trọng trong seo blogspot, đối với blogspot mới tạo thì title bài viết thường nằm sau tiêu đề bài viết. Như thế thì lên google search tiêu đề bài viết nó sẽ nằm ở phía sau và đôi khi bị khuất đi và thay thế vào đó là dấu ...

Cách tối ưu title bài viết chuẩn seo

Để chỉnh sửa được title cho bài viết cho chuẩn seo thì các bạn đăng nhập vào Blogger > Mẫu  (Templates) tìm đến thẻ

<title><data:blog.pageTitle/></title>

Hoặc

<title><data:blog.title/> | <data:blog.pageName/> </title>

Và thay thế nó bằng đoạn code dưới

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Cuối cùng là lưu templates blogspot lại và kiểm tra kết quả.

[Share] - Snews Responsive Blogger Templates

Snews Responsive Blogger Templates là templates blogspot được chuyển thể từ theme wordpress có tên là Snews Theme, được tạo ra bởi Themefores nhà thiết kế templates blogspot Responsive hàng đầu hiện nay. Mẫu này được Themefores bán với giá 21$ và được rip lại bởi Khám Phá Blog's
Các ưu điểm của Snews Responsive Blogger Templates

• Current Version: 1.0.0 
• 100% Responsive (Desktop,Tablet,Smartphone) 
• 10+ Recent Post by Labels Widget 
• Third Party Image Support 
• Support 3 Comments System (Blogger,Facebook,Disqus) 
• Recent Post Widget 
• Random Post Widget 
• Featured Post Widget 
• Recent Comment Widget 
• Disqus Recent Comment Widget 
• Flickr Badge Widget 
• News Ticker Widget 
• Related Post Widget 
• Optimize SEO 
• Dropdown Menu 
• Ads ready 
• Top Social Icon 
• Social Counter Widget 
• Author Profile 
• Page Navigation 
• ShortCodes 
• Compatible with major browsers (IE9+,Mozilla,Chrome,Safari) 
• Professional admin layout, help you easy work with blog layout 
• Support RTL 
• Custom Error 404 Page 
• Archive Page 
• Support Advance Editor: upload background images, change background color, key colors, fonts 
• Support Print CSS and allow visitors share articles email

DEMO - DOWNLOAD

[FB] - Tổng hợp icon đẹp để chạy Facebook Ads Content

Facebook Ads là phương thức chạy quảng cáo trên facebook phổ biến nhất hiện nay, cho nên sự cạnh tranh của các thương hiệu trên Facebook cũng khá mạnh, hôm nay mình sẽ chia sẻ các bạn một số icon đẹp dùng để chạy Facebook ads content.

Tổng hợp icon facebook ads conntent

☻ ♥ ♦ ♣ ♠ • ◘ ✖뭇 ˙·٠•●✜ ◯˟ ❥☮ ✈ ♋ 웃 유 ☠ ☯ ♥ ✌ ✖ ☢ ☣ ☤ ⚜ ☸◄ ► ☆ ❤(◕‿-)❤ ❤---☆┌8┐ ( ◘_◘ ) ┌8┐↕ ‼ ¶ § ▬ ↨ ↑ ↓ → ← ∟ ↔ ▲ ▼ Ƹ̵̡Ӝ̵̨Ʒ ☮۞♨ ❖ ❤ ❥ ❦ ❧ ♡ ✗ ✘ ⊗ ♒ Ω ♦ ♠ heart emoticon ♣ ♢ ♤ ♡ ♧ ✦ ✧ ♔ ♕ ♚ ♛ ★ ☆ ✮ ✯ ☄ ☾ ☽ ☼ ☀ ☁ ☂ ☃☻ ☺ ۩ ⓛⓞⓥⓔ (ΘдΘ) (ò_ó) ヾ(＠⌒ー⌒＠)ノ☆*:.｡. o(≧▽≦)o .｡.:*☆ (◣_◢) (๏̯๏) (ಥ_ಥ)♪ ♫ ♬ ✄ ✂ ✆ ✉ \( ^ _ ^ )/ t•_•t ლ(益ლ (｡◕‿‿◕｡) (｡>︿<｡) （︶︿︶）ʕ•ᴥ•ʔ (ಠ益ಠ) ̼⌂̺͛ᴖ̲̿ᴥ̲̿ᴖ̺͛⌂̼
∞ ♂ ♀ ☿ ▲ ▼ △ ▽ ◆ ◇ ◕ ◔ ʊ ϟ ღ 回 ₪ ✓ ✔ ✕ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ™ © ® ¿¡ №⇨ ❝❞ ∃ ⊥ ∀ Ξ ∞ Σ Π ⌥ ⌘ 文 ⑂ ஜ ๏ ⚓ ⎈ ☹ ☺ ☻ ت ヅ ツ ッ シ Ü ϡ ﭢ© ® $ ₣ ¢ £ ¤ ¥ ฿ ₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₫ ₪ € ＄ ￠ ﹩ ￡ ￥ ￦ ℬ ℰ ℯ ℱ ℊ ℋ ℎ ℐ ℒ ℓ ℳ ℴ ℘ ℛ ℭ ℮ ℌ ℑ ℜ ℨ ℵ ٩͡๏̯͡๏۶ ٩(•̮̮̃•̃)۶ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ o (◡‿◡✿) (◕‿◕✿) (⊙▂⊙✖ )
(づ￣ ³￣)づ ヾ（*⌒ヮ⌒*）ゞ (-'๏_๏'-) ｡◕‿◕｡ ๏[-ิ_•ิ]๏ (•ิ_•ิ)? (/•ิ_•ิ)/ ,,l, (^_^) ,l,, U^_^U =^_^= @("-")@ >- - (^_^)- -< d(>_<)b <(^.^<) t(-.-t) \m/>,<\m/ <(^_^)> (((d[~_~]b))) »-(¯'v'¯)-»
,!,, (*_*) ,,!, <('o'<) ^( '-' )^ (>‘o’)> v( ‘.’ )v <(' .' )> ٩(-̮̮̃-̃)۶ ٩(-̮̮̃•̃)۶ ٩(×̯×)۶⊙▂⊙ .. ⊙０⊙ .. ⊙︿⊙ .. ⊙ω⊙ .. ⊙﹏⊙ .. ⊙△⊙ ●▂● .. ●︿● .. ●ω● .. ●﹏● .. ●▽● .. ●△● ☼_☼
@-_-@ .. @-.-@ .. @>.<@ ><((((º> <º))))>< lıllı ((((|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|)))) ıllı
❀ ✿ ❁ ✾ ✽ ❃ ❋εїз ♪ ♫ ♩ ♬ ♭ ♮ ♯ ♚ ♛ ♜ ♝ ♞ ♟★ ✩ ✮ ✯ ✰ ☆ ⋆ ╰☆╮✡ ۞ ❇ ❈ ❅ ❄ ❆
☯ ✡☨ ✞ ✝☥ ☦ ☧ ☩ ☪ ☫ ☬ ☭
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

Trên đây là những icon facebook khá đẹp, tin đã áp dụng dùng để gay sự chú ý và tò mò của khách hàng nhằm tăng click rất thành công trong chạy ads facebook và tôi rin rằng bạn sẽ đạt được thành công giống như tôi trong một ngày gần đây.

[Tips] - Tối ưu seo blogspot search label

Search label hay còn gọi là trang nhãn trong blog, những người làm seo blogspot thì ít ai nghĩ đến việc seo trang này. Nên thường thì trang này lấy description lung tung ảnh hưởng đến thứ hạng của blog của bạn, đôi khi lại khiến việc seo blogspot không hiệu quả và bị chìm blog trên google.

Cách tối ưu seo blogspot search label

1. Tối ưu title, description, keyword cho trang search label

Để tối ưu được những thẻ này thì các bạn truy cập vào templates blogspot tìm đến thẻ <head> và thêm đoạn code này ngay dưới nó

<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> : Chia sẻ kiến thức về <data:blog.pageName/> tại Khám Phá Blog</title>
<meta expr:content='data:blog.pageName + &quot; - Chia sẻ kiến thức về &quot; + data:blog.pageName + &quot;. Cùng Khám Phá Blog thảo luận về chủ đề &quot;+ data:blog.pageName + &quot; tại đây&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/> </b:if> </b:if>

2. Tạo box mô tả nội dung cho cho search label

Đôi khi google bot lấy nội dung lung tung trên những bài viết trong trang search label làm description nên thủ thuật này chúng ta tạo một box title và nội dung nằm trên các bài viết của một label cho google bot nó nhận dạng,

 

Để làm việc này các bạn tìm đến thẻ

<b:section class='main' id='main' showaddelement='no'>

Hoặc

<b:section class='main' id='main' showaddelement='yes'>

Và thêm đoạn code sau ngay trên nó

<b:if cond='data:blog.searchLabel'>
<style type='text/css'>
.newsfea h1{
 background-color: #fff;
  background-image: url();
  background-repeat: no-repeat;
  background-position: right center;
  font: 24px &#39;Roboto Condensed&#39;,tahoma, sans-serif;
  font-weight: bold;
  color: #0183f3;
  text-transform: uppercase;
  margin: 0;
  padding: 4px 0 3px 10px;
  text-shadow: -1px -1px #0359B0;
  border-bottom: 2px solid #0183f3;
}</style>
<div class='newsfea'>
<img alt='Templates-Blogspot' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCGKJv4tJARl5DcAghXn3XV_HY3P5PwEXQRi1_QX_X__jPetd1qgFfBKebsSk_lfivaoiIpsOCu6P9q6z1yfFJl7xmhUW8Aymd7MB7QnRm_BWRhruWRat22cHBgrP6RB-Qy0VJKuCf3g/s1600/khamphablog.png' style='float: left;margin-right: 5px;border: 1px solid #cecece;border-radius: 50px;' title='Templates-Blogspot' width='90'/><h1>Chuyên mục : <data:blog.pageName/></h1>Khám Phá Blogspot nơi dậy làm blogspot miễn phí, <b><data:blog.pageName/></b> là một chuyên mục hay mà bạn nên đọc tại <a href='http://www.khamphablog.com/' target='_blank' title='Khám Phá Blog'>Khám Phá Blogspot.</a>
  </div></b:if>

Lưu ý nhớ sửa những nội dung cần thiết cho blogspot của bạn, nhớ đặt từ khóa trong nội dung để việc seo blogspot của bạn tốt hơn.

3. Tối ưu robot.txt cho trang search

Nếu trước đó bạn đã sử dụng file robot.txt để ngăn chặn google bót quét qua trang search label của mình thì bay giờ các bạn thay đổi nó thành
File robot chuẩn cho Blogspot

User-agent: Mediapartners-Google
User-agent: * Allow: /
Sitemap: http://www.khamphablog.com/atom.xml?redirect=false&start-index=1&max-results=500

Bây giờ các bạn có thể lưu templates lại và kiểm tra thành quả của mình được rồi. Chúc các bạn thành công.

[Share] - Templates blogspot chia sẻ ebook

Trước giờ Khám Phá Blog đã share rất nhiều blogger templates chuẩn seo, hôm nay tiếp tục share một templates blogspot làm trang chia sẻ ebook tích hợp giao diện mobi cực kỳ chuyên nghiệp.

Những ưu điểm của ebook blogger templates

• Mobile friendly
• Bài viết trang chủ sử dụng js load đẹp
• Ads header
• Sidebar

DEMO - DOWNLOAD

Templates blogspot rất chuyên nghiệp, mình sợ các bạn chia sẻ lung tung và không để lại nguồn nên bạn nào có nhu cầu thì hãy để lại mail mình sẽ gởi cho bạn nhé. Cảm ơn các bạn đã ghé thăm blog Khám Phá.

[Tips] - Làm sao để rip một templates blogspot

Rip templates blogspot có nhiều người nghĩ là việc làm bất chỉnh, nhưng riêng mình nghĩ đó là một kỹ năng kiếm tiền online, có nhiều nhà thiết kế vẫn phải đi học rip blogspot. Rip templates blogspot có nghĩa là lấy toàn bộ code của một blogspot và làm thành blog của mình.

Vậy làm sao để rip được templates blogspot

1. Hiểu bố cục templates

Đối với templates blogspto thì sẽ có bỗ cục như sau :

<html>
  <head>
Các thẻ meta, title từng trang
<b:skin><![CDATA[
Css của blog
]]></b:skin>
Js của blogspot
  </head>
  <body>
    <header>
Tiêu đề blog
    </header>
    <main>
Phần giữa blog
</main>
<footer>
Footer blog
    </footer>
</body>
</html>

2. Tiến hành rip templates blogspot

Đối với những bạn đã hiểu sơ sơ thì khá đơn giản ở bước 1, sau khi đã hiểu được bố cục templates blogspot thì bạn tạo một blogspot và code mặc định của nó sẽ y chang bố cục ở trên.

Bây giờ mở lên một blogspot cần rip, bấm ctrl + u để xem toàn bộ code của nó. Khi xem code thì từ phần <head> </head> trong code ở blog cần rip các bạn có thể phần loại đâu là css và đâu là js và bỏ vào blog của mình như phần 1 mình đã nói tới. Trước khi thêm vào nhớ hãy xóa toàn bộ css và js trên blog mới tạo.

Sau khi đã xong thì bay giờ chúng ta xóa toàn bộ code trên blog mới từ thẻ <body> đến  </body> và thêm vào dưới thẻ <body> đoạn code sau

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>

Sau đó lưu code lại, vì ít nhất trên blog phải có 1 thẻ <b:section> nó mới cho lưu :D

Bây giờ là giai đoạn khó khăn nhất trong rip templates blogspot, quay trở lại code bạn đã ctrl +u bên blogspot cần rip tiến đến thẻ <body> và chú ý đến các thẻ <div id='abc'> cứ coppy từng thẻ div như vậy và bố trí theo bố cục được sắp xêp sẵn. Cho đến khi

Nếu gặp

+ Header : Tiêu đề bài viết

Thì thêm đoạn code sau

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
</b:section>

+ Các widget : là phần bố cục, sidebar

Thì thêm đoạn code sau

<b:section class='sbar1' id='sbar1' showaddelement='yes'/>

+ Bài đăng trên blog

Thì chèn đoạn code sau :

<b:section class='mainpost' id='mainpost' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Lưu ý : Thay thêm những đoạn code trên thì các bạn nhớ chỉnh sửa class='abc' và id='abc' trong đó abc các bạn thay thế chúng đúng như trong bố cục code blog mà bạn đang rip để cho nó phù hợp với css và js có sẵn. 

Kết luận : Rip templates blogspot cũng chỉ là một điều đơn giản, yêu cầu bạn phải có sự kiên trì, và khéo léo để sắp xếp bố cục để blog hiển thị như ý muốn mà thôi. Làm vài lần các bạn sẽ nhận ra được một điều là ai cũng có thể học rip templates blogspot được cả. 

Nếu gặp bất kỳ vấn đề gì khó khăn trong quá trình rip thì hãy comments or liên hệ với mình, mình sẽ giúp đỡ để bạn dể làm hơn. Chúc các bạn thành công.

[Tips] Recent post 3 cột với thumbnail cho blogspot

Recent post là bố trí hiển thị bài viết trên từng widget theo một nhãn hoặc toàn bộ vài viết trên blogspot, tiện ích này thường được áp dụng cho các blogspot tin tức với nhiều tiện ích widget ở trang chủ với nhiều chủ đề khác nhau.

Thêm Recent post vào blogspot

1. Đăng nhập blogger

Đăng nhập vào blogger templates chỉnh sửa HTML tìm đến thẻ </head> thêm vào đó đoạn code sau :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script>
// Blogger Recent Posts Gallery by http://theblogger911.blogspot.com
// Tutorial at http://theblogger911.blogspot.com/2013/09/customizable-recent-post-image-gallery.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from theblogger911.blogspot.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/AVvXsEhBZPwW7L0lXXY0MizwGTvGXqmgDBHf1vrm1dXog133iK_KFdCRSR1FUodFl8beFIV1NTHzuUwTxFDcIBlxobXbTve7gGsNQFZ-bWNqJG_YOOko84dCAVrr0UZVqXtCNzlV3OzfpXtUc96N/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + tb911rpg_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="' + tb911rpg_thumbSize + '" height="' + tb911rpg_thumbSize + '"/>';
var pTitle = tb911rpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="tb911-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
<style>
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: "";display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-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;}
.tb911rp-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;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS End */
</style>
</b:if>

Ở đây mình dùng thẻ <b:if cond='data:blog.url == data:blog.homepageUrl'> để tối ưu tất cả code chỉ áp dụng cho trang chủ.

Xem thêm : Tối ưu css và js cho blogspot

2. Cài đặt recent post

Bây giờ chỉ cần chèn đoạn code sau ở nơi cần hiển thị

<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>

• 150 là kích thướt hình ảnh hiển thị 

 Đoạn code :

<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>

Giúp hiển thị toàn bộ bài viết trên blog nếu bạn muốn hiển thị bài viết theo một nhãn thì thay đoạn code sau :

<script src="/feeds/posts/summary/-/Label?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>

Vậy là xong, lưu lại và kiểm tra thành quả thôi, chúc các bạn thành công.

[Tips] - Widget bình luận (comments) mới cho blogspot

Comments hay bình luận là những lời góp ý của bạn đọc về blog của mình, tạo widget comments cho blogspot giúp admin nhanh chóng nắm bắt và phản hồi ý kiến bạn đọc, rất hữu ích cho những blog tin tức hay những blog có lượt view cao, giúp admin đỡ nhọc nhằng hơn.

Cách thêm widget comments (bình luận) mới cho blogspot

1. Đăng nhập Blogger

Các bạn đăng nhập vào phần quản lý Blog > Bố cục > Thêm tiện ích HTML Javascript

2. Thiết lập widget

Widget này thường được đặt ở sitebar nên các bạn tạo tiện ích ở sidebar, thêm tiện ích thì một hộp thoại sẽ hiện ra, phần title thì các bạn đặc tùy ý có thể là bình luận mới, hay ý kiến khách hàng gì đấy, và bên dưới thì dán đoạn code sau :

<div style="padding:5px;">
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 8,
showAvatar = true,
avatarSize = 50,
roundAvatar = true,
characters = 50,
showMorelink = false,
moreLinktext = "More &#187;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm",
moreLinktext = moreLinktext || " More &raquo;",
showAvatar = (typeof showAvatar === 'undefined') ? true: showAvatar,
showMorelink = (typeof showMorelink === 'undefined') ? false: showMorelink,
roundAvatar = (typeof roundAvatar === 'undefined') ? true: roundAvatar,
hideCredits = (typeof hideCredits === 'undefined') ? false: roundAvatar;
function w2b_recent_comments(w2b) {
var commentsHtml;
commentsHtml = '<ul class="w2b_recent_comments">';
for (var i = 0; i < numComments; i++) {
var commentlink, authorName, authorAvatar, avatarClass;
if (i == w2b.feed.entry.length) break;
commentsHtml += "<li>";
var entry = w2b.feed.entry[i];
for (var l = 0; l < entry.link.length; l++) {
if (entry.link[l].rel == 'alternate') {
commentlink = entry.link[l].href
}
}
for (var a = 0; a < entry.author.length; a++) {
authorName = entry.author[a].name.$t;
authorAvatar = entry.author[a].gd$image.src
}
if (authorAvatar.indexOf("/s1600/") != -1) {
authorAvatar = authorAvatar.replace("/s1600/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s220/") != -1) {
authorAvatar = authorAvatar.replace("/s220/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s512-c/") != -1 && authorAvatar.indexOf("http:") != 0) {
authorAvatar = "http:" + authorAvatar.replace("/s512-c/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("blogblog.com/img/b16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTEfu66drjMRa-V82WGVpMeMEpulwqfJCTuWhvozzN1eNVHJP_NbAb4o10vFCTppPf7PmVLMHUOpIaL6Oya42Uw4El5x6_SwJ8H3w-lYtC8vcIVTC60VU-hBS7NlzZ_sx-rZVXCsTPKMsX/" + avatarSize + "/ancplayer.png"
} else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6NgMMKQlGuZYvC6iJ2gZlnfrJZU_vfQFS3nG2yWzDj1DgXNHZNelNoytYGnBXOw111ipEYufcblNC_sfmrjOu7Faqc6kgi9LqJMj1QfdRxEfKXsnjFjrNQbgwYFKRFUt-gqOiS8Hxp_S/" + avatarSize + "/ancplayer.png"
} else if (authorAvatar.indexOf("blogblog.com/img/blank.gif") != -1) {
if (defaultAvatar.indexOf("gravatar.com") != -1) {
authorAvatar = defaultAvatar + "&s=" + avatarSize
} else {
authorAvatar = defaultAvatar
}
} else {
authorAvatar = authorAvatar
}
if (showAvatar == true) {
if (roundAvatar == true) {
avatarClass = "avatarRound"
} else {
avatarClass = ""
}
commentsHtml += "<div class=\"avatarImage " + avatarClass + "\"><img class=\"" + avatarClass + "\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"
}
commentsHtml += "<a href=\"" + commentlink + "\">" + authorName + "</a>";
var commHTML = entry.content.$t;
var commBody = commHTML.replace(/(<([^>]+)>)/ig, "");
if (commBody != "" && commBody.length > characters) {
commBody = commBody.substring(0, characters);
commBody += "&hellip;";
if (showMorelink == true) {
commBody += "<a href=\"" + commentlink + "\">" + moreLinktext + "</a>"
}
} else {
commBody = commBody
}
commentsHtml += "<span>" + commBody + "</span>";
commentsHtml += "</li>"
}
commentsHtml += '</ul>';
document.write(commentsHtml)
}
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10"></script></div>

Đấy như thế là đã xong rồi, bay giờ chỉ việc lưu tiện ích widget lại và kiểm tra thành quả thôi. Chúc các bạn thành công. 

[Tips] - Làm đẹp widget nhãn (label) blogpsot

Nhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagerank, nhưng rất ít ai để trên blog của mình vì nó quá xấu nên các blogger ngại đặt nó. Nay khám phá blogspot sẽ giúp bạn làm đẹp label list và label cloud cho blogspot.

Cách làm đẹp cho widget nhãn blogspot
Để làm đẹp cho widget này rất đơn giản bạn chỉ cần thêm một đoạn css vào trước thẻ ]]></b:skin>

/* Labels
----------------------------------------------- */
.list-label-widget-content li{float:left;width:42%;padding-left:20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrjzBuzmsXgvgxNHxEhbTiRtcQfbdex38EiAfTZoP8E6_Miz4YudqM0gTsr73Za7-dTtks0MiRvD_VU2ZB7J-HF3nT6e42YJJ6NLf_b6Nyo0I8hJzGt7MKE0FjTtR1hYAZQ8k44ziKnPgs/s1600/bullet.png) no-repeat scroll 2px 10px;
list-style-type: none;}
.list-label-widget-content li a{color:#999;font-size:15px;}
.cloud-label-widget-content .label-size {font-size: 100%;float: left;}
.cloud-label-widget-content .label-size a {color: #666;float: left;font-size: 13px;margin: 0 5px 5px 0;padding: 5px 15px;text-decoration: none;border: 1px solid #999;border-radius: 30px;}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {background-color: #111;color: #999;text-decoration: none;transition: all 0.2s ease-out 0s;}
.cloud-label-widget-content .label-size span {color: #999;float: left;font-size: 13px;margin: 0 5px 5px 0;padding: 5px;text-decoration: none;border: 1px solid #999;border-radius: 30px;}
.cloud-label-widget-content .label-size span:first-child, .cloud-label-widget-content .label-size span:first-child span:nth-child(2) {background: #111;color: #999;}

 Sau khi thêm xong lưu mẫu lại và kiểm tra thành quả nhé, đù đặt label list hay label cloud đều khá đẹp. Chúc các bạn thành công.

[Tips] - Viết bài như thế nào là chuẩn seo cho blogspot

Phải nói rằng seo blogspot là một cuộc cách mạng cho những blogger, ngoài việc tối ưu cho blog và seo offpage ra thì việc seo onpage như viết bài làm sao cho chuẩn seo cũng là một yếu tố quan trọng trong seo blogger.

Những yếu tố quan trọng trong seo bài viết

1. Title bài viết

Việc đặc title (tiêu đề bài viết) cho bài viết là quan trọng nhất trong việc seo bài viết, việc tối ưu title ít blogger nào nghĩ tới, đặc title làm sao cho thân thiện với người dùng, chứa từ khóa mà người dùng hay search để bài viết của bạn hiển thị trên top. Khi đặt title bạn đừng nghĩ mình là người viết blog mà hãy đặt vị trí mình là một người dùng google search.

Ví dụ : Khi bạn cần một thủ thuật gì đó thì bạn search google như thế nào, ở đây mình lấy ví dụ là bài viết chuẩn seo thì bạn có thể search là

• Cách viết bài chuẩn seo cho blogspot
• Hướng dẫn cách viết bài chuẩn seo cho blogspot
• Làm sao để viết bài chuẩn seo cho blogspot
• ....

Xêm thêm : 30 cách đặt tiêu đề cho bài viết blogspot mà bạn nên dùng

2. Nội dung bài viết

Nội dung bài viết phải diễn đạt rõ ràng chi tiết vấn đề mà title đã đề cập đến, font chữ rõ ràng, bố cục hợp lý. Chia bài viết ra làm 3 phần, mở đầu, nội dung, và kết luận.

Cách bố trí nội dung bài viết tốt nhất là 3 đến 4 dòng bạn hãy ngắt câu xuống dòng để bài viết trong đẹp hơn mà không giống một bài văn khiến người đọc nhàm chán, không nên đặt link quá nhiều trong bài viết, một bài viết tốt nhất chỉ chứa từ 2 đến 3 link trỏ ra ngoài là tốt nhất.

3. Liên kết cố định (url bài viết)

Url bài viết cũng là một trong những yếu tố quan trọng chứa từ khóa, đối với blogger thường bị lỗi chữ "d" khi bạn xuất bản bài viết mà không chỉnh sửa url, hãy nên chú ý đến việc này để có thứ hạng cao hơn.

4. Mô tả tìm kiếm (description)

Mô tả tìm kiếm là nơi hiện thị tóm tắt nội dung bài viết là nơi chứa từ khóa tốt nhất, không nên nhồi nhắt từ khóa quá nhiều mà làm nhu phần mô tả lủng cũng đi. Phần mô tả chứa khoản 120 đến 140 từ là tốt nhất, nếu bạn ghi nhiều hơn nó sẽ hiện dấu ...

5. Thẻ alt và title hình ảnh

Nên đặt title và thẻ alt cho hình ảnh, và chú ý đặt title và thẻ alt khác nhau để tăng mật độ từ khóa cho seo hình ảnh, có thể thêm chú thích cho hình ảnh cũng được.

Nói thêm về hình ảnh cho blogspot, hiện nay nhà mạng VNPT đã chặn hình ảnh dạng có url là blogspot.com, nên có nhiều blog khi xem bằng nhà mạng này bị lỗi hình ảnh. Các bạn có thể xem cách khắc phục ở đây

Xem thêm : Cách khắc phục lỗi hình ảnh cho blogspot

Kết luận : Trên đây là 5 bước để có một bài viết chuẩn seo hoàn toàn, hy vọng những kinh nghiệm của mình có thể giúp các bạn có thứ hạng cao hơn trên google search với blog của riêng mình.