Showing posts with label Blogspot. Show all posts
Showing posts with label Blogspot. Show all posts

Wednesday, September 30, 2015

Cách tìm ID của một widget trong Blogspot

Cách tìm ID của một widget trong Blogspot

Nếu bạn đang làm Blogspot, và đang tìm cách ẩn/hiện widget thì bắt buộc bạn phải có được ID của widget đó. Hoặc bạn đang muốn sticky/float một widget nào đó thì bạn cũng cần phải có ID widget. Và rất rất nhiều lý do khác để bạn cần phải có ID widget để có thể tùy chỉnh giao diện theo mong muốn của mình.

Cách tìm ID widget trong Blogspot
Read more »

Friday, September 25, 2015

Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot

Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot

Với những trang lỗi 404, nếu không được tùy chỉnh gì thì nó thật sơ sài và chán ngắt ^_^ Vì thế, với mục đích làm đẹp trang 404, thì mình sẽ hướng dẫn các bạn thay trang lỗi 404 bằng 1 hộp tìm kiếm đẹp cho Blogspot của bạn.

Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot
Read more »

Thursday, September 24, 2015

Tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Widget xếp hạng bình luận (Hay top commentators) sẽ xếp hạng các blogger bình luận nhiều nhất trên blog của bạn, cung cấp cho bạn chi tiết số bình luận của blogger đó trên website bạn trong khoảng thời gian nhất định.

Tạo widget xếp hạng bình luận (Top commentators) cho Blogspot
Read more »

Hiển thị bài viết theo label tại trang chủ Blogspot

Hiển thị bài viết theo label tại trang chủ Blogspot

Bạn muốn một trang chủ Blogspot có giao diện đẹp, hấp dẫn giống một trang báo tương tự như của tranbadat.info hay nhiều trang web khác? Các bài viết sẽ hiển thị theo các label, giúp chúng ta phân ra nhiều chuyên mục tại trang chủ, nhằm giúp độc giả tiếp cận nhiều hơn với các bài viết trên blog.

Hiển thị bài viết theo label tại trang chủ Blogspot

Thủ thuật Blogspot này sẽ sử dụng các label để hiển thị các bài viết trong các label này. Ví dụ, các bạn có thể thấy ở trang chủ của mình. Đó là các label: Blogspot, Windows, SEO, Thủ thuật CNTTNinja Coming. Mỗi label sẽ hiển thị các bài viết nằm trong Label đó. Rõ ràng với cách hiển thị truyền thống là phân trang của blogspot thì các phân các chuyên mục như thế này giúp độc giả dễ dàng tiếp cận các thông tin mà chúng ta đang cung cấp.

Hướng dẫn hiển thị bài viết theo label tại trang chủ Blogspot

- Như thường lệ, tốt nhất trước khi chỉnh sửa chúng ta nên Backup lại code web trước đã.

- Truy cập vào trang quản trị Blogger: https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

edit html


- Click vào vùng code, và tìm đến thẻ ]]></b:skin>, sau đó thêm đoạn code này vào phía trên nó:
img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }
- Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
 <script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=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=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUyLroTs34Xp8VfbtWtMHdqdEnv4ifTzJOm1oukXIMn8ULKJiJvA-Ed8fl_fBBbKIuBawn9YQpFaqotty_PKOCSQ5TrKdmqnRtIryQr5bk5rH4IgYglkC0wXzNEdOCkuS7tJBNWs2G5A/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>
Sau đó lưu template lại.
- Cuối cùng, vào Bố cục (Layout), chọn vị trí mà bạn muốn hiển thị theo label, và thêm tiện ích (Add widget), chọn HTML/Javascript và thêm đoạn code này vào trong nó:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó, chổ label name, các bạn thay bằng tên label muốn hiển thị ở trang chủ nhé.

- Lưu lại và tận hưởng thành quả, bạn đã có thể hiển thị bài viết theo label tại trang chủ blogspot rồi đấy.

