১৯ এপ্রিল, ২০১৫

ব্লগারের দুটি Unique Search Box Widgets

ব্লগারের দুটি Unique Search Box Widgets
4/ 5 stars - "ব্লগারের দুটি Unique Search Box Widgets" প্রত্যেকটি ব্লগ কিংবা ওয়েবসাইটেরই একটি Search Box থাকা আবশ্যক। Search Box ছাড়া কোন প্রকার ওয়েবসাইটই পূর্ণতা পাবে না। এই জন্য ব্লগার ডিফ...
-
Blogger-Unique-Search-Box
প্রত্যেকটি ব্লগ কিংবা ওয়েবসাইটেরই একটি Search Box থাকা আবশ্যক। Search Box ছাড়া কোন প্রকার ওয়েবসাইটই পূর্ণতা পাবে না। এই জন্য ব্লগার ডিফল্টভাবে তাদের নিজস্ব সার্চ বক্স যুক্ত করার অপশন রেখেছে, যাতে করে যে কেউ সহজে সার্চ বক্স যুক্ত করতে পারে। কিন্তু ব্লগার তাদের নিজস্ব ডিজাইনের যে সার্চ বক্সটি রেখেছে তাথে কোন প্রকার ডিজাইন করা নেই। এক কথায় বলা যায় এটি একটি Old Model এর সার্চ বক্স। আজকের এই পোষ্টে আলোচনা করবো কিভাবে ব্লগারে কাষ্টম সার্চ বক্স যুক্ত করা যায়। এই পোষ্টে দুটি Unique Search Box নিয়ে আলোচন করবো, যে দুটি সার্চ বক্স হবে ভিন্ন ডিজাইনের। এ দুটি ডিজাইনের সার্চ বক্স যে কোন ধরনের ব্লগে যুক্ত করতে পারবেন। তাছাড়া সার্চ বক্স গুলি যুক্ত করার জন্য আপনাকে কোন প্রকার কোডিং করার ঝামেলা পোহাতে হবে না। কোন প্রকার Modify ছাড়াই শুধুমাত্র কপি পেষ্ট করে সার্চ বক্স গুলি আপনার ব্লগারের ব্লগে যুক্ত করতে পারবেন।

কিভাবে ব্লগে যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • এরপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
Unique Blogger Search Box
<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>

<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>

Unique Blogger Search Box

<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 এ ক্লিক করুন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

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

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: