Advertisement

40% Off
Showing posts with label template blogspot. Show all posts
Showing posts with label template blogspot. Show all posts

Tối ưu Seo cho blogspot với thẻ ( tag ) H1, H2, H3 của Bloggerplus

Tối ưu Seo cho blogspot với thẻ (tag) H1, H2 là bài viết gần như duy nhất mà tôi quan tâm tại Bloggerplus, anh ấy đã bỏ blogger khá lâu rồi, khi tôi mới biết đến blogspot thì gần như anh ấy đã không còn hoạt động nữa. bài viết này cũng được Duy phạm góp ý về phần code.
Nếu bạn hiểu được thì bạn cũng sẽ tùy biến được, nhưng với tôi thì đây đã là một bài viết tối ưu về SEO cho blogspot lắm rồi.
Tối ưu Seo cho blogspot với thẻ ( tag ) H1, H2, H3 ,oggy, cartoon for kids , hoat hinh oggy, hoat hinh cho be, seo can ban, seo kien thuc seo, thu thuat seo,thu thuat blogspot, thu thuat blog,css can ban, jquery, tu hoc seo, seo cho nguoi moi bat dau,traffic, thu thuat trafic, backlink, thu thuat ping site, indexNhưng có một sự thay đổi nho nhỏ nữa là chúng ta sẽ không nói đến thẻ H3 nữa mà chúng ta sẽ nói đến thẻ H2 
Thông thường blogger thường sử dụng heading tag H3 cho tiêu đề bài viết. Tuy nhiên theo khuyến cáo thì chúng ta nên sử dụng H1 trong bài viết và H2 ngoài trang chủ để tốt cho SEO.
Tìm đoạn mã sau trong template của bạn <b:if cond='data:post.title'> để tìm tới đoạn code:
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Bạn thay thế toàn bộ đoạn code bên trên bằng một đoạn code mới đầy đủ hơn:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h2 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
Bạn hãy tìm những tag H2 khác mà không phải tiêu đề bài viết và chuyển nó sang tag H3, H4 hay bất kể thứ gì bạn cho là hợp lý.
Việc cuối cùng bạn cần phải làm đó chính là Style CSS cho các các thẻ H1, và H2 sao cho nó phù hợp và hợp mắt thẩm mỹ của bạn.
Còn một điều nữa đó là nếu như trang chủ của bạn đã có 1 thẻ H1 , nhiều thẻ H2 thì bạn co thể chuyển các thẻ H2 trong đoạn code trên sang thẻ H3 sẽ tối ưu hơn. Vì blog của tôi không tồn tại thẻ H2 nào ngoài trang chủ vì vậy việc gán thẻ H2 cho bài viết là hoàn toàn hợp lý.

HỌC CSS3 - XỬ LÝ TEXT

CS3 hỗ trợ một số thuộc tính giúp việc xử lý text hiệu quả hơn.
Nếu trước đây chúng ta gặp khó khăn trong việc xử lý một từ quá dài và bị tràn ra ngoài thẻ HTML thì bây giờ sử dụng CSS3 sẽ giải quyết được.
Chúng ta sẽ học ba thuộc tính sau:
  • text-overflow
  • word-wrap
  • word-break

1. Text Overflow trong CSS3

Thuộc tính text-overflow dùng để xử lý một đoạn text khi bị tràn ra ngoài thẻ HTML.
Cú pháptext-overflow: clip|ellipsis|string|initial|inherit;
Trong đó:
  • clip: là giá trị mặc định, nó sẽ kẹp các văn bản.
  • ellipsis : thêm ba dấu chấm (...) nếu text bị tràn ra ngoài
  • string : tự định nghĩa đoạn text nào đó thêm vào khi bị tràn ra ngoài.
  • initial : thiết lập giá trị mặc định
  • inherit : kế thừa giá trị từ thẻ HTML cha.
Có một số giá trị sẽ không chạy trên trình duyệt Chrome, Opera, ... nên bạn phải cân nhắc khi sử dụng. Tuy nhiên thuộc tính ellipsis thì hoạt động hầu hết các trình duyệt mới hiện nay.
Có một lưu ý nữa là  bạn phải bổ sung thêm thuộc tính overflow:hidden thì nó mới có tác dụng nhé.
Ví dụXEM DEMO
1
2
3
4
5
6
7
8
p{
    white-space: nowrap;
    border: solid 1px;
    width: 100px;
    height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
}
Kết quả:

