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á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/krisnguyenpro"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsgpcKiXyDNw5Be_qlFSLxwQ2Yk47-5R-HVP-Tp0zzvV-BZVX7xuEKnZrDJvRpfnysiNF2x-fRhlw2q95hqxsvYnH-KkBcMbxpo5iijnwt94hPJTExj_bDhAd8cKBQk8FUENBkIz29fMd/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/krisnguyenpro"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINS2xTmCQg4O2TVFXyAmKBkJgtaExvWSgDEMGAbBzQCTMpWk_Q35Yt7eNAwcTXvDigqsAwPpuoRfKvwugTz_-VD0bue0NE7inMiFQfn5xwvBsuhcdYP4FCrUoaqyCjIs9WUvlQdQCDEwc/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/krisnguyenpro"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd8I-iu2tsnaGzK43A8dcDAdHTuTKGvTLu7n6LdMIBt4ZENODe4gQdcj7SwgzmqwhHl3JNntXjEpOp61tR0jK3oiSCguHvxqXG3qQd6C2fhCpFTPxMRlJd3aU70WirAoXTQPQSVf8wM-5/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/krisnguyenpro"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXo8yAj6d3Lh8OoT48h9tjPNR2OVQZDsrPvbGSNBRoKWyBfUwaUt08yR-UJtrBwTx5TNhri8Nxeiza89u5TcfA78zooHSk89Ff7b92f0pUbol5wY0HcFFOdn0QyErlKe56ttpQ7AV3CFx0/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/krisnguyenpro"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8_v0FSEsqj6IzDFhrzH7rQ9NTc-PjFzxFFSSBcrmu2K3xuyEwVh10TP762AJhoxz9sNM4HNukY6SR6wJovSJ0Wo1gJAq1koWsgCb6F2qLPzXguSCNgZzT1pKIdZDUYtAEZsWtPSE5ERs/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/krisnguyenpro" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKE48gyTV923qITnqd4GbZKHIydZlevjnF3DPB_1RKw2RwtxsHdlCvYMR3dTBBcIJozcM6ZGp6e1bWofWaVkOucCoiL-sc5YyELm0QZYBd_a6j1uiEEiOxVzEczY682tiyezpdVtfopQ/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/krisnguyenpro" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbFdLtkv3nS3moNz6FBVfa_Mr7149tnwEQ4QPmeZtxoX1bocKFV4ce4AV5a_v-P8Vs76FNQTUFxaxnP2dK6uzdLxWfk5Ea2dipPuxVKO0yXi6obN43g0f77QjA4L7eLQ30UUW3_kNDwo/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/krisnguyenpro" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJaNCTkwIpfW8c4UQNY-Vygs-teZww-IcoZ0xuJl8YTo77qTYyskkb_otA1FYBhgbJ-PmhXkmB8wTnH86YncYu0fhoNG33neB2wJlMVvgpz06tmDOJwkkHWAuHEllD6blDMsXr4k6eI7k/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/krisnguyenpro" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDJeYuF5BOMIUtpmKlPeFo8wH9xOJeYZrsPfWaAyYuiOvYofz4YQ2Bz4CaV0tMQnkKpN-XRSIDQYaXWDlf1UDrECLbRn9GXyPhFTI8Ci9Ho2zRx5OXNolcMu72dNMd1N3nxxUxN627kI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGNEoXwBqjxwzyINm7wqZCc0foLAqEECY6VK5-CbdqkmXE3VZjj1QLL_uGAQs5wzYK8-g68BJzdXwVpzktwX3qtihpxTdbrnJ7JWWwVWcwCGf-1wWbYcv06-PmMORtwNqDjkqh7wsRFuoq/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpuVluIC3fhhB3WYmhpCUfgOmB-KuzTytpdpZF-jhwk16UihW4kLC0LxqYKytAO5oeHl_tlQWfiEM_XH_G_RbYIhlXkIKdFCrs5HcElltbSZ0CpX7bm4YG4Hp3haE14cXQFE-Fu3ET0SM/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li>
<li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhqgk0hUbkfwFyJ8vl9kuz51tHZT2XTTaF4tCJhPi8aZyjRn2EW9JG-HoYYGHEbgDyNl4nuNDt9hTsMNwTsha9I5mL4tF_Ii-K5XfQ24bVpeFlR8EfsJV4i_xzhQxuHWGHddxAmLCBa9C/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li>
<li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyphenhyphenhgCjixhg5t76zMsQqyxgibnA2C416hGCduD53fwtfTSlKoGY1t8V0XgwROhCU1dUpOZPPblxVJld5__gjkM6hW4u-vet5Qlk-ukyV61p9Nw0alJio8sCGSas6ZSL1t0HgDz9dj2GGtb/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li>
<li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZE_H0WZObQClVPUsAbHBsCIuvTvCzyFSsNTVlhLbSyOzibayUFApsr7rYI-tED83J_Uil1dgO8yHEONswaDES__xnjLaGDBsEY_auvhrS3ciO05YhAbx8t1YfvL6hKpKy2llPHpHHPdA/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li>
<li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblrISMcbrwK6Qn6dDr00OPoSQO1qGyUFmqPSAioviRAz8K3-VxEUsnIAx2B1egOH4WqqD53lkZljRBV562Ii9Q8cQDWqIVPd6SmfHgA2E5je4bZKMtvnZgnkNFloVHpNY37fM9yAppV3i/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 Us và Find 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.