[Tip] How to creat cool featured post slide two colum for blogspot

Do you want have a cool  featured post slide for your blog's that look like below picture. So how exactly do you do that?  follow me step to step:

Remember backup your blog befor continue.

1. Go To Blogger > Template
2. Backup your template
3. Click "Edit HTML"
4. Just paste down below </head> tag this code:

 <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9wWnIm1rHC4u5QKZEJxWQ0lhs3rwV3xYog42K01rgiT4Na85STzjrtCIC0cbnjKui2imauwo8gxjFCbAeb8HhS-rdiOP7JTuhaFVHNI5QUGqr0Ch-Gk_jfmhd4KZZlQ8zZ0Vuv_TBmFB/w140-h89-p/no-image-800x511.png",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script> code-box
1. Go to 'Layout' > click the 'Add a gadget' link in the layout area and select 'HTML/JavaScript' gadget from the pop-up window and paste under code in.
 <style>
    a{text-decoration:none}
    /* Featured Post */
    .featured-post { max-width: 1120px; margin: auto; ; font-family: Roboto }
    #featured-posts-section{ overflow: hidden; background: #607D8B;  padding: 20px 0 0; }
    .featured-post a{font-size:1.2em;color:#fff; font-family: Roboto}
    .main-post.featured-post a{margin:0;font-size:18px; font-family: Roboto}
    .featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
    .featured-post .secondary-post{ float: right;width:32%;margin:0 0 20px 0}
    .featured-post .secondary-post:nth-child(2) {width:32%;margin:0}
    .featured-post .main-post{width:65.9%;padding:0}
    .featured-post span{font-family: Roboto; background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:700;position:absolute}
    .featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
    .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 header{position:absolute;bottom:0;left:0;padding:20px; background: rgba(0,0,0,0);
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(59%,rgba(0,0,0,0.59)),color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#000000',GradientType=0);  width: 100%; padding: 10px 15px;}
    .featured-post h4{font-size:15px;line-height:1.3; font-family: Roboto}
    span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
    @media screen and (max-width:768px) {
    h1.post-title.entry-title a, h2.post-title.entry-title a {display:inline-block;margin:15px 0;}
    #featured-posts-section{display:none}}
    </style>
         <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>  code-box
Save it and check the result. just finish simple and profestional.