Hướng dẫn tạo sitemap cho Blog

Để tạo một sơ đồ trong Blog, các bạn thực hiện theo những bước sau

* Bước 1: Thực hiện việc đăng ký sơ đồ

- Trước tiên bạn cần đăng nhập vào tài khoản emai mà email đó đã dùng tạo blog.
- Vào website  https://www.google.com/webmasters/tools/ . Bấm vào khung chữ màu đỏ có tiêu đề "Add a site"

một khung cửa sổ bật ra, bạn nhập đường link blog cần tạo sơ đồ vào đó, sau đó bấm "continue", lúc này trên màn hình sẽ thông báo là : "Trang web của bạn đã được thêm vào tài khoản của bạn.".

- Tiếp theo bạn click vào "Sitemaps" như hình

- Nó sẽ xuất hiện một khung màu đỏ có nội dung "Add/Test Sitemap

- Sau khi click vào "Add/test Sitemap nó sẽ xuất hiện một khung nội dung như hình dưới, bạn dán đoạn code "/atom.xml?redirect=false&start-index=1&max-results=500" này vào chỗ nội dung "dán code vào chỗ này"

* Bước 2: Tạo trang chứa sơ đồ

- Đăng nhập vào blog của bạn, vào phần tạo trang mới (Pages)

- Chọn New page

- Bấm vào "HTML" và dán đạon code sau vào

<script src="https://googledrive.com/host/0B_EqPkkCHtDLNjAyeFQzaENSTkU" type="text/javascript"></script>

<script src="http://shop-amthucviet.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Thay đoạn link màu đỏ bằng đường dẫn blog của bạn, sau đó bấm Update để hệ thống cập nhật lại

Bảng màu sắc dùng cho thiết kế Web, Blog

Như các bạn đã biết để thay đổi màu sắc của bất kỳ nội dung hoặc background nào thể hiện trên Web hoặc Blog thì chắc chắn các bạn sẽ phải nhớ đến mã code của những màu nào bạn cần, sau đây thì tôi sẽ tổng hợp lại tất cả các mã màu để cho các bạn tiện theo dõi và ghi nhớ

Bảng mã màu theo mã HEX

Bảng mã màu theo mã RGB

