আপণার ব্লগে যোগ করুন feature post widget

ads

(bd tips tech)এ আপনাদের স্বাগতম আশাকরি সবাই ভাল আছেন।আজ আপনাদের সাথে একটি ব্লগার টিপ্স শেয়ার করবো।আজ আমি দেখাবো কিভাব এয়াপ্নার ব্লগে ফিচার পেউইজ উইগেট যুক্ত করবেন।আশাকরি  ফিচার পোস্ট সমন্ধ্যে সবাই জানেন।আপনি যদি নিদির্ষ্ট কইয়েকটী পোস্টকে হাইলাইট করতে চান তাহ্লে ফিচার পোস্ট উইগেট খুবই কার্যকরি ।ডেমো দেখতে এখানে ক্লিক করুন।কিভাবে ব্লগে ফিচার পোস্ট ইউগেট যুক্ত করবেন।প্রথমে ব্লগে লগইন করে LAYOUT এ চলে যান।তারপর ADD A WIDGET এ ক্লিক করুন।HTML নির্বাচন করুন।তার পর নিচের পোস্টটি কপি করে পেস্ট করে দিন। 

এটিও দেখুন ব্লগে যুক্ত করুন TOTAL POST AND COMMENT WIDGET 
 

<style>

 #featured-posts{width:100%;height:200px;background:#34495e;margin-top:-1px}#featured-posts h3{color:#fff;font-size:20px;margin:0;font-weight:300;text-align:center;padding:15px}#featured-posts ul{margin:0;padding:20px}#featured-posts ul li{list-style-type:none;padding-left:10px;float:left;margin-right:20px;width: 249.5px;height:100px;border-left:3px solid rgba(255,255,255,0.5)}#featured-posts ul li span{color:rgba(255,255,255,0.5);display:block}#featured-posts ul li span i{padding-right:8px}#featured-posts ul li a{color:#fff;text-decoration:none;font-size:15px;line-height:25px}#featured-posts ul li:hover{border-color:#3498db;margin-top:-10px;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}#featured-posts ul li:hover span{color:#3498db}

  #featured-posts ul li:last-child { margin-right:0;}

@media screen and (max-width : 1200px) {

    #featured-posts ul li {width: 224.5px;}

  }

@media screen and (max-width : 1100px) {

    #featured-posts ul li {width: 199.5px;}

  }

@media screen and (max-width : 1000px) {

    #featured-posts .item4 {display:none}

    #featured-posts ul li {width: 243.6px;}

    #featured-posts .item3 {margin-right:0;}

  }

@media screen and (max-width : 900px) {

    #featured-posts ul li {width: 210.3px;}

  }

@media screen and (max-width : 800px) {

    #featured-posts .item3 {display:none;}

    #featured-posts ul li {width: 282px;}

    #featured-posts .item2 {margin-right:0;}

  }

@media screen and (max-width: 700px) {

   #featured-posts ul li {width: 232px;}

  }

@media screen and (max-width: 600px){

    #featured-posts ul li {width: 182px;}

    #featured-posts {height:220px;}

  }

@media screen and (max-width : 500px){

    #featured-posts{display:none!important;}

  }

</style>

<div id='featured-posts'>

<div class='container'>

<h3>Featured Posts</h3>

<ul>

<li class='item1'><a href='YOUR POST URL'>YOUR POST TITLE</a><span><i class='fa fa-tags'/>YOUR POST SHORT DESCRIPTION</i></span></li>

<li class='item2'><a href='YOUR P0ST URLl'>YOUR POST TITLE</a><span><i class='fa fa-tags'/>YOUR POST SHORT DESCRIPTION</i></span></li>

</ul>

</div>

</div>

এখানে YOUR POST URL এর যায়গায় আপনার পোস্ট লিংক দিবেন।YOUR POST TITLE এর যাগইয়ায় আপনার পোস্টের শিরোনাম দিন এবং YOUR POST SHORT DESCRIPTION এর যাগইয়ায় পোস্টের সংক্ষিপ্ত বর্নণা দিন।

                      

ফিচার পোস্ট

    

উপরে দুইটি ফিচার পোস্টের ক্ষেত্রে দেখানো হইয়ছে কিভাবে আরো যোগ করবেন।নিচের কোডটি দেখুন item2 আছে।এখানে 2,এভাবে 3,4,5.

<li class='item2'><a href='YOUR P0ST URLl'>YOUR POST TITLE</a><span><i class='fa fa-tags'/>YOUR POST SHORT DESCRIPTION</i></span></li>

এটিও দেখুন ব্লগ/ওয়েবসাইট আছে কিন্তু ইনকাম করত্তে পারছেন না এবার ইনকাম হবেই

উপরের কোডটি ।এই কোডটির উপরে পোস্ট করুন

</ul>

</div>

</div>

আশাকরি বুজতে পেরেছেন।আনা বুঝতে পারলে অবশ্যই কমেণ্ট করে যানাবেন।