This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Thứ Sáu, 11 tháng 12, 2015

Hướng Dẫn Gộp Gear Openshift Và Cấu Hình Phpmyadmin

Sản phẩm sau khi gộp gear là 3GB dung lượng và 1.5GB ram (chưa kiểm chứng) - Đầu tiên mình đăng kí 1 tài khoản OPENSHIFT, các bạn không thích đăng kí mới thì delete hết app trong tài khoản để thực hiện gộp gear. - Create app với PHP 5.3
Scaling bạn chọn Scale with web traffic rồi create app như bình thường.
Tiếp đến bạn vào app vừa tạo chỉnh gear thành 2x để có 2gb dung lượng ổ đĩa

ADD A CARTRIDGE
MySQL Database 5.1
*Bước này thì các bạn add như bình thường, nhớ lưu lại ID&PASSWD root mysql không là thôi luôn đó.
*Giờ bạn đã có mysql chạy trên 1 gear và 2gear kia chạy code, tổng là 3GB rồi nhé. 

#Cấu hình phpmyadmin

bạn vào trang chủ 'http://www.phpmyadmin.net'download phpmyadmin rồi upload lên thư mục php. Giải nén ra bạn đc thư mục phpmyadmin*
Bạn vào thư mục vừa giải nén sửa file config.sample.inc.php
File config.sample.inc.php phải đổi tên thành config.inc.php
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = 'localhost';
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
Sửa thành:
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = 'DIA-CHI';
$cfg['Servers'][$i]['port'] = 'PORT';
$cfg['Servers'][$i]['socket'] = getenv('OPENSHIFT_MYSQL_DB_SOCKET');
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
DIA-CHI bạn lấy ở file OPENSHIFT_MYSQL_DB_HOST
PORT 
bạn lấy ở file OPENSHIFT_MYSQL_DB_PORT
nó nằm ở /var/lib/openshift/52482eaa4382ecc22000009c/.env/mysql
ví dụ của mình có dạng:
Mã:
5248312c4382ecc86a00004c-blogvn.rhcloud.com
43611
Sau khi sửa
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = '5248312c4382ecc86a00004c-blogvn.rhcloud.com';
$cfg['Servers'][$i]['port'] = '43611';
$cfg['Servers'][$i]['socket'] = getenv('OPENSHIFT_MYSQL_DB_SOCKET');
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
bạn save lại, đổi tên thành config.inc.php rồi chạy domain/phpmyadmin xem nào. ID&PASSWD là lúc create mysql.
*hoàn thành phpmyadmin
////////////////////
Tiếp đến làm thế nào không bị 503 Service Unavailable
Theo nghiên cứu của mình thì khi xóa file index.php là bị như thế, bạn đừng lo, cứ unzip code rồi cài đặt như bình thường, sau đó tại 1 file index.html
thêm code này vào .htaccess
Mã:
DirectoryIndex index.php
tiếp đến bạn xóa index.html đi đc rồi đó, truy cập site xem


Sản phẩm sau khi gộp gear là 3GB dung lượng và 1.5GB ram (chưa kiểm chứng) - Đầu tiên mình đăng kí 1 tài khoản OPENSHIFT, các bạn không thích đăng kí mới thì delete hết app trong tài khoản để thực hiện gộp gear. - Create app với PHP 5.3
Scaling bạn chọn Scale with web traffic rồi create app như bình thường.
Tiếp đến bạn vào app vừa tạo chỉnh gear thành 2x để có 2gb dung lượng ổ đĩa

ADD A CARTRIDGE
MySQL Database 5.1
*Bước này thì các bạn add như bình thường, nhớ lưu lại ID&PASSWD root mysql không là thôi luôn đó.
*Giờ bạn đã có mysql chạy trên 1 gear và 2gear kia chạy code, tổng là 3GB rồi nhé. 

#Cấu hình phpmyadmin

