Home » Bài viết

Auto Readmore - Thủ thuật hiện bài viết ở trang chủ có ảnh cho Blogger

23:05 |
Thủ thuật Blogger / Thủ thuật Blogspot sẽ giới thiệu thêm cho các bạn một kiểu tóm tắt bài viết ở trang chủ (Auto readmore) sử dụng javarscripts. Trong tiện ích này có ảnh thumbnail cùng một hàng với tiêu đề và mô tả.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán code bên dưới vào trước thẻ ]]></b:skin>.
/*read more by http://www.thietkeblogger.net/ */
.post-header-line-1{font-style:italic;font-size:11px;margin:0 0 6px 133px}
.post img{margin:10px 0 6px}
.post h2{margin-left:133px;font-size:110%}
.numberingcomments a:link,.numberingcomments a:visited{float:right;color:#36F;text-decoration:none;padding-right:10px;padding-top:5px;padding-left:10px;font-weight:700}
.numberingcomments a:hover,.numberingcomments a:active{color:#FF0A47}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
5. Chèn tiếp code bên dưới vào trước thẻ </head>
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<!-- readmore style 3 http://namkna.blogspot.com/ -->  
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
</b:if>
  • summary_noimg = 400; là số ký tự của phần mô tả 
  • summary_img = 160; là số ký tự của phần tiêu đề. 
  • img_thumb_height = 85; là chều cao của ảnh thumbnail 
  • img_thumb_width = 124; là chều rộng của ảnh thumbnail
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới 
<data:post.body/>
Thay thế code vừa tìm được thành đoạn code bên dướ (Lưu ý có tùy theo template mà có từ 2 đến 4 đoạn code như bên trên. bạn phải thay đúng vị trí thì mới hoạt động nha.): 
<!-- Start auto read more www.thietkeblogger.net -->
<!-- BAI VIET KHI XEM LABEL -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<span class='post-header-line-1'><b:if cond='data:top.showAuthor'>
<data:post.timestamp/> |  <script>var ngaygio =&#39;<data:post.dateHeader/>&#39;;</script><script>document.write(ngaygio);</script></b:if></span>
<div style='clear: both;'/>    
<div class='post-body'>    
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</div><div style='clear: both;'/>       
</b:if>  
      <!-- XEM BAI VIET -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<div class='clear'/>  
<!-- End Auto readmore use scripts for blogspot style 3 - http://www.thietkeblogger.net/-->
8. Lưu mẫu lại và xem kết quả nha.
Xem thêm…

Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger

22:53 |
Bình thường khi xem bài viết ở các trang như trang chủ, trang nhãn, trang lưu trữ blog (gọi chung là kiểu trang index) các bài viết sẽ hiển thị không theo một quy cũ nào hết. Chúng hiển thị theo cách viết của bạn khi đăng bài. Thủ thuật Blogger / Thủ thuật blogspot sẽ hướng dẫn các bạn cách tóm tắt bài viết ở trang chủ một cách tự động thành 2 cột song song không sử dụng javarscripts.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger
» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips (xét theo khía cạnh nào đó còn giúp tăng tốc blog vì nó thu nhỏ ảnh thumbnail và tóm tắt lại nội dung bài viết ở trang chủ của bạn.
» Bố cục gồm 2 cột bài viết xép thẳng hàng.
» Ảnh thumbnail và tiêu đề bài viết + mô tả nằm trên cùng một hàng.
» Phần mô tả hiển thị bằng mã CSS do vậy không bô đen được.
1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> .
Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.
<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 &#39;Arial&#39;, 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:45.8%;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:24px Oswald;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}
</style>
</b:if></b:if>
5. Tìm dòng code: 
<data:post.body/>
Thay thế thành code bên dưới. 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5) 
      <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>
Thay thế nó thành:
<!-- 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/AVvXsEhVwVA5lmzExM5i-pFFdngtpHlI6HIPZXaVLZNPaO7DdyPT-WzOyjbyz8yD7G0lL9JYY5im-wQAB-unLajG2De0g55zyWcZqfJML7lFMEgiw2oOxOqbT7tXDimk-DRIenairEIczOi1DtVI/' 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>
    </b:if>
7- Lưu mẫu lại và xem kết quả nha.
8- Bạn vào cài đặt => bài dăng và nhận xét và Tại mục hiển thị tối đa bạn chỉnh số bài cần hiển thị lại cho phù hợp.Lưu ý bạn nên để số bài là số chẵn vì tiện ích có 2 cột nếu để số lẻ sẽ bị hụt nha.
Xem thêm…
Copyright ©THT - Được biên soạn và sưu tầm từ nhiều nguồn khác nhau - Ghi rõ nguồn:duy3s.com/ - Khi phát hành thông tin trên trang này
Confession | Namkna | khoa học tâm linh | Kho tài liệu hay |