Và nếu muốn thêm các label khác, bạn chỉ cần lấy đoạn code phía trên đổi label name thành các label khác rồi thêm vào các vị trí muốn thôi. Và để có giao diện thật đẹp như của mình thì các bạn cần biết CSS để chỉnh sửa bố cục trang web nhé.

Thursday, September 17, 2015

Thêm xác nhận admin trong bình luận cho Blogspot

Thêm xác nhận admin trong bình luận cho Blogspot

Bạn có thấy rằng ở rất nhiều blog trong hộp bình luận có sự khác biệt giữa quản trị viên và khách không? Đó thường là những icon nhỏ như dấu tick, hình người (như của mình) hay là chữ Admin... Giúp người xem dễ theo dõi và biết đâu là Admin web và đâu là khách viếng thăm. Việc thêm các icon nhỏ như vậy giúp tạo ấn tượng cho người dùng, và những bình luận của admin sẽ được chú ý hơn.

Thêm xác nhận admin trong bình luận cho Blogspot
Read more »

Sunday, September 13, 2015

Hướng dẫn tự động thay đổi màu nền cho Blogspot

Hướng dẫn tự động thay đổi màu nền cho Blogspot

Bạn muốn trang web của mình mới lạ với mỗi lượt truy cập, nhằm làm cho người xem đỡ nhàm chán với giao diện hiện tại? Mình đề xuất các bạn nên thay đổi màu nền cho Blogspot của bạn, và mình sẽ hướng dẫn một thủ thuật blogspot giúp các bạn tự động thay đổi màu nền mỗi khi truy cập vào trang blog.

Hướng dẫn tự động thay đổi màu nền cho Blogspot
Read more »

Thursday, September 10, 2015

Template Fabulous Photography Responsive - Nhiếp ảnh

Template Fabulous Photography Responsive - Nhiếp ảnh

Fabulous là một template blogspot cực kỳ sáng tạo dành cho các nhiếp ảnh gia, các nhà thiết kế. Fabulous template có giao diện cực kỳ thanh lịch và hiện đại với thiết kế responsive. Giao diện rất thân thiện với người dùng với nhiều tính năng và giao diện quản trị đơn giản.


Template Fabulous là lựa chọn tốt nhất để giới thiệu các tác phẩm của bạn trong công việc thiết kế, nhiếp ảnh hay nghệ thuật.

Một số tính năng của Templale Fabulous cho Blogspot

  • Thiết kế phong cách bộ sưu tập
  • Giao diện 2 cột
  • Full chiều rộng
  • Thiết kế hoàn toàn responsive
  • Nhiều tùy chọn tác giả
  • Widget đăng ký cập nhật thông tin
  • Trang 404 lỗi tùy chỉnh
  • Tối ưu hóa công cụ tìm kiếm
  • Phát triển bằng cách sử dụng CSS3 và HTML5
  • Tự động điều chỉnh kích thước ảnh thumbnails
  • Tương thích với các trình duyệt phổ biến
  • Thanh sidebar bên phải
  • Hệ thống bình luận Blogger
  • Các bài viết phổ biến với hình thu nhỏ
  • Hiệu ứng phóng to hình ảnh
  • Thanh menu xổ xuống responsive
  • Các bài viết liên quan với hình thu nhỏ
  • Các buttons chia sẻ mạng xã hội
  • Hộp tìm kiếm mở rộng khi rê chuột vào
  • Có hướng dẫn chỉnh sửa đi kèm
  • Vị trí đặt quảng cáo có sẵn

Tuesday, September 8, 2015

Hướng dẫn tạo sitemap cực đẹp cho Blogspot

Hướng dẫn tạo sitemap cực đẹp cho Blogspot

Sitemap là một thủ thuật Blogspot tạo ra một nơi chứa tất cả các bài viết, các label để tiện cho người dùng tìm kiếm, theo dõi. Sitemap được hướng dẫn ở bài này có giao diện khá đẹp, các bạn có thể xem ảnh demo bên dưới:
Hướng dẫn tạo sitemap cực đẹp cho Blogspot
Read more »

