Thiết kế giao diện mobi cho blogspot

Tags:
Để sử dụng giao diện mobile blogger thì trước tiên ta phải kích hoạt nó lên!1- Đăng nhập vào Blog2- Chọn Mẫu (Template)3- Tại ô điện thoại di động (Mobile template) bấm vào biểu tượng bánh xe để vào mục cài đặt.4

Bài viết liên quan

Biểu tượng status và chat facebook đẹp mê hồn

Biểu tượng status và chat facebook đẹp mê hồn

Bạn muốn sử dụng biểu tượng nào thì bôi đen ký tự bên dưới biểu tưởng rồi copy (ấn CTRL+C) mã đó. Sau đó qua Facebook dán (ấn CTRL+V) vào Status hoặc Chat,..DANH SÁCH BIỂU TƯỢNG FB ĐẦY ĐỦ ĐÂY:Icon biểu tượng Facebook
Thiết Kế Website Cho Nông Dân Bán Sản Phẩm Miễn Phí

Thiết Kế Website Cho Nông Dân Bán Sản Phẩm Miễn Phí

Người nông dân Việt Nam với những kinh nghiệp làm nghề thì không thiếu để tạo ra được sản phẩm vừa đẹp vừa có giá trị về chất lượng và an toàn. Trong xu thế cạnh tranh của ngành nông sản thế giới đặc biết là ngành nông sản của các
Lưu ý quan trọng khi thiết kế web trọn gói giá rẻ

Lưu ý quan trọng khi thiết kế web trọn gói giá rẻ

Ngày nay, Internet đã và đang ngày càng phát triển mạnh mẽ. Trong đó Website - một sản phẩm công nghệ tuyệt vời của Internet - đã mang lại lợi ích cho các công ty trên khắp thế giới bằng cách đem lại cơ hội cho họ bán mọi thứ ở bấ
Thay đổi tiêu đề bài viết thành thẻ h1 trong seo blogspot

Thay đổi tiêu đề bài viết thành thẻ h1 trong seo blogspot

Tầm quan trong nhất trong seo blogspot là các thẻ H, nếu như bạn tối ưu nó thành công xem như bạn đã làm được 30 đến 40% của việc tôi ưu hóa công cụ tìm kiếm trên Google, và các site tìm kiem1 khác.....Đối với 1 website yếu tố q

Thiết kế giao diện mobi cho blogspot

Để sử dụng giao diện mobile blogger thì trước tiên ta phải kích hoạt nó lên!
1- Đăng nhập vào Blog
2- Chọn Mẫu (Template)
3- Tại ô điện thoại di động (Mobile template) bấm vào biểu tượng bánh xe để vào mục cài đặt.

Thiết kế giao diện mobi cho blogspot

4- Bấm vào  (Yes) => bấm vào tùy chỉnh (Custom) để chọn giao diện cho mobile => Bấm vàoXem trước (Preview) nếu thấy ưng ý thì bấm lưu lại (Save).
Edit Blogger Mobile Templates for blogspot

Tùy chỉnh cấu trúc của mẫu điện thoại di động của bạn.

Templates Blogger được thiết kế bằng cách sử dụng các Widget. Blogger đã thêm thuộc tính mới (di động) vào thẻ <b:widget/>. Thuộc tính này có thể ‘mặc định’ giá trị ‘yes’ (có), ‘no’ (không) hoặc‘only’ (chỉ khi). Và tài thuộc tính này sẽ quy định widget đó có được phép hiển thị trong giao diện điện thoại di động hay không!.

Các widget hiển thị trên điện thoại di động theo mặc định như sau:

  • Header (Tiêu đề)
  • Blog (bài đăng)
  • Profile (thông tin tác giả)
  • PageList (danh sách trang)
  • AdSense (quảng cáo bởi google)
  • Attribution (cung cấp bởi blogger)
1- Nếu bạn muốn ẩn bất kỳ một widget tiện ích nào khi sử dụng điện thoại di động bạn chỉ cần thêm thuộc tính mobile=’no’ trong thẻ Widget, và tiện ích đó sẽ không còn xuất hiện trong màn hình điện thoại di động.
Ví dụ namkna có thể ẩn tiện ích Attribution khi xem blog bằng điện thoại di động. bằng cách tìm widget sau:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

và thêm thuộc tính mobile=’no’ vào nó như dưới:

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
2- Nếu bạn muốn hiển thị các wiget không có trong danh sách mặc định ở trên cho chế độ xem blog bằng điện thoại di động, chỉ cần thiết lập thuộc tính di động mobile=’yes’.
Ví dụ: Namkna muốn hiển thị widget lưu trữ Blog Archive thì chỉ cần tìm widet BlogArchive  cóid=’BlogArchive1′ như bên dưới!
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
và thêm thuộc tính  mobile=’yes’ để wiget BlogArchive hiển thị cả trên máy tính và điện thoại như sau:
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

Lúc này truy cập bằng mobile bạn sẽ thấy BlogArchive hoạt động!

