cara membuat featured seperti detik.com

cara membuat #featured seperti detik.com
sahabat untuk membuat #featured seperti detik.com alangkan indahnya bila terkesan menurut pengunjung baik dan sering berkunjung pada blog kita.
featured adalah tampilan postingan baru ataupun perkatagori yang tidak memakai slide.
namun dalam postingan kalai ini,cara membuat featured dan di barengi dengan artik berikutnya hanaya dengan judulnya saja.
kalau detik.com menampilkan featured dengan artikel terkait dengan postingannya.
untuk blogger propisonal hal yang mudah tapi bagi yang pemula pastinya kesulitan.
nah anna berbagi shere ini  melainkan untuk pemula seperti anna
biar tampilanya ya sedikit tampilan blognya pro.
cari membuatnya sahabat bisa lirik kiri dan kanan.

pertama sahabat login dengan blog sahabat ]]></b:skin>
setelah itu,sahabat ke tample lalu ediet HTML blog sahabat

.postbox{width:60%}
.postbox h2{font-size:20px;font-weight:400;line-height:25px}
.postbox h2 a,.postbox h2 a:visited{color:#26F054}
.postbox h2 a:link{color:#1A3BF7}
.postbox ul li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnh_GTBcwMJr5cvGYvVKOlduOZV-xE9jKChmGEmQs5YjbXxQyJblRxhN5TnLkbO_18rV6s9jlmQA1p6ttB3NvnA4ycyFjJ3qPOmXjWkKsrlJYwrvPBssnIGFltjIFy1EdD377pkfGZUS8/s1600/arrowList_2.gif) no-repeat 260px 0;font-size:1em;line-height:15px;padding:0 0 2px 270px}
.boxcont{padding:10px;color:#20D0CE}
.boxcont h5{color:#20D0CE;margin:0;padding:0}
.more{font-weight:700;margin:5px 0x}
.postbox ul li a:hover{color:#fff}
.postbox .thumb{float:left;margin-right:15px;background:#eee;padding:5px 3px 0}
.postbox ul li a,.postbox ul li a:visited{color:#5820D0}
.postbox h2 a:hover{color:#5820D0;text-decoration:none}
.postbox ul{list-style:none;padding:0}

.postbox1{width:100%}
.postbox1 h1{background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnc-Pou3SUjAXWOfXX62q01Efh4Xq8yRX8YQFksUaQZgq-fbQPGc0xA7OcrxD0rho57K34SCPaYS3FjQ6km7BK0C4wkGh-D00VJw6DK91C4uD-rTbiEi5RVzFd76R6jxv1KV-HyOPpsU/s1600/label.png) no-repeat 5px 8px;font:14px Oswald;text-transform:none;color:#333;line-height:1.2em;border-bottom:3px solid #666;margin:0 auto;padding:6px 0 6px 49px}
.postbox1 h1 a:hover{color:#111;text-decoration:none}
.postbox1 h2{font-size:16px;font-weight:700;line-height:16px}
.postbox1 h2 a,.postbox1 h2 a:visited{color:#111}
.postbox1 ul li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrErRuCAY8DlMN0RGk71gGKwQkYWMY3tlLYCM5jlo9CHl_SXj1W8RH9NYfa9j2c1FNdDcWBAINhMoarAEkGRSsc1hgh7AM9iC7lO_H5xAgf5PvgJ8sACPGY6vYXKLsXWSUXM-OSv8EWYXc/s1600/bullet_icon.png) no-repeat 310px 3px;font:bold 12px Arial;line-height:15px;padding:0 0 6px 325px}
.boxcontent1{background:#eee;padding:10px 10px 5px}
.boxcontent1 h5{color:#666;margin:0;padding:0}
.more{font-weight:700;margin:5px 0}
.postbox1 ul li a:hover{color:#f89c21}
.postbox1 h1 a,.postbox1 h1 a:visited{color:#ec010a}
.postbox1 ul li a,.postbox1 ul li a:visited{color:#333}
.postbox1 .thumb{float:left;margin-right:10px;}
.postbox1 h2 a:hover{color:#f89c21;text-decoration:none}
.postbox1 ul{list-style:none;padding:0}

yang warna ungu sahabat boleh copas boleh ga.

cari kode </head> dan letakan kode di bawah ini,tepat di bawahnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7o08xJGCb5yODU2L4O2nDSqOWWDaugkOsT5UUfbj9HtiADxYKVUUxr29qQfUaNh5kjOCtIK5GqqbWit-e4jjtzMVsZ0xbhmTwjiMZqvO7doy00iThH6za8WpbmkoAyzKrv0DeFeBLofT/s1600/android-icon-192x192.png";showRandomImg=false;aBold=true;summaryPost=180;summaryPost1=80;summaryTitle=20;numposts=4;numposts1=5;numposts2=4;numposts3=4;numposts0=12;Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;if(i==0){var trtd='<div class="boxcont"><div class="thumb"><a href="'+posturl+'"><img width="240" height="200" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><div class="more"><div class="more">More news</div></div><ul>';document.write(trtd)}if((i>0)&&(i<numposts)){var trtd='<li><a href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd)}j++}document.write('</ul></div>')}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts1<=json.feed.entry.length){maxpost=numposts1}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';if(i==0){var trtd='<li class="first"><div class="entry-thumb"><a href="'+posturl+'"><img width="80" height="70" src="'+img[i]+'"/> </a></div><h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2><h5>'+daystr+'</h5><div class="entry-excerpt">'+removeHtmlTag(postcontent,summaryPost1)+'...  </div></li>';document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<li class="catlist"><a href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd)}j++}}function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts2;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="143" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost1)+'...</p></div>';document.write(trtd);j++}}function showrecentposts3(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;if(i==0){var trtd='<div class="boxcontent1"><div class="thumb"><a href="'+posturl+'"><img width="300" height="210" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><div class="more">More news</div><ul>';document.write(trtd)}if((i>0)&&(i<numposts3)){var trtd='<li><a href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd)}j++}document.write('</ul></div>')}function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts0;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="69" height="64" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

sahabat yang berwarna merah bila di blog sahabat sudah ada tak usah di copas.


dan yang terakhir cari kode <div id='main-wrapper'> letakan kode di bawah ini tepat di atasnya 

<div class='postbox'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div> <!--end: postbox-->

 lalu tinjau  setelah sahabat suka silahkan save