Showing posts with label thu-thuat-blogspot. Show all posts
Showing posts with label thu-thuat-blogspot. Show all posts

Friday, April 21, 2017

Hướng dẫn tạo Bài viết liên quan cho Blogspot theo Nhãn (Label) bài viết

Hướng dẫn tạo Bài viết liên quan cho blogspot theo Nhãn (Label) bài viết

Đọc giả sẽ dễ dàng theo dõi tiếp các bài viết liên quan có cùng nhãn (label) của bài viết hiện tại


Bài viết liên quan hiển thị theo Nhãn (Label) của bài viết Blogspot

Hôm nay Sơn Nguyễn tiếp tục với Series Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot. Và bài hướng dẫn hôm nay sẽ là tạo Related Post theo Nhãn (Label) bài viết Blogspot

Các bước tạo Related Post theo Nhãn (Label) bài viết Blogspot:

Bước 1: Đăng nhập vào Blogspot cần tạo Related Post --> Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML




Bước 2: đặt con trở soạn thảo trong ô code, bấm Ctrl + F để tìm dòng <div class='post-footer'>

Bước 3: Copy đoạn code bên dưới và dán (paste) vào sau dòng <div class='post-footer'> (phía dưới dòng)

<!-- related post --><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='widget-content'><h2>Các bài liên quan</h2><div id='saliproit183'/><br/><br/>&lt;script type=&quot;text/javascript&quot;&gt;homeUrl3 = &quot;nguyentruongson.info&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 6;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+21);label = decodeURIComponent(label);var txt = document.createTextNode(label);var h = document.createElement(&#39;h4&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;saliproit183&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop>&lt;/script&gt;</div></b:if><br/><!-- /related post -->



Bước 4: Bấm Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

- Thay nguyentruongson.info bằng địa chỉ Blogspot của bạn.  Lưu ý địa chỉ Blogspot của bạn ko có "http://" ở đầu và "/" ở cuối nhé (ví dụ link blogspot là: http://affiliatemarketingchitiet.blogspot.com/ thì bạn chỉ lấy affiliatemarketingchitiet.blogspot.com thôi)

- Thông số maxNumberOfPostsPerLabel: số bài viết tối đa được hiển thị của Nhãn (Label) ở mục Bài viết liên quan

- Thông số maxNumberOfLabels: Số Nhãn (Label) tối đã được hiển thị trong mục Related Post (bài viết liên quan)

- Nếu kết quả ko thấy gì thì các bạn xóa đoạn code vừa paste đi và tìm 1 trong 3 dòng dưới đây:
  1. <div class='post-footer-line post-footer-line-1'>
  2. <div class='post-footer-line post-footer-line-2'>
  3. <div class='post-footer-line post-footer-line-3'>
Sau đó dán (paste) lần lượt đoạn code vào sau dòng vừa tìm được (paste vào phía dưới dòng vừa tìm được). Nếu kiểm tra kết quả ok rồi thì thôi, còn ko thì làm lại với dòng khác (nhớ phải xóa đoạn code vừa paste đi nhé, rồi mới tìm dòng khác để paste lại đoạn code vào)

Trang blogspot làm demo cũng phải paste đoạn code vào sau dòng thứ 3 mới có kết quả ^^


Chúc các bạn thành công!
Nhớ bấm  g+ ủng hộ nhé ^^
*Đoạn code được sưu tầm trên mạng

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 37: DreamHost giảm giá Hosting 40% + Free Domain
Bài 39: Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot
Bài sau >>>

Wednesday, April 19, 2017

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Giúp đọc giả thuận tiện theo dõi và xem thêm được nhiều bài viết khác của bạn có liên quan đến chủ đề của bải viết hiện tại của bạn



Có nhiều mẫu Template Blogger có tích hợp sẵn phần Related Post, và có 1 số mẫu thì ko. Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn cách tạo Bài viết liên quan cho Blogspot của bạn (hay còn gọi là tạo Related Post cho Blogspot)


Tạo Bài viết liên quan (Related Post) hiển thị Bài mới nhất (Recent Post)

Bước 1: Đăng nhập vào Blogspot cần tạo Related Post --> Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML



Bước 2: đặt con trở soạn thảo trong ô code, bấm Ctrl + F để tìm thẻ đóng </head>

Bước 3: Copy đoạn code 1 bên dưới và dán (paste) vào trước thẻ </head> (phía trên thẻ)

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript">//<![CDATA[var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};//]]></script></b:if>

Paste đoạn code vào trên thẻ đóng </head>

Bước 4: Tiếp tục bấm Ctrl + F để tìm dòng <div class='post-footer'>

Bước 5: Copy đoạn code 2 bên dưới và dán (paste) vào sau dòng <div class='post-footer'> (phía dưới dòng)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b>Bài viết liên quan:</b><b:loop values='data:post.labels' var='label'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script></div></b:if>

Paste đoạn code phía dưới dòng <div class='post-footer'>

Bước 6: Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

- Thông số var maxresults = 5; Số bài viết hiển thị ở mục Bài viết liên quan (Related Post) bên dưới bài đăng của Blogspot

- Nếu kết quả ko thấy gì thì các bạn xóa đoạn code 2 vừa paste đi và tìm 1 trong 3 dòng dưới đây (bấm Ctrl + F để tìm)
  1. <div class='post-footer-line post-footer-line-1'>
  2. <div class='post-footer-line post-footer-line-2'>
  3. <div class='post-footer-line post-footer-line-3'>
Sau đó dán (paste) lần lượt đoạn code 2 vào sau dòng vừa tìm được (paste vào phía dưới dòng vừa tìm được). Nếu kiểm tra kết quả ok rồi thì thôi, còn ko thì làm lại với dòng khác (nhớ phải xóa đoạn code 2 vừa paste đi nhé, rồi mới tìm dòng khác để paste lại đoạn code 2 vào)

Trang Blogspot làm demo phải paste vào dòng thứ 3 mới ra kết quả đấy ^^


Chúc các bạn thành công!
Nhớ bấm g+ chia sẽ nhé ^^
*Các đoạn code được sưu tầm trên mạng

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 36: 10 lý do bạn nên chọn Hosting trên DreamHost
Bài 37: DreamHost giảm giá Hosting 40% + Free Domain
Bài sau >>>

Wednesday, August 31, 2016

Hướng dẫn tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Hôm nay Sơn Nguyễn chia sẻ thủ thuật Blogger: tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Tiện ích này sẽ giúp các bạn cập nhật các comment mới nhất của đọc giả trên website/Blogspot của bạn, giúp bạn để có phương án xử lý kịp thời (trả lời, hỗ trợ, giải đáp những thắc mắc của đọc giả khi xem bài viết của bạn, hoặc xóa các comment spam ... 1 cách nhanh nhất)


Ko những thế, tiện ích này cũng khá bắt mắt: có hiển thị hình ảnh Avatar của người tham gia comment, đoạn trích bình luận và có hiệu ứng chuyển động khi đưa chuột vào

Tiện ích Bình luận bài viết mới nhất cho Blogspot


Thủ thuật này cũng đơn giản thôi mà ^^

P/s: màu sắc của Tiện ích này tùy thuộc vào Template mà bạn đang dùng cho Blogspot của bạn

Các bước tạo hiển thị Bình luận bài viết mới nhất cho Blogspot 

Bước 1: Đăng nhập vào Blogger

Bước 2: Trong phần quản trị --> Bố cục

Bước 3: Chọn nơi hiển thị tiện ích Bình Luận bài viết mới nhất --> Thêm tiện ích -->  HTML/JavaScript

Bước 4: Đặt tiêu đề cho tiện ích (Bình luận mới nhất hoặc Recent Comments) Sau đó Paste đoạn code bên dưới vào phần nội dung 

Bước 5: Bấm Lưu để lưu lại

Bước 6: Bấm Lưu sắp xếp để hoàn tất

Bước 7: Bấm Xem blog để chiêm ngưỡng thành quả :D

Đoạn code tạo hiển thị Bình luận bài viết mới nhất cho Blogspot

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B-0uHUanipfMU1FDNkI2U1FWMG8"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Các bạn chỉnh sửa các thông số màu xanh cho phù hợp với ý của bạn:
  • numComments = 5: Số bình luận sẽ hiển thị. 
  • showAvatar = true: hiển thị Avatar tài khoản Google của người bình luận (nếu ko muốn hiển thị Avatar thì đổi qua False)
  • avatarSize = 35: Size hình Avatar. 
  • characters = 40: Số ký tự bình luận được hiển thị
  • defaultAvatar = http://www.gravatar.com/avatar/?d=mm: hình Avatar mặc định. 
  • maxfeeds=50: Số lượng bình luận tối đa được hiện thị. 
  • adminBlog='Your Name': Tên Admin.

Chú ý: Tiện ích này chỉ hiện thị những Bình luận được post bằng tài khoản Google thôi nhé, nếu bạn/đọc giả comment bằng Facebook thì nó ko thống kê và hiển thị đâu nhé :D

Để tham gia bình luận, bạn phải đăng nhập vào tài khoản Google (có thể đăng nhập bằng tài khoản Gmail của bạn)

Để xem bình luận thuộc bài nào, bạn bấm vào Bình luận trong tiện ích, trình duyệt sẽ đưa bạn đến bài viết có bình luận đó.


Bạn thử comment dưới bài này và xem kết quả sao nhé ^^ Phần Bình luận bài viết mới nhất của web này nằm ở dưới chân trang ^^ Bình luận mới nhất sẽ nằm trên cùng.

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

P/ss: đoạn code trong bài viết được sưu tầm trên mạng


Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 33: Top 6 nhà cung cấp WordPress Hosting nước ngoài nên dùng
Bài 34: Hướng dẫn tạo Menu Categories danh mục cho Blogspot
Bài sau >>>

Monday, August 29, 2016

Hướng dẫn tạo Menu Categories danh mục cho Blogspot

Hướng dẫn tạo Menu Categories danh mục cho Blogspot

Giúp đọc giả dễ dàng tìm kiếm và dễ theo dõi các bài viết của bạn hơn


Trong thời gian gần đây, có nhiều bạn hỏi Sơn Nguyễn cách tạo Menu có nhiều bài viết? Trong Bài 1 Sơn Nguyễn có hướng dẫn các bạn cách tạo Menu cho Blogspot rồi. Tuy nhiên do tạo Menu bằng Trang bài viết nên chỉ có 1 bài đăng cho Menu đó mà thôi.

Các bài viết cùng chủ đề sẽ được gom lại chung lại trong 1 Categories/Danh mục. Khi đọc giả cần tìm các bài viết về chủ đề đó, về sản phẩm đó thì chỉ cần click vào Menu Categories/Danh mục tương ứng là có thể tìm thấy, khỏi mất thời gian lục lọi tìm kiếm (vì các bài viết có thể được viết vào những thời gian khác nhau, rất mất thời gian để tìm thấy nó, đặc biệt là với những Blogspot có hàng trăm hàng ngàn bài viết)

Để tạo Menu danh mục bài viết cho Blogspot, hay còn gọi là tạo Categories nhiều bài viết, sản phẩm cho Blogspot ta dùng Nhãn (Label) để tạo. Hay nói cách khác là ta quản lý các Nhãn bài viết liên quan đến nhau và đưa chúng lên Menu cho thuận tiện truy cập khi cần thiết

Chỉ là 1 thủ thuật đơn giản của Blogger thôi mà.

Video hướng dẫn tạo Menu Categories danh mục cho Blogspot

[Video đã bị xóa theo kênh cũ]
Subscribe kênh mới https://www.youtube.com/channel/UCry2i_oQ_zmz2fZLCwjHOKQ/featured


Để tạo Menu Categories danh mục cho Blogspot bạn làm theo các bước như sau:

Bước 1: đăng nhập vào Blogspot

Bước 2: Bạn bấm vào Bài đăng mới để tạo bài viết mới, nhập tiêu đềnội dung cho bài viết bình thường.

Bước 3: Sau khi hoàn tất nội dung bài đăng, trước khi Xuất bản bài đăng bạn chủ ý phía bên phải, phần Cài đặt bài đăng, bạn bấm vào Nhãn và tiến hành gắn Nhãn cho bài viết. Mỗi bài viết có thể được gắn nhiều Nhãn nhưng ko được quá 200 ký tự.

Bước 4: bấm Hoàn thành để lưu Nhãn.

Mẹo: bạn có thể tạo Nhãn theo cách: ten-cua-nhan, tên-của-nhãn ...v...v... ko nên tạo các Nhãn như: ten cua nhan, tên của nhãn ...v...v... vì khi tạo Nhãn có khoảng trắng thì link của Nhãn sẽ có những ký tự xấu, ko tốt cho SEO

Ví dụ:
Bạn thiết kế website Bất động sản, thì cách tạo Categories/Danh mục cho các dự án của bạn như sau:

Danh mục các dự án Bất động sản theo khu vực:
  • Căn hộ quận 2 = can-ho-quan-2
  • Căn hộ quận 7 = can-ho-quan-7
Danh mục các dự án Bất động sản theo chất lượng cao cấp:
  • Căn hộ cao cấp (can-ho-cao-cap)
  • căn hộ giá rẻ (can-ho-gia-re) ...v...v....
Nếu bạn bán nhiều dự án Bất động sản thì tạo Categories/Danh mục theo từng tên dự án:

Căn hộ Hà Đô Centrosa Garden quận 10
  • thong-tin-ha-do-centrosa-garden
  • tin-tuc-ha-do-centrosa-garden
  • chuyen-nhuong-ha-do-centrosa-garden
  • ...v...v...
Nếu bạn thiết kế website bán hàng. website tin tức thì cũng làm tương tự

Danh mục sản phẩm Laptop
  • Laptop-dell
  • Laptop-Acer
  • Laptop-hp
Danh mục sản phẩn Điện thoại
  • Iphone
  • Samsung
  • Nokia
  • HTC
  • ...v...v...
Để lấy link của Nhãn, bạn bấm vào bài viết, kéo xuống phía dưới cùng sẽ thấy mục Nhãn. Click vào Nhãn bạn muốn lấy link. Copy đường link xuất hiện

Nếu ko thấy thì bạn quay lại phần quản trị --> Bố cục --> Blog Posts --> tick vào ô Nhãn (Label) là xong

Để quản lý Nhãn bạn vào phần quản trị --> Bài đăng --> Tất cả Nhãn (nằm ở góc trên bên phải)

Như vậy về cơ bản là bạn đã biết cách tạo Menu có nhiều bài viết rồi đấy. (hay còn gọi là tạo Categories Danh mục bài viết, sản phẩm ...). Nếu có gì ko rõ, bạn hãy comment phía dưới mình sẽ giải đáp thêm

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

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 31: Hướng dẫn mua Tên miền trên Namecheap với giá $0.88
Bài 33: Top 6 nhà cung cấp WordPress Hosting nước ngoài nên dùng
Bài sau >>>

Tuesday, August 2, 2016

Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot.

Điều này sẽ giúp đọc giả có cái nhìn tổng quan hơn về trang Blogspot của các bạn



Video hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot 


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/7eRIXxgckrU
Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Đầu tiên các bạn đăng nhập vào Blogger

Trong phần quản trị ---> Bố cục

Ở phía thanh bên bên phải (Sidebar-right) --> Thêm tiện ích --> HTML/JavaScript

  1. Nhập tiêu đề
  2. Dán đoạn code bên dưới vào phần nội dung
<script style="text/javascript">
function showpostcount(json) {
document.write('<left>Tổng Số bài Viết: <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<p>
<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('<left>Tổng Số Comment: <b>' + json.feed.openSearch$totalResults.$t +
'</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
  • Thay dòng màu vàng theo ý thích của các bạn nhé
  • Thay dòng màu xanh bằng trang Blogspot của các bạn

Bấm Lưu để hoàn tất

Kéo sắp xếp Widget theo vị trí mong muốn

Bấm Lưu sắp xếp để hoàn tất

Bấm Xem blog để xem kết quả ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!
P/s: đoạn code được sưu tầm trên mạng,

Thursday, July 28, 2016

Hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot

Hôm nay Sơn Nguyễn sẽ hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot của bạn. 

Bộ này sẽ bao gồm các nút: Facebook, Twitter, G+, Pinterest, YouTube .... đều là các trang mạng xã hội rất nổi tiếng hiện nay. 


Ngoài ra sẽ có thêm 1 liên kết RSS Feed giúp độc giả theo dõi các bài viết của bạn.


Cách tạo Floating Social Bookmark trượt đẹp cho Blogspot

Truy cập vào Blogger --> Đăng nhập --> Chọn Blogspot bạn cần thực hiện --> Vào phần quản trị của Blogspot đó 

Trong phần quản trị Blogspot --> Mẫu --> Chỉnh sửa HTML 

Trong phần code HTML, bấm Ctr+F tìm phần tử  ]]></b:skin>

Copy đoạn code bên dưới và paste vào sau thẻ ]]></b:skin>

social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGKN-5dWRQLgv6GcaESf0zJUTDsiZp-koZEcF32vQrHPcW43mKDuTbbCUyabUZfMyTZklB0zX23pnY23YhOg19nl3_vDS1Zx_EHsysCc0N6-cHQxTxSGIjT-CSCTrCNpA94HqKbHkahaS/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

Trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </head> 

Copy đoạn code bên dưới và Paste vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

Lưu ý: nếu trang Blogspot của bạn đã có thư viện Jquery rồi thì hãy xóa dòng <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> đi nhé ^^

Tiếp tục, trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </body> 

Copy đoạn code bên dưới và Paste vào trước thẻ đóng </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='https://www.facebook.com/nguyentruongson.org' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/SonNguyen83' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a><a class='itemsocial' href='https://plus.google.com/+NguyễnTrườngSơn' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a><a class='itemsocial' href='http://pinterest.com/sontruongnguyen' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Pinterest</span></span></a><a class='itemsocial' href='https://www.youtube.com/user/truongson83' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/nguyentruongson/SsQL' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>

P/s: Thay các thông số màu vàng tương ứng phù hợp với bạn nhé
Bấm Lưu mẫu để hoàn tất

Các bạn tự chiêm ngưỡng thành quả của mình nhé ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

P/s: các đoạn code trong bài viết này được sưu tầm trên mạng


Tuesday, May 31, 2016

Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot

Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot

Giúp bạn quảng bá sản phẩm của mình đến người đọc trên trang Blogspot của mình


Khi bạn đã tự thiết kế website bằng Blogspot chuyên nghiệp rồi thì bạn cũng nên tạo những banner quảng cáo cho các sản phẩm mà bạn đang kinh doanh (hoặc bán quảng cáo cho các đối tác khác khi website/Blogspot của bạn có lượng truy cập nhất định).

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách tạo banner quảng cáo dọc 2 bên website/Blogspot của bạn.  Cũng đơn giản thôi, ko có gì phức tạp cả. Bạn chỉ cần thiết kế trước cho mình 2 hình ảnh banner quảng cáo cho 2 sản phẩm của bạn thôi, phần còn lại để Sơn Nguyễn lo :D

Đối với dạng quảng cáo bằng banner ở 2 bên Blogspot này sẽ có 2 dạng: 1 dạng banner quảng cáo đứng im 1 chỗ và 1 dạng banner quảng cáo trượt dọc 2 bên Blogspot khi kéo chuột. Sơn Nguyễn sẽ hướng dẫn bạn làm cả 2 dạng này luôn, còn bạn chọn dạng banner quảng cáo nào cho Blogspot của bạn thì tùy ở bạn.

Banner quảng cáo dọc 2 bên website/Blogspot


Hướng dẫn tạo banner quảng cáo 2 bên website/Blogspot - fix đứng im 1 chỗ


Đối với website: 
Bạn vào phần chỉnh sửa code và chỉ cần thêm phần code phía dưới lên trên thẻ đóng </body>

Đối với Blogspot
Bước 1: Đăng nhập vào Blog
Bước 2: Vào phần quản trị Blog ---> chọn Bố cục
Bước 3: Chọn Thêm tiện ích
Bước 4: Chọn HTML\Javascripts
Bước 5: Dán (paste) đoạn code bên dưới vào phần nội dung
Bước 6: bấm Lưu để hoàn tất
<div id="left_ads_float">
<a href="Link web 1" target="_blank"><img border="0" src="Link hình ảnh 1" width="120" /></a>
</div>
<div id="right_ads_float">
<a href="Link web 2" target="_blank"><img border="0" src=" Link hình ảnh 2" width="120" /></a>
</div>
<style>
#left_ads_float
{
top:10px;
left: 10px;
position:fixed; }
#right_ads_float
{
top:10px;
right: 10px;
position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
{
if(vtlai_remove_fads)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
return;
}else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
{
vtlai_remove_fads=true;
vtlai_check_adswidth();
return;
}
else
{
var lwidth=parseInt(document.body.clientWidth);
if(lwidth<1110)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
}
else
{
document.getElementById('left_ads_float').style.display='block';
document.getElementById('right_ads_float').style.display='block';
}
setTimeout('vtlai_check_adswidth()',10);
}
}
</script>


Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot 