Saturday, September 5, 2015

Cách dùng Cloudflare để không bị chặn Blogspot

Cách dùng Cloudflare để không bị chặn Blogspot

Các Blogger mấy hôm nay có lẽ vô cùng cực khổ, ngay trước ngày 2/9 nhà mạng FPT ra tay chặn IP của Blogspot, làm hàng loạt trang blog bị hiện tượng không ổn định, lúc load được trang, lúc không. Điều này ảnh hưởng rất lớn đến lượng visit của website cũng như gây ức chế cho người xem lẫn webmaster.

Cách dùng Cloudflare để không bị chặn Blogspot

Sau mấy ngày tìm cách fix, mình nhận được nhiều hỗ trợ của bà con blogger, tuy nhiên hầu hết các hỗ trợ này không có tác dụng mấy, như việc đổi DNS trên máy (Việc này chỉ giúp bạn vào được web chứ không giúp được người khác vào được web của bạn)... Tiếp đến, mình nghĩ đến việc nhà mạng chặn IP, vậy thì phải tìm cách đổi IP cho blog, nhưng việc đổi IP trên trang chủ tên miền không có tác dụng, đây là lúc mình nghĩ đến Cloudflare.

CloudFlare là một dịch vụ proxy trung gian, nghĩa là thay vì tên miền website của bạn sẽ kết nối với máy chủ qua IP của máy chủ thì lại kết nối đến CloudFlare, mỗi lượt truy cập đều kết nối và xử lý tại CloudFlare trước, điều này có nghĩa website của bạn sẽ được thay đổi IP, DNS.
Và sau khi mình sử dụng thủ thuật áp dụng CloudFlare vào website mình khoảng 3 tiếng sau, mọi thứ rất OK, không còn hiện tượng bị gián đoạn, lúc load, lúc không nữa. Dưới đây là hướng dẫn các bạn dùng CloudFlare.

Hướng dẫn dùng CloudFlare để không bị chặn Blogspot


- Bạn hãy truy cập vào website: https://www.cloudflare.com
Click vào sign up để tạo một tài khoản trên CloudFlare, việc tạo tài khoản là miễn phí. Sau khi tạo tài khoản thì đăng nhập vào đi nhé.

- Click vào Add site ở thanh menu trên cùng, và hãy thêm tên miền của bạn vào và bấm Begin scan:

Cách dùng Cloudflare để không bị chặn Blogspot

CloudFlare đang tiến hành quét tên miền của bạn.

Cách dùng Cloudflare để không bị chặn Blogspot

Sau khi scan xong thì tiếp tục bấm Continue Setup

- Tại đây là danh sách DNS records đã được quét, bạn hãy thêm 2 records TXT dưới đây vào nữa:
MARK.NS.CLOUDFLARE.COM
MARY.NS.CLOUDFLARE.COM
Bạn nhớ kiểm tra phần CNAME trong trang quản trị tên miền còn cái records nào chưa được đưa vào chổ này thì tự thêm vào nha, ví dụ như của mình dưới đây là đã thêm đầy đủ, gồm cả subdomain:

Cách dùng Cloudflare để không bị chặn Blogspot

Chú ý, các record CNAME trỏ về tên miền thì bạn chuyển sang đi qua đám mây nhé, chứ mặc định một số records mới thêm vào nó sẽ đi vòng qua đám mây, click vào đó để chuyển sang đi qua đám mây, tức qua CloudFlare trước.
- Sau khi thêm xong, thì bấm Continue, và chọn Free plan nhé, đây là gói miễn phí, tiếp tục Continue:

Cách dùng Cloudflare để không bị chặn Blogspot


 - Tại đây CloudFlare cung cấp cho chúng ta 2 name server, hãy lấy 2 nameserver này thay vào trong trang quản trị tên miền của bạn:

