Link Instant - Membuat Featured Metro UI Responsive Seperti Windows 8 Halaman Depan Blogger. Sulitkah? Tidak dan simpel sekali hanya dengan 3 langkah. Berikut adalah caranya.
Pastikan ada kode jQuery di dalam template, Jika belum ada, copas kode dibawah ini di atas kode </head>
script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Copy kode berikut ini dan Paste (simpan) 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/AVvXsEgVjznuuEmGe5jupE-HvWk7pU2ggrR4CJj8Q-UOhpJEUPh3YNvOxSMU_H8YTpl_0kG6kwvSfF55FfMlXTKK8se-HLAv3G02h1j1dRYmaWjbPIlVA7te5-dIBEGmFDlopVIPvPQCtz0oQQ0/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:none;padding:1px}
#top-main h2{position:absolute;left:-9999px}
#buttons{position:absolute;bottom:0;right:0;display:none}
#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: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 -->
Simpan di bawah atau di atas kode <div class='main-wrapper'>, sesuai selera
<!-- 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' mobile='yes'/>
</div>
</b:if></b:if>
<!-- Featured Random Post Slider End -->
Save Template!
Klik "Layout"
Add a Gadget di atas "Blog Post" >> pilih HTML/JavaScript
Simpan kode berikut ini di kolom isi:
<div id="randompostxx"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4,
RandompostActive:false,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:false
});
});
//]]>
</script>
Lihat hasilnya.... mudahkan?
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4,
RandompostActive:false,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:false
});
});
//]]>
</script>
0 Comments