Cara Membuat Featured Post Thumbnail Metro Praktis yang resvonsive

Untuk menampilkan Featured post yang baik dan resvonsive terutama tidak usah ribet mengganti - ganti gambar setiap kali memposting halaman baru, postingan akan otomatis tampil di halaman pertama.

disini akan dijelaskan bagaimana " Cara Membuat Featured Post Thumbnail Metro Praktis yang resvonsive " yang telah saya coba dan berhasil.

Caranya Sebagai berikut :

1. Buka dashboard Blogger > pilih tema > Edit HTML
2. Pertama copykan kode program di bawah ini di atas </head>

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

3. Copy Code CSS dan Javascript  di atas </head>:

<!-- Featured Random Posts Slider Start --> <style type='text/css'> #slides{overflow:hidden} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:250px} #slides li{display:none;background-color:white;padding:4px;margin-top:0;position:absolute} #slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block} #slides li:nth-child(1){width:49.5%;height:100%} #slides li:nth-child(2){left:50.3%;width:24.5%;height:49.5%} #slides li:nth-child(3){left:75.5%;width:24.5%;height:49.5%} #slides li:nth-child(4){left:50.3%;top:51%;height:49%;width:49.7%} #slides img{width:100%;height:100%} #slides h4{position:absolute;bottom:20px;width:96%;padding:0 10px;margin:0 -5px;font-size:16px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F} #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px} #slides .label_text{display:none;position:absolute;z-index:3;bottom:10px;width:100%;padding:0 10px;margin:0 -5px;font-size:9px;color:white}.randomnya .overlayx{position:absolute;top:0;left:0;border:4px solid white;width:97%;height:97%;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJQp9RnLvoDwG0p2t4ZMTpKUUdBEqfgqMAJdWKuJdn5pIhMgMvAtGbgfxcmnPw2-6YRWHI83wJfIjYqKyyYATPP0oVNbA-_vvG2b5bLLDzEg1PKpg7RT7qNDShnpdrg4v8p4R2_LtyFHQ/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x} #slides li:nth-child(1) .overlayx{background-position:0 0} #slides .label_text span{margin-right:2px} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none} #slides .cmnum{position:absolute;background-color:#7C7C7C;padding:2px 3px;display:block;top:-5px;right:10px} #slides .cmnum::after{content:"";width:0;height:0;border-width:1px 4px;border-style:solid;border-color:#7C7C7C #7C7C7C transparent transparent;position:absolute;top:100%;right:0}ul.randomnya li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} #slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} #slides {font-family:Arial,sans-serif} #top-main{position:relative} #top-main .widget{border:0;padding:0 0 22px} #top-main h2{position:absolute;left:-9999px} #buttons{position:absolute;bottom:0;right:0} #buttons a{display:inline-block;text-indent:-9999px;background-color:white;width:25px;height:17px;margin:0 0 0 7px;border:1px solid #CECECE;position:relative} #prev::before,#next::before{content:"";width:0;height:0;border-width:0 0;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-5px;margin-left:-15px;left:50%} #next::before{border-color:transparent transparent transparent #535353;margin-right:-15px;right:50%;margin-left:auto;left:auto} @media only screen and (min-width:768px) and (max-width:999px){ #slides ul{height:200px} #slides h4{font-size:15px} #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px} } @media only screen and (max-width:767px){ #slides ul{height:200px} #slides h4{font-size:15px} #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px} } @media only screen and (max-width:479px){ #slides ul{height:450px} #slides li:nth-child(1){width:100%;height:49.5%} #slides li:nth-child(2){left:0;top:50%;width:49.5%;height:24.5%} #slides li:nth-child(3){left:50.5%;top:50%;width:49.5%;height:24.5%} #slides li:nth-child(4){left:0;top:75%;height:24.5%;width:100%} } </style> <script type='text/javascript'> //<![CDATA[ function RandomPost(a){(function(e){var i={blogURL:"",MaxPost:4,RandompostActive:true,idcontaint:"#randompost",ImageSize:100,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};i=e.extend({},i,a);var h=e(i.idcontaint);var b=i.blogURL;var d=i.MaxPost*600;if(i.blogURL===""){b=window.location.protocol+"//"+window.location.host}h.html('<a href="#" id="prev">prev</a><a href="#" id="next">next</a></div><div id="slides"><ul class="randomnya"></ul></div>').addClass(i.loadingClass);var g=function(z){var t,k,r,o,x,A,s,w,y,u,n="",v=z.feed.entry;for(var q=0;q<v.length;q++){for(var p=0;p<v[q].link.length;p++){if(v[q].link[p].rel=="alternate"){t=v[q].link[p].href;break}}for(var m=0;m<v[q].link.length;m++){if(v[q].link[m].rel=="replies"&&v[q].link[m].type=="text/html"){r=v[q].link[m].title.split(" ")[0];break}}if("media$thumbnail"in v[q]){x=v[q].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+i.ImageSize+"-c")}else{x=i.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+i.ImageSize+"$1")}k=v[q].title.$t;u=v[q].published.$t.substring(0,10);o=v[q].author[0].name.$t;A=u.substring(0,4);s=u.substring(5,7);w=u.substring(8,10);y=i.MonthNames[parseInt(s,10)-1];n+='<li><a target="_blank" href="'+t+'"><div class="overlayx"></div><img class="random" src="'+x+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+w+'</span><span class="dm">'+y+'</span><span class="dy">'+A+'</span></span><span class="autname">'+o+'</span><span class="cmnum">'+r+"</span></div></li>"}e("ul",h).append(n)};var c=function(o){Total_Posts_Number=o.feed.openSearch$totalResults.$t;if(Total_Posts_Number<=i.MaxPost){i.MaxPost=Total_Posts_Number}var j=[];while(j.length<i.MaxPost){var q=Math.ceil(Math.random()*Total_Posts_Number);var p=false;for(var n=0;n<j.length;n++){if(j[n]==q){p=true;break}}if(!p){j[j.length]=q}}var m="/-/"+i.tagName;if(i.tagName===false){m=""}if(i.RandompostActive===true){for(var l=0;l<i.MaxPost;l++){e.ajax({url:b+"/feeds/posts/default"+m+"?start-index="+j[l]+"&max-results=1&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}}else{e.ajax({url:b+"/feeds/posts/default"+m+"?max-results="+i.MaxPost+"&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}};var f=function(){if(i.tagName===false){e.ajax({url:b+"/feeds/posts/default?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}else{e.ajax({url:b+"/feeds/posts/default/-/"+i.tagName+"?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}e(window).bind("load",function(){setTimeout(function(){var k=5000;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#prev").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#next").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#next").click()}h.removeClass(i.loadingClass)},d)})};e(document).ready(f)})(jQuery)}; //]]> </script> <!-- Featured Random Posts Slider End -->

4. Kemudian untuk letak posisi widgetnya letakan kode di bawah ini di bawah code : <div id ='main-wrapper'>  jika tidak ada di bawah code ini <div class='main-wrapper'> posisi pastinya di bawah navigasi menu atau di atas blog post :

<!-- Featured Random Post Slider Start -->
<b:if cond='data:blog.pageType != "static_page"'>
 <b:if cond='data:blog.pageType != "item"'>
<div id='top-main'> 
<b:section class='main' id='top-main1' preferred='yes'/>
</div>
</b:if>
</b:if>
<!-- Featured Random Post Slider End -->

5. Klik Simpan Tema.
6. Untuk menampilkan widgetnya masuk ke Dashboard blognya kembali pilih > Tata letak > pilih add widget HTML/Javascript di bawah large banner atau main copycan kode berikut :

<div id="randompostxx">
</div> <script type='text/javascript'>
 //<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4, RandompostActive:false,
 idcontaint:"#randompostxx",
 ImageSize:200,
 tagName:false });
 });
//]]>
</script>

7. Klik Simpan

Contoh hasilnya bisa di lihat disini

Selesai dan lihat hasilnya.
Selamat mencoba dan semoga berhasil

Tutorial ini di dapat dari www.komunikasipraktis.com

Tweet