2. Word Wrap trong CSS3

Thuộc tính word-wrap cho phép đoạn text xuống hàng cho dù chữ đó dài cỡ nào đi nữa.
Cú phápword-wrap: normal|break-word|initial|inherit;
Trong đó:
  • normal: trạng thái mặc định, tức là hiển thị theo mặc định của trình duyệt
  • break-word : sẽ nhảy xuống hàng nếu chữ quá dài
  • initial : trở về trang thái mặc định
  • inherit : kế thừa giá trị từ thẻ HTML cha
Ví dụXEM DEMO
1
2
3
.breakword{
    word-wrap: break-word;
}
Kết quả:

3. Word Break trong CSS3

Thuộc tính word-break trong CSS3 có tác dụng xử lý xuống hàng, tức là bạn có thể cho một chuỗi hiển thị và xuống hàng tại bất kì vị trí nào miễn là nó đã hiển thị full width.
Cú phápword-break: normal|break-all|keep-all|initial|inherit;
Trong đó:
  • normal: trạng thái mặc định, tức là sẽ dừng xuống hàng theo mặc định
  • break-all : có thể xuống hàng bất kì lúc nào khi nó đã hiển thị full width
  • keep-all : xuống hàng nếu chữ hiển thị sẽ bị tràn (overflow)
  • initial : trở về trang thái mặc định
  • inherit : kế thừa giá trị từ thẻ HTML cha
Ví dụXEM DEMO
1
2
3
4
5
6
.break-all{
    word-break: break-all;
}
.keep-all{
    word-break: keep-all;
}
Kết quả:
Bạn thấy đó chữ "bạn" đã bị bẽ gãy xuống hàng một cách không tự nhiên :3.

4. Lời kết

Còn khá nhiều thuộc tính hay nữa nhưng mình không thể liệt kê đầy đủ ở đây được, bạn co thể lên trang W3C để tham khảo nhé.
Bài tiếp theo chúng ta sẽ tìm hiểu thuộc tính font-face trong CSS3.

Code bài viết gần đây recent posts

Chia sẻ các bạn bộ code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts cho blog mà mình đã sưu tầm được. Đặc điểm của style này là có hình ảnh, ngày đăng bài và số bình luận trong mỗi bài đăng. Để thêm code trước tiên ta cần thêm style ảnh vào trước thẻ ]></b:skin>
#random-posts img, #recent-posts img{border-radius:6%; margin:0 10px 0 0; width:70px; height:70px; overflow:hidden; float:left; transition:all .3s ease-out; }Tiếp theo bạn có thể thêm code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts vào bất cứ chỗ nào như chèn vào cuối bài viết, vào sidebar hay footer đều được ví dụ như để thêm vào sidebar vào phần bố cục>sidebar> thêm tiện ích HTML/Javascript

1. Code bài viết gần đây
<div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=5; var rcp_snippet_length=150; var rcp_info='yes'; var rcp_comment='Bình luận'; var rcp_disable='Tắt Bình luận'; 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/AVvXsEjbg7hyphenhyphen_GtU9peE0l0Zw1LgUClVAQhgercel0OBUh5bXbmuhupzhsV6ZwckNj0Wzol0IhcW3KdglGI3DT7_aNWHrIzdlaczYjM3IPhqdSJP55wzGDtuBgBCIi0n9r9pEh7bTzKi5uUCXyIs/"};}};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>2. Code bài viết ngẫu nhiên

<ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; var rdp_info='yes'; var rdp_comment='Bình luận'; var rdp_disable='Tắt Bình luận'; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <script type='text/javaScript'> function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbg7hyphenhyphen_GtU9peE0l0Zw1LgUClVAQhgercel0OBUh5bXbmuhupzhsV6ZwckNj0Wzol0IhcW3KdglGI3DT7_aNWHrIzdlaczYjM3IPhqdSJP55wzGDtuBgBCIi0n9r9pEh7bTzKi5uUCXyIs/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul>Để ẩn ảnh ta thêm giá trị display:none vào style ảnh mà ta đã thêm trước thẻ ]></b:skin>  lúc đầu như ví dụ:
#random-posts img, #recent-posts img{border-radius:6%; margin:0 10px 0 0; width:70px; height:70px; overflow:hidden; float:left; transition:all .3s ease-out; display:none;}Số 5 trong code là số bài viết hiển thị
40% Off