[Tips] – Tích hợp Responsive vào Blogspot như thế nào?

Responsive là gì?

Responsive cũng là một loại giao diện mobi cho blogspot, nhưng nó được cài đặt nhanh gọn hơn và đơn giản hơn kiểu giao diện mobi bạn thường thấy.

Kiểu giao diện mobi bạn thường thấy : Là một loại giao diện mobi được nhà thiết kế tích hợp vào templates blogspot, nhưng giao diện mobi này khác hẳn hoàn toàn so với templates được xem trên Desktop.

Responsive : Là kiểu giao diện mobi đơn giản nhưng khá đẹp, kiểu này cũng đc nhà thiết kế tích hợp vào hoặc tự chúng ta cũng có thể tích hợp được vì nó khá đơn giản. Ưu điểm của Responsive là khi xem trên mobi thì giao diện nó vẫn giống khi xem trên Desktop nhưng nó co lại cho vừa màn hình mobi trông khá đẹp.

Responsive là gì?
Hướng dẫn tích hợp Responsive cho blogspot

Vậy làm sao để thêm Responsive vào Blogspot?

Bước 1 : Vào phần quản trị Blogger > Mẫu (templates) > Chỉnh sửa HTML, và tìm đến thẻ <head> và thêm thả meta này dưới thẻ <head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>

Bước 2 : Tìm đến thẻ ]]></b:skin> và thêm đoạn code sau ngay bên trên nó 

@media screen and (max-width : 1280px) {/* CSS FOR NETBOOK AND DESKTOP ————*/}
@media screen and (max-width : 1024px) {/* CSS FOR TABLETS ————*/}
@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ————*/}
@media screen and (max-width : 640px) {/* CSS FOR IPHONE ————*/}
@media screen and (max-width : 480px) {/* CSS FOR MOBILES ————*/}
@media screen and (max-width : 320px) {/* CSS FOR SMALL OLD MOBILES ————*/}
Trên đây là thông số màn hình của tất cả các loại thiết bị di động iphone, ipad …


Nếu không được có thể thử cách dự phòng này bằng cách thêm toàn bộ code bên dưới trên thẻ </head>

<style>@media (max-width: 1023px){#outer-wrapper {width: 700px;background:#fff!important; }#header-wrapper { width:700px;padding-top: 10px;padding-bottom: 10px;} #footersec3 {display: none;}body{min-width:700px !important;}#main-wrapper {width: 675px!important;margin-right: 10px!important;margin-left: 15px;}#footer-widgets {width: 700px;}.container {width: 700px;margin: auto;}#breadcrumb_home {width: 700px;}#rsidebar-wrapper {width: 700px; }.footer-widget-box {width: 215px;}.label_with_thumbs li {width: 327px;}.postmeta-primary {width: 480px;font-size: 10px!important;}#footer-widgets-container-wrap {margin: auto;width: 700px;}.span-24, div.span-24 {width: 465px!important;height: 40px!important;float: left;overflow: hidden;margin: auto;}.menu-secondary li a {font-size: 10px;}#search {width: 250px;margin-right: 15px!important;}.postmeta-primary {width: 670px!important;font-size: 10px!important;}.container p, .container a {font-size: 14px!important;}#breadcrumb {margin-top: 55px;}}@media (max-width: 767px){.span-24, div.span-24 {width: 230px!important;}#outer-wrapper {width: 440px;background:#fff!important; }#header-wrapper { width:440px;padding-top: 10px;padding-bottom: 10px;body{min-width:440px !important;}#main-wrapper {width: 413px!important;margin-right: 10px!important;margin-left: 15px;}#footer-widgets {width: 440px;}.container {width: 440px;margin: auto;}#breadcrumb_home {width: 440px;}#rsidebar-wrapper {width: 440px; }.footer-widget-box {width: 190px;}.postmeta-primary {width: 440px;font-size: 10px!important;}#footer-widgets-container-wrap {margin: auto;width: 440px;}.span-24, div.span-24 {width: 250px!important;height: 40px!important;float: left;overflow: hidden;margin: auto;}.menu-secondary li a {font-size: 10px;}#breadcrumbs-mbl {display: none;}#search {width: 440px;margin-right: 15px!important;}.postmeta-primary {width: 440px!important;font-size: 10px!important;}.container p, .container a {font-size: 14px!important;}#breadcrumb {margin-top: 55px;}.post.hentry {width: 420px;}#browsermore {display: none;}.tweeetero, .fbwolo, .g-plusones {float: left;}.tweeetero {margin-left: 20px;}#s {width: 380px;}.comments .comment-thread.inline-thread .comment {width: 341px;}.thread-chrome.thread-expanded .comment-content {width: 260px;line-height: 22px;overflow: hidden;}.comments .comment-block, .comments .comment-thread.inline-thread .comment {width: 340px;}.comment-form {width: 426px;}#related-posts {width: 440px;}.container p {width: 370px;margin-top: 10px!important;padding-top: 0px;}}@media only screen and (max-width:479px) {.container p {width: 220px!important;margin-top: -5px!important;}#outer-wrapper {width: 280px;background:#fff!important; }#header-wrapper { width:280px;padding-top: 10px;padding-bottom: 10px;body{min-width:280px !important;}#main-wrapper {width: 253px!important;margin-right: 10px!important;margin-left: 15px;}#footer-widgets {width: 280px;}.container {width: 280px;margin: auto;}#breadcrumb_home {width: 280px;}#rsidebar-wrapper {width: 280px; }.footer-widget-box {width: 250px;}.label_with_thumbs li {width: 227px;}.postmeta-primary {width: 250px;font-size: 10px!important;}#footer-widgets-container-wrap {margin: auto;width: 250px;}.span-24, div.span-24 {width: 250px!important;height: 40px!important;float: left;overflow: hidden;margin: auto;}.menu-secondary li a {font-size: 10px;}#breadcrumbs-mbl {display: none;}#search {width: 270px;margin-right: 15px!important;}.postmeta-primary {width: 280px!important;font-size: 10px!important;}.container p, .container a {font-size: 14px!important;}.span-24 {display: none;}#breadcrumb {margin-top: 55px;}.post.hentry {width: 255px;}#browsermore {display: none;}.tweeetero, .fbwolo, .g-plusones {float: left;}.tweeetero {margin-left: 30px;}#header-inner {margin-left: 60px;}#blog-pager {width: 250px;}#related-posts {width: 275px;}#s {width: 220px;}.comments .comment-thread.inline-thread .comment {width: 351px;}.thread-chrome.thread-expanded .comment-content {font-size: 8px;width: 110px;margin-left: 15px;}.comments .comment-block, .comments .comment-thread.inline-thread .comment {width: 180px;}.comment-header {padding-bottom: 30px;}.comment-form {width: 186px;}}@media only screen and (max-width:319px) { .container p {width: 220px!important;margin-top: -5px!important;}#outer-wrapper {width: 200px;background:#fff!important; }#header-wrapper { width:200px;padding-top: 10px;padding-bottom: 10px;body{min-width:200px !important;}#main-wrapper {width: 195px!important;margin-right: 0px!important;margin-left: 0px;}#footer-widgets {width: 200px;}.container {width: 200px;margin: auto;}#breadcrumb_home {width: 200px;}#rsidebar-wrapper {width: 200px; }.footer-widget-box {width: 180px;}.label_with_thumbs li {width: 227px;}.postmeta-primary {width: 200px;font-size: 10px!important;}#footer-widgets-container-wrap {margin: auto;width: 200px;}.span-24, div.span-24 {width: 200px;height: 40px;float: left;overflow: hidden;margin: auto;}.menu-secondary li a {font-size: 10px;}#breadcrumbs-mbl {display: none;}#search {width: 220px;margin-right: 15px!important;}.postmeta-primary {width: 210px!important;font-size: 10px!important;}.container p, .container a {font-size: 14px!important;}.span-24 {display: none;}#breadcrumb {margin-top: 55px;}.post.hentry {width: 205px;}#browsermore {display: none;}.tweeetero, .fbwolo, .g-plusones {float: left;}.tweeetero {margin-left: 30px;}#header-inner {margin-left: 15px;}#blog-pager {width: 200px;}#related-posts {width: 215px;}#s {width: 170px;}.comments .comment-thread.inline-thread .comment {width: 301px;}.thread-chrome.thread-expanded .comment-content {font-size: 8px;width: 60px;margin-left: 15px;}.comments .comment-block, .comments .comment-thread.inline-thread .comment {width: 120px;}.comment-header {padding-bottom: 30px;}.comment-form {width: 136px;}#search {margin-right: 0px!important;}}</style>

Bước 3 : Sau khi thêm vào xong lưu mẫu lại mà mang di động ra thử nhé. Chúc các bạn thành công. 

[Tips] – Cách tạo đường dẫn thông minh cho Blogspot (Breadcrumbs)

Đường dẫn thông minh là gì? Và tại sao phải sử dụng đường dẫn thông minh? Đường dẫn thông minh cho blogspot hay còn được gọi tắt là Breadcrumbs. Nói đến Breadcrumbs thì chúng ta nói đến cái đẹp cho blogspot. Đẹp trên kết quả tìm kiếm google và cả trong blogspot.
Đẹp trên kết quả tìm kiếm google

làm sao để tạo Breadcrumbs cho blogspot
Breadcrumbs cho blogspot

Đẹp cho blogspot

Cách tạo Breadcrumbs cho blogspot



Ngoài việc để làm đẹp ra thì còn để google nó tôn trọng mình hơn với những url thân thiện.

Vậy để thêm Breadcrumbs vào blogspot chúng ta phải làm như thế nào?

Bước 1 : Vào bảng điều khiển blogspot > Mẫu (templates) -> Chỉnh sửa HTML
Bước 2 : Tìm đến thẻ ]]></b:skin> và thêm đoạn code sau phía trên nó.