3- Nếu bạn muốn một widget chỉ xuất hiện trong giao diện điện thoại di động, bạn có thể thiết lập thuộc tính mobile=’only’.
Ví dụ : Namkna chỉ muốn widget Attribution1 (cung cấp bởi google) xuất hiện trên mobile thì ta thêm thuộc tính mobile=’only’ như sau:
<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>
Nếu tôi sử dụng thẻ mobile=’only’ thì widget Attribution1 sẽ biến mất khi bạn xem blog bằng máy tính để bàn, laptop và chỉ hiển thị khi xem bằng mobile.
– Sử dụng cách này để các wiget hiển thị hoặc biến mất khỏi chế dộ xem blog của bạn bằng di dộng nha.

Tùy biến giao diện và cảm nhận mẫu điện thoại di động của bạn

Bây giờ bạn hoàn toàn có thể tùy chỉnh kiểu dáng của mẫu điện thoại di động của bạn. Body của mẫu điện thoại di động sẽ được theo kiểu lớp động dạng.
<body class='loading mobile'>

Hãy kiểm tra để chắc chắn rằng mẫu của bạn có thẻ sau:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Thông thường thẻ này chỉ có các mẫu simple của blogger mới có. Nếu không có hãy tháy thẻ<body> bằng nó.
Vì vậy, nếu bạn am hiểu CSS, bạn có thể sử dụng tên class này  để tùy chỉnh mẫu điện thoại di động của bạn.
.mobile .date-header { text-decoration:underline;}

– Bố cục Phiên bản di dộng
.mobile #outer-wrapper {max-width: 630px; width: auto;}
hoặc:
.mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}

Thay thế nội dung Widget của blogger khi xem trang bằng Di động

 

Khi bạn chuyển sang các mẫu điện thoại di động tùy chỉnh, bạn có thể thấy rằng các mẫu là quá lớn để phù hợp với một trình duyệt di động. Nếu bạn muốn, sau đó bạn có thể cung cấp nội dung thay thế bên trong một widget.


ví dụ::

<div class="widget-content"> <b:if cond="data:blog.isMobile"> <!-- Show a text link in mobile view.--> <a href="//www.blogger.com"> Powered By Blogger </a> <b:else/> <!-- Show an image link in desktop view.--> <a href="//www.blogger.com"> <img expr:src="data:fullButton" alt="Powered By Blogger"/> </a> </b:if></div>
Điều này sẽ hiển thị một liên kết Powered by Blogger khi xem trên điện thoại di động, và một Powered by Blogger kèm hình ảnh khi xem trên máy tính PC hoặc Laptop.

 

– Bằng cách sử dụng thẻ điều kiện bạn có thể xác định được độc giả xem blog của bạn trong một trình duyệt di động hay PC.
<b:if cond="data:blog.isMobile"/>
Hoặc.

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

Bạn có thể sử dụng thẻ này để tạo cho blog của mình hoàn toàn khác với phiên bản di động của blog.

Bố cục giao diện mobile?

Khác với phiên bản máy tính, phiên bản di động hoàn toàn khác.
– trang chủ.
<b:includable id=’mobile-index-post’ var=’post’>
– trang bài viết:
<b:includable id=’mobile-post’ var=’post’>

Nguồn: //namkna.blogspot.com/

Bài viết liên quan

In hộp giấy với số lượng lớn theo yêu cầu của khách hàng

In hộp giấy với số lượng lớn theo yêu cầu của khách hàng

Dịch vụ in hộp giấy được thiết kế và in ấn đẹp làm cho doanh nghiệp sản xuất hay kinh doanh cảm thấy hài lòng hơn khi dùng nó chứa đựng các hàng hóa, sản phẩm của mình để tung ra thị trường tiêu thụ và đến tay người tiêu
Bí quyết giúp cho mái tóc phụ nữ luôn đen mượt và óng ả

Bí quyết giúp cho mái tóc phụ nữ luôn đen mượt và óng ả

Mái tóc khỏe đẹp , đen huyền óng ả là mơ ước của nhiều chị em phụ nữ trong những nhu cầu làm đẹp thiết yếu cho bản thân của mình, tuy nhiên những sản phẩm trên thị trường đôi khi lại không hiệu quả như mong muốn của các bạn.
Đánh ghen live stream lột đồ giữa quán cà phê

Đánh ghen live stream lột đồ giữa quán cà phê

Theo người đăng tải, vụ đánh ghen xảy ra tại quán cà phê Villas thuộc khối 7 (thị trấn Ái Nghĩa, huyện Đại Lộc, tỉnh Quảng Nam). Trong các hình ảnh và clip, một cô gái trẻ bị ba cô gái xông vào đánh đập dã man ở khu vực nhà vệ sin
Thua độ World Cup, người đàn ông vào bệnh viện trộm xe cứu thương

Thua độ World Cup, người đàn ông vào bệnh viện trộm xe cứu thương

Trốn nợ lên Sài Gòn sống lang thang do " Thua độ World Cup", Hồ vào bệnh viện xin cơm từ thiện rồi trộm xe cứu thương định đem bán.Ngày 26/6, Công an quận Bình Tân (TP HCM) tạm giữ Nguyễn Minh Hồ (38 tuổi, quê An Giang) về hành