Thêm Recent Comments có ảnh Avatar bo tròn tuyệt vời cho Blogger Blogspot

Làm cách nào để thực hiện được, khi mà bạn muốn có được những những Comments gần đây. Tất cả chỉ trong một Widget thôi với ảnh Avatar được bo tròn rất đẹp.

Các bước thực hiện như sau:
1- Mỡ Blogger, vào Layout, tạo một Widget HTML/JavaScript
2- Chép Source Code dưới đây dán vào trong khung soạn thảo Code:

<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinC_dyrNbFMPTMmjIW-isjvAplxqgE-Mz8NCt9c_pIrnk9aYVPH_Ep5uZdWfZgBh8q-YRv_Ol_HU0aNZxASMVSniUpni99ZLwcAKKZsCXXW-NRYHMsumOeWMdBwZbX5AmrbM6kXY0nkhsQ/s1600/default-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
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}('7 E=E||5,8=8||12,o=o||13,k=k||"h://4.F.p.f/-14/15/16/17/G/18-19.1a",H=H||" 1b &1c;",q=(r q===\'u\')?j:q,v=(r v===\'u\')?Q:v,m=(r m===\'u\')?j:m,I=(r I===\'u\')?Q:m;1d R(w){7 9;9=\'<S J="R">\';K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+="<U>";7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\'1g\'){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g("/G/")!=-1){3=3.B("/G/","/s"+8+"-c/")}e 6(3.g("/W/")!=-1){3=3.B("/W/","/s"+8+"-c/")}e 6(3.g("/X-c/")!=-1&&3.g("h:")!=0){3="h:"+3.B("/X-c/","/s"+8+"-c/")}e 6(3.g("N.f/C/1k-Y.O")!=-1){3="h://1.F.p.f/-1l/1m/1n/1o/s"+8+"/1p.Z"}e 6(3.g("N.f/C/1q-Y.O")!=-1){3="h://2.F.p.f/-1r/1s/1t/1u/s"+8+"/1v.Z"}e 6(3.g("N.f/C/1w.O")!=-1){6(k.g("1x.f")!=-1){3=k+"&s="+8}e{3=k}}e{3=3}6(q==j){6(m==j){n="1y"}e{n=""}9+="<10 J=\\"1z "+n+"\\"><C J=\\""+n+"\\" V=\\""+3+"\\" 1A=\\""+y+"\\" 1B=\\""+8+"\\" 1C=\\""+8+"\\"/></10>"}9+="<a A=\\""+x+"\\">"+y+"</a>";7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,"");6(d!=""&&d.z>o){d=d.1F(0,o);d+="&1G;";6(v==j){d+="<a A=\\""+x+"\\">"+H+"</a>"}}e{d=d}9+="<D>"+d+"</D>";9+="</U>"}9+=\'</S>\';7 P="";6(I==j){P="1H:1I;"}9+="<D 1J=\\"1K-1L:1M;1N:1O;1P-1Q:1R;"+P+"\\">1S 1T<a A=\\"h://w.p.f/\\"> 1U</a></D>";1V.1W(9)}',62,121,'|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write'.split('|'),0,{}))
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html">Recent Comments Widget</a></div>

3- Save lại Widget mà bạn mới tạo.
4- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:

http://itcomputerdemo.blogspot.com/2016/06/demo-automatic-featured-post-slider.html

>

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn helplogger.blogspot.com

Tổng hợp và chia sẽ: Nguyễn Đạt Khánh

Read More

Tiện ích Auto Readmore Hack with Thumbnail for Blogger

23:40 Vantu Odecca 

Auto Readmore Hack with Thumbnail là tiện ích xuất hiện đã lâu và được cộng đồng Blogspot sử dụng rất phổ biến bởi những lợi ích rất thiết thực mà nó mạng lại.

Tuy Google cũng đã bổ sung JumpLink ( một dạng Readmore ) cho Blogspot nhưng dường như vẫn chưa thỏa mãn yêu cầu của các Blogger, nhất là các WebBlog như iTechPlus. Việc thực hiện thủ công JumpLink cho từng bài post xem ra khá nhọc nhằn đối với những Blog đã có nhiều bài viết.

Vì vậy, tuy Auto Readmore không phải là mới, nhưng nhận thấy nhu cầu sử dụng của các Blogger đối với tiện ích này vẫn còn khá lớn, nên iTechPlus quyết định giới thiệu lại 2 phiên bản phổ biến nhất của tiện ích này dành cho các bạn quan tâm.
1. Auto Readmore v.4.1 by Anhvo ( Vietwebguide.com )
Đây là phiên bản cuối cùng của Anhvo – một Blogger Việt rất nổi tiếng trước đây. Tuy nhiên hiện nay trang web này đã đóng cửa.
Một số đặc điểm của tiện ích :