255, 255, 255	204, 204, 204	153, 153, 153	102, 102, 102	51, 51, 51	0, 0, 0
153, 204, 0			255, 204, 0	204, 153, 0	255, 204, 51	255, 204, 102	255, 153, 0	255, 153, 102	255, 102, 51	255, 102, 0	204, 51, 0	255, 51, 0			204, 0, 51
204, 255, 0	204, 255, 51	51, 51, 0	102, 102, 0	153, 153, 0	204, 204, 0	255, 255, 0	204, 153, 51	204, 102, 51	51, 0, 0	102, 0, 0	153, 0, 0	204, 0, 0	255, 0, 0	255, 51, 102	255, 0, 51
153, 255, 0	204, 255, 102	153, 204, 51	102, 102, 51	153, 153, 51	204, 204, 51	255, 255, 51	153, 102, 0	153, 51, 0	102, 51, 51	153, 51, 51	204, 51, 51	255, 51, 51	204, 51, 102	255, 102, 153	255, 0, 102
102, 255, 0	153, 255, 102	102, 204, 51	102, 153, 0	153, 153, 102	204, 204, 102	255, 255, 102	153, 102, 51	102, 51, 0	153, 102, 102	204, 102, 102	255, 102, 102	153, 0, 51	204, 51, 153	255, 102, 204	255, 0, 153
51, 255, 0	102, 255, 51	51, 153, 0	102, 204, 0	153, 255, 51	204, 204, 153	255, 255, 153	204, 153, 102	204, 102, 0	204, 153, 153	255, 153, 153	255, 51, 153	204, 0, 102	153, 0, 102	255, 51, 204	255, 0, 204
0, 204, 0	51, 204, 0	51, 102, 0	102, 153, 51	153, 204, 102	204, 255, 153	255, 255, 204	255, 204, 153	255, 153, 51	255, 204, 204	255, 153, 204	204, 102, 153	153, 51, 102	102, 0, 51	204, 0, 153	51, 0, 51
51, 204, 51	102, 204, 102	0, 255, 0	51, 255, 51	102, 255, 102	153, 255, 153	204, 255, 204				204, 153, 204	153, 102, 153	153, 51, 153	153, 0, 153	102, 51, 102	102, 0, 102
0, 102, 0	51, 102, 51	0, 153, 0	51, 153, 51	102, 153, 102	153, 204, 153				255, 204, 255	255, 153, 255	255, 102, 255	255, 51, 255	255, 0, 255	204, 102, 204	204, 51, 204
0, 51, 0	0, 204, 51	0, 102, 51	51, 153, 102	102, 204, 153	153, 255, 204	204, 255, 255	51, 153, 255	153, 204, 255	204, 204, 255	204, 153, 255	153, 102, 204	102, 51, 153	51, 0, 102	153, 0, 204	204, 0, 204
0, 255, 51	51, 255, 102	0, 153, 51	0, 204, 102	51, 255, 153	153, 255, 255	153, 204, 204	0, 102, 204	102, 153, 204	153, 153, 255	153, 153, 204	153, 51, 255	102, 0, 204	102, 0, 153	204, 51, 255	204, 0, 255
0, 255, 102	102, 255, 153	51, 204, 102	0, 153, 102	102, 255, 255	102, 204, 204	102, 153, 153	0, 51, 102	51, 102, 153	102, 102, 255	102, 102, 204	102, 102, 153	51, 0, 153	153, 51, 204	204, 102, 255	153, 0, 255
0, 255, 153	102, 255, 204	51, 204, 153	51, 255, 255	51, 204, 204	51, 153, 153	51, 102, 102	0, 102, 153	0, 51, 153	51, 51, 255	51, 51, 204	51, 51, 153	51, 51, 102	102, 51, 204	153, 102, 255	102, 0, 255
0, 255, 204	51, 255, 204	0, 255, 255	0, 204, 204	0, 153, 153	0, 102, 102	0, 51, 51	51, 153, 204	51, 102, 204	0, 0, 255	0, 0, 204	0, 0, 153	0, 0, 102	0, 0, 51	102, 51, 255	51, 0, 255
0, 204, 153			0, 153, 255	0, 153, 204	0, 204, 255	51, 204, 255	102, 204, 255	102, 153, 255	51, 102, 255	0, 102, 255	0, 51, 255	0, 51, 204			51, 0, 204

Code hỗ trợ yahoo online cho Blog

Như bài trước mình đã hướng dẫn các bạn làm skype online cho Blog.Hôm nay mình sẽ hướng dẫn các bạn cách chèn đoạn code yahoo online vào Blog, bạn nào muốn sử dụng yahoo để hỗ trợ trực tuyến thì có thể làm theo hướng dẫn dưới đây của mình.

Các bước thực hiện:

1- Vào quản trị Blog -- Bố cục -- Chọn ví trị bạn cần cho thể hiện phần yahoo này -- Thêm tiện ích mới (HTML/Javascript).

2- Khi một bảng tiện ích mới xuất hiện, gồm có 2 phần:
- Ở phần tiêu đề các bạn gõ nội dung tuỳ ý có thể ghi là Hỗ trợ online, hỗ trợ trực tuyến v..v
- Ở phần nội dung các bạn copy đoạn code dưới đây và dán vào

<a href='ymsgr:sendim?hotroonline'> <img alt='Liên hệ ' src='http://opi.yahoo.com/online?u=hotroonline&amp;m=g&amp;t=2' title='Liên hệ'/> </a>

Trong đó hotroonline chính là nơi để bạn để nick yahoo của mình vào bằng cách thay hotroonline bằng nick của các bạn vào đây

3- Click vào nút Lưu và xem kết quả.

