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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoemI966B9QQfRTUZ4DtpsI986cg4M8W2wWPZB9ubv0Dz0aIXof_mAGboqgwq2BR_9dWUX_l3eDSfXzf9oh9eG98kV-KdR_6RnvH4LuVF4pbO3pc4t1DJ2rLvEfv_Cx32FBIsIO96DhNXL/s1600/btrix_pinterest.png" title="Pinterest" /></a></li> <li><a href="http://www.facebook.com/Windows2it"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv2iqXoLdlQk-idZWqhorzcCV3gbsAgYOMV5fy0dNJV-HvYkFuxcJtW9FcliHAcgjGnUngfCXVSBLxAbpd8qVpZwlK4_bfTrKrYZXJ1Znrky63fZ2JVPvKN6NIcQWBuE2Qg3MzuPQwaxAw/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li> <li><a href="https://plus.google.com/Windows2it"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJsd471FIYJPiNjtpmRiyj9bXp8e7R2PP8I-atANRPam5EC5zm0wBKO9IeoIsg-uIer2O_-OdP9z_aqXh2io_9KuU9JQsS5C282tnZ62isKSG-FDiMatpApDarCdsSPNck7BTBgipDkef/s1600/btrix_google+.png" title="Google plus" /></a></li> <li><a href="http://www.twitter/Windows2it"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8dD7ihTTqKo1bSucJfZKaKRtog3iXD_GoLHOzZpVg9zzdFezzze1pKUUotU4cVjDYwWww3Domf2NF_TjyhkqaN5aZO3yrI2DBhM8tHmzFjlJvqTD4wY9VVBxioqhZweRVnZ1zDspUAHK/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/Windows2it"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmxiihhvCjlBqZDqU3QS6NcfSvD92WYk58wlfIK_5m-6-_haWOVkhyJiYthozNnTAjaY3yRFibFPjhnGfuDpXDIY8oJrWh6Sk67jB_VTy70TNEIJlyfyfDFvv15SEOYHWtVq86XLww8xP/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 == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxJ2adpt3VxxnZFe4StoBNe7oPBKDKGIW-p8sYKuYZx-ZcwS7xdF9gMARblixU_rYeLMjaS8PV4xiGXYAD55SaysBju6kpRvGDzcdKHTv05JSPNKG7SktBFD31XWh7Rt60xwliMLyi0s/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifiiC8kEINGXv9MW1_lOUoVHXSgRCjXecXI22XiqqJqtjM2u1dPVMToLOauhXyPro1TGfnzfjMj_XRcfJWRkwk_3OCmPgc2WdlcuCRT7N1-CG2l-RK-u4QcJQGavEigvHkAMjwLl8uYM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArDfGtNHA7KKycTFI5hKSGJhZ8cnin2QLcS91clpgUCBpGaEitbP7V6fUNl4VoRCTmSD8I7jbwdxk-rCzkI1SRjXJfsFHKy34-febCA0Dso9y_wRON-pF30eKpdU7RpTFyRvitzaR-go/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEn71H7GwUMLLijb0YBvfXfm1ldIvVxY8mNpK8i_CvwRG6vobKsfE-9A2BJqFWOWCpqYOI0Vdb9Rd5qR3KQkck0flZze1u46tHS5eyyDEF3TEAoYM-50h31CNb5cS0ULnFw4UHIPzLOQ/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/AVvXsEgQ6EJBac1JZzpkElvTjggcHBJpVsafg4w3tDRahmSY4Z1Ei_LoSn5Kjfb5fRoJYcH26f2OAnp1pRDMzWJiSvbQB4XT3klVrQ8rc3lv1LX6UT0MdQJvRJ6H2wKj6b3g9Bq7v3T8xIgQA5ca/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/AVvXsEhDGNhbyFn5ADZm538PTp5hpC-tWIWyx4XnjSMRcrTJ7AB-vdwY2ceavK7WjCwwctrSrpw6fcmJ9Cz5DasU3TMDRCH6bqEhT5oz98Zr0HYSFcGgyPOAb09RNsDmg0pZBBBPUNFkx6XBl7XW/s1600/tbguide-social-buttons-facebook.jpg" title="Facebook" /></a></li> <li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnutR5AZsFpEAyOeS_iOvVo20NhtcG_GHGT_oUQyldfRkQChpZllCzqQHiyMqxBTZkqQlN6U_yjQbmohhmiz9y_kALW_o9fCpuu3eoT0LPuCwMv8YlF83ZbWt7B8hTbTa-oUhxro9tYkD/s1600/tbguide-social-buttons-stumble.jpg" title="stumble" /></a></li> <li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0Jd7pLL8K_Be05nOJcTFQ6ie9crj3n-x0vgkPiN3irtr9JYnk0XO3Jd3wOiQvVs8AbSZ7zICfypqTKSJ09lbrII-6vMxbPLbazOj8yZxmRramRloM299vJOwKU9YUw1xrTLbC1GJmCBV/s1600/tbguide-social-buttons.jpg" title="twitter" /></a></li> <li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1eDmbI0q2Wg85t6tUPmtSh1ruOM9OiHtpHVDRsiafrEkefkthqVPDk0Yk9rgqOoQz8xli0ell_QMUENZIqUCkRVWdus94dhLoQNPc2drkkJP6wPEIropdVDIu0BGnG5epfibdztzIPWPw/s1600/tbguidesocial-buttons-google.jpg" title="Google Plus" /></a></li> <li><a href="123tailieufree.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5VrwYUtJ30HsuWshgjrELmaywcp3Q9Asb7_orhjX5xaJA7yUAUuv8twkYRxniQuaHAxrO9pXkEQUNlDhibzoHvqSFQH7A6HUVanexmShbwwlv-7pmXRhnBdWLD3RI7R5VAmHlH_oNSXI/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 == "") {this.value = ""Search..;}" onfocus="if (this.value == "Search...") {this.value = ""}" 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.
Còn bạn muốn Support gì thì cứ để lại
comment @!
0 nhận xét:
Đăng nhận xét