• Fix lỗi Width và Height của ảnh Thumbnail. Không giống các bản trước chỉ hiện cố định Width và Height của ảnh, bản 4.1 sẽ kiểm tra kích thước của ảnh và hiện kích thước MaxWidth và MaxHeight nếu ảnh lớn, nếu như ảnh nhỏ thì hiện kích cỡ thật sự của ảnh, cả 2 trường hợp đều giữ đúng tỉ lệ Width và Height.
• Cải tiến phương pháp lấy đoạn summary (đoạn miêu tả), không còn nối dòng lung tung mà sẽ xuống dòng y chang như bài gốc. Summary tối đa lấy theo lượng từ chứ không còn theo kiểu ký tự nữa.
• Cải tiến tốc độ Load cho blog. Bản 4.1 đã loại bỏ hoàn toàn việc Load toàn bộ ảnh trong bài, mà sẽ chỉ Load ảnh đầu tiên của bài đó để làm ảnh Thumbnail.
• Hỗ trợ chế độ Readmore giống Wordpress, đây là tính năng khá thú vị mặc dù nó chỉ là Manual Readmore.
• Hỗ trợ thụt đầu dòng cho Summary. Khi Summary có 2 đoạn trở lên thì việc thụt đầu dòng sẽ làm cho người đọc thấy rõ từng đoạn.
• Có thể chọn lựa phương pháp hiện ảnh thumbnail: dồn trái (float, phù hợp cho các blog tin tức) và Gallery (no-float, phù hợp cho các trang có nhiều hình ảnh quảng cáo, trang Softs).
• Có thể tùy chỉnh kích thước ảnh thumbnail theo ý muốn
• Có thể chọn lựa giữa phương pháp lấy Summary cổ điển và Summary cải tiến.

Cài đặt :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<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:else/>
<div expr:id='&quot;summary&quot; + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->đọc tiếp...</a></div>
</b:if></b:if>

* Đoạn code trên iTechPlus đã sửa lại đôi chút để tiện ích không thực thi đối với trang Static Page
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<!--
/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
var post2 = new Array();
for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
  indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
} else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:

• 150 và 120 lần lượt là rộng và cao của ảnh thumbnail. Các chỗ cần thay đã được tô màu nền nổi, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần.
• Giá trị "no-float" của thumbnail_mode là chế độ hiển thị ảnh theo kiểu Gallery, khi bạn chọn chế độ này, bạn phải thay đổi giá trị left ở trên css thành none. Bạn có thể đổi "no-float" thành "float" để cho ảnh của bạn hiện dồn về trái.
• Giá trị false của classicMode ý nói là chế độ hiện Summary cổ điển đang tắt (đã cải tiến), bạn có thể thay nó thành true nếu muốn xài Summary kiểu cũ.
• Giá trị 50 của summary_noimg là số từ tối đa cho Summary khi bài viết không có ảnh nào.
• Giá trị 40 của summary_img là số từ tối đa cho Summary khi bài viết có ảnh.
• Giá trị 3 cho indent, tức là thụt vô đầu dòng 3 ký tự của đoạn Summary. Bạn có thể đặt giá trị của nó là 0,1,2,3,4... đều được.

Sau khi thiết lập xong, bạn bấm Save để lưu thay đổi, vào lại blog và kiểm tra xem Auto Readmore chạy thế nào nhé.
* Một tính năng độc đáo mà Anhvo đã giới thiệu ở trên, đó là hiện Readmore giống Wordpress. Cái readmore này có cái lợi là bạn có thể định vị chỗ ngắt Summary, tuy nhiên thêm code rất đơn giản, chỉ cần thêm dòng

<!-- more -->

vào chỗ mà bạn cần ngắt cho Summary, như thế tất cả các định dạng HTML của bạn trong Summary sẽ không thay đổi so với bài gốc. Nhưng hạn chế là bạn phải chèn dòng <!-- more --> bằng tay.
2. Automatic Read More Hack With Thumbnail for Blogger Bug Fixed
Đây là tiện ích do một Blogger nước ngoài “bào chế” mà iTechPlus sưu tầm được đã khá lâu nên cũng không nhớ rõ. Thủ thuật có đôi chút ngắn gọn và đơn giản hơn :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<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:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmXbMdcBh0CzuqQBUS6dCEop9w19cVeIR0rhX2jm9aJkWRp9gs7OPc_OLH0JWaRyN73QrpHGJntxcZksOrnN4uYb0kVedVoLorJ-9WbTFjOi4Lgjfz3uMbI8v_wAU_Iypv_jrdUJSwfTE/' style='border:none'/></a></span>
</b:if></b:if>

Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE2pSFa2SBBxROXvmAJ63KT9tolTnq0fFcmJ02iAHTgvhNgWUbqC0nlAeym8lzsuDLgzEjVVZTdbteJ4NFQeMOqSBBZesUAnbzK7QcrtMI7pUltsINjxEaU0nxgBAaydFYAGx8XQH_uh0/" 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>