Trong quá trình thao tác nếu có vướng mắc chỗ nào, các bạn cứ vui lòng để lại comment ở phía dưới, mình sẽ giải đáp trong thời gian sớm nhất

Bài viết liên quan thể hiện dưới dạng ảnh thu nhỏ cho Blog

Bài viết liên quan(Related post) là một tiện ích khá hữu ích trên blog hoặc trên website, nó thể hiện được tất cả các vấn đề liên quan đến một chủ đề nào đó mà khách quan tâm.Hiện tại mặc định thì blog sẽ không có phần bài viết liên quan này.Vì vậy hôm nay huanthai sẽ hướng dẫn các bạn cách tạo tiện ích bài viết liên quan theo hướng những bài viết này sẽ thể hiện dưới dạng những ảnh thumb thu nhỏ gọn, đẹp mắt, nó sẽ tạo tính thẩm mỹ cho phần blog của các bạn.

* Các bước để thực hiện trình bày bài viết liên quan với hình ảnh thu nhỏ(thumbnail) cho blog:
- Vào mẫu (Template) --> Chỉnh sửa mẫu (Edit HTML)
- Sử dụng đoạn code bên dưới để dán vào trước phần thẻ ]]></b:skin>:
----------------------------------------------------------------------------------------------------------------------

ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}

ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}

*html ul.rp#related-posts li{margin:0 13px}

ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}

ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}

ul#related-posts li a:hover .overlay{background:url(https://googledrive.com/host/0B_EqPkkCHtDLVnV0dkNmUFAzWGc);display:block!important;}

ul#related-posts li img{bottom:0;padding:0!important}

ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}

--------------------------------------------------------------------------------------------------------------------------
- Tìm thẻ:  <div class='post-footer'>
Sau đó thêm vào đoạn code bên dưới vào sau thẻ này:

--------------------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2>Bài viết liên quan:</h2>

<script type='text/javascript'>

var defaultnoimage=&quot;https://googledrive.com/host/0B_EqPkkCHtDLb1VzS3FNVGxNY1E&quot;;

var maxresults=6;

</script>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSzEDCjI4TYpSg_dEEsIgONO94icaYUnvuUoXbWgvXkRVDzmIvpA8YozWCI51QSKPaCCvnqxvofSgVnJkMwGQxk_N3SVZnXsU2yt57hS6qFUVo68eyGeb077u3U3yg6qdWWOUazXt3ENC/s1600/noimage-namkna-blogspot-com-1.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:90px;height:90px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</b:if>     
--------------------------------------------------------------------------------------------------------------------------

Với đoạn code này bạn tuỳ chỉnh những chỗ có bôi màu:

- Thay Bài viết liên quan: thành chữ bạn muốn như: bài viết liên quan hoặc có thể bạn quan tâm hay từ nào khác tùy ý bạn,

- var maxresults=5; là số hình ảnh thumbnail muốn hiển thị.
- Lưu lại mẫu và xem kết quả

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

* Mọi thắc mắc hay cần hỗ trợ về vấn đề sử dụng các code này, các bạn vui lòng comment lại mình sẽ giải đáp ngay khi có thể. 

Hướng dẫn tạo bộ đếm số lượt truy cập, số người online bằng Histats trên Blog-Web

Với một trang Blog hoặc một hệ thống website thì việc theo dõi và thống kê số lượt người truy cập, số người đang online trên Blog-Web của mình là hết sức quan trọng, để từ đó mình có thể điều chỉnh và phát triển các nội dung cho phù hợp tiêu chí số người quan tâm đến lĩnh vực đó.

Vì lý do đó mình sẽ chia sẽ cho các bạn một phương thức hoàn toàn đơn giản, không cần đòi hỏi bạn phải giỏi lập trình.Đó là việc các bạn sẽ sử dụng dịch vụ tạo bộ đếm của Histats .Histats là một dịch vụ cung cấp các kiểu mẫu bộ đếm đẹp mắt hoàn toàn miễn phí.Ngoài việc cung cấp đếm số lượt truy cập, Histats còn cấp cung nhiều thông tin khác nhau như Tổng số lượt truy cập (Visits), số lượt truy cập trong ngày (Visit today), tỉ lệ xem trang web trên tổng số lượt truy cập ( Page views per visit), số người đang online ( Online)

