Widget featured post di halaman utama blogger
Widget featured post di halaman utama blogger, berikut penerapan CSS, HTML dan Javascriptnya
KODE CSS
/* Featured Post */
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}.featured-post a{font-size:1.2em;color:#fff}.featured-post a:hover{color:#fff;text-decoration:underline}.main-post.featured-post a{margin:0;font-size:17px}.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}.featured-post .secondary-post{background:#dadada;width:32.3%;margin:0 0 20px 0;transition:all .4s}.featured-post .main-post{background:#dadada;width:65.5%;padding:0;transition:all .4s}.featured-post .main-post:before,.featured-post .secondary-post:before{bottom:0;content:"";display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%)}.featured-post .main-post:after,.featured-post .secondary-post:after{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:1;opacity:0;visibility:hidden;transform:scale(0.8);transition:all 0.20s linear}.featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;visibility:visible;transform:scale(1.0)}.featured-post span{background:rgba(0,0,0,0.3);display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#34495e}.featured-post img{height:100%;transition:all .5s}.featured-post .main-post img{height:350px;width:100%;object-fit:cover}.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%}.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d}.featured-post header{position:absolute;background:rgba(0,0,0,0.5);bottom:0;left:0;right:0;padding:20px;z-index:2;transition:all .4s}.featured-post header:hover{background:#38b7ee}.featured-post .secondary-post header{padding:10px}.featured-post header h3{font-size:16px}.featured-post h4{font-size:13px}span.label-info a.label-block:nth-child(n+2),.showpageOf{display:none}/* Media Queries */
@media screen and (max-width:768px){
#featured-posts-section{display:none}}
<b:if cond='data:view.isHomepage'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div>
</b:if>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="https://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>
