• 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] - 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] - Popup like box với chỉ dẫn đẹp cho blogspotLike box là tiện ích thiết yếu cho một blogspot nhằm quảng bá thương hiệu cho fanpage cũng như danh tiếng của mình, để ...
  • [Tips] - Vô hiệu hóa JS mặc định giúp blogspot load nhanhChào các bạn đôi khi các bạn kiểm tra tốc độ load của blogspot mình với PageSpeed Insights thì thường thấy những js (ja ...
  • [Tips] - Thẻ điều kiện trong blogspot là gì?Chào các bạn có rất nhiều bạn liên hệ với mình và hỏi rằng thẻ điều kiện trong blogspot là gì? thẻ điều kiện dùng để là ...
  • [Tips] - 6 Lời khuyên bạn nên làm khi seo blogspotSEO (Search Engine Optimization) là điều quan trọng nhất cho những người làm blogger. Nếu không có tối ưu hóa blog toàn ...
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