Cara Membuat Featured Post Thumbnail Metro Ul Style Responsive di Blog

Featured Post Metru Ul

Sahabat. Kali ini akan akan kita berikan cara mudah membuat featured post thumnail ala metro ul style "responsive" pada blogspot.

Kenapa mesti memakai cara ini?

Tidak ada yang "mewajibkan" sob, namun ini hanya sekedar tips desain SEO blog. Lebih tepatnya bagaimana cara kita membuat blog kita semakin user friendly, itu saja. Untuk memperoleh pemahaman definisi, kegunaan dan fungsi featured post, silakan baca artikel sebelumnya njeh.

Jika sudah membaca artikel yang saya maksud, sobat bisa menyimpulkan betapa pentingnya desain SEO user friendly blog kita. Langsung saja, berikut cara membuat kotak featured post thumbnail di blog:
1. Masuk akun blogger
2. Silakan cari kode Jquery di template sobat. Jika sudah ada, silakan lakukan langkah ke-2. Namun jika tidak ada, silakan tambahkan kode JQuery di bawah ini tepat di atas kode </head>

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

3. Copas kode di bawah ini tepat di atas kode </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/AVvXsEhyoOf28iXD1kzZFpNroOcHMCtfvMJIV176wmhQXg3a_9NJpR2mO7JnhJ8U8SOlf9A7fp7wo3QBEfJ0CTBGHBQICuUQpY_bxSCYiYCTuMrxYLvCPCIjiV3zLiyyC2haUKJ_6n0Qaao4o3E/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:&quot;&quot;;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:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;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:&quot;&quot;;width:0;height:0;border-width:5px 9px;border-style:solid;border-color:transparent
#535353 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('<div id="buttons"><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. Copas kode di bawah ini tepat di atas kode <div id='main-wrapper'> :

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

5. Save template
6. Langkah selanjutnya silakan pilih tata letak (layout) > add widget (tambahkan widget) > HTML Javascript
7. Copas kode di bawah ini di widget tadi (judul dikosongi saja)

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

8. Save

***. Note:

• Untuk menampilkan jenis label tertentu pada featured post tersebut, silakan ganti dengan tagName:"label"
• Silakan ganti kode RandompostActive:false, menjadi RandompostActive:true,

Demikian tips desain SEO blog kali ini. Untuk menambah wawasan rekan-rekan, silakan baca artikel cara membuat featured post tanpa slider. Semoga bermanfaat.
(http://forumblogindo.blogspot.com).*

Source:
http://www.contohblog.com/2015/01/cara-membuat-featured-posts-metro-ui.html