FEATURED POST AUTOMATIC SLIDER

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>

0

0

Loading...

Post a Comment

Post a Comment

✖

RSS Feeds

✖

Select Country

No	Flag	Country	Code	Dial	Language

✖

Select Chatbox

Free SVG Icons

✖

Like this page?

Likes: 0 | Dislikes: 0

✖

Visitor Views

✖

Visitor Informations

✖

Subscribe

✖

Feedback

✖

Contact Us

🌐 www.khinmaungwin.dpdns.org

📧 info@khinmaungwin.dpdns.org