Cách dùng Cloudflare để không bị chặn Blogspot

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Ví dụ, mình dùng Godaddy thì Nameservers như thế này:

Cách dùng Cloudflare để không bị chặn Blogspot

Click vào Manage, và chon Custom, Add Nameserver:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Nhập 2 nameserver mà CloudFlare cung cấp vào đây và OK, tiếp tục bấm Save sau đó.

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Đây là nameserver sau khi đã thay đổi, là nameserver của CloudFlare:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

- Sau khi add namserver xong thì bạn quay lại trang CloudFlare, khoảng 10" sau bấm Recheck Namservers:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

 - Đây là khi bạn đã xác thực thành công:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Xong, như thế là bạn đã dùng CloudFlare cho tên miền của bạn, nhưng thời gian để áp dụng hoàn toàn sẽ là khoảng vài tiếng sau khi bạn thực hiện dùng CloudFlare. Sau đó thì bạn sẽ không còn bị nhà mạng chặn nữa, truy cập khá mượt mà đấy :D Chúc các bạn thành công!

Monday, August 31, 2015

Cách thiết kế giao diện responsive cho Blogspot

Cách thiết kế giao diện responsive cho Blogspot

Thiết kế giao diện responsive hiện nay là một phần của một trang web chuyên nghiệp, và cả bạn, tôi và nhiều người khác đều thích một trang web có giao diện responsive. Hiện nay giao diện responsive đã trờ thành sống còn, khi các công cụ tìm kiếm ưu tiên nó hơn, và việc phải thiết kế 1 phiên bản di động cho website làm tốn chi phí nhiều hơn nữa.

Cách thiết kế giao diện responsive cho Blogspot

Rất nhiều template tùy chỉnh cho blogspot có responsive, tuy nhiên nhiều template bạn thích lại không có giao diện responsive này? Vậy điều bạn nên làm chính là tùy chỉnh lại giao diện cho blogspot theo hướng dẫn ở bài viết này để trang web của bạn có một giao diện responsive tương thích với mọi kích cỡ màn hình.

Trước tiên, giao diện responsive là gì?

Giao diện responsive dễ hiểu nhất là làm cho trang web tương thích với mọi thiết bị có kích cỡ màn hình khác nhau như PC, laptop, tablet, phablet, smartphone...

Thời gian gần đây rất nhiều blog được thiết kế có giao diện responsive để thay thế giao diện di động mặc định được cung cấp cho Blogger. Vì vấn đề xảy ra là giao diện cho di động chỉ tương thích với điện thoại, trên các máy tính bảng thì giao diện này không thể sử dụng được, vì thế giao diện responsive sẽ là giải pháp.

Câu hỏi đặt ra là: giao diện responsive tốt hơn giao diện di động mới chổ nào?

  1. Giao diện responsive sẽ thân thiện với SEO hơn giao diện di động
  2. Thiết kế responsive có thể tự điều chỉnh cho phù hợp với kích thước màn hình như máy tỉnh bảng, phablet...
  3. Thiết kế responsive giúp giảm tốc độ tải trang, tức là giúp tổng thể trang web được tối ưu hơn
  4. Nếu bạn sử dụng Google Adsense, thì quảng cáo đáp ứng sẽ tốt hơn rất nhiều trên giao diện responsive, giúp bạn tăng thu nhập

Hướng dẫn thiết kế giao diện responsive cho Blogspot

Để có thể thiết kế được giao diện responsive cho trang blogspot của bạn, đầu tiên đòi hỏi bạn phải có những kiến thức cơ bản về html và css đã, vì những hướng dẫn bên dưới này chỉ là những hướng dẫn chung, bạn muốn tùy chỉnh chính xác cho website của mình thì bạn phải nắm rõ thành phần của web mình đã.

- Truy cập trang quản trị của Blogger, tiếp tục vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Cách thiết kế giao diện responsive cho Blogspot

