हेल्लो दोस्तों, आज हम अपने इस आर्टिकल्स में लेकर आये है Responsive Blogger Search Bar in Home Page. जिसे HTML एवं CSS के मदद से बनाया गया है इस Project को Home Page पर लगाने से एक Normal ब्लॉग Professional ब्लॉग की तरह दिखने लगता है इसे अपने ब्लॉगर के Home Page में लगाने के बाद ब्लॉग रीडर आपके ब्लॉग के किसी भी पोस्ट को बहुत ही आसानी से Search कर सकते है Responsive Blogger Search Bar in Home Page Demo
उपरोक्त बताये गए Project को आप दिए गए demo में देख सकते है
Responsive Blogger Search Bar in Home Page CSS Code
Responsive Blogger Search Bar को design देने के लिए नीचे दिए गए Code को Use करे
#search-css .search-note {
margin: 16px;
text-align: center;
color: #000;
font-size: 180%;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
word-wrap: break-word;
line-height: 1.4;
}
उपरोक्त दिए गए Code से आप Search bar के सबसे ऊपर वाली heading को design कर सकते है
#search-css .search-desc {
text-align: center;
color: #000;
font-size: 15px;
letter-spacing: 1px;
}
उपरोक्त CSS Code से आप Search Menu के Description के Style को Customize कर सकते है
#header-search .search-form {
width: 100%;
height: 32px;
overflow: hidden;
display: flex;
padding: 0;
}
Search आइकॉन के Position को Style दे
#header-search .search-input {
width: 100%;
height: 32px;
font-family: inherit;
color: red;
margin: 0;
padding: 0 10px;
background-color: #f1f1f1;
font-size: 13px;
font-weight: 400;
line-height: 32px;
outline: none;
box-sizing: border-box;
border: 0;
border-radius: 3px 0 0 3px;
}
Search Area को Customize करे
#header-search #search-submit {
width: 60px;
height: 32px;
background-color: red;
color: #f1f1f1;
line-height: 32px;
cursor: pointer;
outline: none;
border: 0;
border-radius: 0 3px 3px 0;
transition: opacity .17s ease;
}
Search icon एवं इनपुट area को customize करे
उपरोक्त दिए गए CSS Code से हमारा Responsive Blogger Search Bar का style तैयार हो चूका है
यह भी पढ़े
Responsive Blogger Search Bar in Home Page HTML Code
अब जो नीचे HTML Code दिया गया है उससे हम उपरोक्त Project को पूर तरह से Complete करेगे
<div id="search-css">
<p class="search-note"><span class="itatu">20,000+</span> HTML Code <span class="itatu">500+</span> Java Script Code</p>
उपरोक्त HTML Code से Main heading को कस्टमाइज करे
<p class="search-desc">Search : HTML, CSS, Java Script Code etc.</p>
</div>
उपरोक्त HTML Code से Search Description को कस्टमाइज करे
<div id="header-search">
<form action="https://advisersathi.blogspot.com/search" class="search-form" role="search">
<input autocomplete="off" class="search-input" name="q" placeholder="Search this blog" type="search" value="">
उपरोक्त HTML Code में दिए गए लिंक की जगह अपने ब्लॉग का URL Paste करे
<button id="search-submit" type="submit" value=""><i class="fa fa-search"></i></button>
</form>
</div>
उपरोक्त HTML Code में Search Icon को customize करे
इस तरह से Responsive Blogger Search Bar अब पूरी तरह से तैयार हो चूका है यदि आप चाहे तो दिए गए Source Code के नीचे Copy Code का बटन दिया गए है उस पर click करके इस Project के Code को कॉपी कर सकते है