Dạng này là dạng 2 banner ở 2 bên website/Blogspot. Khi kéo chuột xuống thì 2 banner sẽ trượt theo (banner trượt rất êm, ko dựt dựt gây nhức mắt cho người đọc/khách hàng).

Cách thực hiện như sau

Đối với website: 
Bạn vào phần chỉnh sửa code và chỉ cần thêm phần code phía dưới lên trên thẻ đóng </body>

Đối với Blogspot
Bước 1: Đăng nhập vào Blog
Bước 2: Vào phần quản trị Blog ---> chọn Bố cục
Bước 3: Chọn Thêm tiện ích
Bước 4: Chọn HTML\Javascripts
Bước 5: Dán (paste) đoạn code bên dưới vào phần nội dung
Bước 6: bấm Lưu để hoàn tất

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="Link web 1"><img src="Link hình ảnh 1" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="Link web 2"><img src="Link hình ảnh 2" width="125" /></a>
</div>
<script>
function FloatTopDiv()
{
startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
el.x = startRX;
el.y = startRY;
return el;
}
function m2(id)
{
var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
e2.x = startLX;
e2.y = startLY;
return e2;
}
window.stayTopLeft=function()
{
if (document.documentElement && document.documentElement.scrollTop)
var pY = document.documentElement.scrollTop;
else if (document.body)
var pY = document.body.scrollTop;
if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
ftlObj.y += (pY+startRY-ftlObj.y)/16;
ftlObj.sP(ftlObj.x, ftlObj.y);
ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
ftlObj2.sP(ftlObj2.x, ftlObj2.y);
setTimeout("stayTopLeft()", 1);
}
ftlObj = ml("divAdRight");
//stayTopLeft();
ftlObj2 = m2("divAdLeft");
stayTopLeft();
}
function ShowAdDiv()
{
var objAdDivRight = document.getElementById("divAdRight");
var objAdDivLeft = document.getElementById("divAdLeft");
if (document.body.clientWidth < 1000)
{
objAdDivRight.style.display = "none";
objAdDivLeft.style.display = "none";
}
else
{
objAdDivRight.style.display = "block";
objAdDivLeft.style.display = "block";
FloatTopDiv();
}
}
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");

