Đề xuất từ khóa vào ô search cho blogger

Thủ thuật giúp bạn có thể sử dụng để cung cấp cho một đề nghị hoặc từ khóa tùy chọn gián tiếp mà không cần phải bận tâm để viết lệnh cụ thể xung quanh các hình thức cho người sử dụng để họ viết ra các từ khóa như thế này vào đó. Chỉ cần đặt một vài từ khóa trong trình đơn thả xuống gợi ý, sau đó người dùng sẽ ngay lập tức hiểu tổng quan về hình thức khi hiển thị menu:

VIEW DEMO

» Thêm đề xuất từ khóa vào ô search cho blogge

1- Vào Mẫu
2- Chọn Chỉnh sửa HTML
3- Dán code bên dưới vào vị trí bạn muốn (ngoài ra bạn cũng có thể dán vào HTML/Javascripts)

<div class="input-text-wrap">
    <form action="http://namkna.blogspot.com/search" method="get">
        <input class="text-input" type="text" name="q" autocomplete="off">
        <span class="down-arrow"></span>
        <input class="submit-button" type="submit" value="Search">
        <ul>
            <li>Wallpaper 3D</li>
            <li>Anime</li>
            <li>Manga</li>
            <li>Comics List</li>
            <li>Characters</li>
            <li>Animepedia</li>
        </ul>
    </form>
</div>

»Tùy chỉnh:

Thay http://namkna.blogspot.com/ thành URL blog của bạn.
Thay các phần màu xanh thành tên từ khóa của bạn.

4- Dán code bên dưới vào trước thẻ ]]></b:skin>.

/* outer */
.input-text-wrap {
  text-align:left;
  display:inline-block;
  background-color:white;
  border:1px solid #8E8E74;
  height:30px;
  position:relative;
  font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}

/* focused `.input-text-wrap` */
.input-text-wrap.focused {
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  border-color:black;
}

/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  vertical-align:top;
}

.input-text-wrap input {display:inline-block}

.input-text-wrap .text-input,
.input-text-wrap .submit-button {
  height:30px;
  line-height:30px;
  font-weight:bold;
  margin:0 20px 0 5px;
  outline:none;
}

/* the text input */
.input-text-wrap .text-input {
  width:160px; /* set the text input width here */
}

/* the submit button */
.input-text-wrap .submit-button {
  width:70px;
  padding:0 0 2px;
  margin:0 0;
  background-color:#FFEAD3;
  border-left:1px solid #8E8E74;
  color:#666;
  cursor:pointer;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  position:relative;
}

.input-text-wrap .submit-button:hover {
  background-color:#EDD8BF;
  color:black;
}

/* the drop-down menu */
.input-text-wrap ul {
  position:absolute;
  top:100%;
  right:-1px;
  left:-1px;
  z-index:99;
  background-color:white;
  border:1px solid black;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  display:none;
}

/* drop-down menu item */
.input-text-wrap li {
  line-height:26px;
  padding:0 10px;
  cursor:pointer;
}

.input-text-wrap li:hover {
  background-color:#E0CBB2;
  color:black;
}

/* the down arrow before the submit button */
.input-text-wrap .down-arrow {
  display:block;
  width:20px;
  height:30px;
  position:absolute;
  top:0;
  right:70px;
  cursor:pointer;
}

.input-text-wrap .down-arrow:hover,
.input-text-wrap .down-arrow.active {
  background-color:white;
  -webkit-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  z-index:2;
}

.input-text-wrap .down-arrow:active,
.input-text-wrap .down-arrow.active {
  -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:-1px 1px 1px rgba(0,0,0,.2);
}

/* create the down-arrow triangle with pseudo-element and border hack */
.input-text-wrap .down-arrow:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:4px solid transparent;
  border-top-color:#666;
  position:absolute;
  top:14px;
  left:50%;
  margin-left:-4px;
}

5- Chèn code sau vào trước thẻ </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
    //<![CDATA[
(function($) {

    var $inputWrap = $('.input-text-wrap'),
        $arrow = $inputWrap.find('.down-arrow');

    // Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
    $(document).on("click", function() {
        $inputWrap.find('ul').hide();
        $arrow.removeClass('active');
    });

    $arrow.on("click", function(e) {

        // Remove all the `focused` class and hide all visible drop-down menu
        $inputWrap.removeClass('focused').find('ul:visible').hide();
        // Remove al the `active` down arrow
        $arrow.removeClass('active');

        // Toggle the `.down-arrow` active class
        $(this).toggleClass('active')
            // Add a `focused` class to the `.input-text-wrap`
            .closest('.input-text-wrap').addClass('focused')
                // Show or hide the dropdown `ul`
                .find('ul').toggle()
                    // When we click the `li`...
                    .find('li').on("click", function() {
                        // Set the input text value to the clicked `li`'s text
                        $(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
                            // and trigger the focus event to it
                            .trigger("focus");
                        // After that, hide the visible dropdown menu
                        $(this).parent().hide();
        });

        // Prevent event bubbling!
        e.stopPropagation();

    });

    // When the text input focused...
    $inputWrap.find('.text-input').on("focus", function() {
        // Add a `focused` class to the `.input-text-wrap`
        $(this).closest('.input-text-wrap').addClass('focused');
    // When the text input loses the focus...
    }).on("blur", function(e) {
        // Remove the `focused` class from `.input-text-wrap`
        $(this).closest('.input-text-wrap').removeClass('focused');
    });

})(jQuery);
    //]]>
</script>

- Nếu blog bạn đã có file Jquery rồi thì xóa đoạn màu xanh đi.
Demo:

Nhận xét

Chung cư mini Hà Nộilúc 11:22:00 GMT+7 Thứ Hai, 22 tháng 7, 2013
Bác Nam Tạ ơi em bị lỗi này "The markup in the document following the root element must be well-formed", giúp em sửa với ạ. Em cảm ơn nhiều ạ !
Trả lờiXóa
Trả lời
Unknownlúc 11:29:00 GMT+7 Thứ Bảy, 18 tháng 10, 2014
anh Nam ơi còn nếu muốn tích hợp phần đề xuất đó vào khung search có sẵn của template đó thì sao anh, mà không cần phải thay bằng khung search khác vậy anh :v
Trả lờiXóa
Trả lời

Thêm nhận xét

Đề xuất từ khóa vào ô search cho blogger

» Thêm đề xuất từ khóa vào ô search cho blogge

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1