Demo:

[You must be registered and logged in to see this image.]

1. Thay tòan bộ codes của Mod_search
- ACP> Templates > Portal > mod_search
- Thay toàn bộ bằng code này:

Code:


<div class="gensmall">
        <form action="/search.forum" method="get" target="_blank">
            <div class="timkiemvds">

<div class="timkiem_1">
              <input type="text" class="noidungtimkiem" name="search_keywords" size="30" />    <input type="submit" class="submittimkiem" value="" />
</div>

<div class="timkiem_2">
              <center><strong>CÔNG CỤ TÌM KIẾM</strong></center>
              <input id="google" type="radio" name="typerecherche" value="google" checked="checked" /><label for="google"> Của <b><font color="#0039b6">G</font><font color="#c41200">o</font><font color="#f3c518">o</font><font color="#0039b6">g</font><font color="#30a72f">l</font><font color="#c41200">e</font></b></label><br />
              <input id="interne" type="radio" name="typerecherche" value="interne" /><label for="interne"> Của diễn đàn</label><br /><br />
              <center><strong>TÌM KIẾM THEO</strong></center>
              <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked" /><label for="rtopics"> Tên chủ đề</label><br />
              <input id="rposts" type="radio" name="show_results" value="posts" /><label for="rposts"> Nội dung bài viết</label>
              <hr />
              <a href="/search.forum"><img src="http://2img.net/i/fa/empty.gif" width="12" height="13" border="0" alt="Rechercher" hspace="3" />Tìm kiếm nâng cao...</a>
              {JS_SESSION_ID_INPUT}
</div>
            </div>
        </form>
</div>

2. Thêm vào Css:
- ACP> Display> Colors & Pics> Colors> Css
- copy và dán codes sau vào
- bấm nút submit

Code:


.timkiemvds{
position:fixed;
top:22px;
left:-210px;
transition: all 3s ease-out; -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out;
transition-delay: 3s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s;
}
.timkiemvds:hover{
left:0px;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
}

.timkiemvds div.timkiem_1{
padding:14px 0 0 29px;
width:276px;
height:64px;
background:url(http://i48.servimg.com/u/f48/13/58/60/43/find1010.png) top left no-repeat;
}

.timkiemvds div.timkiem_2{
position:relative;
overflow:hidden;
padding:5px;
left:35px;
width:150px;
height:10px;
background-color:#ffa200;
border:1px solid #8A8A8A;
box-shadow: 3px 3px 3px #8A8A8A;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
transition-delay: 2s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s;
}
.timkiemvds:hover div.timkiem_2{
height:150px;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s;
}

.noidungtimkiem{background-color:transparent; border:0; width:178px; height:20px;}
.submittimkiem{width:50px; background-color:transparent; border:0; cursor:pointer;}

3. Kích họat widget Search
- ACP> Modules > Portal & widgets> Forum widgets management
>Forum widgets general options
- display forum widgets: chọn Có
- bấm save
- forum widgets management:
kéo widget Search lên
- bấm save
- bấm



Xong!

Cntt-k3