সুন্দর Featured পোস্ট ওয়েডগেট যুক্ত করুন ব্লগার ব্লগ পোস্টের ঠিক উপরে !! ব্লগার প্রেমি দের ভালো লাগবে !

0 209

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

 

Screenshot_2

 

 

 

☞ ডেমো উপরের ফটো এর মতো তাও Live Demo দেখতে চাইলে নিচের ডেমো বাটনে ক্লিক করুন ।

 

Live Demo

 

 

☞ এবার দেখে নিন কিভাবে আপনার ব্লগে যুক্ত করবেন । খুব সোজা শুধু নিচের স্টেপ গুলো লক্ষ করুন আশাকরি কাজটি করতে কোন সমস্যা হবে না ।

 

১// আপনার ব্লগার ব্লগ অ্যাকাউন্ট লগইন করুন । ড্যাশবোর্ড থেকে Layout > Add a Gadget > HTML/Javascript এ ক্লিক করুন ।

 

২// এবার নিচের কোড গুলো কপি পেস্ট করুন ।

 

<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://asobondhu.blogspot.com“,
MaxPost:8,
idcontaint:”#featuredpost”,
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

 

নোটঃ উপরের কোড থেকে  http://asobondhu.blogspot.com  মুছে আপনার ব্লগ এর URL বসান ।

 

৩ // কোথাই কোড গুল বসাবেন নচের চিত্রে দেখুন ।

 

 

 

৪// ব্যাস Save এ ক্লিক করে বেরিয়ে আপনার ব্লগ চেক করুন । আশাকরি কাজটি করতে আপনি সফল হয়েছেন । কোন রকম সমস্যা হলে আমার সাথে যোগাযোগ করুন এখানে বা কমেন্ট করেও জানাতে পারেন ।

 

☞ তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে । ভালো থাকবেন সুস্থ থাকবেন আল্লাহ্‌ হাফেজ ।

 

ব্লগার বিষয়ক যেকোনো হেল্প , ওয়েডগেট , টেম্পলেট পেতে ভিজিট করুন → এসো বন্ধু । ব্লগার টিপস 

উত্তর দিন