.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

Bước 3 : Bấm ctrl + F và tìm đoạn code sau :

<b:include data=’top’ name=’status-message’/>

xóa nó đi và thay vào đó là đoạn code này

<b:include data=’posts’ name=’breadcrumb’/>

Bước 4 : Tiếp tục tìm đoạn code sau

<b:includable id=’main’ var=’top’>

Thêm tất cả code bên dưới ngay trên nó

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType == “static_page”‘>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond=’data:blog.pageType == “item”‘>
<!– breadcrumb for the post page –>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<div class=’breadcrumbs’ xmlns:v=”http://rdf.data-vocabulary.org/#”>
<span typeof=”v:Breadcrumb”><a expr:href=’data:blog.homepageUrl’ rel=”v:url” property=”v:title”>Trang chủ</a></span>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == “true”‘>
» <span typeof=”v:Breadcrumb”><a expr:href=’data:label.url’ rel=”v:url” property=”v:title”><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond=’data:blog.pageType == “archive”‘>
<!– breadcrumb for the label archive page and search pages.. –>
<div class=’breadcrumbs’>
<span><a expr:href=’data:blog.homepageUrl’>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == “index”‘>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == “”‘>
<span><a expr:href=’data:blog.homepageUrl’>Trang chủ</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href=’data:blog.homepageUrl’>Trang chủ</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

 Lưu ý nhỏ : Nếu templates blogspot của bạn có 2 dòng như thế thì hãy thêm lần lượt và kiểm tra kết quả khi nào được thì dừng lại nhé. Chúc các bạn thành công.

[Tips] – Cách SEO Blogspot với Google Webmaster Tools

Google Webmaster Tools thì mình nghĩ ắc hẳn bạn nào cũng biết đây là một công cụ dùng để đưa sitemap lên google để google nó update bài viết cho blogspot. Trên google hiện nay có rất nhiều bài viết về vấn đề này nhưng đâu là đúng đâu là sai. Bài viết này mình sẽ hướng dẫn kỹ cho các bạn.


Đầu tiên để đến với công cụ này các bạn truy cập tại đây

Nếu các bạn đã đăng nhập tài khoản gmail của mình rồi thì giao diện của nó sẽ như thế này

Hướng dẫn seo blogspot với google webmaster tools
Cách SEO Blogspot với Google Webmaster Tools




Tới đây các bạn click vào Thêm trang web và thêm link blog hoặc website của mình
Lưu ý : Đối với bất kỳ website hay blog nào đều có www.doman.comdoman.com. Hãy chắc chắn rằng các bạn thêm cả hai doman này cho một blogspot hoặc website.

