• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Auto-readmore Blog Series Blog-Tips Auto readmore 3 column không dùng js cho blogspot

Auto readmore 3 column không dùng js cho blogspot

Đỗ Mạnh Hồng July 04, 2015 Auto-readmore Blog Series Blog-Tips
Đỗ Mạnh Hồng
Tiế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ình đã có share một mẫu auto readmore không dùng js rồi nhưng mẫu này có điểm khác biệt nhưng mẫu trước là mẫu này chia 3 column cực đẹp.


DEMO

Làm sao để thêm auto readmore 3column cho blogpsot.

Để rút ngắn bài viết như demo các bạn làm theo những bước sau :
Bước 1 : Tìm đến thẻ ]]></b:skin> trong templates blogspot của bạn và thêm đoạn code sau ngay bên dưới nó
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px 'Arial', serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-snippet:before{content:attr(data-snippet);}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:30%;height:95px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma}
.post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
.post h1,.post h2{font:15px Arial;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
.post-thumbnails{float:right;margin-left:20px;}
</style>
</b:if></b:if>
Bước 2 : Bấm ctrl + F và tìm đoạn code sau
<data:post.body/>
Và bấm enter 2 lần, và bạn sẽ tìm thấy cái mình cần tìm và thay nó bằng đoạn code sau :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
 </b:if>
 </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
 <b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
</b:if>
Bước 3 : Sau khi sửa xong thẻ  <data:post.body/> bạn lăn chuột lên ngay bên trên nó sẽ có đoạn code
<h3 class='post-title entry-title'>
 <b:if cond='data:post.link'>
 <a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
 <b:if cond='data:post.url'>
 <a expr:href='data:post.url'>
<data:post.title/>
</a>
 <b:else/>
 <data:post.title/>
 </b:if>
</b:if>
</h3>
Và thay nó bằng đoạn code sau
<!-- anh thumbnail trang chu -->
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <b:if cond='data:post.thumbnailUrl'>
 <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
 <b:else/>
 <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpKsOHPoo5COSX80KneqA6OZ2RtLIlTMxdIrtpUPWSm-kLsInyzvW3HqZ86J-fHHS4Fofq2wAcUXNYmCK82JX6z017SR6UWkg-OaWpetWGl8JbMQmagyCIba9fBFU7C3tXaiPmsVt3XiP/' width='72px'/> </b:if> </b:if>
 </b:if>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
 <b:if cond='data:post.link'> <a expr:href='data:post.link'>
<data:post.title/></a> <b:else/> <b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
 <data:post.title/> </b:if> </b:if>
</h2> </b:if> <b:else/>
 <h1 class='post-title entry-title'>
 <b:if cond='data:post.link'>
 <a expr:href='data:post.link'>
<data:post.title/></a> <b:else/>
 <b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if> </b:if>
</h1> </b:if>
Sau đó lưu mẫu lại và kiểm tra thành quả của mình nhé. Đẹp ngất ngay đúng không nào hehe, chúc các bạn thành công. 

Bài Viết Cùng Chủ Đề

  • [Tips] - Menu ghim cố định khi lăn chuột cho blogspot Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xu ...
  • [Tips] - Làm sao để blogspot không bị lỗi hình ảnhLỗi hình ảnh (image) là lỗi thường gặp nhất hiện nay, hiện nay đối với nhà mạng VNPT đã chặn hình ảnh đối với blogspot, ...
  • [Tips] - Làm sao để thêm facebook comments vào blogspotFacebook là mạng xã hội lớn rất tốt cho việc seo blogspot, việc thêm facebook comments vào blogspot là rất cần thiết và ...
  • [Tips] - 3 bước để tạo đánh giá 5 sao cho bài viết BlogspotBạn là blogger muốn cho blogspot của mình chuyên nghiệp hơn với tính nắng đánh giá 5 sao khi thấy bài viết hay giống nh ...
  • [Tips] - Tạo Playlist từ Youtube cho Blogspot Playlist được biết đến như một album nhạc có chứa nhiều bài hát, còn đối với video thì sao, mà đặt biệt ở đây là video ...
Next
Để seo một từ khóa bạn cần làm những gì?
Previous
Chuyển hướng link trong blogpsot (Redirect 301)
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

4 nhận xét

Write nhận xét
ThaiBinhNguyen
AUTHOR
8 July 2015 at 12:35 delete

Mình muốn mở rộng từng columm thì sao admin

Reply
avatar
Đỗ Mạnh Hồng
AUTHOR
8 July 2015 at 12:56 delete

Mở rộng thì bạn chỉnh css nhé bạn. Hoặc cụ thể là phần nào mình có thể giúp bạn

Reply
avatar
Unknown
AUTHOR
10 July 2015 at 11:58 delete

Mình đã chỉnh sửa ok rồi cám ơn bạn nhé.

Reply
avatar
Đỗ Mạnh Hồng
AUTHOR
10 July 2015 at 12:09 delete

Không có gì bạn ơi. Chúc bạn sớm thành công nhá ^^

Reply
avatar

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu