Tin tức nóng hổi hàng ngày: thủ thuật

<div class="post-body entry-content" id="post-body-4388946994869592178" style="border-top-color: rgb(187, 187, 187); border-top-style: solid; border-top-width: 2px; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.63636302947998px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilY-IcVq8W9g3bZG2KWfJo2A5J0XrCgEE0YTAlUOvtbX_3DgnDhWcbz3kDoyP_qA4-JL5jDZoKMlkt3mZv6YD5wfj-rNRcv41_EAYRestNCr403q7HPez9YdqccaodhVNYg1HLZvW8sRI/s1600/auto-readmore-with-thumbnail-style-1-for-blogspot-namkna-blogspot-com.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: initial;"><img alt="Auto readmore với thumbnail trên Blogger dùng Script - Style 1" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilY-IcVq8W9g3bZG2KWfJo2A5J0XrCgEE0YTAlUOvtbX_3DgnDhWcbz3kDoyP_qA4-JL5jDZoKMlkt3mZv6YD5wfj-rNRcv41_EAYRestNCr403q7HPez9YdqccaodhVNYg1HLZvW8sRI/s200/auto-readmore-with-thumbnail-style-1-for-blogspot-namkna-blogspot-com.png" style="border: 0px solid rgb(204, 204, 204); clear: both; max-width: 560px; min-width: 10px; padding: 4px 0px 0px;" title="Auto readmore với thumbnail trên Blogger dùng Script - Style 1" width="200" /></a></div>
<div style="text-align: justify;">
Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.<br />
<a href="http://www.blogger.com/blogger.g?blogID=6630041733120470475" name="more"></a>Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.</div>
<br />
Bạn có thể xem Demo sẽ rõ hơn  : <a class="button green" href="http://demo-blog-namkna.blogspot.com/" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 13.63636302947998px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-align: center; text-decoration: initial; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;">Demo for Post</a><br />
<div style="text-align: center;">
<i>Ảnh minh họa:</i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_M3pLDNMc3I1pVWtdM1xUm8oQw90g6hv17o09Jm0tAGUBazPKElA-IlHkprtJphWRM0-Trp1SYktmHVHXSj7S3aYVZ3oJ3Pf8qjp6-7kUuwVSUa-JD7IHmmjvw_Sd6svg0Eos3o93EA/s1600/auto-readmore-with-thumbnail-style-1-for-blogspot-namkna-blogspot-com-demo-style-1.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: initial;"><img alt="Auto readmore với thumbnail trên Blogger dùng Script - Style 1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_M3pLDNMc3I1pVWtdM1xUm8oQw90g6hv17o09Jm0tAGUBazPKElA-IlHkprtJphWRM0-Trp1SYktmHVHXSj7S3aYVZ3oJ3Pf8qjp6-7kUuwVSUa-JD7IHmmjvw_Sd6svg0Eos3o93EA/s1600/auto-readmore-with-thumbnail-style-1-for-blogspot-namkna-blogspot-com-demo-style-1.png" style="border: 0px solid rgb(204, 204, 204); clear: both; max-width: 560px; min-width: 10px; padding: 4px 0px 0px;" title="Auto readmore với thumbnail trên Blogger dùng Script - Style 1" /></a></div>
<span style="color: red;"><b>☼ Cách tiến hành:</b></span><br />
<br />
<b>1- Đăng nhập</b> (login) vào Blog<br />
<b>2- </b>Vào<b> Mẫu </b>(Template)<br />
<div style="text-align: justify;">
<b>3-</b> Chọn <b>Chỉnh sử HTML </b>(Edit HTML) => Tiếp tục (process)<br />
<b>4- </b>Click chọn <input checked="checked" disabled="disabled" style="vertical-align: middle;" type="checkbox" /> <b>Mở rộng tiện ích mẫu </b>( <input checked="checked" disabled="disabled" style="vertical-align: middle;" type="checkbox" /> Expand Template Widgets) => Xem vdeo:</div>
<div style="text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/h5Um8m7I2iY?rel=0" width="520"></iframe></div>
<b>5- </b>Tìm (<b>Ctrl +F</b>) thẻ bên dưới:<br />
<pre style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMCfgFEo6qrGDbRQKRpypwe8Rb084E-mVCky7e09nBom8nm-6pGBFi5qjtAYHNVz7QFLn5hTe9aEIUv0pw1jMNe50WqTpe0Jt0p1oJPZrld7-SjjdvUFvOQat0YUcPhq7xKU1DynZobE/s1600/code-khung-bai-viet.jpg); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 0px; border: 1px solid rgb(153, 204, 102); color: #666666; font-family: 'Courier New', Fixed, monospace; font-size: 13.63636302947998px; line-height: 17px; margin-bottom: 1em; margin-top: 1em; max-height: 250px; min-height: 20px; overflow: auto; padding: 0px 20px 0px 30px;"><data:post.body/> </pre>
- Và thay nó bằng đoạn mã sau đây:<br />
<pre style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMCfgFEo6qrGDbRQKRpypwe8Rb084E-mVCky7e09nBom8nm-6pGBFi5qjtAYHNVz7QFLn5hTe9aEIUv0pw1jMNe50WqTpe0Jt0p1oJPZrld7-SjjdvUFvOQat0YUcPhq7xKU1DynZobE/s1600/code-khung-bai-viet.jpg); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 0px; border: 1px solid rgb(153, 204, 102); color: #666666; font-family: 'Courier New', Fixed, monospace; font-size: 13.63636302947998px; line-height: 17px; margin-bottom: 1em; margin-top: 1em; max-height: 250px; min-height: 20px; overflow: auto; padding: 0px 20px 0px 30px;"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></pre>
<b>6- </b>Thêm đoạn mã dưới đây vào sau thẻ <span style="background-color: #eeeeee;"><b><head></b></span> (hoặc đặt trước thẻ <span style="background-color: #eeeeee;"><b></head></b></span>):<br />
<pre style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMCfgFEo6qrGDbRQKRpypwe8Rb084E-mVCky7e09nBom8nm-6pGBFi5qjtAYHNVz7QFLn5hTe9aEIUv0pw1jMNe50WqTpe0Jt0p1oJPZrld7-SjjdvUFvOQat0YUcPhq7xKU1DynZobE/s1600/code-khung-bai-viet.jpg); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 0px; border: 1px solid rgb(153, 204, 102); color: #666666; font-family: 'Courier New', Fixed, monospace; font-size: 13.63636302947998px; line-height: 17px; margin-bottom: 1em; margin-top: 1em; max-height: 250px; min-height: 20px; overflow: auto; padding: 0px 20px 0px 30px;"><script type='text/javascript'>
<b><span style="color: red;">summary_noimg = 430;</span>
<span style="color: purple;">summary_img = 340;</span>
<span style="color: blue;">img_thumb_height = 100;</span>
<span style="color: #274e13;">img_thumb_width = 120;</span></b>
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script></pre>
<br />
<div style="text-align: justify;">
<b>Trong đó </b>bạn thay đổi các thông số cho phù hợp với blog của bạn nha:</div>
<ul style="text-align: justify;">
<li><span style="color: red;"><b>summary_noimg</b></span> là số ký tự phần miêu tả cho các bài không có hình đại diện.</li>
<li><span style="color: purple;"><b>summary_img </b></span>là số ký tự phần miêu tả cho các bài có hình đại diện.</li>
<li><span style="color: blue;"><b>img_thumb_height</b></span> chiều cao của hình đại diện (pixel).</li>
<li><span style="color: #274e13;"><b>img_thumb_width </b></span>chiều rộng của hình đại diện (pixel).</li>
</ul>
<div style="text-align: justify;">
<b>7- </b>Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.</div>
<blockquote class="tr_bq" style="background-color: #f0fdff; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(150, 215, 226); margin: 0px; padding: 10px;">
<div style="text-align: justify;">
Nếu bạn sợ sử dụng scrip sẽ làm blog bạn chậm thì bạn có thể xem bài viết tạo autoread more không sử dụng Javarscrip <a href="http://namkna.blogspot.com/2012/03/tao-auto-readmore-khong-su-dung.html" style="color: #006666; text-decoration: initial;" target="_blank"><b>Tại đây</b></a></div>
<div style="text-align: justify;">
<b>Cập nhật </b>thêm cho các bạn thích ảnh thumbnail và tiêu đề bài biết nằm trên cùng một hàng (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdgiVGmm-QyitHRd471B38a9k1B34wT03X4lar_EGDWaCiksaNXPDx8U8XaA13uNNtTqyAckR5oDX1mqgz9jcSsos5YivWhog8qWx1QCoF6iCskUT-zXDP5oQNzjR6TR0bH0to7_ylng/s1600/auto-readmore-with-thumbnai-use-javarscipl-namkna-blogspot-com-style-2-photo2.png" style="color: #006666; text-decoration: initial;" target="_blank"><b>Ảnh minh họa</b></a>) các bạn xem <a href="http://namkna.blogspot.com/2012/09/auto-readmorre-voi-thumbnail-cho.html" style="color: #006666; text-decoration: initial;" target="_blank"><b>Tại đây</b></a></div>
</blockquote>
</div>

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. ...

Đọc thêm »

Tin tức nóng hổi hàng ngày

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Bài đăng phổ biến

Lưu trữ Blog