Home » Thu thuat
Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
Thứ Ba, 23 tháng 4, 2013
Bài viết liên quan cho blogger là 1 tiện ích không thể thiếu trong mỗi Blog. Nó giúp lượt View Blog của bạn tăng lên và hiệu quả giữ chân độc giả trên blog của bạn.
Với mẫu bài viết liên quan dạng hiệu ứng thu nhỏ này giúp giao diện blog không bị chiếm quá nhiều dành cho phần bài viết liên quan.
Demo Blog: Ảnh bìa cho Facebook
- Hướng dẫn thủ thuật:
1. Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F)Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
3. Tìm đến 1 trong 4 tag sau:
Tag 1:
Tag 2:
Tag 3:
Tag 4:
4. Dán code dưới đâu vào dưới 1 trong 4 tag trên:
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNJ2nH6h0ZK9AtCVZStOj3wtaCZdEECB0mWC8J8tRzjNoRvI-QvWfBos4sTgG8Zgx8u_OR6vEwCgW0P-VaR3EjQVq14JsTF8C0jSx2q1f5K07Ifufdd2U9lSB3abC84Pxdu03hyphenhyphen9FtgVX/s1600/no-image-namkna-blogspot-com.jpg";
var maxresults=10;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeohGrfSYXhy8YbqdwFKorSOHBWbcZz_AoPTQWNh7SxPyktnPCsiT04hwtPMcUUuhbHp3CefjXY8ehz9BJwPGcgW3ybO1nx5DmTDptXmY7u-dpz0Rsgj60jNFa5xt6i9WdLEg57kZ4thid/s1600/noimage-namkna-blogspot-com-1.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:90px;height:90px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
- Trong đó:
+ maxresults=5 là số bài viết liên quan các bạn muốn hiển thị.
5. Lưu lại và xem kết quả
Tags:
Thu thuat
Với mẫu bài viết liên quan dạng hiệu ứng thu nhỏ này giúp giao diện blog không bị chiếm quá nhiều dành cho phần bài viết liên quan.
Demo Blog: Ảnh bìa cho Facebook
- Hướng dẫn thủ thuật:
1. Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F)Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3qrWwE3o-lUAHJzXd_wIfwIeuYQwwcEN5mDnaW_sYDBIX5WV56m5J_1IViC_GYzMJPBH6K7rp5dOnbHCjTAAILieHHFFaRkB1yqa_pGoYwZVU5dvDqGPg62I4nhbCwTp2X_vZ3jWTWuG/s1600/transparant-itviet360-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
3. Tìm đến 1 trong 4 tag sau:
Tag 1:
<div class='post-footer'>
Tag 2:
<div class='post-footer-line post-footer-line-1'>
Tag 3:
<div class='post-footer-line post-footer-line-2'>
Tag 4:
<div class='post-footer-line post-footer-line-3'>
4. Dán code dưới đâu vào dưới 1 trong 4 tag trên:
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNJ2nH6h0ZK9AtCVZStOj3wtaCZdEECB0mWC8J8tRzjNoRvI-QvWfBos4sTgG8Zgx8u_OR6vEwCgW0P-VaR3EjQVq14JsTF8C0jSx2q1f5K07Ifufdd2U9lSB3abC84Pxdu03hyphenhyphen9FtgVX/s1600/no-image-namkna-blogspot-com.jpg";
var maxresults=10;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeohGrfSYXhy8YbqdwFKorSOHBWbcZz_AoPTQWNh7SxPyktnPCsiT04hwtPMcUUuhbHp3CefjXY8ehz9BJwPGcgW3ybO1nx5DmTDptXmY7u-dpz0Rsgj60jNFa5xt6i9WdLEg57kZ4thid/s1600/noimage-namkna-blogspot-com-1.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:90px;height:90px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
- Trong đó:
+ maxresults=5 là số bài viết liên quan các bạn muốn hiển thị.
5. Lưu lại và xem kết quả

- Template tin tức giải trí tuổi trẻ [tiin] cho blogspot
- Rss Feed Subscription đẹp - Nhận tin theo dõi Blogspot
- Thêm tác giả, quyền Admin cho blogspot
- Thêm Slide bài viết mới chạy ngang cho Blogspot
- Thủ thuật Facebook chèn link web vào stt FB hiện chung với like cmt và share
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Biểu tượng trái tim tình yêu đẹp trên Facebook (FB)
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Code Javascript tạo thêm đồng hồ cho Website, blog
- Hướng dẫn cách chat nhóm trên Facebook (FB)
- Hướng dẫn cách chụp ảnh màn hình trên Windows 8
- Cách cài đặt Password cho Windows 8 - mật khẩu User Admin
Comments[ 0 ]
Đăng nhận xét