আপনার ব্লগার ব্লগের জন্য নিন দারুন কিছু সার্চ বক্স । দেখুন ভাল লাগবে ।

আল্লাহ্‌ এর নাম নিয়ে আজকের এই পোস্ট শুরু করছি । বন্ধুরা সবাই ক্যামন আছেন আশাকরি এই পবিত্র রমজান মাসে সবাই ভাল আছেন , আল্লাহ্‌ এর অশেষ রহমতে এবং আপনাদের দোয়াতে আমিও ভালই আছি । আমি খুব দুঃখিত যে অনেক দিন পোস্ট করতে পারিনি কারণ টা আমি ফেসবুক এ স্ট্যাটাস এ বলেছিলাম , হ্যাঁ সেই কারনে অনেক দিন পোস্ট করতে পারিনি । কিন্তু আপনাদের দোয়াতে আগের থেকে অনেকটা সুস্থ আছি তাই আবার পোস্ট করতে বসেগেলাম । হয়তো আগের মতো নিয়েমত আর পোস্ট করতে পারবনা তবুও নতুন কিছু পেলে আপনাদের মাঝে শেয়ার করব । সে যাই হক আজকে আমি আপনাদের জন্য নিয়ে এলাম ৫ টি চোখ ধাঁধানো সার্চ বক্স ওয়েডগেট । তো চলুন দেখে নিই ওয়েডগেট গুল এবং  কিভাবে এর মধ্যে একটি আপনার ব্লগে যুক্ত করবেন ।


** ৫ টি ওয়েডগেট **


১)



<style>
#wc-searchexpandbox1
{
padding:10px;
}
#wc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#wc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='wc-searchexpand1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchexpandbox1"> 
            <input name='search' id='wc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>





২)




    <style>


#wc-searchsimplebox1
{
padding:10px;
}

#wc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;

font:14px verdana;
}

</style>
<div id='wc-searchsimple1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchsimplebox1"> 
            <input name='search' id='wc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>



৩) 




    <style>
#wc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}

#wc-searchgreenbox1
{
padding:10px;
}

#wc-searchgreensubmit1
{
border:1px solid green;
background: green;

padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;

font:14px verdana;
}

</style>
<div id='wc-searchgreen1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchgreenbox1"> 
            <input name='search' id='wc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>



৪)




    <style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;

font:14px verdana;
}

</style>
<div id='wc-searchblack1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchblackbox1"> 
            <input name='search' id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>






৫)




    <style>
#wc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */





border-radius:10px;
width:290px;
}

#wc-searchbluebox1
{
padding:10px;
}

#wc-searchbluesubmit1
{
border:1px solid orange;
background: orange;

padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;

font:14px verdana;
}

</style>
<div id='wc-searchblue1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchbluebox1"> 
            <input name='search' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>






* উপরের যেটি আপনার পছন্দ তা ঠিক করে নিন । এবার যুক্ত করবেন যে ভাবে নিচে দেখুন । 

১) আপনার ব্লগার ব্লগ লগ অন করুন তারপর ড্যাশবোর্ড থেকে Layout অপশন এ ক্লিক করুন তার আপনি সার্চ বক্সটি যেখানে রাখতে চান সেখানে Add a gadget এ ক্লিক করুন ।

২) এবার যে পেজটি আসবে সেখানে HTML/Javascript এ ক্লিক করুন । 


৩) এবার আর একটি পেজ আসবে সেখানে Title ঘর ফাকা রেখে Content ঘরে উপরের যেটি আপনার পছন্দ সেই কোড কপি করে পেস্ট করুন তারপর Save বাটানে ক্লিক করুন । 


ব্যাস কাজ শেষ এবার ব্লগে গিয়ে দেখুন সার্চ বক্স যুক্ত হয়েগেছে । 


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






এসো বন্ধু

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

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

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

  1. ভাই অনেক দিন পর । দারুন পোস্ট আজি আমার ব্লগে যুক্ত করবো , ধন্যবাদ সুন্দর একটি পোস্ট শেয়ার করার জন্য ।

    উত্তরমুছুন
  2. aslamparvez৩:২৫ PM

    কিছু সমস্যার কারনে । ধন্যবাদ মন্তব্য করার জন্য ।

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

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