fbpx

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

may dong phuc

May Đồng Phục

Gọi:0972.87.1518
Thiết kế giao diện mobi cho blogspot
5(100%)70Đánh giá
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 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. 4

Bài viết liên quan

Dân SEO cần biết: Xu hướng SEO mới nhất hiện nay

Dân SEO cần biết: Xu hướng SEO mới nhất hiện nay

Ngoài một số xu hướng quen thuộc, hiện nay xu hướng SEO còn mang đến điều gì mới? Dưới đây là danh sách các xu hướng SEO mới nhất mà bạn có thể tham khảo .   HTTPS sẽ không còn chỉ là một tùy chọn HTTPS, viết tắt c
Những Yêu Cầu Khi Thiết Kế Web Kiến Trúc Xây Dựng

Những Yêu Cầu Khi Thiết Kế Web Kiến Trúc Xây Dựng

Xây dựng , kiến trúc là một lĩnh vực đòi hỏi tính thẩm mỹ và độ chuyên nghiệp cao, vì thế việc thiết kế web kiến trúc xây dựng chuyên nghiệp ấn tượng là một công việc hết sức cần thiết cho bất cứ ai đang làm trong lĩnh vực này để
Cách không cho bài viết hiển thị ra trang chủ blogspot

Cách không cho bài viết hiển thị ra trang chủ blogspot

Thường thì các blogger mới chơi thì đa phần là không biết code blogspot định dạng như thế nào, nhưng trong quá trình vận hành temp thì nhất thì ít hay nhiều thì các bạn cũng muốn những bài viết mình sẽ tuỳ chỉnh, có thể nó sẽ show
Nhận việt hóa font chữ bất cứ font nào

Nhận việt hóa font chữ bất cứ font nào "Nhanh, Rẻ, Đẹp"

Nhận việt hóa hầu hết các font chữ hiện tại có bán trên thị trường, hoặc bất cứ font free nào mà bạn thích. - Font lẻ: 100k-200k/Font. Mình sẽ đưa ra mức giá tùy thuộc vào font đó có dễ việt hóa hay không khi nhận đc đơn hàng c

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/

May đồng phục

Bài viết liên quan

Dịch vụ in ấn tờ rơi quảng cáo chất lượng cao

Dịch vụ in ấn tờ rơi quảng cáo chất lượng cao

Loại hình in ấn tờ rơi là một hình thức quảng cáo được đặt in và thiết kế có nhiều ưu điểm nhỏ, gọn, tiện lợi và được gia công in với nhiều mẫu mã đẹp và chất lượng cao cũng như có tính quảng bá và truyền đạt những thông
Các món ăn hấp dẫn tại Hà Lan bạn không thể bỏ lỡ

Các món ăn hấp dẫn tại Hà Lan bạn không thể bỏ lỡ

Khi đi tour du lịch Hà Lan, có lẽ phần đông du khách trước hết bị quyến rũ bởi những phong cảnh đặc trưng của đất nước này với những dải hoa tulip rực rỡ, hay những chiếc cối xay gió được xem là đẹp nhất thế giới, sau cùng mới đến
Bí quyết ngăn ngừa và điều trị rụng tóc

Bí quyết ngăn ngừa và điều trị rụng tóc

Tóc gãy rụng chính là một trong những điều mà các chị em phụ nữ rất quan tâm hiện nay, tóc gãy rụng đã ảnh hưởng đến sinh hoạt hàng ngày và giao tiếp của bạn gái , vì thế với những bí quyết sử dụng các loại thực phẩm sau
Phát hiện cá mập quái vật khổng lồ sống hơn 5 thế kỉ, thọ nhất thế giới

Phát hiện cá mập quái vật khổng lồ sống hơn 5 thế kỉ, thọ nhất thế giới

Theo Daily Star, các nhà khoa học Đan Mạch xác định sinh vật cổ xưa này có tuổi thọ khoảng 512 năm và dài 5,5 mét. Đây được  coi là quái vật có xương sống sống thọ nhất thế giới cho đến nay. Nó có thể chào đời từ năm 1505, khi
Play All Replay Playlist Replay Track Shuffle Playlist Hide picture