আপনার ব্লগার ব্লগের জন্য মেট্রো স্টাইল 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 এ নিচের চিত্রে দেখুন । 





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

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

2 মন্তব্যসমূহ

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

  1. ধন্যবাদ আসলাম ভাই সুন্দর একটি পোস্ট উপহার দেওয়ার জন্য। ভাই আমি এটা দুইটি ব্লগে প্রয়োগ করেছি কোনটাতেই কাজ করতেছে না।দয়া করে একটু দেখবেন কি।
    আমার ব্লগঃ http://genareltrickstips.blogspot.com/

    উত্তরমুছুন
    উত্তরগুলি
    1. ভাই 100% কাজ হবে দেখুন আমি ডেমো দিয়েছি আমার যদি কাজ করে তাহলে আপনারও করবে তাই একটু ভাল করে চেক করুন ।

      মুছুন
নবীনতর পূর্বতন

نموذج الاتصال