Home » Thu thuat
Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
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/AVvXsEjtVdrSBZPq0V9Zn-3ZNprKl3JFNel6uEFViJ2BOim6s332UwlXDz6Tvob_B7Fb3is8ZpGVn8Ls9uUhfxIpqxnIUZWMP0oidgXu8vdhYYHjO3duQUHYP_sGV4TSZx47jQ9hefHzQWCszwlM/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/AVvXsEjfxLiEdcty_dOHCefaQTfMcg3CIEseSZlPYXuW7VWazqRwyl7SEgaTuSHaQeN099q5bL1ahNBr9oi7yEBuel4BlVNr5oGjJSdxlAToek1_-XqCmQTOc2yDPjynQy2cZ-qUCamcbjZ-0BhZ/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/AVvXsEh4wNg_eeXnnALjAPfQWu2WLq0Or3osjhyQcfXyqukcaXUj7E2qlfFgYIWsZxPOgXa1CG7Kpqc8diV7mDnRtRaMWZHCIXsllOlsbT3521ot2zRa8sUcJNJ0BLqwRVuazvdxfzjqEoKyH6pR/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/AVvXsEjtVdrSBZPq0V9Zn-3ZNprKl3JFNel6uEFViJ2BOim6s332UwlXDz6Tvob_B7Fb3is8ZpGVn8Ls9uUhfxIpqxnIUZWMP0oidgXu8vdhYYHjO3duQUHYP_sGV4TSZx47jQ9hefHzQWCszwlM/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/AVvXsEjfxLiEdcty_dOHCefaQTfMcg3CIEseSZlPYXuW7VWazqRwyl7SEgaTuSHaQeN099q5bL1ahNBr9oi7yEBuel4BlVNr5oGjJSdxlAToek1_-XqCmQTOc2yDPjynQy2cZ-qUCamcbjZ-0BhZ/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ả

- Page number Navigation - Code phân trang đẹp cho blogspot
- Sửa lỗi bàn phím PC, Laptop bị khóa trên win 7, XP, 8
- Khung chia sẻ bài viết blogspot hiển thị chi tiết tác giả bài viết
- Tùy chình tiện ích nhãn (label Widget) màu đen cho blogspot
- CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot
- Sửa lỗi (error ) phân trang (pagenavi) trong Blogspot
- Template Blogspot Responsive cực đỉnh cho blog hình ảnh, sản phẩm
- Một số vấn đề thường gặp khi sử dụng blogspot
- Xóa chữ "đọc thêm..." mặc định ngoài trang chủ và trang Label blogspot
- Cách cài đặt Domain (tên miền) cho blogspot không bị chặn
- Xóa dòng chữ "hiển thị tất cả bài đăng có nhãn..." trong blogspot
- Template tin tức giải trí tuổi trẻ [tiin] cho blogspot
Comments[ 0 ]
Đăng nhận xét