কিভাবে ব্লগে Floating search box যুক্ত করবেন

আজকে শেয়ার করবো কিভাবে ব্লগে বা ওয়েব সাইটে একটি Floating search box বা ভাসমান সার্চ বক্স যুক্ত করবেন ! এজন্য প্রথমে ব্লগারে লগইন করে Layout থেকে যে কোন যায়গায় Add a gadget ক্লিক করার পর HTML/JavaScript নির্বাচন করুন এবং

<style type="text/css"> /*<![CDATA[*/ #sbutton { background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe; border: 1px solid #3079ED; border-radius: 2px 2px 2px 2px; color: #FFFFFF; height: 27px; min-width: 76px; padding: 0 21px;padding-bottom: 2px; } #sbutton:hover{ background-color: #357AE8; background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: linear-gradient(top, #4d90fe 0%,#357ae8 100%); border: 1px solid #2F5BB7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);} #simg { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUF4VwW8A7isARaahSPw-ozwACFJw64RMPc9_cILK824WQcyOpE5gmmwklhiFlm-VlMSkpgBH9ip-4uahAYrfuufiCuWW23q6NTAt0b7Y0k3m3gRsg6bJVVhFKuc9QfRb_0Xad3tcpinUD/s1600/searchicon.png") no-repeat scroll 0 0 transparent; display: inline-block; height: 14px; margin: 0; width: 17px;z-index:101; }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;} #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;} #s:focus {width: 200px;} .noop-searchbox { display: block; position: fixed; right: 12px; top: 1%; max-width: 300px;min-width: 238px; z-index: 100; } /*]]>*/ </style> <br /> <div class="noop-searchbox" id="noop-searchbox"> <form action="/search" id="noop-searchform" method="get"> <input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." /> <button id="sbutton" type="submit"><span id="simg"></span></button> </form> </div>

 Name এর ঘর ফাকা রেখে Content ঘরে  কোডটুকু পেস্ট করে দিন ।

তারপর সেভ করে ইচ্ছামত জায়গায় সেটাকে স্থাপন করুন !
আর ব্লগ দেখুন ! আজকে বিদায়, ভাল থাকবেন সবাই.....