* Đoạn code trên iTechPlus đã thêm ảnh mặc định cho những bài viết không có ảnh
Bước 4 : Save template and Done.
Chúc các bạn thành công !

Read More

Hiệu ứng phóng to ảnh khi dê chuột vào

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:
Tiếp theo vào  Thiết kế  ->  Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

Code khi chèn ảnh:

<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>

Chúc thành công!

Nguồn http://hawhisky.blogspot.com/

Read More

Sửa lỗi ảnh blogspot không hiển thị do bị chặn

Xin chào các bạn !

Lâu quá không viết bài chia sẻ, nay có thông tin này thấy cần thiết nên mình viết bài này chia sẻ cùng mọi người. Mình đã bỏ tên miền cũ bta.name.vn và dự định chỉ dùng tên miền mặc định truonganhblog.blogspot.com. Tuy nhiên khá đau đầu là đúng lúc các nhà mạng ráo riết chặn Blogspot. Trên máy tính thì có thể đổi DNS các kiểu chứ điện thoại thì rất khó và rồi mình quyết định mua tên miền truonganh.info hiện tại đây. Khi đã đổi sang tên miền tùy chỉnh rồi, việc truy cập đã được thông suốt, tốc độ được cải thiện, duy chỉ có ...KHÔNG HIỆN ẢNH :( 

Nguyên nhân:
Hiện tại thì nhà mạng VNPT đang chặn blogspot. Cụ thể là tất cả các website, blog sử dụng đuôi tên miền dạng .blogspot.com , .blogspot.in ... đều không thể truy cập . Lý do bị chặn thì chắc hẳn các bạn cũng biết, mình cũng có đề cập trước đây ở bài cấu hình tên miền.
Vì vậy mà tất cả các ảnh có dạng http://3.bp.blogspot.com/..,  http://4.bp.blogspot.com/ ... sẽ đều bị chặn và không thể hiển thị.

Cách để ảnh trên blogspot hiển thị lại?

Có 2 cách để thực hiện, đó là thủ công và tự động:

1. Cách thay link ảnh thủ công :

- Các bạn vào Chỉnh sửa tất cả các bài viết hiện có trên Blog của các bạn

- Chuyển sang tab soạn thảo bằng HTML

- Ctrl+F để tìm link ảnh, từ khóa ví dụ ".bp.blogspot.com"

Thay thế (2/3/4).bp.blogspot thành lh4.ggpht ( hoặc lh3.googleusercontent )

Như vậy là được.

2. Tự động thay link ảnh cho cả blog

Mình sẽ dùng hàm replace trong jQuery để thay thế hoàn toàn những link ảnh về dạng lh4.ggpht
Các bạn chèn đoạn mã này vào trước thẻ </body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(/\/[0-9]+(\.bp\.blogspot)?/, "/lh4.ggpht")) });
//]]>
</script>

Đoạn code màu đỏ nếu các bạn đã có thư viện jquery thì không cần thêm nữa nhé !
Chúc các bạn thành công !
Mời các bạn xem thử Video thực hành sửa lỗi nhé :) (Lần đầu thu nên không được hoàn hảo lắm :D)

©Truong Anh Blog - www.truonganh.info

Read More

Auto readmore với thumbnail dùng scripts cho blogspot style 3

Hôm nay namkna 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ả.

Phiên bản này sẽ khắc phục lỗi lặp lại tiêu đề và nhận xét của style 2.
Các bạn có thể xem ảnh minh họa hoặc demo.

VIEW DEMO

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

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> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.)

/*read more by http://namkna.blogspot.com/ */
.post-body.entry-content{border: 1px solid #ddd;padding:5px}.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>

Trong đó:

• 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 namkna.blogspot.com -->
<!-- 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://namkna.blogspot.com/-->

8. Lưu mẫu lại và xem kết quả nha.
Nguồn Terocket

Read More

Tạo ảnh avatar cho comment trong blogger

Ngày này,việc làm đẹp giao diện comment rất quan trọng ,việc tạo avatar xuất hiện khi guest comment làm cho độc giả có hứng hơn khi comment .Điều này làm tăng khả năng khách quay lại thăm blog của bạn.

Read More

Hướng dẫn resize toàn bộ hình ảnh trong blogger/blogspot

Mặc dù Blogger cung cấp công cụ giúp Resize hình ảnh bài viết nhưng nếu cần Resize tất cả hình ảnh trong Blogger thì làm sao ? Trong bài viết, thuthuatblogspot hướng dẫn bạn Resize tất cả hình ảnh trong Bloggernhanh chóng với 1 đoạn mã CSS.

CÁCH RESIZE TẤT CẢ HÌNH ẢNH BLOGGER NHANH CHÓNG

1. Đăng nhập Blog

2. Vào (Template)

3. chỉnh sửa HTML.

4. Tìm ]]></b:skin> rồi  chèn trước đoạn mã :

