ব্লগস্পটের জন্য স্টাইলিশ সার্চবার HTML কোড | Stylish Search Box for Blogger
একটি ওয়েবসাইটের জন্য সার্চবার অত্যন্ত গুরুত্বপূর্ণ। সাইটে ভিজিট করার পর পাঠকরা যাতে তাদের প্রয়োজন অনুযায়ী কাঙ্ক্ষিত ফাইল বা আর্টিকেল সহজে খুঁজে পায়, সেজন্যই সার্চবার ব্যবহার করা হয়। আজ আমি আপনাদের সাথে শেয়ার করবো ২টি চমৎকার Stylish Search Box HTML Code যা আপনার ব্লগকে আরও প্রফেশনাল করে তুলবে।
কিভাবে ব্লগার সাইটে সার্চবার যুক্ত করবেন?
ব্লগারে গুগল কাস্টম সার্চবার যুক্ত করা খুবই সহজ। নিচের ধাপগুলো অনুসরণ করুন:
- ১. প্রথমে আপনার ব্লগার ড্যাশবোর্ডে গিয়ে Theme অপশন থেকে Edit HTML-এ যান।
- ২. আপনি যেখানে সার্চবারটি দেখাতে চাচ্ছেন (যেমন হেডার বা সাইডবার), সেখানে নিচের কোডটি পেস্ট করে দিন।
- ৩. অথবা Layout অপশন থেকে Add a Gadget > HTML/JavaScript বক্সেও কোডটি বসাতে পারেন।
Style 1: সিম্পল এবং ক্লিন ডিজাইন
এটি একটি মিনিমাল ডিজাইনের সার্চবার যা সব ধরনের থিমের সাথে মানিয়ে যায়।
<style>
#Search { display: block; clear: both; margin: 10px 0; }
#Search #input { background: transparent; padding: 7px 15px 7px 35px !important; color: #444; font-weight: bold; border: 1px solid #D3D3D3 !important; border-radius: 4px; box-shadow: 1px 1px 2px #CCC inset; width: 60%; }
#Search #submit { color: #444; font-weight: bold; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; border-radius: 4px; background: #fbfbfb; background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); }
</style>
<div id="Search">
<form action="/search" method="get">
<input name="q" id="input" placeholder="Search here..." type="text" />
<input value="Search" id="submit" type="submit" />
</form>
</div>
Style 2: কালারফুল গ্রিন ডিজাইন
যারা একটু উজ্জ্বল এবং আইকনিক সার্চবার পছন্দ করেন, তাদের জন্য এই গ্রিন স্টাইলটি দারুণ হবে।
<style>
#ts-search-box { background: #8fc400; border-radius: 10px; width: 300px; padding: 10px; }
#ts-search-input { border-radius: 5px; border: 1px solid #ffffff; padding: 5px; color: #888; width: 70%; }
#ts-search-submit { border: 1px solid #006400; background: #008000; padding: 5px 10px; color: #ffffff; cursor: pointer; border-radius: 5px; }
</style>
<div id='ts-search-box'>
<form action='/search' method='get'>
<input name='q' id='ts-search-input' placeholder='Search this site...' type='text'/>
<input id='ts-search-submit' type='submit' value='Search'/>
</form>
</div>
টিপস: আপনি আপনার থিমের কালার অনুযায়ী
background কোডটি পরিবর্তন করে নিতে পারেন।
প্রযুক্তি সংক্রান্ত আরও টিউটোরিয়াল পেতে সাবস্ক্রাইব করুন আমাদের ইউটিউব চ্যানেল TECHSOHAG এবং ভিজিট করুন TechSohag.Com। ধন্যবাদ!