[Tips] – Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot

Chào các bạn nói đến cách tích hợp Responsive vào blogspot thì khi bạn search google tìm được rất nhiều kết quả, nhưng những bài viết đó đều chung chung, khi các bạn là newbi thì không thể nào thêm nó vào blogspot của mình được. Hôm nay Khám Phá Blog’s sẽ hướng dẫn chi tiết cách tích hợp giao diện mobi cho blogpsot.


Xêm Thêm : Responsive là gì?

Cách thêm Responsive vào blogspot.

Ở đây mình sẽ ví dụ cho các bạn một blog có 1 sidebar-wrapper và một main-wrapper cho các bạn dể hiểu hơn.

1. Tìm hiểu bố cục

Như vậy thì bố cục blog của chúng ta sẽ có Header (tiêu đề or banner blog), main-wrapper (phần nội dung blog), sidebar-wraper (tiện ích, bố cục blog), footer (chân trang blog)

làm seo để thêm Responsive vào blogspot

2. Xây dựng bố cục

Bạn phải tự xây dựng bố cục trong đầu của mình, là muốn ẩn cái gì và hiện cái gì khi xem trên giao diện mobi cho từng loại màn hình. dưới đây là tất cả những loại màn hình phổ thông nhất dùng để tích hợp Responsive.
Đầu tiên chèn đoạn code này dưới thẻ <head>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>

Đoạn code trên giúp nhận dạng từng loại màn hình để hiện thị, và đoạn code bên dưới sẽ giúp hiển thị ở những loại màn hình

@media screen and (max-width : 1280px) {
/* ———— CSS tùy chỉnh cho PC ————*/
}
@media screen and (max-width : 1024px) {
/* ———— CSS tùy chỉnh cho iPad ————*/
}
@media screen and (max-width : 768px) {
/* ———— CSS tùy chỉnh cho iPad nhỏ ————*/
}
@media screen and (max-width : 640px) {
/* ———— CSS tuỳ chỉnh cho iPhone ————*/
}
@media screen and (max-width : 480px) {
/* ———— CSS tùy chỉnh cho điện thoại di động đời cao ————*/
}
@media screen and (max-width : 320px) {
/* ———— CSS tùy chỉnh cho điện thoại di động thường ————*/
}

Và dưới đây là cách chèn css cho từng loại màn hình, ở đây mình ví dụ cho các bạn xem  nhé
Đối với PC thì chúng ta cho hiển thị đầy đủ bố cục

@media screen and (max-width : 1280px) {
#header-wrapper {
width: 1024px;
margin: 0 auto;
}
#sidebar-wrapper {
float: left;
width: 300px;
margin-top: 20px;
}
#main-wrapper {
float: right;
width: 700px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 1024px;
overflow: hidden;
}
}

Đối với những loại màn hình nhỏ hơn chúng ta có thể ẩn sidebar đi chẳng hạng

@media screen and (max-width : 640px) {
#header-wrapper {
width: 600px;
margin: 0 auto;
}
#sidebar-wrapper {display:none;}
#main-wrapper {
float: right;
width: 600px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 600px;
overflow: hidden;
}
}

Cứ như vậy các bạn muốn hiển thị phần nào độ rộng của nó bao nhiu thì các bạn chỉ cần thêm ID của nó vào và thêm kích thước vào và xem thử, nếu chưa cảm thấy ok thì sửa.


Trong quá trình thực hiện các bạn có thể check thử với công cụ kiểm tra Responsive TẠI ĐÂY


Khám Phá Blog’s chúc các bạn thành công, mọi thắc mắc có thể comments bên dưới để được giải đáp.

[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.