Sau khi đã thêm xong rồi thì chúng ta bắt đầu cài đặt cho blogspot hoặc website của mình.
Thứ nhất : Chúng ta bắt đầu đưa sitemap lên google webmaster tools. Các bạn click chọn Sơ đồ web.
Cách SEO Blogspot với Google Webmaster Tools
Thêm sitemap

Click chọn thêm và kiểm tra sơ đồ web và thêm vào đó url sitemap blog hay website của bạn.
Cách SEO Blogspot với Google Webmaster Tools
Tạo sitemap cho blogspot
Sau đó thì bấm Gửi sơ đồ trang web.
Thứ hai : Chúng ta cài đặt tên miền ưu thích cho blogspot hoặc website, các bạn chọn cài đặt trang web.

Cách SEO Blogspot với Google Webmaster Tools
Cài đặt url ưu thích cho blog

Giải thích : Tên miền ưu thích là gì? tên miền ưu thích có nghĩa là tên miền khi google nó index lên công cụ tìm kiếm nó sẽ hiển thị dạng nào, ở đây chúng ta có hai dạng đó là doman.com hoặc www.doman.com






Ở đây thì đối với website thì chúng ta chọn doman.com làm tên miền ưu thích, còn đối với blogspot thì chọn www.doman.com làm tên miền ưu thích.






Thứ ba : Chúng ta cài đặt mục tiêu người dùng cho website hoặc blogspot. Ở menu bên trái các bạn chọn Lưu lượng tìm kiếm > Nhắm mục tiêu quốc tế.

Cách SEO Blogspot với Google Webmaster Tools
Nhắm mục tiêu quốc tế cho blogspot

Chọn quốc gia, tít vào Hướng đến người dùng tại và các bạn chọn Việt Nam nhé. Như vậy là bài hướng dẫn Cách SEO Blogspot với Google Webmaster Tools của mình đến đây là kết thúc. Chúc các bạn thành công.


[Tips] – Hướng dẫn cài đặt blogspot dành cho newbi

Chào các bạn đến với Blogspot thì bất cứ ai cũng cảm thấy bỡ ngỡ và bàng hoàng vì không biết cài đặt cho blog của mình và phải cài đặt như thế nào. Thì bài viết mở đầu này Hồng sẽ giúp các bạn về điều này.

1. Tạo tài khoản blogger

Để bắt đầu thì các bạn hãy dùng tài khoản gmail của mình để tạo một blogspot cho riêng mình Tại Đây
Lưu ý : Mình khuyên các bạn nên dùng gmail bởi vì sao, bởi vì sau này nhở bạn chơi adssense thì nó cũng chỉ hỗ trợ dùng gmail mà thôi, các bạn chú ý nhé.


Sau khi đã tạo xong thì các bạn thấy một giao diện như hình dưới, đây là giao diện quản trị của admin blog.

cách cài đặt blogspot dành cho newbi
Giao diện quản trị blogspot

Đối với blog mới tạo thì các bạn chỉ cần chú ý cho mình hai mục dưới cùng là Mẫu và Cài đặt. Bài này mình sẽ nói về hai điều này.

2. Chỉnh sửa mẫu tối ưu seo

Đối với mẫu thì các bạn có thể tìm kiếm một templates blogspot (mẫu hay còn gọi là giao diện blogspot) chuẩn seo bằng cách tìm trên google, mua, hay tự thiết kế cho mình …Sau khi đã có một mẫu ưng ý thì các bạn có thể vào mục Cài đặt > Khác > Nhập blog và chọn đến file xml (là file templates blogspot của bạn) để up giao diện.

Sau khi đã up lên rồi thì bây giờ là tới phần quan trọng nhất đó là tối ưu title, description, keywords cho tất cả các trang như trang page, search label, trang bài viết, trang chủ …

Để làm được việc này một cách đơn giản thì các bạn làm như sau :

Mình sẽ hướng dẫn các bạn làm những việc này theo chuẩn All In One SEO giống như wordpress chúng ta thường dùng.

