Thứ Sáu, 18 tháng 1, 2013

Auto readmore phong cách video cho blogspot




Từ trước đến nay các blog về phim ảnh chư có tieenmj ích read mỏe riêng. bài viết này namkna giới thiệu tiện ích Auto readmore dành riêng cho các blog chuyên về phim ảnh. Tiện ích được mình convert từ templte johny-jazzytube.


=> Tiện ích này có gì đặc biệt?

1- Tự động biến link video thành trình chơi nhạc mà không cần phải lấy mã nhúng embeb ở trên trang youtobe (tiết kiệm thời gian phải không nào)
2- Tự động lấy ảnh mặc định của video thành ảnh thumbnail (không lấy ảnh upload trên blog và các host ngoài trang youtobe nha)
3- Tích hợp nút like cho từng video trên trang chủ. Bạn có thể xem ở demo hoặc hình ảnh minh họa bên dưới. (rất tiện phải không)

=> Cách tiến hành:

1- Đăng nhập vào blog
2- Chọn Mẫu
2- Chọn thêm tiện ích => Chọn mở rộng tiện ích mẫu
3- Tìm thẻ:
<data:post.body/>
- Thay thế thẻ đầu tiên tìm thấy thành:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>[postlink]
<data:post.url/>[/postlink]
<data:post.body/>
</div></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>createVideoThumb2(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>createVideoThumb(&quot;summary<data:post.id/>&quot;);</script>
<div id='viewers'>
<div class='download-link'>
<a class='uiBtn' expr:href='data:post.url'>Watch now &#187;</a>
</div>
<span style='float:left;padding:1px 0;height:21px;width:80px;overflow:hidden;border:none;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</span>
</div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
4- Thêm đoạn code ben dưới trước thẻ ]]></b:skin>
.uiBtn{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;word-wrap:break-word;color:#b69786;cursor:pointer;display:inline-block;font-size: 11px;font-weight:bold;line-height:normal !important;padding:3px 6px 4px 7px;text-align:center;text-decoration:none;vertical-align:top;-webkit-border-radius:2px;-moz-border-radius:2px;
border-radius:2px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
.uiBtn:hover{color:#3671b2;text-decoration:none}
.download-link{float:right;padding:0px 0px 1px;margin-bottom:0;}
#viewers{float:left;width:100%;font:normal 12px Arial;margin:0;padding:0}
5- Thêm đoạn code ben dưới vào sau thẻ ]]></b:skin>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#main-wrapper{width:640px}
.feed-links{display:none}
h2.date-header{margin:.2em 0 .4em}
.post h3{height:23px;font:14px Oswald;line-height:1.1em;margin:0 0 8px;padding:0;}
.post{margin:10px 6px 0 4px;padding:5px 8px; width:180px;height:202px;float:left;border:1px solid #ccc;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;padding:5px 10px 10px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
.post:hover{border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;filter:alpha(opacity=80);opacity:.8}
.post-body{margin:7px 0 0 0;float:right;border-top:none;padding-top:0px;}
.play-button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvyMRMUa3jX_EJfwFMbsKJIozYZB6EoJnA6kKMJQE4Q1VEs2r5B0ho68qQGtNdfPbYEOZFz-bZTwZc68I61Bf5RxQ2wLlclU_9GlkGsYEg9FmGQpYBcfOWqfgfPoaFnXIH5L2d5kqOJ5LL/s1600/play.png) no-repeat 65px 42px;cursor:pointer;height:147px;filter:alpha(opacity=75);opacity:.75;position:absolute;width:196px}
.play-button:hover{filter:alpha(opacity=40);opacity:.4}
#blog-pager{float:center;margin:6px;padding:8px 0}
</style>
</b:if></b:if>
6- THêm code bên dưới trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode = 'float' ; summary_noimg = 0; summary_img = 0; img_thumb_height = 130; img_thumb_width = 180;

function createVideoThumb(pID){var div=document.getElementById(pID);var summ=summary_noimg;if(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){var vidid=div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"))}else{var vidid=""};var postlink=div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));if(vidid==""){var imgvid='<a href="'+postlink+'"><img class="thumbnail" src="http://i930.photobucket.com/albums/ad145/whitebook_diary/novideo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a>'}else{var imgvid='<a href="'+postlink+'"><span class="play-button"></span><img class=thumbnail src="http://i2.ytimg.com/vi/'+vidid+'/default.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a>'};var summary=imgvid;div.innerHTML=summary}function createVideoThumb2(pID){var div=document.getElementById(pID);var imgtag="";var summ=summary_noimg;if(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){var vidid=div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"))}else{var vidid=""};var textinside=div.innerHTML.substring(div.innerHTML.indexOf("[starttext]")+11,div.innerHTML.indexOf("[endtext]"));var postlink=div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));var embedvid="";if(vidid!=""){embedvid='<object width="600" height="450"><param name="movie" value="http://www.youtube.com/v/'+vidid+'&hl=en_US&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vidid+'&hl=en_US&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="450"></embed></object>'}var summary=embedvid+'<div class="content">'+textinside+'</div>';div.innerHTML=summary}
//]]></script>
Khi đăng bài bạn chỉ cần dán link youtobe vào bài viết thgeo cấu trúc sau:
Link + endofvid
Ví dụ mình có link là:
http://www.youtube.com/watch?v=De4Cl6f4VJs
thì ta sẽ dán link như sau vào bài viết:
http://www.youtube.com/watch?v=De4Cl6f4VJsendofvid

Thứ Bảy, 12 tháng 1, 2013

Bài viết ngẫu nhiên dạng thumbnail đẹp cho blogger

Ramdon posts là thủ thuật gọi ngẫu nhiên một số bài viết từ nguồn cấp feedburner của blog bạn. Hôm nay mình sẽ giới thiệu cho các bạn tiện ích bài viết ngẫu nhiên dạn hình ảnh thumbnail và hiệu ứng hover tên bài viết cùng với mô tả của bài viết (Random Posts with thumbnail effect) dành cho blogger.


» Cách thêm Random Posts với hình ảnh thumbnail cho blogspot!

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

2. Vào phần Bố cục (Layout)

3. Chọn Thêm tiện ích (add widget)

4. Tạo một widget HTML/Javascript và thêm đoạn mã bên dưới vào đó:


<style type="text/css">
#random-posts li{
width:90px;height:90px;margin-right:12px;float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:90px;height:90px}
#random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#35BBCB;color:#fff;padding:5px;font-size:90%;transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .isinyako{right:0}
#random-posts li:hover .isinyako{
top:-40px;opacity:1;visibility:visible}
.isinyako span{font-size:90%;color:#B30B0B}
.isinyako p{font-size:90%;}
</style>
<span class="glap">
<ul id="random-posts">
<script type="text/javaScript">
var rdp_numposts = 6;
var rdp_snippet_length = 50;
var rdp_info = 'yes';
var rdp_comment = 'Nhận xét';
var rdp_disable = 'Tắt nhận xét';
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);

function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>

<script type="text/javaScript">
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h2>'+m+"</h2>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
</script>
</ul></span>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120);
//]]></script>


5. Lưu tiện ích lại:

» Tùy chỉnh:
width:90px; là chiều rộng của ảnh thumbnail.
height:90px; là chiều cao của ảnh thumbnail.
top:-40px khoảng cách của khung hover tooltip so với lề trên của hình ảnh.
var rdp_numposts = 6; số ảnh thu nhỏ sẽ hiển thị trong tiện ích.
var rdp_snippet_length = 50; số ký tự mô tả


Chúc các bạn thành công