আপনার সাইট এর কমেন্ট বক্স Expand/Collapse করেন

9
412
আপনার সাইট এর কমেন্ট বক্স Expand/Collapse করেন

রিয়াজ আহমেদ

আমি জীবনে অনেক ভুল করেছি। জানি না কবে ঠিক হব......
আপনার সাইট এর কমেন্ট বক্স Expand/Collapse করেন

আসস্লামু আলাইকুম, আজকে আমার ৩য় পোস্ট। আশা করি সবার ভালো লাগবে। এখন আমি আপনাদের বলবো কিভাবে আপনার কমেন্ট বক্স Expand/Collapse করবেন। আশা করি সবার কাজে আসবে।

আপনার সাইট এর কমেন্ট বক্স Expand/Collapse করেন

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

 

তাহলে কাজ শুরু করি। প্রথমে ব্লগার এ লগিন করুন। তারপর Design < Edit HTML < Expand Widget Templates  < CTRL+F দিয়ে <head> ট্যাগ খুজুন।

নিচের কোড কপি করে <head> এর নিচে Paste করুন।

 

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>

 

আবার CTRL+F দিয়ে ]]></b:skin> ট্যাগ খুজুন। তারপর নিচের কোড কপি করে ]]></b:skin> এর উপর paste করুন।

 

/*—– Comment Box by www.MybloggerTricks.com —-*/

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;

text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

 

আবার সার্চ করুন। <b:includable id=’comment-form’ var=’post’>

নিচের কোড কপি করে উপরের কোডের নিচে Paste করুন।

<h3 class=’trigger’>Click Here To add Comment</h3>
<div class=’toggle_container’>
<div class=’block’>

সার্চ করুন </b:includable> । নিচের কোড কপি করে </b:includable> এটার উপর paste করুন।

 

<p style=’ line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;’><a href=’http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html’ style=’color:#CAC8C8;’><i>Blogger Widgets</i></a></p>

</div>
</div>

 

Save template. কাজ শেষ।

আশা করি সবার ভালো লেগেছে। ভালো লাগলে অবশ্যই কমেন্ট করবেন। এবং কোন problem হলে আমি কমেন্ট এ আছি অথবা, facebook এ আছি।

Advertisement -
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

9 মন্তব্য

  1. ব্লগারে উইজেট ।আমার কাজে লাগলনা ।তবে অনেকেরই কাজে লাগবে ।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

17 − thirteen =