Share
View previous topicGo downView next topic
Tổng số bài gửi : 3
Join date : 2018-04-04
View user profile

Tạo bài viết liên quan trong blogspot với ảnh thumnail

on 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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' 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
            $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(/\/s[0-9]+(\-c)?\//,&quot;/w200-h140-c/&quot;))});
            //Spoiler
            $(document).ready(function(){$(&quot;#flippy&quot;).click(function(){$(&quot;#flippanel&quot;).slideToggle(&quot;normal&quot;)})});
            //<![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>
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum