আপনার blogspot সাইট কে সাজান নিজের মত করে(পর্বঃ১৩)|আপনার ব্লগে যুক্ত করুন HTML সার্চ বক্স।

আসসালামু আলাইকুম।ব্লগার ভাইয়েরা কেমন আছেন?অনেকদিন টিউন করা হয়নি তাই ক্ষমাপ্রার্থী।ইনশাআল্লাহ,প্রতিদিন টিউন করার চেষ্টা করবো।আজকে আমি আপনাদের সাথে যে বিষয়টি শেয়ার করবো তা হচ্চেঃ HTML search BOX

---

HTML SEARCH BOX

---

HTML SEARCH BOXএর কাজ কি?

---

আমাদের ব্লগের টেম্পলেট এর সাথে যে সার্চ বক্স তা java script.
এই সার্চ বক্স দিয়ে সব ফাইল তথ্য পাওয়া জায়না।তাই এই সার্চ বক্সের গুরুত্ব সর্বত্র অপরিসীম।যাদের ব্লগের লেবেল বা সার্চ বক্স এ সব পোস্ট পাওয়া যায়না তারা এটি ব্যাবহার করবেন।
এচাড়াও এটি ব্যাবহারে আপনার ব্লগের সুন্দর্য্য বৃদ্ধি হবে।

---

যেভাবে ব্যাবহার করবেনঃ

---

ব্লগার ডট.কম এ গিয়ে আপনার একাউন্ট লগিন দিন।এর পর ডিজাইনে ক্লিক করে Add a gadgets এ ক্লিক করে এই কোড <br> .form-wrapper {<br> width: 270px;<br> padding: 8px;<br> margin: 10px auto;<br> overflow: hidden;<br> border-width: 1px;<br> border-style: solid;<br> border-color: #dedede #bababa #aaa #bababa;<br> -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;<br> -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;<br> box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;<br> -moz-border-radius: 10px;<br> -webkit-border-radius: 10px;<br> border-radius: 10px;<br> background-color: #f6f6f6;<br> background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));<br> background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);<br> background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);<br> background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);<br> background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);<br> background-image: linear-gradient(top, #f6f6f6, #eae8e8);<br> }<br> .form-wrapper #search {<br> width: 180px;<br> height: 20px;<br> padding: 10px 5px;<br> float: left;<br> font: bold 16px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;<br> border: 1px solid #ccc;<br> -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;<br> -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;<br> box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;<br> -moz-border-radius: 3px;<br> -webkit-border-radius: 3px;<br> border-radius: 3px;<br> }<br> .form-wrapper #search:focus {<br> outline: 0;<br> border-color: #aaa;<br> -moz-box-shadow: 0 1px 1px #bbb inset;<br> -webkit-box-shadow: 0 1px 1px #bbb inset;<br> box-shadow: 0 1px 1px #bbb inset;<br> }<br> .form-wrapper #search::-webkit-input-placeholder {<br> color: #999;<br> font-weight: normal;<br> }<br> .form-wrapper #search:-moz-placeholder {<br> color: #999;<br> font-weight: normal;<br> }<br> .form-wrapper #search:-ms-input-placeholder {<br> color: #999;<br> font-weight: normal;<br> }<br> .thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}<br> .form-wrapper #submit {<br> float: right;<br> border: 1px solid #00748f;<br> height: 42px;<br> width: 70px;<br> padding: 0;<br> cursor: pointer;<br> font: bold 15px Arial, Helvetica;<br> color: #fafafa;<br> text-transform: uppercase;<br> background-color: #0483a0;<br> background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));<br> background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);<br> background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);<br> background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);<br> background-image: -o-linear-gradient(top, #31b2c3, #0483a0);<br> background-image: linear-gradient(top, #31b2c3, #0483a0);<br> -moz-border-radius: 3px;<br> -webkit-border-radius: 3px;<br> border-radius: 3px;<br> text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);<br> -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;<br> -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;<br> box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;<br> }<br> .form-wrapper #submit:hover,<br> .form-wrapper #submit:focus {<br> background-color: #31b2c3;<br> background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));<br> background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);<br> background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);<br> background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);<br> background-image: -o-linear-gradient(top, #0483a0, #31b2c3);<br> background-image: linear-gradient(top, #0483a0, #31b2c3);<br> }<br> .form-wrapper #submit:active {<br> outline: 0;<br> -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;<br> -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;<br> box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;<br> }<br> .form-wrapper #submit::-moz-focus-inner {<br> border: 0;<br> } <form action="/search" method="get"> </form> <p> Search Box by <a href="http://www.latesthack.com">Latest Hack</a></p><div class="td-a-rec td-a-rec-id-content_inlineright td_uid_3_5d252ec7bfb01_rand td_block_template_15"><div class="td-visible-desktop"> <a href="https://tunerpage.net/cloud-hosting/"><img src="https://media.tunerpage.com/2018/03/5%20gb%20hosting.png" alt="Unlimited Web Hosting" /></a> </div> <div class="td-visible-tablet-landscape"> <a href="https://tunerpage.net/cloud-hosting/"><img src="https://media.tunerpage.com/2018/03/5%20gb%20hosting.png" alt="Unlimited Web Hosting" /></a> </div> <div class="td-visible-tablet-portrait"> <a href="https://tunerpage.net/cloud-hosting/"><img src="https://media.tunerpage.com/2018/03/5%20gb%20hosting.png" alt="Unlimited Web Hosting" /></a> </div> <div class="td-visible-phone"> <a href="https://tunerpage.net/cloud-hosting/"><img src="https://media.tunerpage.com/2018/03/5%20gb%20hosting.png" alt="Unlimited Web Hosting" /></a> </div></div> <p></p> টি বসান।
ব্যাস কাজ শেষ।
ডেমো দেখতে এখানে click করুন।
কোনো সমস্যা হলে কমেন্ট করবেন।
ভালো লাগরে আমার blog থেকে ঘুরে আসার আমন্তর্ণ রইল।সবাই ভালো থাকবেন।আল্লাহ হাফেজ।

নিচের টিউনগুলো লখ্য করুন, কাজে লাগতেও পারে

• আপনার blogspot সাইট কে সাজান নিজের মত করে(পর্বঃ১৪)|আপনার ব্লগে যুক্ত করুন স্ট্যাইলিস সাবস্কিপশান বক্স।

• ব্লগস্পটে Recommended Post slider যোগ করা (সবাব দেখা উচিত)

• আপনার ব্লগ এ যোগ করুন, সাইডবার SOCIAL SHARING WIDGETS !!! Sidebar Social Widget

• ব্লগারের প্রতিটা পোষ্টে আপনার একটি সিগনেচার যোগ করুন

• ব্লগার এর comment box সুন্দর করুন