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


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


১)



<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 বাটানে ক্লিক করুন । 


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


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






শেয়ার করুন :→

একটি মন্তব্য পোস্ট করুন Blogger

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

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

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

    উত্তরমুছুন

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

 
Top
Blogger Widgets