</script>

Chú ý: Phía cuối đoạn code có vài thông số bạn tham khảo thêm để chỉnh sữa cho phù hợp với website/blogspot của bạn
  • LeftBannerW = 125: độ rộng của banner bên trái
  • RightBannerW = 125: độ rộng của banner bên phải
  • LeftAdjust = 5: khoảng cách từ mép trái trang web đến banner
  • RightAdjust = 5: khoảng cách từ mép phải trang web đến banner
  • TopAdjust = 10: khoảng cách từ mép trên trang web đến banner
Như vậy Nguyễn Trường Sơn đã hướng dẫn cho bạn cách tạo banner quảng cáo trượt dọc 2 bên Blogspot rồi đấy. Hi vọng nó có ích đối với bạn.

Nếu bạn có câu hỏi nào thì hãy comment xuống phía dưới nhé

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

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 9: Hướng dẫn gắn tên miền vào Blogspot đơn giản, nhanh gọn
Bài 10: Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot
Bài sau >>>

Sunday, May 29, 2016

Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot

Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot

Giúp bài viết cảu bạn trông đẹp hơn trong mắt người đọc


Việc dùng Blogger ở Việt Nam là khá phổ biến. Nhưng trong 1 vài năm trở lại đây 1 số nhà mạng đã chặn Blogspot, đặc biệt là nhà mạng VNPT. Nguyên nhân là do mấy phần tử xấu/ phản động thường dùng Blogspot để xuyên tạc, kích động nói xấu chế độ nhà nước. Vì vậy các nhà mạng hầu như chặn tất cả những gì liên quan đến Blogspot. Tất cả các website có tên miền đuôi blogspot.com đều bị chặn hoàn toàn.

