Featured Post Auto Slider

Featured Post Auto Slider

ဒါက​တော့ Featured Post ကို Auto Slide နဲ့ပြုလုပ်ထားတဲ့ Widget Design ​လေးပါ။အရမ်းကိုလှပ​သေသပ်လွန်းပါတယ်။ထည့်သွင်းအသုံးပြုရမှာကလဲလွယ်ကူပါတယ်။ထုံးစံအတိုင်းပါပဲ HTML /JavaScript နဲ့ပြုလုပ်ရမှာပါ။မည်သည့်​နေရာတွင်မဆိုထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။​အောက်မှာ Design ပုံပြထားပါတယ်ကြိုက်နှစ်သက်တယ်ဆိုရင်​အောက်ကအဆင့်တိုင်းပြုလုပ်၍ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

NO(1)။မိမိ blog site ကို account အရင်ဝင်ပါ

NO(2)။dashboard ထဲက Layout ကိုနှိပ်

NO(3)။Add a Gadget ကိုနှိပ်

NO(4)။HTML / JavaScript ကိုနှိပ်

NO(5)။​ပေါ်လာတဲ့ Box အကွက်ကြီးထဲကို​အောက်က code ​တွေထည့်​ပေးပါ

NO(6)။save ကိုနှိပ်ပြီးပါပြီ

<style type="text/css"> ul.abt-sidebar-slider * { -moz-box-sizing: border-box; } ul.abt-sidebar-slider { font: 11px Verdana,Geneva,sans-serif; } ul.abt-sidebar-slider, ul.abt-sidebar-slider li { list-style: none outside none; margin: 0; padding: 0; position: relative; } ul.abt-sidebar-slider { height: 500px; width: 100%; } ul.abt-sidebar-slider li { display: none; float: left; height: 24.5%; overflow: hidden; padding: 0; position: absolute; width: 100%; } ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) { display: block; } ul.abt-sidebar-slider li:nth-child(2) { left: 0; top: 50%; } ul.abt-sidebar-slider img { border: 0 none; height: 100%; width: 100%; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li { transition: all 0.4s ease-in-out 0s; } ul.abt-sidebar-slider li:nth-child(4) { left: 0; top: 75%; width: 100%; } ul.abt-sidebar-slider li:nth-child(3) { left: 0; top: 25%; } ul.abt-sidebar-slider .overlayx { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img { border: 4px solid #2E8DCE; border-radius: 3px 3px 3px 3px; } ul.abt-sidebar-slider .overlayx:hover { opacity: 0.1; } ul.abt-sidebar-slider h4 { color: white; font-family: Oswald; font-size: 25px; font-weight: 100; line-height: 1.5em; margin: 0; padding: 0 10px; position: absolute; top: 25px; width: 100%; z-index: 2; } ul.abt-sidebar-slider .label_text { bottom: 10px; color: white; font-size: 90%; left: 10px; position: absolute; z-index: 2; } ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname { display: none; } .buttons { margin: 5px 0 0; } .buttons a { display: inline-block; height: 25px; position: relative; text-indent: -9999px; width: 15px; } .buttons a:before { border-color: transparent #535353 transparent transparent; border-style: solid; border-width: 8px 7px; content: ""; height: 0; left: 50%; margin-left: -10px; margin-top: -8px; position: absolute; top: 50%; width: 0; } .buttons a.nextx:before { border-color: transparent transparent transparent #535353; margin-left: -3px; } .date { background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84); bottom: 93px; padding: 8px; position: relative; right: 6px; } </style> <div id="featuredpostside"></div> <script src="https://dl.dropboxusercontent.com/s/psrvja6u4uxeep4/sidebar-slider-bloggslab.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script>

0

0

Loading...