bạn vào trang chủ 'http://www.phpmyadmin.net'download phpmyadmin rồi upload lên thư mục php. Giải nén ra bạn đc thư mục phpmyadmin*
Bạn vào thư mục vừa giải nén sửa file config.sample.inc.php
File config.sample.inc.php phải đổi tên thành config.inc.php
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = 'localhost';
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
Sửa thành:
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = 'DIA-CHI';
$cfg['Servers'][$i]['port'] = 'PORT';
$cfg['Servers'][$i]['socket'] = getenv('OPENSHIFT_MYSQL_DB_SOCKET');
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
DIA-CHI bạn lấy ở file OPENSHIFT_MYSQL_DB_HOST
PORT 
bạn lấy ở file OPENSHIFT_MYSQL_DB_PORT
nó nằm ở /var/lib/openshift/52482eaa4382ecc22000009c/.env/mysql
ví dụ của mình có dạng:
Mã:
5248312c4382ecc86a00004c-blogvn.rhcloud.com
43611
Sau khi sửa
Mã:
/* Server parameters */
$cfg['Servers'][$i]['host'] = '5248312c4382ecc86a00004c-blogvn.rhcloud.com';
$cfg['Servers'][$i]['port'] = '43611';
$cfg['Servers'][$i]['socket'] = getenv('OPENSHIFT_MYSQL_DB_SOCKET');
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysql if your server does not have mysqli */
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
bạn save lại, đổi tên thành config.inc.php rồi chạy domain/phpmyadmin xem nào. ID&PASSWD là lúc create mysql.
*hoàn thành phpmyadmin
////////////////////
Tiếp đến làm thế nào không bị 503 Service Unavailable
Theo nghiên cứu của mình thì khi xóa file index.php là bị như thế, bạn đừng lo, cứ unzip code rồi cài đặt như bình thường, sau đó tại 1 file index.html
thêm code này vào .htaccess
Mã:
DirectoryIndex index.php
tiếp đến bạn xóa index.html đi đc rồi đó, truy cập site xem

Thứ Tư, 9 tháng 12, 2015

Tạo nút Lên đầu trang (Back to top) cho Blogspot




Tiện ích nút Lên đầu trang là ứng dụng khá tiện lợi khi độc giả đọc hết bài viết của bạn có nội dung tương đối dài, thay vì độc giả phải cuộn chuột hoặc kéo thanh trượt dọc để về trang đầu khá mắc công…
Nút Lên đầu trang thường được tạo ra bởi 2 cách: Sử dụng CSS hoặc Sử dụng Jquery (Ở 2 cách trên đề có 2 cách nhỏ: Sử dụng chữ hoặc hình ảnh để là “biểu tượng” cho nút Back to top).

☼ 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.

Cách 1: Sử dụng CSS

Code:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>
Cách 2: Sử dụng Jquery

Code:
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://mchiase.blogspot.com/"></a><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZie4eFBnbLojYXOdNFsPhPG5NlMXJ16IqdGbBo1rXtr9x9Oy372T7-V5k7VYl2BEDKYkEpgby2ZAyF-c6yxRDTJ02uS4LDKUBPRm86H3shoIasVKGcHhhU-jvrFCFR76kZL2GHcS-Ii1Z/s1600/Top.png'/></a>


☼ Tùy chỉnh
 800 là tốc độ khi cuộn trang, các bạn cũng có thể tùy chỉnh theo ý muốn.
Thay đổi link ảnh màu xanh thành link ảnh bạn mong muốn, dưới đây mình cũng sưu tâm một số ảnh thích cái nào thì tải về upload lên, rồi lấy link hình thay vào lưu lại là oke nhé @!









☼ Kết luận
· Tiện tích này quá đơn giản nên mình không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết cho các bạn tham khảo.
· Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn.Khi chèn vào template bạn nên cẩn thận kẻo lỗi template
· Đối với cách 1 sử dụng CSS thì tốc độ load site của bạn sẽ nhanh hơn rất nhiều so với cách 2 sử dụng Jquery (xử lý Jquery). Nhưng cách 1 cách lại không có hiệu ứng đối với cách 2 lại có hiệu ứng cuộn lên khá đẹp.

Code chống copy trên blogspot (blogger)




Code chống copy có rất nhiều “loại” (mỗi cách gọi khác nhau thì có những đoạn code khác nhau) VD:
- Code chống click chuột phải.
- Code cho click nhưng lại bỏ chức năng nhớ.
- Code chống quét khối văn bản.
- Code chống chức năng paste.
- …………………………………..
Còn riêng theo mình code chống copy được chia làm 2 loại chủ yếu:
Loại 1: Chống copy toàn bộ nội dung (Chống Copy, Paste và Click chuột phải trên mọi trình duyệt)
Cách 1: Sữa trực tiếp trong template không sử dụng javarscip do vậy không lo ảnh hưởng đến tốc độ load của trang (Là loại code chống coppy ưu việt nhất ngay cả khi trình duyệt không có javarscip hoặc trình duyệt đó tắt javarscip thì code vẫn hoạt động rất tốt)
1- Đăng nhập (login) vào Blog.
2- Tải mẫu (đề phòng bất trắc)
3- Vào Mẫu (Template).
4- Chọn Chỉnh sử HTML (Edit HTML).
5.1- Thay thế thẻ <body> thành đoạn code bên dưới:

Code:
<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
5.2- Đối với các mẫu Simple của blogspot thì thẻ <body> có thể khác như:


Code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Khi đó bạn thay nó thành đoạn code như sau:
Code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