Đối với những Blogger đã được gắn tên miền riêng thì vẫn truy cập được, nhưng những hình ảnh trong bài viết Blogspot lại ko hiển thị. Điều này thật bất tiện cho người đọc/khách hàng truy cập vào blogspot của bạn, ảnh hưởng khá lớn đến việc bán hàng online của bạn. Vì vậy hôm nay Sơn Nguyễn sẽ chia sẻ 3 cách khắc phục lỗi không hiển thị hình ảnh của Blogspot do bị các nhà mạng chặn. Những cách này rất hữu hiệu với những Blogspot đã được gắn tên miền riêng.



3 cách khắc phục lỗi không hiển thị hình ảnh của Blogger

Cách 1: Chỉnh sửa thủ công
  • Sau khi Up hình ảnh vào bài viết Blogspot, link hình ảnh sẽ có dạng *.bp.blogspot.com. Khi đó bạn chỉ cần chuyển bài viết qua chế độ HTML và chỉnh sửa link đó thành lh4.googleusercontent.com hoặc lh4.ggpht.com

Cách 2: Chỉnh sửa tự động sử dụng Javascript
  • Với cách này bạn dùng 1 đoạn code ngắn để khắc phục lỗi ko hiển thị hình ảnh của Blogspot, nó sẽ tự động thay thế link hình ảnh trong Blogspot, bạn sẽ không cần ngồi sửa thủ công từng hình ảnh, từng bài.
  • Cách làm như sau:
  • Bạn truy cập vào Blogger.com --> tiến hành đăng nhập bằng tài khoản Gmail của bạn --> chọn trang Blogspot cần khắc phục lỗi ko hiển thị hình ảnh --> vào phần quản trị Blogspot --> Chọn Mẫu --> Chỉnh sửa HTML
  • Trong phần code, bạn bấm Ctr + F tìm thẻ đóng </body>. Sau đó bạn chèn đoạn code này vào trước thẻ  đóng </body> 
