TẠO WIDGET TÌM KIẾM DƯỚI CHÂN TRANG TUYỆT ĐẸP CHO BLOGSPOT

Xin chào các bạn, lâu rồi mình chưa ra bài viết nào hết nhỉ ? Do việc học kín hết cả tuần, thứ 7 này được nghỉ xả hơi, cũng chẳng biết làm g...

Bài viết liên quan:

Xin chào các bạn, lâu rồi mình chưa ra bài viết nào hết nhỉ ? Do việc học kín hết cả tuần, thứ 7 này được nghỉ xả hơi, cũng chẳng biết làm gì, nên hôm nay mình xin hướng dẫn các bạn tạo widget tìm kiếm dưới chân trang tuyệt đẹp cho Blogspot. Không linh tinh luyên thuyên nữa, chúng ta cùng bắt đầu nào !

XEM DEMO TRỰC TUYẾN

CÁC BƯỚC THỰC HIỆN

Bước 1: Đăng nhập Blogger  Chủ đề  Chỉnh sửa HTML.

Bước 2: Các bạn tìm thẻ <div id='lower'> và dán đoạn code này vào phía trước nó.

<!-- Start Widget --><style> .tim-kiem-blogger {;z-index: 999;width: 650px;overflow: hidden;position: relative;margin: 0 auto;display: block;} .tim-kiem-blogger input[type=&quot;text&quot;] {;z-index: 999;background: rgba(0, 0, 0, 0.1);position: relative;display: inline;width: 100%;margin: 0;border: 2px solid rgba(0,0,0,.1) !important;padding: 15px 15px 15px 15px;font: 20px &#39;Roboto&#39;, san serif;color: #fff;} span.font30 {;z-index: 999;font-size: 30px;}span.font20 {;z-index: 999;font-size: 20px;} .tim-kiem-blogger input[type=&quot;submit&quot;] {z-index: 999;position: absolute;right: 3px;background: #069999;border-radius: 4px;top: 6px;padding: 12px 25px;border: 0;color: #fff;font-size: 19px;font-weight: 300;} .tim-kiem-blogger input[type=&quot;submit&quot;]:hover {background: #009EFF;} </style> <style> #intro_hh{position:relative;display:table;width:100%;height:30vh;margin:0!important;padding:0!important;z-index:999;background:url(https://i.imgur.com/gIqnMEE.jpg) no-repeat center center!important;background-size:cover!important} #intro_hh:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent)} #intro_hh:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))} h1{text-align:center;margin:0;padding:0;font:500 32px Roboto;color:#fff} .count{margin:0;padding:0;font:500 32px Roboto;color:#ffd969} </style> <div id='intro_hh'> <br/><br/> <h1>Có <strong> <script type='text/javascript'>/*<![CDATA[*/function postCount(a){document.write(" ");var b=a.feed.openSearch$totalResults.$t;document.write("<span class='count'>"+b+"</span>");document.write("</span>")};/*]]>*/</script> <script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/> </strong> bài viết và <strong> <script type='text/javascript'>/*<![CDATA[*/function numberOfComments(a){document.write(" ");var b=a.feed.openSearch$totalResults.$t;document.write("<span class='count'>"+b+"</span>");document.write("</span>")};/*]]>*/</script> <script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments' type='text/javascript'/> </strong> bình luận trên Blog.</h1> <br/> <div class='tim-kiem-blogger'> <form action='/search/' id='searchform' method='get'> <input id='s' name='q' placeholder='Nhập từ khóa và cào phím enter để tìm kiếm...' type='text'/> <input id='searchsubmit' type='submit' value='TÌM!'/> </form> <br/> </div> </div><!-- End Widget --> 

Các bạn có thể thay #069999 và https://i.imgur.com/gIqnMEE.jpg thành mã màu và link ảnh bạn muốn hiển thị.
Bước 3: Lưu mẫu lại và tận hưởng thôi! 

LỜI KẾT

Trên đây là các bước để ta có được một widget tìm kiếm dưới chân trang cực đẹp rồi. Nếu thấy bài viết này hay thì đừng quên cho mình 1 chia sẻ hoặc bình luận nhé. Nếu trong quá trình thực hiện có thể có một số bước lỗi, thì đừng ngần ngại bình luận phía dưới để mình hỗ trợ nhé. Chúc các bạn thành công!

Nguồn: Trên Hình