আল্লাহ্ এর নাম নিয়ে আজকের এই পোস্ট শুরু করছি । বন্ধুরা সবাই ক্যামন আছেন আশাকরি এই পবিত্র রমজান মাসে সবাই ভাল আছেন , আল্লাহ্ এর অশেষ রহমতে এবং আপনাদের দোয়াতে আমিও ভালই আছি । আমি খুব দুঃখিত যে অনেক দিন পোস্ট করতে পারিনি কারণ টা আমি ফেসবুক এ স্ট্যাটাস এ বলেছিলাম , হ্যাঁ সেই কারনে অনেক দিন পোস্ট করতে পারিনি । কিন্তু আপনাদের দোয়াতে আগের থেকে অনেকটা সুস্থ আছি তাই আবার পোস্ট করতে বসেগেলাম । হয়তো আগের মতো নিয়েমত আর পোস্ট করতে পারবনা তবুও নতুন কিছু পেলে আপনাদের মাঝে শেয়ার করব । সে যাই হক আজকে আমি আপনাদের জন্য নিয়ে এলাম ৫ টি চোখ ধাঁধানো সার্চ বক্স ওয়েডগেট । তো চলুন দেখে নিই ওয়েডগেট গুল এবং কিভাবে এর মধ্যে একটি আপনার ব্লগে যুক্ত করবেন ।
** ৫ টি ওয়েডগেট **
১)
২)
** ৫ টি ওয়েডগেট **
১)
<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 বাটানে ক্লিক করুন ।
ব্যাস কাজ শেষ এবার ব্লগে গিয়ে দেখুন সার্চ বক্স যুক্ত হয়েগেছে ।
* তাহলে আজকের মতো এই পর্যন্ত আবার দেখা হবে নতুন কিছু নিয়ে । আল্লাহ্ হাফেজ ।
ভাই অনেক দিন পর । দারুন পোস্ট আজি আমার ব্লগে যুক্ত করবো , ধন্যবাদ সুন্দর একটি পোস্ট শেয়ার করার জন্য ।
উত্তরমুছুনকিছু সমস্যার কারনে । ধন্যবাদ মন্তব্য করার জন্য ।
উত্তরমুছুন