<script type='text/javascript'> //<![CDATA[ var images = document.getElementsByTagName("img"); for(var i=0;i<images.length;i++) { images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com"); } //]]> </script>
  • Bấm Lưu mẫu

Cách 3: Chỉnh sửa tự động sử dụng JQuery
  • Với cách này bạn cũng dùng 1 đoạn code ngắn để tự động khắc phục lỗi ko hiển thị hình ảnh của Blogspot. Bạn cũng tiến hành các bước như cách 2
  • Trong phần code bạn bấm Ctr + F tìm thẻ đóng </body>  --> Chèn đoạn code này vào trước thẻ </body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(//[0-9]+(.bp.blogspot)?/, "/lh4.googleusercontent")) });
//]]>
</script>
  • Bấm Lưu mẫu
Chú ý: Nếu Blogspot của bạn đã có thư viện JQuery thì hãy xóa dòng 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
(dòng đầu tiên trong đoạn code)

Nếu gặp vấn đề gì trong việc khắc phục lỗi ko hiển thị hình ảnh của Blogspot các bạn comment vào phía dưới nhé

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

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

Tuesday, January 26, 2016

Hướng dẫn thiết kế website chuyên nghiệp với blogspot

Hướng dẫn thiết kế website chuyên nghiệp với Blogspot

Thực hành tạo Blogger nâng cao chuyên nghiệp hơn


Việc thiết kế website chuyên nghiệp với blogspot đã ko còn là vấn đề với các bạn nữa 
khi đã thực hành thành thạo đến bài này rồi ^^. Hôm nay sẽ là bài thực hành chi tiết thiết kế website chuyên nghiệp miễn phí với blogspot bằng cách thay đổi giao diên/template blogspot chuyên nghiệp hơn

Bài hướng dẫn thiết kế website này chỉ dành cho những người đã thành thạo với blogspot/blogger vì liên quan đến chỉnh sửa code. Vì vậy, nếu bạn nào chưa thành thạo với blogspot thì vui lòng xem lại các bài trước nhé.

Muốn nhanh thì phải từ từ ^.^

Video Hướng dẫn thiết kế website chuyên nghiệp với blogspot



  • Link download Blogger Templates trong video tại đây
  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/rEo8z3avOHo
Sau khi xem video hướng dẫn này xong  là bạn đã tự mình tạo Blogspot chuyên nghiệp rồi đấy. Việc tiếp theo là gắn tên miền cho Blogspot nữa là quá ok luôn, tránh trường hợp Blogger bị chặn bởi các nhà mạng ở Việt Nam

Nếu bạn chưa có tên miền thì có thể tham khảo cách mua tên miền giá rẻ , hoặc bấm vào "Khuyến mãi" hoặc "Domain" trên thanh menu.
Chúc các bạn thành công!

P/s: Nếu thấy nội dung blog này hữu ích thì bạn hãy SHARE và Bấm G+ ủng hộ mình nhé ^^

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 6: Hướng dẫn chỉnh sửa tiêu đề (title) bài viết Blogspot chuẩn SEO
Bài 7: Hướng dẫn thay đổi giao diện/template cho blogspot
Bài sau >>>

Thursday, December 17, 2015

Hướng dẫn chỉnh sửa tiêu đề (title) bài viết Blogspot chuẩn SEO

Sau khi bạn xuất bản bài viết ở Blogspot thì tiêu đề nó thường có dạng: Tiêu đề Blog: Tiêu đề bài viết

Với Tiêu đề (title) như vậy nhìn ko được bắt mắt, và ko thuận tiện cho việc SEO (search engine optimization) bài viết blogspot của bạn lên Top Google. Cá biệt, với những Blogspot có Tiêu đề Blog dài thì gần như Tiêu đề bài viết sẽ ko có cơ hội hiển thị

Vậy nên bạn cần đưa tiêu đề bài viết lên trước theo dạng: Tiêu đề bài viết | Tiêu đề Blog




Các lỗi tiêu đề (title)bài viết Blogspot thường gặp


Khi chia sẽ bài viết lên Facebook hoặc các Group trên Facebook thì sẽ gặp lỗi Tiêu đề Blog: Tiêu đề bài viết trông ko được đẹp mắt


Nếu Tiêu đề Blog dài thì Tiêu đề bài viết sẽ ko có cơ hội để hiễn thị


Trên Google cũng vậy... 

Nếu khách hàng/người đọc lên Google search, và bài viết của mình hiễn thị trước mắt khách hàng, nhưng tiêu đề bài viết lại bị Tiêu đề Blog che mất thì sẽ giảm cơ hội được khách hàng chú ý và click vào

Vậy nên bạn cần chỉnh sửa lại cách hiễn thị tiêu đề bài viết của Blogspot, đưa tiêu đề bài viết lên trước theo dạng: Tiêu đề bài viết | Tiêu đề Blog

Hướng dẫn chỉnh sửa tiêu đề (title) bài viết Blogspot chuẩn SEO

Để chỉnh sửa lại tiêu đề bài viết Blogspot chuẩn SEO (Search Engine Optimization) ta làm như sau:

Bạn vào trang quản trị blog ---> Mẫu ---> Chỉnh sửa HTML

Bấm Ctrl F để tìm <title><data:blog.pageTitle/></title>


Copy đoạn code bên dưới và paste (dán) đè lên đoạn tô màu vàng vừa tìm được:

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

Xong bấm Lưu mẫu để hoàn thành!

Sau đó, nhớ khai báo lại Blogspot của bạn với Google nhé ^^ (Copy đường link blog và Submit nó như đã hướng dẫn ở Bài 1).

Kết quả chỉnh sửa Tiêu đề bài viết blogspot chuẩn SEO

Sau khi đã chỉnh sửa thì Tiêu đề bài viết đã hiễn thị lên phía trước, ko còn bị che bởi Tiêu đề Blog nữa


Tiêu đề bài viết của blog đã ở dạng Tiêu đề bài viết | Tiêu đề Blog


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

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 4: Hướng dẫn thay đổi nội dung chân trang Blogspot
Bài 5: Hướng dẫn cách thêm Fanpage vào Blogspot
Bài sau >>>