* Cách thức thực hiện:

1-Tạo tài khoản trên Histats

 Bạn truy cập vào site Histats, sau đó tạo cho mình một tài khoản ( click vào Register )

Sau đó nhập vào tất cả thông tin theo yêu cầu site

Sau khi hoàn tất các bước đăng ký thì Histats sẽ gửi một email đến địa chỉ email mà bạn đã đăng ký phía trên ( địa chỉ Email mà bạn đã đăng ký, sau này chính là tài khoản để bạn đăng nhập vào site này).Việc còn lại là bạn mở hộp mail của mình để hoàn tất quá trình đăng ký của mình.

2- Sử dụng dịch vụ của Histats

Sau khi các bạn đăng nhập thành công vào Histats, thì nó sẽ đưa bạn đến giao diện khai báo Bolg-Web nào mà bạn cần sử dụng dịch vụ tạo bộ đếm số người truy cập, số người online

Bạn click chọn Add a website,  nó sẽ đưa bạn đến giao diện như hình dưới đây

Nhập đầy đủ thông tin vào các trường ở hình trên và click Continue là hoàn tất quá trình đăng ký tạo bộ đếm cho Blog-Web của mình.

3- Tạo bộ đếm số người truy cập, số người online

Bạn click vào tên Blog-Web của mình vừa đăng ký xong

Lúc này, nó sẽ đưa bạn đến một trang web chứa các thông tin thống kê lượt truy cập, để tạo một bộ đếm cho website, bạn nhấn chuột vào thẻ Counter CODE. 

Bạn click vào add new counter

Và từ đây bạn chọn mẫu bộ đếm cho mình

Chọn mẫu bộ đếm xong, bạn click Save.Đến đây là các bạn đã hoàn thành việc tạo giao diện cho bộ đếm của mình

4- Lấy code bộ đếm để nhúng vào Blog-Web

- Bạn click vào tên bộ đếm của mình để lấy code

- Đăng nhập vào Blog và dán đoạn code trên vào.

Vậy là các bạn đã hoàn thành việc tạo một bộ đếm số người truy cập, số người online và cho nó thể hiện trên Blog-Web một cách hoàn chỉnh.

Quá đơn giản phải không các bạn.Chúc các bạn thành công.

Trong quá trình đăng ký nếu có bất cứ thắc mắc nào các bạn vui lòng để lại comment, mình sẽ giải đáp.

Code hỗ trợ Skype online cho Blog và Website

Giao dịch trực tuyến hiện nay trên website hoặc trên blog v..v là một phương thức không thể thiếu trong quá trình hoạt động mua bán kinh doanh, trao đổi thảo luận về một vấn đề nào đó trong các lĩnh vực hoạt động của mình.Ngoài hình thức gọi điện truyền thống thì còn có một số công cụ hỗ trợ trao đổi giao dịch trực tuyến online như yahoo, skpy.

Chính vì lý do đó tôi sẽ chia sẽ cho các bạn cách thức, cũng như code làm Skype online cho Blog/Website của bạn. 

Các bước thực hiện bao gồm:

1)  Bước 1:Thao tác trên Blog của bạn:

- Vào Bố cục (layout)

- Thêm tiện ích (Add widget) --> Chọn HTML/Javascripts, sau đó dùng đoạn code bên dưới paste vào 

<a href="Skype:Your-ID-Skype?chat"> <img src="http://mystatus.skype.com/bigclassic/Your-ID-Skype" title="Tiêu đề này các bạn tự đặt" width="120" height="30" alt=""> </a>

