Blogger

Khung tìm kiếm đẹp cho blogspot

Hôm nay lại lang thang trên mạng để tìm kiếm khung search đẹp cho blogspot để thêm blog :D và thấy cái này cũng khá đẹp nên viết bài share cho anh em luôn :D Cách thức thực hiện như sau : Mẫu 1 : F…

Hung.Pro.VN

Developer Windows

---

• 14/10/2017
• Views

• #Blogger
• #CSS
• #HTML
• #Javascript

Hôm nay lại lang thang trên mạng để tìm kiếm khung search đẹp cho blogspot để thêm blog :D và thấy cái này cũng khá đẹp nên viết bài share cho anh em luôn :D

Cách thức thực hiện như sau :



Mẫu 1 :

Full Đoạn Code Mẫu 1

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    border: 1px solid #d2d2d2;
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    width: 186px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type to search "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
 

Mẫu 2 :

Full Đoạn Code Mẫu 2

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_iE5YclLtJIR4DlHMgCqScTTG0Dx72fcamwxJ3ngE_AAgeCfRw5EavUf7VhHk0Ww8sOzKgll0aSe5T5gtBVeMWrSKriJSQFwfXLZz-Amr2gb0R7PyRI7lMn46gr9SJNct9DpfZ4LhDag/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTt_gc-j9-GemRGSMJAcKeekqljhqQ7UW6qSg1Ri5jvZ3RqdoUlJy018I-Th4u2-FPWJoSsmtZWMh0J0d2s2KEmGQnE3aHJfnntPOzUwzW133P8QwXQWikGKcKuIs2BEXKhgbCAIIF_Pt/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7xPXhVMQpPW1YNioLj95JUc7hUSFbtwiT0wOgsl_383ginUVi4UmSoBawunRPMaVPd-jbDIFfE_Cx5hcHFtAHNUiaByExPXkzD-ocDBWqQzUzaXsvYsTNHFWOa6Bd1HZTN0X-u2wZaOX7/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Các bạn thấy thế nào :D. Nếu đẹp thì đem về để lên blog cho mình nhé :P

Nguồn : Iris Blogs

Previous post

Khung tìm kiếm đẹp cho blogspot

Next post

Khung tìm kiếm đẹp cho blogspot

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article