- Click vào vùng code, và tìm đến thẻ <head>, thêm code sau bên dưới nó:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
- Tiếp tục tìm đến thẻ ]]></b:skin>, và thêm đoạn code này vào phía trên nó:
@media screen and (max-width : 1280px) {
/* Cho kích thước màn hình nhỏ hơn 1280 ---*/
/* code css cho desktop ---*/
}
@media screen and (max-width : 1024px) {
/* Cho kích thước màn hình nhỏ hơn 1024 ---*/
/* code css cho tablets ---*/
}
@media screen and (max-width : 768px) {
/* Cho kích thước màn hình nhỏ hơn 768 ---*/
/* code css cho tablets nhỏ ---*/
}
@media screen and (max-width : 640px) {
/* Cho kích thước màn hình nhỏ hơn 640 ---*/
/* code css cho iphone ---*/
}
@media screen and (max-width : 480px) {
/* Cho kích thước màn hình nhỏ hơn 480 ---*/
/* code css cho smartphone ---*/
}
@media screen and (max-width : 320px) {
/* Cho kích thước màn hình nhỏ hơn 320 ---*/
/* code css cho điện thoại nhỏ ---*/
Đây là code css tương ứng với từng thiết bị và kích thước màn hình. Bây giờ bạn có thể tùy chỉnh code các thành phần tương ứng với các kích thước màn hình được rồi.

Thay thế / * code css cho...---* / bằng các id và class của tiêu đề, body, sidebar, footer và các phần khác của blog của bạn.

(max-width: ** px) là chiều rộng tối đa mà code sẽ làm việc giống như nếu bạn đặt mã trong phần max-width là 320px thì khi kích thước màn hình nhỏ hơn 320 px thì đoạn code trên sẽ được áp dụng, còn lớn hơn 320px thì code này sẽ không có tác dụng

Nếu bạn đặt css cho ID1(ví dụ thôi) trong max-width 480 nhưng không phải đặt 320 thì có nghĩa là code css ID1 đó sẽ áp dụng cho khoảng kích thước màn hình từ (0-480), nhưng nếu cả css ID1 trong max-width 320 (Có tùy chỉnh thông số) thì code css sẽ áp dụng: ID1 (tùy chỉnh thông số) từ (0;320) và ID1 từ (320-480).

Ví dụ:
@media screen and (max-width: ****px)
{
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

Một số css quan trọng trong thiết kế giao diện responsive:

  1. Chiều rộng luôn sử dụng %, không được sử dụng px, ví dụ như width:100%
  2. Luôn sử dụng đơn vị em cho kích thước, thay thế cho px. Ví dụ 10em thay cho 10px
  3. Margin:auto để tự động căn giữa và nếu muốn cách các mép một giá trị nào đó thì sử dụng đơn vị % nhé
  4. Display:none để ẩn các thành phần khác
Chú ý: Các đơn vị chiều dài trong giao diện responsive nên là đơn vị % nhé, để tránh trường hợp một số thành phần bị lỗi không hiển thị được.
Hy vọng với bài viết này đã giúp cho bạn "thông não" được các vấn đề liên quan đến giao diện responsive, và hy vọng bạn sẽ thiết kế được một giao diện responsive tốt cho blogspot của bạn. :D

Hướng dẫn thêm widget tác giả bài viết cho Blogspot

Hướng dẫn thêm widget tác giả bài viết cho Blogspot

Bạn vào rất nhiều blogspot thường thấy cuối mỗi bài viết có 1 widget về tác giả bài viết đó, ví dụ như của mình. Widget tác giả bài viết này nhằm cung cấp thông tin cho người dùng về tác giả của bài viết, bạn có thể tùy viết gì trong đó miễn bạn thấy hợp lý và gây ấn tượng cho người xem.

Hướng dẫn thêm widget tác giả bài viết vào Blogspot
Read more »

Thursday, August 27, 2015

Simple Grid - Template cho Blogspot cực đẹp - Responsive

Simple Grid - Template cho Blogspot cực đẹp - Responsive

Simple Grid là một template blogspot phong cách lưới cực đẹp, nhìn rất trang nhã với giao diện sáng sủa. Simple Grid được thiết kế hoàn toàn responsive và đã được tối ưu SEO.

Simple Grid - Template cho Blogspot cực đẹp - Responsive

Đây là một template rất đẹp với giao diện 1 cột, thích hợp cho các trang web cá nhân

Một số thông tin về template Simple Grid:

  • Sử dụng Plugin Masonry
  • Thiết kế dạng lưới
  • Giao diện 1 cột
  • Footer có 3 cột
  • Đã tối ưu SEO 
  • Hệ thống bình luận Blogger
  • Vị trí đặt quảng cáo cũng responsive
  • Thiết kế sáng, sạch sẽ
  • Breadcrumbs
  • Thanh điều hướng top
  • Thanh menu cố định xổ xuống
  • Màu chủ đạo: Trắng, đen
  • Có bài viết liên quan
  • Hộp tìm kiếm
  • Các buttons chia sẻ mạng xã hội
  • Nút back to top
  • Widget theo dõi các mạng xã hội
  • Widget liên hệ
  • Widget Sitemap
  • Thông tin về tác giả

Wednesday, August 26, 2015

Cách tự động thêm nofollow liên kết ngoài trong Blogspot

Cách tự động thêm nofollow liên kết ngoài trong Blogspot

Nofollow những liên kết trỏ ra ngoài blogspot là một điều vô cùng cần thiết để giữ những bọ tìm kiếm ở lại trang web của các bạn. Việc thêm nofollow sẽ giúp web bạn có độ trust hơn và hỗ trợ cho SEO Blogspot tốt hơn.
Cách tự động thêm nofollow liên kết ngoài trong Blogspot
Read more »

Tuesday, August 25, 2015

Tự động tải lại (refresh) trang cho Blogspot

Tự động tải lại (refresh) trang cho Blogspot

Bạn muốn tăng view cho Blogspot của bạn? Vậy thì hãy nghĩ đến việc làm cho Blog của bạn tự động tải lại (refresh) trang sau 1 thời gian. Mỗi lần refresh như thế thì với bộ đếm của Blogspot sẽ tính cho bạn một lượt view.

Tự động tải lại (refresh) trang cho Blogspot
Read more »

Tuesday, August 18, 2015

Cách chuyển hướng Redirect 301 trong Blogspot

Cách chuyển hướng Redirect 301 trong Blogspot

Chuyển hướng Redirect 301 là thuật nghĩa dùng để chỉ việc chuyển hướng liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và bọ tìm kiếm từ đường dẫn cũ sang đường dẫn mới.

Cách chuyển hướng Redirect 301 trong Blogspot

Read more »

Saturday, August 15, 2015

Tối ưu SEO Blogspot: Tối ưu tiêu đề, meta description và meta tags

Tối ưu SEO Blogspot: Tối ưu tiêu đề, meta description và meta tags

Tiếp tục series tối ưu Blogspot, bài viết này sẽ hướng dẫn các bạn cách tối ưu tiêu đề, tối ưu meta description  và tối ưu meta tag cho các trang label, archive, static, 404, tìm kiếm và trang bài viết.

Tối ưu SEO Blogspot: Tối ưu tiêu đề, meta description và meta tags
Read more »

Thursday, August 13, 2015

Template Blogspot - Template Trần Bá Đạt (_CTPG_) đang dùng - Rifqiy

Template Blogspot - Template Trần Bá Đạt (_CTPG_) đang dùng - Rifqiy

Theo mong muốn của nhiều bạn lâu nay, muốn mình share template đang dùng của Trần Bá Đạt (_CTPG_). Và cũng như đã hứa, hôm nay mình sẽ share template này cho các bạn. Template này ban đầu là tên Rifqiy được thiết kế bởi MKR tương tự như các template sau đây:

Template Blogspot - Rifqiy - Responsive by MKR


Tuy nhiên, để làm ra giao diện hiện giờ mình có thay đổi khá nhiều để phù hợp với thẩm mỹ và nhu cầu của mình ^^. Về cơ bản giao diện sẽ giống hệt trang web của mình thôi khi các bạn thêm đầy đủ.

Một số thông tin khác về template Rifqiy:

  • Thiết kế Responsive (gồm Full Width và Box Width)
  • Slideshow tùy chỉnh và slide show tự động
  • 3 hệ thống comment: Blogger, Facebook và Disqus
  • Tìm kiếm sử dụng JSON
  • 5 kiểu bài viết gần đây, sử dụng Ajax
  • Bình luận mới nhất sử dụng Ajax
  • Widget bài viết liên quan dùng Ajax
  • NewsTicker dùng Ajax
  • Hai chế độ xem (List và Grid) với Cookies
  • Tối ưu hóa SEO
  • Emoticon (dùng cho hệ thống bình luận blogger
  • Hỗ trợ RTL ngôn ngữ
  • Tương thích với các trình duyệt phổ biến (IE8 +, Mozilla, Chrome, Safari)
  • Trang 404 tùy chỉnh
  • Bố trí quản trị chuyên nghiệp, giúp bạn dễ dàng làm việc với layout

Tuesday, August 11, 2015

Cách SEO Blogspot: Tôi đã phát triển blog của mình như thế nào?

Cách SEO Blogspot: Tôi đã phát triển blog của mình như thế nào?

Bài viết này nói về cách mình SEO blogspot và phát triển nó như thế nào? Hầu hết những ai làm blog "không với mục đích làm vệ tinh" thì đều muốn trang blog của bạn có nhiều hơn lượt view hơn, phát triển hơn, có một vị thế nào đó trên Google và tất nhiên là cũng muốn kiếm được tiền từ nó.

Tuy nhiên, mỗi người có một chiến lược để phát triển Blog của mình. Có thể bạn gặp rất nhiều bạn ngay từ khi làm blog ra đã thực hiện SEO: viết nội dung và đi backlink về, làm blog vệ tinh khác, kéo traffic liên tục từ các mạng xã hội... Cách làm này rất tốt, tuy nhiên để đạt được thành công gần như bạn sẽ phải bỏ hết thời gian của mình vào nó. Ưu điểm của cách làm này thì chắc ai cũng rõ, lên Google nhanh chóng, tốt và có thể đạt đến những mục đích SEO thành công những từ khóa có tính cạnh tranh; hạn chế của nó chính là đốt hết thời gian của người làm blog theo cách này.

Cách SEO Blogspot: Tôi đã phát triển blog của mình như thế nào?

Read more »

Saturday, August 1, 2015

Tối ưu website khi chia sẻ lên Facebook, G+, Twitter

Tối ưu website khi chia sẻ lên Facebook, G+, Twitter

Chắc hẳn bất kỳ ai đọc bài viết này đều đã và đang sử dụng các mạng xã hội lớn như Facebook, Google + hay Twitter nhỉ? Và ắt hẳn bạn cũng thấy rằng, nhiều liên kết được chia sẻ lên các mạng xã hội trên có định dạng rất đẹp.

Tối ưu website khi chia sẻ lên Facebook, G+, Twitter
Read more »

Thursday, July 30, 2015

Template Blogspot - Johny Demosite - Responsive

Template Blogspot - Johny Demosite - Responsive

Johny Demosite là một template blogspot miễn phí hoàn toàn theo phong cách tạp chí, được thiết kế responsive. Đây là template lý tưởng cho các tạp chí trực tuyến, thư viện, công nghệ và các trang web cá nhân.

Template Blogspot - Johny Demosite - Responsive
Read more »