Cara memasang Featured Post Yang Keren Di Blog

Hello sobat" blogger. Berjumpa lagi dengan saya nih sob. Dan kali ini saya mau share kepada kalian semua Yaitu Cara Pasang Featured Post Yang Keren Di Blog Kalian. Sebenar nya mungkin sudah banyak yang share tutorial seperti ini blog" yang lain nya. Tapi tidak ada salah nya bila saya juga ingin coba share di blog saya sendiri. Cara nya mudah koq sob kalo kalian simak cara nya dengan baik" di tutorial saya hari ini.

Untuk demo kalian bisa liat langsung penampakan nya di bawah ini. Atau pada gambar di atas.

• DEMO

Cara Memasang Featured Post Yang Keren Di Blog

1. Pertama silakan kalian copy code di bawah ini lalu paste di atas code </head> .

<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]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//Label Badge
function label_pick(e){labelnes=new Array,labelnes[1]="<div class='badge featured'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>",labelnes[2]="<div class='badge badge1 trendy'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>","Hot"==e&&document.write(labelnes[1]),"Hiburan"==e&&document.write(labelnes[2])}
//]]>
</script>

2. Lalu copy code CSS di bawah ini di atas code </style> Atau di ]]></b:skin>. Silakan kalian cocokan dimana sekiranya yang work di template kalian masing", karena setiap template berbeda-beda sob.

/* Arlina 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%;margin:0 0 20px 0;transition:all .4s}
.featured-post .main-post{background:#dadada;width:65.9%;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:#e74c3c;}
.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;bottom:0;left:0;right:0;padding:20px;z-index:2;}
.featured-post .secondary-post header{padding:10px}
.featured-post header h3{font-size:20px;}
.featured-post h4{font-size:13px;}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
@media screen and (max-width:768px) {
#featured-posts-section{display:none}}

3. Setelah itu cari code seperti di bawah ini di template kalian. Atau code sejenis nya yang hampir sama.
<div id='wrapper'>
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
Lalu copy code pemanggilnya di bawah ini tepat di bawah code yang di atas tadi.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>  
<script type='text/javaScript'>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts&quot;&gt;&lt;/script&gt;&quot;);
</script>                                
</div>
</div>
</b:if>

4. Selesai dan silakan simpan template kalian dan coba liat hasil nya dalam mode dekstop di browser kalian.

Bagaimana sob?? Mudah bukan... mungkin itu saja yang bisa saya share tentang Cara memasang Featured Post Yang Keren Di Blog. Bila ada pertanyaan silakan tinggalkan komen di bawah, insya allah saya akan jawab.

Sekian tutorial dari saya tentang Cara Memasang Featured Post Yang Keren Di Blog. Semoga artikel ini bisa bermanfaat buat kalian semua. Selamat mencoba dan salam blogger.

Jangan lupa share bagikan yaa sob bila menurut kalian artikel ini bermanfaat.

Share this post