Thêm hộp tìm kiếm (search) cho blogspot

Hộp tìm kiếm là một tiện ích vô cùng quan trọng cho một Blog/Website, giúp cho khách tham quan dễ dàng tìm kiếm nội dung trên Blog/Website của bạn.

Ở bài này mình giới thiệu cho các bạn không chỉ đơn thuần là tạo một hộp tìm kiếm mà nó còn có sự kết hợp với các nút mạng xã hội. Với 3 phong cách khác nhau để cho các bạn lựa chọn.

Đọc thêm:



☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Code theo phong cách 1:

<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; 
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial; 
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px; 
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; 
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
    border-radius: 5px;
    background: URL(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}

</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/Windows2it"><img src="https://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/Windows2it"><img src="https://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/Windows2it"><img src="https://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/Windows2it"><img src="https://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Windows2it"><img src="https://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>  

Code theo phong cách 2:
<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}
#btrix-searchbox {
    border-radius: 5px;
    background: URL(http://4.bp.blogspot.com/-QfnjnEenODg/T_2KaW7lAoI/AAAAAAAACC4/asD98X7USVE/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;height: 50px;disaply: block;}
form#btrix-searchform {
    display: block;padding: 9px 16px; margin: 0;}
 form#btrix-searchform #s {
    padding-left: 24px !important;padding: 7.5px;margin: 0;width: 198px;
    font-size: 16px;font-family: georgia;font-style: italic;color: #666666;vertical-align: top; border: none;background: transparent;}
 form#btrix-searchform
#sbutton {margin: 0;padding: 0;height: 40px;width: 74px;vertical-align: top;
    border: none;background: transparent;}
</style>
<div id="btrixwidget"><center>
<a href="http://twitter.com/Windows2it" target="_blank" wrc_done="true"><img src="https://2.bp.blogspot.com/-MnDV3U4XtYc/UVWk-A2SljI/AAAAAAAAAco/pK4NWaYNX28/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249" /></a>

<a href="http://www.facebook.com/Windows2it" target="_blank" wrc_done="true"><img src="https://4.bp.blogspot.com/-yh4hQ75YVSE/UVWk9Lu2wnI/AAAAAAAAAcQ/Z68YzzPZhp0/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248" /></a>

<a href="http://feeds.feedburner.com/Windows2it" target="_blank" wrc_done="true"><img src="https://3.bp.blogspot.com/-sKR8lFv_8Is/UVWk9HX2zfI/AAAAAAAAAcY/vCBJEXl-HhM/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251" /></a>

<a href="http://au.linkedin.com/Windows2it" target="_blank" wrc_done="true"><img src="https://1.bp.blogspot.com/-C5FNB8oQEXU/UVWk9BJoIgI/AAAAAAAAAcU/mbwQ1PZyV8U/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250" /></a>

<div id="btrix-searchbox">
    <form id="btrix-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
</center>
</div>  



Code theo phong cách 3:
<style>
#tbg-social{ width:350px;}ul.tbg-social{margin:0;padding:0;list-style:none;-webkit-perspective: 10000px; -moz-perspective: 10000px;-o-perspective: 10000px;perspective: 10000px;}
ul.tbg-social li{display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;text-align: center;cursor: pointer;}
ul.tbg-social li a{display:block;width: 100%;height: 100%;color: black;text-decoration: none;outline: none;-webkit-transition:all 300ms ease-out 0.1s; -moz-transition:all 300ms ease-out 0.1s;-o-transition:all 300ms ease-out 0.1s;transition:all 300ms ease-out 0.1s;}
ul.tbg-social li a span{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 5px; display:block;width: 100%;height: 100%;-webkit-transition:all 300ms ease-out 0.1s;-moz-transition:all 300ms ease-out 0.1s;-o-transition:all 300ms ease-out 0.1s;transition:all 300ms ease-out 0.1s;}
ul.tbg-social li a img{border-width: 0;}
ul.tbg-social li:hover a{-moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);transform: rotateY(180deg);background: #cef1ff; -webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;-webkit-box-shadow:0 0 5px #eee inset;-moz-box-shadow:0 0 5px #eee inset;box-shadow:0 0 5px #eee inset;
}ul.tbg-social li:hover a span{-moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg);transform: rotateY(90deg);}
#tbguide-searchbox { border-radius: 5px; background: URL(https://2.bp.blogspot.com/-Yxhhf37oQGg/Uyu_9bA6BgI/AAAAAAAAASo/LjdTtUfYuyk/s1600/search_box_psd_12.jpg) no-repeat scroll center center transparent; width: 290px; height: 50px; disaply: block;}
form#tbguide-searchform { display: block; padding: 7px 16px; margin: 0;}
form#tbguide-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;}form#tbguide-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style>
<div id="tbg-social"><center><a style="font-size:25px;" >Find Us Here </a>
</center><br />
<ul class="tbg-social"><li><a href="123tailieufree.com"><img src="https://2.bp.blogspot.com/-BNVMBZenO6M/Uyu3IG205DI/AAAAAAAAASY/IrlXNiy-OXw/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li>
<li><a href="123tailieufree.com"><img src="https://3.bp.blogspot.com/-J9dRmElH7W8/Uyu3ICySIlI/AAAAAAAAAR4/KsWqhscdn_E/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li>
<li><a href="123tailieufree.com"><img src="https://3.bp.blogspot.com/-WsraWSYm5XU/Uyu3IYjiZOI/AAAAAAAAAR8/ZK_1O0uTEpE/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li>
<li><a href="123tailieufree.com"><img src="https://4.bp.blogspot.com/-unKr7PzctOU/Uyu3I0ZgvwI/AAAAAAAAASE/q_YrAFIsKAI/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li>
<li><a href="123tailieufree.com"><img src="https://4.bp.blogspot.com/-S8Px57TLdZ8/Uyu3JKFoDsI/AAAAAAAAASM/EBjoNY9Rfcw/s1600/tbguidesocial-buttons-rss.jpg" title="Add RSS Feed" /></a></li>
</ul><div id="tbguide-searchbox"><form action="/search" id="tbguide-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;&quot;Search..;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" /> </form></div></div>

☼ Tùy chỉnh:

·        Thay Windows2it thành ID mạng xã hội của Bạn.

·        Thay 123tailieufree.com thành Link mạng xã hội của Bạn.

·        Connect With UsFind Us Here bổ đi hoặc dữ lại là tùy bạn <Không ảnh hưởng đến Code>

☼ Kết luận:

·        Code sử dụng 1 đoạn CSS và 1 đoạn HTML thuần khiết.

·        Bạn nên Thay toàn bộ link ảnh thành toàn bộ link của bạn để dùng lâu dài.

Còn bạn muốn Support gì thì cứ để lại comment @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

3 nhận xét:

  1. đẹp quá Ad ơi, cảm ơn bạn đã chia sẻ nội dung và code nhé. chúc ad một ngày luôn vui.
    ...............................................
    Minh Tuấn
    Chuyên viên kinh doanh máy nước nóng năng lượng mặt trời
    Tel: 0123 7049 054
    Mail: [email protected]
    Click xem chi tiết: Lắp đặt máy nước nóng năng lượng mặt trời như thế nào hoặc Lap dat may nuoc nong nang luong mat troi nhu the nao

    ReplyDelete
  2. Cảm ơn ad đã chia sẻ nội dung ,chúc ad 1 ngày vui vẻ ..
    Mr Đức chuyên viên kinh doanh biển báo an toàn, biển báo giao thông,biển báo ngành điện…
    Hotline: 0981356586
    Email: [email protected]
    Click để xem chi tiết : Sản xuất biển báo an toàn đẹp chất lượng ,giá cả hợp lý, làm các loại biển báo dạ quang

    ReplyDelete