Thêm hộp tìm kiếm đơn giản cho Blogspot

Hôm nay mình sẽ hướng dẫn các bạn thêm một hộp tìm kiếm cho Blogspot (Có kèm theo các button theo dõi mạng xã hội nhé), để thuận tiện cho người xem có thể tìm kiếm thứ mình cần trên Blogspot của các bạn! Hướng dẫn vô cùng dễ dàng, không tốn nhiều công sức để tạo ra một hộp tìm kiếm đơn giản đâu.

Làm thế nào tạo hộp tìm kiếm cho Blogspot?

– Đầu tiên lúc nào cũng là truy cập vào trang quản trị Blogger đã.
– Tiếp tục vào phần Bố cục (Layout), chọn vị trí bạn muốn thêm hộp tìm kiếm, click vào Thêm tiện ích (Add a gadget):

– Chọn HTML/JavaScript, và thêm đoạn code này vào:

<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://lh3.ggpht.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=”#“><img src=”https://lh3.ggpht.com/-BNVMBZenO6M/Uyu3IG205DI/AAAAAAAAASY/IrlXNiy-OXw/s1600/tbguide-social-buttons-facebook.jpg” title=”Facebook” /></a></li>
<li><a href=”#“><img src=”https://lh3.ggpht.com/-J9dRmElH7W8/Uyu3ICySIlI/AAAAAAAAAR4/KsWqhscdn_E/s1600/tbguide-social-buttons-stumble.jpg” title=”stumble” /></a></li>
<li><a href=”#“><img src=”https://lh3.ggpht.com/-WsraWSYm5XU/Uyu3IYjiZOI/AAAAAAAAAR8/ZK_1O0uTEpE/s1600/tbguide-social-buttons.jpg” title=”twitter” /></a></li>
<li><a href=”#“><img src=”https://lh3.ggpht.com/-unKr7PzctOU/Uyu3I0ZgvwI/AAAAAAAAASE/q_YrAFIsKAI/s1600/tbguidesocial-buttons-google.jpg” title=”Google Plus” /></a></li>
<li><a href=”#“><img src=”https://lh3.ggpht.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=”https://img1.blogblog.com/img/blank.gif” type=”image” /> </form></div></div>

Bạn thay các dấu # thành các đường link đến các mạng xã hội của bạn nhé.

– Cuối cùng là lưu lại! Và tận hưởng thành quả, bạn đã có một hộp tìm kiếm đơn giản cho Blogspot rồi đấy!