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.
Bước 2 : Tìm đến thẻ ]]></b:skin> và thêm đoạn code sau ngay bên trên nó
 |
| 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>
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>
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.
Bài Viết Cùng Chủ Đề
Auto readmore 3 column không dùng js cho blogspotTiếp tục share mẫu auto readmore không dùng js (javascripts) cho các bạn muốn blog load nhanh nhưng vẫn đẹp. Hôm bữa mì ... 
Widget comments mới nhất cho blogspotWidget comments mới là một tiện ích phổ biến giúp bạn quản lý comments hiệu quả cho blogspot, khi có ai đó comments (bì ... 
Làm sao để xây dựng Domain Authority, backlink tự nhiên?
Kỹ năng xây dựng Domain Authority, Back link tự nhiên
Ngoài làm tốt nội dung rồi và SEO được lên TOP thì seo offpage ... 
[Tips] - Menu chuyên mục Css full Responsive cho Blogspot
Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu ... 
[Tips] - Hướng dẫn tích hợp giao diện mobi cho blogspotChào các bạn ở bài trước mình đã hướng dẫn các bạn tích hợp giao diện Responsive cho blogspot, nay mình sẽ hướng d ...
Icon CommentsIcon Comments