১০ আগস্ট, ২০১৫

ব্লগারে দুটি আকর্ষণীয় Css3 ইউনিক Search Box যুক্ত করুন

ব্লগারে দুটি আকর্ষণীয় Css3 ইউনিক Search Box যুক্ত করুন
4/ 5 stars - "ব্লগারে দুটি আকর্ষণীয় Css3 ইউনিক Search Box যুক্ত করুন" আমরা ইতোপূর্বে আপনাদের সাথে আরও দুটি ইউনিক ব্লগার Search Box শেয়ার করেছিলাম। সেগুলিও খুবই আকর্ষণীয় ছিল। তবে ঐ গুলিতে আমরা কিছু অংশে Image...
-
আমরা ইতোপূর্বে আপনাদের সাথে আরও দুটি ইউনিক ব্লগার Search Box শেয়ার করেছিলাম। সেগুলিও খুবই আকর্ষণীয় ছিল। তবে ঐ গুলিতে আমরা কিছু অংশে Image ব্যবহার করেছিলাম। এখন যে দুটি শেয়ার করবো সেগুলিতে সম্পূর্ণ Css3 ব্যবহার করে তৈরী করা হয়েছে। কাজেই এটির Load Time নিয়ে কোন চিন্তা করতে হবে না।
উপরের চিত্রে দেখতে পাচ্ছেন যে, আমরা দুটি সার্চ বক্সকে দুটি ভিন্ন ডিজাইনে তৈরী করেছি। একটিতে Submit Button সংযুক্ত করে এবং অন্যটিকে গুগল Custom সার্চ বক্সের মত আলাদা করে তৈরী করেছি। দুটি সার্চ বক্সই Css3 দিয়ে তৈরী করার কারনে আপনি এ গুলিকে ইচ্ছামত কাষ্টোমাইজ করতে পারবেন। অনেক সময় দেখা যায় সার্চ বক্সগুলিতে Image ব্যবহার করার কারনে কোন পরিবর্তন করা যায় না। তবে আমাদের এই বক্সগুলিকে ইচ্ছামত পরিবর্তন করতে পারবেন। তাছাড়া এ দুটি Widget আকারে শেয়ার করাতে ব্লগে যুক্ত করার জন্য আপনাকে কোন প্রকার বাড়তী ঝামেলায় পড়তে হবে না।

কিভাবে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
  • তারপর কীবোর্ড হতে Ctrl+F প্রেস করে </head> অংশটি সার্চ করুন।
  • এখন নিচের লাইনটি </head> ট্যাগের উপরে পেষ্ট করুন।
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
  • তারপর Template Save করে বেরিয়ে আসনু।
  • এরপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
Blogger-Css3-Search-Box
প্রথম ডিজাইনের সার্চ বক্স
<style type="text/css">
#pro-search-form {background:#ffffff; border:1px solid #70cf0a; border-top-left-radius:2px; border-bottom-left-radius:2px; position:relative; display:block; clear:both; float:none; padding:5px; font-size:12px}
#pro-search-text {width:80%; background:transparent; color:#000; border:none; margin:0; padding:0; line-height:2em; height:2em; outline:none}
button#pro-search-submit:hover {opacity: 0.8}
button#pro-search-submit {background:#70cf0a; width:50px; height:38px; margin:-6px 0px 0px 7px; cursor:pointer; position:absolute; line-height:2em; border:none}
button#pro-search-submit:before {content:"\f002"; font-family:"FontAwesome"; color:#fff}
</style>
<form action='/search' id='pro-search-form' method='get'>
 <input id='pro-search-text' name='q' value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type='text'/>
 <button type="submit" id="pro-search-submit"></button>
</form>

Blogger-Css3-Search-Box
দ্বিতীয় ডিজাইনের সার্চ বক্স
<style type="text/css">
#pro-search-box {display:block; clear:both; margin:10px 0}
#pro-search-box #input {background:#fff; padding:7px 15px 7px 10px !important; color:#444; text-decoration:none; width:63%; font-size:12px; font-family:"Arial Narrow",Arial,sans-serif; border:1px solid #70cf0a; border-radius:2px}
input:focus::-webkit-input-placeholder {color:transparent}
input:focus:-moz-placeholder {color:transparent}
input:focus::-moz-placeholder {color:transparent}
#pro-search-box #submit {color:#444; text-decoration:none; border:1px solid #70cf0a; cursor:pointer; width:65px; height:31px; border-radius:2px; background:#70cf0a}
#pro-search-box button#submit:before {content:"\f002"; font-family:"FontAwesome"; color:#fff}
</style>
<div id="pro-search-box">
 <form action="/search" autocomplete="off">
  <input id="input" name="q" type="text" size="15" placeholder="Search..." />
 <button type="submit" id="submit"></button>
 </form>
</div>
  • সবশেষে Gadget টি Save করুন। That's all.

কাষ্টোমাইজেশনঃ

  • উপরের লাল রংয়ের অংশগুলি হতে সার্চ বক্স ও সাবমিট বাটনের Background এবং Border Color পরিবর্তন করতে পারবেন।
  • পিংক কালারের অংশগুলি হতে সার্চ বক্স ও সাবমিট বাটনের Height এবং Width পরিবর্তন করতে পারবেন।
Subcribe to our all updates

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

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

 
Subscribe for all Updates

Subscribe Now

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

Powered by: