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.
Kho Template Blogspot Responsive 2016
http://share123blog.blogspot.com
Free download responsive premium blogger template
Icon CommentsIcon Comments