6- Lưu template
Cách 2: Không sữa trực tiếp trong template nhưng sử dụng javarscip (do vậy ảnh hưởng đến tốc độ load site nên thường ít sử dụng)
1- Đăng nhập (login) vào Blog.
2- Bố cục => thêm phần tử HTML/Javarscip.
3- Coppy đoạn code dưới đây, lưu lại và xem kết quả.

Code:
<script language=javascript>
<!--

//Disable right mouse click Script
//By Being Geeks
//For full source code, visit http://www.beinggeeks.com

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("return false")

// -->
</script>

Loại 2: Chống copy trên các trang chuyên biệt của blogspot.
 1- Đăng nhập và vào bố cục.
 2- Chọn mẫu (template) => chỉnh sửa HTML (Edit HTML).
 3- Sau đó hãy chọn code thủ thuật và chèn vào sau thẻ ).
 Đoạn code chung:

Code:
<script language='JavaScript1.2'>
        function disableselect(e){
          return false
        }
        function reEnable(){
          return true
        }
        //if IE4+
        document.onselectstart=new Function (&quot;return false&quot;)
        //if NS6
        if (window.sidebar){
          document.onmousedown=disableselect
          document.onclick=reEnable
        }
</script>
3.1- Chỉ cho phép copy trang chủ và trang nhãn.

Code:
<b:if cond='data:blog.pageType == "item"'>
Đoạn code chung
</b:if>
3.2- Không cho phép copy trên trang chủ.

Code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đoạn code chung
</b:if>
3.3- Không cho copy trang chủ và trang nhãn.

Code:
<b:if cond='data:blog.pageType == "index"'>
Đoạn code chung
</b:if>
3.4- Chỉ chống copy ở trang lưu trữ (archive).

Code:
<b:if cond='data:blog.pageType == "archive"'>
Đoạn code chung
</b:if>
3.5- Chỉ chống copy ở trang tĩnh (static page).

Code:
<b:if cond='data:blog.pageType == "static_page"'>
Đoạn code chung
</b:if>
3.6- Nếu muốn chỉ chống copy ở 1 bài viết cụ thể (1 trang riêng biệt).

Code:
<b:if cond='data:blog.url == "LINK_của_trang_riêng_biệt"'>
Đoạn code chung
</b:if>
3.7- Nếu muốn chống copy tất cả các trang trừ trang bài viết.

Code:
<b:if cond='data:blog.pageType != "item"'>
Đoạn code chung
</b:if>
4- Lưu template và vào blog kiểm tra kết quả nhé !
 Chú ý: Tất cả các code sử dụng javascipts do vậy nếu ta tắt chế độ javascript trên các trình duyệt (hoặc sử dụng các trình duyệt không hỗ trợ javascipt) thì vẫn có thể copy và pate bình thường.
 Còn bạn dùng cách nào để chống coppy trên blog của bạn ? Hãy để lại ý kiến của bạn ?

Tạo trạng 404 đẹp thân thiện với SEO cho blogspot (blogger)

Ở bài Mình hướng dẫn cho các bạn tạo một trang 404 đẹp và thân thiện với SEO (một trong những tính năng mới của Blogspot)


Mình cũng đã đọc một số bài về cách hướng dẫn tạo trang 404 nhưng đơn thuần chỉ là một hình ảnh và thường thì có 2 cách để tạo một trang 404. Sau đây mình sẽ hướng dẫn chi tiết:

Cách 1: Tạo trang 404 bằng cách sửa trực tiếp trong template “không hề đá động gì tới tính năng có sẵn của blogspot”

Bước 1: Blog => Mẫu => Chỉnh sửa HTML và chặn đoạn code dưới vào sau thẻ </b:skin>

<b:if cond='data:blog.pageType == "error_page"'>
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
</b:if 
Bước 2: Chằn đoạn code sau vào dưới thẻ <body>

<b:if cond='data:blog.pageType != "error_page"' 
Bước 3: Cuối cùng, copy đoạn HTML dưới đây và đặt nó trước thẻ đóng </body>

