আপনার ব্লগার ব্লগের জন্য মেট্রো স্টাইল Featured পোস্ট ওয়েডগেট !!

আসসালামু অলাইকুম বন্ধুরা , আজকে আপনাদের সাথে মজার একটি ব্লগার ওয়েডগেট শেয়ার করবো  Featured পোস্ট ওয়েডগেট ওয়েডগেট শুধু বাংলাতে বলতে গেলে আলোচিত পোস্ট সমূহ যাই হোক এই ধরনের ওয়েডগেট আপনি বিভিন্ন ব্লগে দেখে থাকবেন এটা সত্যি অনেক কাজের একটি ওয়েডগেট সঙ্গে দেখতেও খুব সুন্দর মেট্রো স্টাইল । তাহলে কথা না বাড়িয়ে নিচে থেকে ডেমো সঙ্গে কিভাবে আপনার ব্লগে এটা ব্যবহার করবেন সেটা দেখে নিন ।

নীচে থেকে ডাউনলোড ও সেটআপ টিপস দেখে নিন !

ওয়েডগেট ডেমো

কিভাবে আপনার ব্লগে যুক্ত করবেন !

• প্রথমে ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন । 

• এবার Add a Gadget → HTML/Javascript এ ক্লিক করুন । 

• টাইটেল ঘর ফাকা রেখে Content ঘরে নিচের কোড গুলো কপি পেস্ট করুন । 

<style type="text/css">
#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:250px}
#slides li{width:49.9%;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){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#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 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}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://esobondhu.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

উপরের কোড সেভ করার আগে দেখুন নীল রঙের আমার ব্লগের URL আছে http://esobondhu.com এটাকে মুছে সেখানে আপনার ব্লগের URL বসিয়ে Save করে নিন । আর হ্যাঁ কোড বসাবেন টপ Layout এ নিচের চিত্রে দেখুন । 

তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের মাঝে শেয়ার করুন সঙ্গে তাদের জানার সুযোগ করে দিন এবং এসো বন্ধুকে জনপ্রিয় করতে সাহায্য করুন এবং এই ধরনের নতুন নতুন পোস্ট আপডেট নিতে থাকুন । ভালো থাকবেন সুস্থ থাকবেন । আসসালামু অলাইকুম ।