Các bạn đăng nhập vào Mẫu > Chỉnh sửa HTML, và tìm đến thẻ <head>, các bạn xóa dùm mình tất cả code từ thẻ <head> cho đến thẻ <b:skin> và thay thế vào đó là đoạn code sau dùm mình.

<!– All In One SEO 2014 Start –>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if><b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<meta content=’noindex, nofollow’ name=’robots’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta expr:content=’data:blog.title’ name=’keywords’/>
<meta content=’index, follow’ name=’robots’/>
</b:if><b:else/>
<b:if cond=’data:blog.pageTitle != data:blog.title’>
<meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if></b:if>
<meta content=’global’ name=’distribution’/>
<meta content=’1 days’ name=’revisit’/>
<meta content=’1 days’ name=’revisit-after’/>
<meta content=’document’ name=’resource-type’/>
<meta content=’all’ name=’audience’/>
<meta content=’general’ name=’rating’/>
<meta content=’all’ name=’robots’/>
<meta content=’index, follow’ name=’robots’/>
<meta content=’en-us’ name=’language’/>
<meta content=’VN’ name=’country’/>
<link href=’https://plus.google.com/+YourProfile/about’ rel=’author’/>
<link href=’https://plus.google.com/+YourProfile/posts’ rel=’publisher’/></b:if>
<!– All In One SEO 2014 End –>

Ở đây phía dưới cùng có hai link YourProfile các bạn hãy thay bằng link Googleplus của mình nhé
Sau khi hoàn thành hãy lưu templates blogspot của bạn lại, và kiểm tra bằng cách viết một bài viết mới hoặc page để coi title của nó thay đổi như thế nào nhé.

3. Cài đặt chỉnh sửa

Phần cài đặt cho blogspot, đến phần này thì điều đầu tiên các bạn phải làm là cài đặt title và mô tả cho trang chủ blog (description).


Làm điều này bằng cách nào ?
Các bạn vào Cài đặt > Cơ bản thì ngay lập tức các bạn nhìn thấy title và mô tả.

Hướng dẫn cài đặt blogspot cho newbi
Cài đặt title và mô tả cho trang chủ blogspot
Đến đây chắc các bạn cũng thắc mắc rằng tại sao khi nãy làm trên templates rồi mà bay giờ còn làm nữa, tại vì là để google nó index từ khóa, đôi khi mất cái này còn cái khác, các bạn khỏi lo nhé.

Tiếp theo các bạn để ý dùm mình phần tùy chọn tìm kiếm : Cài đặt > Tùy chọn tìm kiếm

Ở đây chúng ta vẫn thấy có một mục mô tả nữa, vậy đó là gì? Mô tả ở đây chính là bật hoặc tắt mô tả cho bài viết. Có nghĩa là khi bạn đăng bài thì nó sẽ có một phần mô tả tìm kiếm thủ công nằm phía bên phải để cho các bạn điền vào. Nếu các bạn không thích thì tắt cũng được vì đã khi nãy chúng ta đã cài đặt trong mẫu rồi.
hướng dẫn cài đặt blogspot cho newbi
cài đặt mô tả cho bài viết blogspot

4. Tối ưu robot.txt cho blogspot

Khi đi đã xong thì chúng chúng kéo xuống dưới và thiết lập phần Trình thu thập thông tin và lập chỉ mục. ở đây chúng ta có hai mục đó là robots.txt tùy chỉnh và thẻ tiêu đề robot tùy chỉnh.


Đối với robots.txt tùy chỉnh thì các bạn bấm chỉnh sửa và thêm vào đó đoạn code sau : 

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html
Sitemap: http://domanhhongblog.blogspot.com/feeds/posts/default?orderby=UPDATED



Thay link blog của mình thành link blog của bạn nhé

Đối với thẻ tiêu đề robot tùy chỉnh thì các bạn tít vào theo hình dưới của mình
hướng dẫn cài đặt blogspot cho newbi
cài đặt robot tùy chỉnh cho blogspot
Như vậy là chúng ta đã hoàn thành bước khởi đầu cài đặt cho blogspot của mình, bài tiếp mình sẽ hướng dẫn các bạn cách đưa sitemap lên google webmaster tools hay còn gọi là cách seo blogspot với google webmaster tools. Các bạn hãy đón đọc nhé