Cara Menciptakan Featured Post Di Blogger

Cara menciptakan Featured Post  Di blogger - Kali in Saya Akan kongsikan Cara menciptakan Featured Post  Di blogger

Code yang aku akan kongsikan ini sama menyerupai code yang aku gunakan di dua blog aku ia itu qrst.live dan okeybha.com

Caranya cukup senang.

login ke blogger anda dan tambahkan cod css berikut ke css anda

/* Featured 2 */ .gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:760px} .gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%} .gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s} .gravfeatureditem:hover .gracontent{opacity:0;visibility:hidden;transform:translate(0,60px)} .gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%} .gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s} .gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear} .gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df} .gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148} .gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6} .gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c} .gravfeatureditem a:hover:before{opacity:0.9;} .gravfeatureditem a:after{content:'Read More';font-family:'Google Sans',sans-serif;position:absolute;z-index:3;font-size:18px;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellygrav .6s linear;opacity:0;visibility:hidden;transition:all .3s} .gravfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)} @media screen and (max-width:826px){ .gravfeatureditem{width:50%} .gravfeatureditem.third,.gravfeatureditem.fourth{display:none}} @media screen and (max-width:641px){ .gravfeatureditem{width:100%} .gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}

Pasangkan code js berikut di atas code </body>

<script type='text/javascript'> //<![CDATA[ // Featured Post function getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="gravfeatureditem first"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="gravfeatureditem second"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="gravfeatureditem third"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="gravfeatureditem fourth"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="gravityfeatured">'+c+"</div>"),$(".gravityfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#gravityfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[recent]"!==sliderContent?$.ajax({url:"/feeds/posts/defauli"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove(); //]]> </script>

Dan pasangkan code ini d mana anda ingin tampilkan

<b:if cond='data:blog.url == data:blog.homepageUrl'>  <div class='nazren-container'> <div class='gravityfeaturedz section' id='gravityfeatured'> <div class='widget HTML' data-version='1' id='HTML100'> <div class='widget-content'>[recent]</div></div></div> <div class='clear'></div></div> </b:if>

Ubah code yang aku warnakan mengikut code css anda nazren-container.
Setelah simpulan memasukan semua code di atas simpan template anda, Dan lihat hasilnya,
Featured Post ini tlah aku setkan akan keluar hanya di halaman homepage sahaja.

• DEMO 1
• DEMO 2 

 ScrinShot

Baiklah hingga disini sajala posting aku tentang Cara menciptakan Featured Post  Di blogger, Moga apa yang aku kongsikan ini sanggup membantu anda, Wasalam dari saya.
Sumber https://www.onet4u.com/

Bagikan Artikel ini