</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2>404: KHÔNG TÌM THY TRANG</h2>
<h1>RT TIT, TRANG KHÔNG TÌM THY</h1>
<p>Trang bn đang tìm không tn ti, hoc có th đả b xóa<br/><br/> Quay li trang ch <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoc liên h vi tôi <a href="http://windows2it/p/contact-us.html" title="Liên hệ với tôi"><span style="color: blue;">ti đây</span></a></p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BOiPYpsBeKwjswacct7CaG5waymPKEfqAN_LHAuIYvFdeM_tAXba1kETmwekR4pIgwBuGpofJhtN2mKEZ8NbT8de-JkX6k9b4BZ6ZMsz0_D6Rp_unkSK0kAivAiRVegQ9MqGPVb1w6WN/s1600/rss.png' width='147'/></a></li><li class='twitter-icon'><a href='http://www.twitter.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqnFp_H7nIoPUe4CAU2jqMt8-vb6OEkllL2oKfoVuyHCUcfaTBnEhDoeQ5QhQnCcl5urp_0u79DEfv8icjnFRZFh5NPtOOqH0hOT5G5UHOLTZ9qobIeWpRXRJyL-weKgDJbMQS_bkTDRL/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqOyRIgMqp7fRLI1HkaxNEyB8JWkCQAVpCD8sW7d7BVICqW4bKz0Bpg7XzAn3YHS1AGKgFKqK4Glx14SKaT3ugYWhL5XPUvI-xc6Wm9HsJ4Mw5Rzpaoae54A6LuS65IWJGx0pnKixLYpN/s1600/facebook.png' width='147'/></a></li><li class='google-icon'><a href='https://plus.google.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz5KURMA3cNebLvMaQAb1rLWLoAdnhyTuo2fcsrbV76mkjJ_NvOTMifNhJMK579m3-sD1C3EeSNs2DfRh-0GyTvZPNS_4xq-16D_qjCKuJ12_Yd0uaUaNc8g53vR_WjHE9A63auubeSGDi/s1600/google.png' width='147'/></a></li></ul>
</div>
</div></div>
</b:if 
Bước 4: Khó nhất trong các bước: Lưu và xem kết quả nhé !
Cách 2: Khai thác tính năng có sẵn trong blogspot, không cần chỉnh sữa trực tiếp trong template:


Blog => Cài đặt => Chỉnh sửa HTML => Tùy chọn tìm kiếm => Không tìm thấy trang tùy chỉnh (chọn chỉnh sửa) Copy gián đoạn Code dưới đây vào và Lưu thay đổi lại.

<!-- Blogger Yard 404 Page share by Windows2it-->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oh no!
</font> <font color='#666666'>Rt tiếc! Hình như bn có nhp vào mt liên kết b hng hoc mt trang không tn ti. <br/> Vui lòng thc hin mt trong các ni dung sau:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Trở lại</a> </li>
    <li>Liên h báo li vi mình<a href='Link trang liên hệ của bạn'> Bm vào đây</a>&#160;&#160;&#160; (<em>Liên hệ</em>) </li>
    <li>Tr vè trang ch <a href='Link trang chủ'>Bm vào đây</a>
      <br/></li>
<li>Bn có th s dng hp tìm kiếm thông tin mình cn</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;   &apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='  '/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='4'>Cm ơn bn đã ghé thăm Blog!</font></p>
    <p>
<p align='center'><font size='5'>Trang không tn ti!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='#098047'>404</font></p>
<style>
<style>.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}
.status-msg-border{display:none}
.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}
.status-msg-wrap a{padding:none;text-decoration:inherit}#sidebar-wrapper,#midsidebar-wrapper,.gapad2,.blog-pager,.post-header-line-1,.post-footer,#rsidebar-wrapper{display:none !important}
#main-wrapper{width:66%!important}
.post{width:66%!important}#searchinput{background:#FFF url(http://2.bp.blogspot.com/-PAOe2YSxpxo/VCX4BlzcSSI/AAAAAAAABKU/m76c7h-xyvQ/s1600/search.png) no-repeat 7px 8px;background-color:#FFF;border:1px solid #ddd;color:#A0A0A0;display:inline-block;font-family:arial;font-size:12px;font-weight:bold;height:24px;width:300px;margin:0;margin-top:5px;padding:5px 15px 5px 28px;vertical-align:top}
#searchinput:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:5px 15px 5px 28px}
#searchbutton{background:#444;color:#fff;height:35px;border-radius:5px;box-shadow:1px 2px 1px 1px #ABABAB;border:1px solid #fff;margin-top:3px;padding:8px}
#searchbutton:hover{background:#098047}
</style>  
Trên đó là đoạn code mẫu các bạn cũng có thể chỉnh sữa để phù hợp với site của bạn. Đoạn code trên mình đã tích hợp luôn công cụ Search.


Kết luận

- Cách 1: Bạn có thể thêm và chỉnh các phần từ cách một các thỏa mái (Vì có thể ẩn toàn bộ site) _ Đối với cách này bạn phải tối ưu Code không thì site của bạn sẽ phát sinh nhiều vấn đề @!

- Cách 2: Các phần tử của bạn phải co lại, chỉ vì không thể được toàn bộ site như cách 1_ Đối với cách này Code này nằm độc lập nên không ảnh hưởng đến site của bạn.

- Các Code trên bạn hoàn toàn có thể tùy biến Chiều cao, thấp, màu ,… Vì các bác Pro nên mình không nói nhiều.