ব্লগার ব্লগের জন্য CSS3 Floating গুগল সার্চ বক্স !!

আসসালমু অলাইকুম বন্ধুরা সবাই কেমন আছে আশাকরি ভালো ও সুস্থ আছেন আল্লহ এর রহমতে । যাই হোক আজকে আমি আপনাদের জন্য একটি সার্চ বক্স নিয়ে এলাম যেটা দেখতে গুগল সার্চ বক্স এর মতো । সার্চ বক্স খুবি গুরুত্ব পূর্ণ একটি জিনিস প্রতিটি ব্লগার ব্যবহার কারির কাছে । কারন যখুন আপনার ব্লগে কোন ভিজিটর ভিজিট করে তখুন সেই ভিজিটর কোন কিছু সার্চ করে দেখতেই পারে তাই ভিজিটর এর দিকে লক্ষ রেখে এটা ব্যবহার করে খুবি জরুরি আমি মনে করে । তাছাড়া বর্তমানে এমন কোন থিম নাই যেটাতে সার্চ বক্স নাই । আশাকরি এই বিষয়ে আপনাদের আর বেশি কিছু বলতে হবে না । আজকের এই গুগল স্টাইল সার্চ বক্স টি সম্পূর্ণ CSS3 দিয়ে বানানো এটা Floating স্টাইল তাই এটা আপনার ভিজিটর এর সব সময় চোখে চোখে থাকবে ।











☞ অনেক প্রফেশনাল ব্লগারা এই স্টাইল ব্যবহার করছেন তারপর মূলকারণ এর প্রফেশন স্টাইল আপনি ও ব্যবহার করুন এবং আপনার ব্লগ করে তুলুন প্রফেশন স্টাইল । নীচে থেকে দেখে নিন কিভাবে আপনার ব্লগে এটা ব্যবহার করবেন !



CSS3 Floating গুগল সার্চ বক্সটি ব্যবহার করার জন্য নীচের স্টেপ গুলো দেখুনঃ



১// আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template ট্যাবে ক্লিক করুন , তারপর Edit HTML এ ক্লিক করুন ।

২// এবার নীচের ট্যাগটি খুজে বের করুন এর জন্য আপনি আপনার কীবোর্ড CTRL+F বাটন ব্যবহার করুন ।


<body> or </body>


৩// উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরে নীচের কোড গুলো কপি পেস্ট করুন ।


<!-- Noop Google search box -->
    <div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </button>
      </form>
    </div>
<style type="text/css">
#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("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/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: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Noop Google search box -->



৪// ফাইনাল Save Template এ ক্লিক করে বেরিয়ে আসুন । ব্যাস এবার আপনার ব্লগ ভিজিট করে দেখুন আশাকরি যুক্ত হয়েগেছে এবার সার্চ করেও পরীক্ষা করে নিন ।



☞ পোস্টটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । কোন রকম সমস্যা হলে অবশ্যই কমেন্ট করে যানাবেন । এই ওয়েডগেট এর জন্য ধন্যবাদ জানাই নেটউপস ব্লগকে । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।


এসো বন্ধু

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

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

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

নবীনতর পূর্বতন

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