Cara membuat Featured Post Di blogger - Onet4u Tech
News Update
Loading...

Cara membuat Featured Post Di blogger

Cara membuat Featured Post  Di blogger
BY Dottycat
Cara membuat Featured Post  Di blogger - Kali in Saya Akan kongsikan Cara membuat Featured Post  Di blogger

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

Caranya cukup senang.

Cara membuat Featured Post  Di blogger


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 saya warnakan mengikut code css anda nazren-container.
Setelah selesai memasukan semua code di atas simpan template anda, Dan lihat hasilnya,
Featured Post ini tlah saya setkan akan keluar hanya di halaman homepage sahaja.


 ScrinShot

Cara membuat Featured Post  Di blogger

Cara membuat Featured Post  Di blogger



Baiklah sampai disini sajala posting saya tentang Cara membuat Featured Post  Di blogger, Moga apa yang saya kongsikan ini dapat membantu anda, Wasalam dari saya.
DONATION Help make a Donation if the article is useful. Donations will be used to extend O4U www.onet4u.com Domain. Thank you.
Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notification
Do You Want Buy This Template? Contact onet4u.com@gmail.com
Done