+ Your-ID-Skype: ID Skype của bạn
+ Bigclassic: là hình dạng nút hiển thị, các bạn có thể thay đổi hình dạng nút này bằng cách tham khảo ở bước 2
+ Width và Height là chiều rộng và chiều cao của nút Skype, bạn có thể điều chỉnh lại tuỳ theo ý của các bạn.
+ Lưu lại và xem kết quả.

2) Bước 2: Thay đổi hình dạng nút Skype

Các bạn có thể thay đổi hình dạng nút này bằng cách truy cập vào đây điền vào thông tin theo hướng dẫn và lấy code về paste vào Blog của bạn.

Nếu gặp trở ngại gì trong quá trình code các bạn vui lòng để lại comment, mình sẽ giải đáp.
Chúc các bạn thành công !

Hướng dẫn đăng ký quyền tác giả với Google Authorship

Google Authorship (Google quyền tác giả) là một phương thức nhằm mục đích bảo vệ quyền lợi chính đáng của tác giả bài viết.

Lợi ích của việc dùng Google Authorship là các bài viết của chính các bạn sẽ được Google ưu tiên hiển thị trên top đầu kết quả tìm kiếm, các bài viết dẫn lại nguồn hợp pháp sẽ được hiển thị ở thứ hạng thấp hơn.Còn các bài viết sao chép trái phép không dẫn lại nguồn sẽ được hiển thị ở thứ hạng rất thấp hoặc có khi không hiển thị.Qua đó cho chúng ta thấy việc Google Authorship đã làm thêm một bước là tăng cường việc SEO ( tối ưu việc hiển thị tìm kiếm ) cho Blog của các bạn.

Nếu các bài viết của bạn bị sao chép lại trái phép, bạn có thể khiếu nại lên Google thì  "đơn khiếu nại" của bạn sẽ được ưu tiên và được xử lý một cách nhanh nhất

Để sử dụng tính năng này của Google thì mình sẽ hướng dẫn các bạn từng bước thực hiện như sau:

1) Cài đặt đồng bộ tài khoản:

- Tạo một tài khoản Gmail

- Tạo ít nhất một trang Blog của chính bạn

- Vào trang https://plus.google.com/ sau đó dùng tài khoản Gmail để đăng nhập và đi tới trang Google Plus ( Google +).

- Tại trang Google Plus bạn cần phải có một ảnh avatar đại diện cho bạn, theo mình thì các bạn nên lấy ảnh của chính bạn, mục đích để Google nhận diện ra bạn.Đến phần tên hiển thị thì các bạn đặt tên sao cho trong profile Google Plus và profile Blog hoàn toàn giống nhau.Tiếp theo bạn vào mục " chỉnh sửa tiểu sử", chọn nút "liên kết" bấm vào "thêm liên kết tuỳ chỉnh", sau đó điền vào phần Nhãn ( tên Blog của bạn), phần URL (địa chỉ Blog của bạn)

Đến phần "cộng tác viên (contributor)" thao tác tương tự.Sau khi hoàn thành sẽ có giao diện như hình bên dưới

2) Đăng ký Google Authorship:

- Truy cập vào site https://plus.google.com/authorship để tiến hành đăng ký 

- Tại giao diện trang chính của trang đăng ký:

ở mục số 4: nhập vào địa chỉ email gmail đã thiết lập ở Google Plus và bấm vào phần " Sign up for Authorship", khi đó một lệnh xác minh của Google sẽ được gửi đến trang Google Plus ở phần tiểu sử của bạn.Bạn trở lại trang tiểu sử trên Google Plus, nếu thấy có dấu kiểm ( như hình dưới đây ) trong phần email thì coi như bạn đã đăng ký thành công

3) Chèn code nhận dạng quyền tác giả: Bước này chỉ là phụ - áp dụng cho những trường hợp không đồng bộ hoàn toàn được giữa tiểu sử Google và tiểu sử Blog hoặc nếu không có email trùng khớp với tên miền.).

- Trở lại Blog của bạn, mở bảng HTML trong template của bạn và thêm đoạn code dưới đây  trước thẻ đóng </body>. 

<a href="https://plus.google.com/ID Google Plus của bạn? rel=author">

4) Xác minh lại thông tin tác giả :

- Truy cập vào đây để đến trang xác minh quyền tác giả

- Tại trang này bạn thay http://huanthai.blogspot.com/ thành URL Blog của bạn và bấm xem trước, nếu thấy ảnh tác giả và tiêu đề blog thì quyền tác giả của bạn đã được công nhận.Để kiểm tra thêm bạn có thể kéo thanh trượt trang này xuống phía dưới để biết rõ thông tin hơn

- Kể từ đây các bài viết của bạn sẽ được bảo vệ bởi Google Authorship.Khi đăng ký thành công thì hình đại diện của bạn sẽ hiển thị cùng với các kết quả tìm kiếm liên quan đến bạn trong vòng ít nhất từ hai ngày tới một tuần lễ, việc nhanh hay chậm tùy theo thứ hạng, uy tín và chất lượng thông tin bài viết trong blog của bạn.

- Nếu sau một tuần lễ, mà ảnh tác giả của bạn vẫn không hiển thị trong kết quả tìm kiếm thì lỗi thường nằm ở khâu đồng bộ giữa tên hiển thị trong profile Google + và trong profile blog của bạn hoặc nội dung bài viết trong blog của bạn có vấn đề. Lúc này, bạn cần chỉnh sửa lại nội dung, nâng cao chất lượng bài viết và đăng ký lại Google Authorship.

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

  

Hiển thị trích đoạn cho bài đăng phổ biến trên blog dạng tooltip

Có rất nhiều cách để thể hiện bài đăng phổ biến trên blog được thể hiện theo dạng tooltip, tuy nhiên những cách đó thường hay sử dụng file js để chạy, với cách này của mình thì các bạn không cần phải có file js, các bạn chỉ việc làm theo hướng dẫn bên dưới để có thể tạo hiệu ứng cho bài viết mình thêm sinh động.

Các bước thực hiện:

Bước 1: Login vào Blogger - Mẫu - Chỉnh sửa HTML
Bước 2: Tìm đến thẻ  ]]></b:skin> sau đó chèn đoạn code bên dưới vào trước đoạn thẻ này 

.tooltip{position:relative;display:block}

.tooltip span{visibility:hidden;position:absolute;bottom:30px;left:50%;z-index:999;width:230px;margin-left:-127px;padding:10px;border:2px solid #0F83A0;opacity:.9;background-color:#A6CED8;background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;text-shadow:0 1px 0 rgba(255,255,255,.4)}

.tooltip:hover{border:0;}

.tooltip:hover span{visibility:visible}

.tooltip span:before,.tooltip span:after{content:"";position:absolute;z-index:1000;bottom:-7px;left:50%;margin-left:-8px;border-top:8px solid #A6CED8;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:0}

.tooltip span:before{border-top-color:#0F83A0;bottom:-10px}

Bước 3: Tìm đoạn code được tô màu cam dưới đây:

<!-- (4) Show snippets and thumbnails -->

<div class='item-content'>

    <b:if cond='data:post.thumbnail'>

        <div class='item-thumbnail'>

            <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>

        </div>

    </b:if>

    <div class='item-title'>

        <a expr:href='data:post.href'><data:post.title/></a>

    </div>

    <div class='item-snippet'>

        <data:post.snippet/>

    </div>

</div>

Sau khi tìm được thì thay thế toàn bộ đoạn code đó thành đoạn code ở bên dưới:

<!-- (4) Show snippets and thumbnails -->

<div class='item-content'>

    <div class='item-title'>

        <b:if cond='data:post.thumbnail'>

            <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' height='38px' width='38px'/>

        </b:if>

<a class='tooltip' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a>   </div>

</div>

Bước 4: Lưu lại template và tận hưởng thành quả các bạn nhé.