[css].post-body img {
width: 480px!important;
height: auto!important; }[/css]

Trước khi thêm đoạn mã, bạn cần thay đổi 01 vài thông số phù hợp nhất với Blog bạn.

• 480px là chiều rộng ảnh sau resize
• Thay auto bằng chiều cao ảnh nếu muốn

Cuối cùng, Save template và quay lại trang chủ kiểm tra. Chúc các bạn thành công

Nguồn ThuthuatBlogspot.com

Read More

Cách tạo Slider Blogspot với nhiều ảnh



Cách tạo Slider ảnh cho Blogspot .Slide ảnh này có 1 cái hay ho là nó sẽ hiển thị 1 list 5 ảnh và khi bạn hơ chuột vào ảnh nó sẽ hiên ra với cỡ lớn hơn ở phía trên có kèm theo tiêu đề và mà tả sơ qua bài viết Sau đây Bít Tuốt Xin chia sẻ với các bạn cách tạo 1 Slider này cho blog của bạn

Xem Demo

Cách tạo Slider ảnh cho Blogspot - Website

Read More

Attractive jQuery Image Gallery For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style type="text/css">

.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRq7uL4O6bQYzKKmv13ztTnQLVBVfw7jcX_r0Qjvtg-IpXT2-lqEImu90eOhzE_-A2x8K59OWqJSOOXEj4tl_z5fqlCHSJColQqHfbHcSysie2zJaQ62km66_jqCxKIdxT9JnakjFSV3s/s1600/paging_btrix_bg2.png) no-repeat;
 display: none; 
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2unOzx_mFGLy7T7EpKt2jHxu0WKRYdyQ-beKffeJPeLWLsCzvP6PQpWG0puNM_suddVSGJ9vNEFanNth_bZRsQirWdaw360qR7JV_dgCjKN33fxWkcJutfmZadatVSALit6amijFxuA/s1600/bloggertrix_imge1.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEzsJkLtDuU7MDG359xZqOnqth2berfLgAZ-BH0ZZezXpZWhVIVVCeE441ITvryfjACHDVoiBBQ9XHOa3vIUZT5bCZBSk-Jxa8p49TYXH1R65tE8rhepf6iQnW6ILoWg7vU-luxSVgHM/s1600/bloggertrix_imge3.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-GLKnd_yX41LrAKFYh57cDFuhEtxl13BNXnRlWTYebbCt1XUADiNU1SPq3-PHtsOClhJM1uuyzw1pXKjfy_l1KLdW2hmxb8Eu0jlE7gAhhn1AtOfJEQWl6vJ76cc95sgRn1aPgIull0/s1600/bloggertrix_imge2.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx255WaBM95rX68R5VodtCI71gsHK5uEkq_17SmpfstWWiTKZX6xc6hZqtlosp9LlnM0geX7Zfmd0tUwUi1x17NhsPGzxyZJRDNZP6y1dyZC5IcVr1PAw3XyTCO0HOMk88CYp7Dg1eaTw/s1600/bloggertrix_imge4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");
  
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 
 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 
 //paging_btrix + Slider Function
 rotate = function(){ 
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
  
  //Slider Animation
  $(".image_reel").animate({ 
   left: -image_reelPosition
  }, 500 );
  
 }; 
 
 //Rotation + Timing Event
 rotateSwitch = function(){  
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };
 
 rotateSwitch(); //Run function on launch
 
 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 }); 
 
 //On Click
 $(".paging_btrix a").click(function() { 
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 }); 
 
});
</script>

You can change photos by changing Image URLs
If you want to add links to your image. # replace with your image links.
7. Now save your HTML/Javascript'.

Nguồn MyBlogger Tricks

Read More

Resize Blogger Thumnail

Resizing Blogger Thumbnails

Mã code như sau:

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;
var ImageSize = 100;
//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

Read More

How to add image before blog post title

How to add image before blog post title

1. Log in to blogger and Go to Design >> Edit HTML

2.Click on "Expand Widget Templates"  checked

3.  Scroll down and to this code

<b:if cond='data:post.url'>
<a expr:href='data:post.url'> <data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

4. now paste this code between  <a expr:href='data:post.url'> and <data:post.title/>.

<img src="YOUR-IMAGE-URL" style="border-width: 0px;" />

*Replace with  YOUR-IMAGE-URL Use correct image URL

5. Now save your template you are done.

Nguồn MyBlogger Tricks

Read More

Tooltips Recent Post Widget For Blogger With Thumbnail

Tooltips Recent Post Widget For Blogger With Thumbnail

Live Demo

Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

Read More