Featured Post Automatic Slider
ဒါကတော့ Featured Post ကို Design တမျိုးနဲ့ပြုလုပ်ထားတဲ့ Widget Design လေးဖြစ်ပါတယ်။အရမ်းကိုလှပသေသပ်ပါတယ်။ဒီ Featured Post Design မျိုးက Template မှာနဂိုပါလာတဲ့ Template တွေရှိသလိုနဂိုမပါလာတဲ့ Template တွေလဲရှိပါတယ်။Featured Post Slider နဂိုမပါလာတဲ့ Template သုံးတဲ့သူတွေအတွက်အဓိကရည်ရွယ်၍တင်ပေးခြင်းဖြစ်ပါတယ်။Featured Post Slider နဂိုပါလာပြီးသား Template သုံးတဲ့သူတွေကတော့မိမိ Template မှာနဂိုပါလာတဲ့ Design ကိုမနှစ်သက်ရင်တော့အခုပဲဒီ Featured Post Slider နဲ့ပြောင်းလိုက်ကြပါစို့။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်းပါပဲ HTML/Javascript နဲ့ပဲပြုလုပ်ရမှာပါ။
- မိမိ Blog Site ကို account ကိုအရင်ဝင်ပါ
- dashboard ထဲက Layout ကိုနှိပ်
- Add a Gadget ကိုနှိပ်
- HTML/JavaScript ကိုနှိပ်
- အောက်ကပေးထားတဲ့ Code တွေကိုထည့် ပြီးပါပြီ။
<style type='text/css'>
#featuredpost {
margin:15px auto;
width: 920px;
border:1px solid #f1f1f1;}
#slides *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box}
#slides ul,#slides li{
padding:0;
margin:0;
list-style:none;
position:relative}
#slides ul{
height:320px}
#slides li{
width:50%;
height:100%;
position:absolute;
display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){
left:50%;
top:50%;
width:25%;
height:50%}
#slides li:nth-child(5){
left:75%;
top:50%;
width:25%;
height:50%}
#slides li:nth-child(1) h4 {
overflow:hidden;
font-size:25px;
bottom:0;
color:#fafafa;
width:100%;
padding:10px 10px 10px 90px;
text-align:left;
text-transform:uppercase;
background:rgba(0,0,0,0.3); height:90px;
font-family:'
Oswald';
text-shadow:2px 2px 0 rgba(0,0,0,0.2);
line-height:32px;
left:0;}
#slides li:nth-child(1) .label_text {
font-size:30px;
display:block;
bottom:10px;
left:10px;
padding:0;
font-family:'
Oswald';
box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {
display:block;
font-size:30px;
padding:12px 15px; background:#ff5663;
margin:0;}
#slides li:nth-child(1) span.dm {
display:block;
font-size:14px;
background:#333;
color:#fff;
padding:5px 21px;
text-transform:uppercase;
margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{
display:none;}
#slides a{
display:block;
width:100%;
height:100%;
overflow:hidden}
#slides img{
display:block;
width:100%;
height:auto;
border:0;
padding:0;
background-color:#333;
-moz-transform:scale(1.0) rotate(0);
-webkit-transform:scale(1.0) rotate(0);
-ms-transform:scale(1.0) rotate(0);
transform:scale(1.0) rotate(0);
transition:all 0.6s linear;} #slides li a:hover img {
-moz-transform:scale(1.1) rotate(1deg);
-webkit-transform:scale(1.1) rotate(1deg);
-ms-transform:scale(1.1) rotate(1deg);
transform:scale(1.1) rotate(1deg);
transition:all 0.3s linear;} #slides .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
background-image:url(
http://2.bp.blogspot.com/
-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);
background-position:50% 40%;
background-repeat:repeat-x;} #slides h4{
position:absolute;
bottom:40px;
margin:0;
font-size:13px;
font-family:'
Oswald';
left:10px;
padding:5px 10px;
color:#f9f9f9;
z-index:3;
line-height:20px;
font-weight:normal; background:rgba(41,41,41,0.7);
text-align:left;
text-transform:uppercase;
margin-right:10px;}
#slides .label_text{
font-size:12px;
color:#fff;
bottom:10px;
z-index:3;
left:10px;
position:absolute;
background:rgba(255,101,83,0.8);
padding:3px 6px;
font-family:'
Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{
display:none;}
#slides li:hover .overlayx{
opacity:0.1}
@media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){
width:100%;
height:50%}
#slides li:nth-child(2){
top:50%;
height:25%;
left:0;width:50%}
#slides li:nth-child(3){
left:50%;
top:50%;
width:50%;
height:25%}
#slides li:nth-child(4){
left:0;
top:75%;
height:25%;
width:100%}
#slides li:nth-child(5){
display:none;}}
@media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type='text/javascript'>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () { FeaturedPost({ blogURL:"", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]>
</script>
