Chào mừng đến với Diễn Đàn Tin Học VN! Hãy chia sẽ những gì bạn biết, và đưa ra thắc mắc của bạn để được giải đáp.
- maytinhbienhoa
- Tổng số bài gửi : 3
Join date : 04/04/2018
Tạo bài viết liên quan trong blogspot với ảnh thumnail
14/04/18, 02:03 pm
Bước 1: tìm ]]></b:skin> và dán vào trước nó đoạn CSS dưới đây
- Code:
/* Related Post */
#related-post{margin:0;padding:0}
#related-post h4{overflow:hidden;position:relative;color:#222;padding:10px 0;margin:15px 0;text-transform:uppercase;display:block;border-bottom:3px solid rgba(0,0,0,0.05);letter-spacing:.5px;font-size:17px}
#related-post h4:before{content:'';display:inline-block;height:14px;top:0;left:0;margin:0 10px 0 0;width:15px;background:#dd5252}
.relhead{background:#fff;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0}
ul#related-summary{margin:0;padding:0}
ul#related-summary li{position:relative;float:left;list-style:none outside none;margin:0 5px 15px 5px;padding:0;overflow:hidden;height:175px;width:31.6%}
ul#related-summary li img{background-color:#f4f5f6;width:100%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle}
ul#related-summary li a.relinkjdulx{color:#000;display:block;font-size:14px;font-weight:400;line-height:normal;overflow:hidden;text-align:left;padding:10px 10px 10px 0}
ul#related-summary li a.relinkjdulx:hover{color:#dd5252}
.overlayb{position:relative;max-height:140px;overflow:hidden}
.overlayb:before{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;visibility:hidden;transition:all .6s}
.overlayb:after{content:'\f002';font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,.6);position:absolute;top:42%;left:45%;text-align:center;z-index:2;opacity:0;visibility:hidden;transition:all .6s}
.overlayb:hover:before,.overlayb:hover:after{opacity:1;visibility:visible}
.post ul li span.news-text{display:none}
@media only screen and (max-width:640px){.bagitiga{-webkit-column-count:1;-moz-column-count:1;column-count:1}ul#related-summary li{width:47%;height:170px}}
@media only screen and (max-width:320px){ul#related-summary li{width:100%;float:none;margin:0 0 15px 0;height:200px}}
Bước 2: Thêm đoạn code sau vào vị trí mà bạn muốn hiển thị bài viết liên quan. Hoặc bỏ vào sau <div class='post-footer'> ... </div>
- Code:
<!-- Bài viết liên quan -->
<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>/*<![CDATA[*/function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",relgambar[relnojudul]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnojudul]=e.link[n].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],i=relurls[t],o=relcuplikan[t],s=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=i,relcuplikan[a]=o,relgambar[a]=s}for(var g,m=0,d=Math.floor((reljudul.length-1)*Math.random()),c=d,h=document.URL;relmaxtampil>m&&(relurls[d]==h||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[d]+"' rel='nofollow' target='_top' title='"+reljudul[d]+"'><div class='overlayb'><img src='"+relgambar[d]+"' /></div></a>",g+="<div class='overlaytext'><a class='relinkjdulx' href='"+relurls[d]+"' target='_top'>"+reljudul[d]+"</a></div>",g+="<span class='news-text'>"+relcuplikan[d]+"</span>",g+="</li>",document.write(g),m++,m!=relmaxtampil))&&(d<reljudul.length-1?d++:d=0,d!=c););}var relnojudul=0,relmaxtampil=6,numchars=90,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
<div id='related-post'>
<div class='relhead'>
<h4><span>Related</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();
</script>
</ul>
</div>
</div>
</b:if>
Bước 3: Tìm đến </body> và thêm vào trước nó đoạn code bên dưới.
- Code:
<!-- Bài Viết Liên Quan -->
<script type='text/javascript'>
//Related Post Thumb
$("ul#related-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/w200-h140-c/"))});
//Spoiler
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
// Double Click
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|