Thứ Hai, 31 tháng 12, 2012

Tùy chỉnh thanh tìm kiếm của Google (Google Custom Search)

Google Custom Search một trong những công cụ  trong danh sách các điểm cộng gần như vô tận. Từ cung cấp các kết quả tìm kiếm liên quan đến lựa chọn cho chỉ mục theo yêu cầu. GCS là một lợi ích cho tất cả Blog chủ sở hữu trang web. Nhưng một điều không phù hợp tại chỗ là khung tìm kiếm của nó cực kì đơn giản , và không bắt mắt chút nào. Trong bài này Karl sẽ nói cho bạn làm thế nào để thay đổi hình thức  Search Box GC của bạn thành hộp tìm kiếm CSS3.





Giả sử bạn đã thiết lập công cụ tìm kiếm của Google tìm kiếm Tuỳ chỉnh của bạn nếu bạn không sau đó kiểm tra hướng dẫn này. Có nhiều biến thể GCS, nhưng thông thường mã có chứa một thẻ <script>, hoặc tương tự thế này:




<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
đây bạn có thể không thực sự thấy nơi để áp dụng các style. Bây giờ hãy copy và dán các mã sau đây (cũng hoạt động theo cách tương tự như trên), và tùy chỉnh theo ý bạn:



<form id="search-form_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> 
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:150px;" name="q" size="70" type="text" />
<input value="Search" name="sa" type="submit"/>
</form>



id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" là thứ bạn cần thay cho phù hợp với id mình đã đăng kí.LÀM SAO ĐỂ TÙY CHỈNH KHUNG SEARCH CỦA BẠN?1- Đầu tiên là bạn hãy Sao lưu mẫu của mình để tránh rủi ro.2- Hãy chắc chắn là code GCS bạn chèn vào là duy nhất, nếu có hãy xóa chúng trước.3- Tiếp theo, bạn vào Mẫu >> Chỉnh sửa HTML và chèn đoạn code nào bạn muốn dưới đây vào trước ]]></b:skin> :
Mẫu 1:




#search-form{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 250px;
height: 35px;
padding: 10px;
margin: 10px auto 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#submit
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
background: #95d788;
outline: none;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#submit::-moz-focus-inner
{
border: none;
}

/* ----------------------- */

#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search.placeholder {
color: #9c9c9c !important;
font-style: italic;
}

#search:focus
{
border-color: #8badb4;
background: #fff;
outline: none;
}



Mẫu 2





/* search-form 
-------------------------------------- */
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}


Mẫu 3:






#searchform {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;

/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;

/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;

/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;

/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

Mẫu  4:





#searchform {
width: 400px;
height: 50px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"] {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 5px;
margin-left: 3px;
border: 1px solid #999999;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-left: 20px;
background-color: #f8b838;
color: rgba(134, 79, 11, 0.8);
text-transform: uppercase;
font-weight: bold;
border: 1px solid #99631d;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].solid:hover, input[type="submit"].solid:focus {
background: #ffd842;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}

input[type="submit"].solid:active {
background: #f6a000;
position: relative;
top: 5px;
border: 1px solid #702d00;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}


Thứ Bảy, 29 tháng 12, 2012

Dropdown menu có search


Menu giúp cho bạn trình bày các chương mục trong blog được gọn gàng và khoa học hơn. Lần trước Karl đã từng giới thiệu cho các bạn một mẫu Menu Drop. Hôm nay Karl tiếp tục giới thiệu cho các bạn thêm một mẫu Menu Drop khác.



Cách thực hiện:
  1. Đăng nhập Blogger
  2. Vào Thiết Kế (Design)
  3. Chọn tab Chỉnh Sửa HTML (Edit HTML). Không cần chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
  4. Thêm đoạn code sau trước thẻ  ]]></b:skin> .
#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu { list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center; position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto; position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px; }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px; line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0; float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
- Bạn điều chỉnh lại các Width cho phù hợp với blog của bạn. với:
  • width:850px là chiều rộng của menu thường ứng với chiều rộng của blogspot.
  • width:200px là chiều rộng của ô tìm kiếm
  • width:650px là chiều rộng phần chứa các Sub menu thường bằng width:850px - width:200px
    5. Chèn đoạn code sau trước thẻ  <body> . Với các mẫu Simple của blogspot thì là thẻ:   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> hoặc tương tự.
- Chèn đoạn code bên dưới vào sau đoạn code vừa tìm được:

<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='http://vinacer.blogspot.com/'/>
</form></div>
<div style='clear:both'/>
</div>
Trong đó:
  • Bạn có thể thay chữ Tìm kiếm bài viết ... bằng chữ bạn muốn. Lưu ý thay cả 3 chữ thì khi click chuột vào mới có hiệu ứng rolover.
  • Thay địa chỉ (URL) blog http://vinacer.blogspot.com/ thành địa chỉ (URL) blog của bạn.
    6. Lưu mẫu (Save template) Lại.
   7. Vào Thiết Kế (Design) - Phần tử trang bạn sẽ thấy xuất hiện 1 HTML92. bạn bấm vào chỉnh sửa và Pate đoạn code bên dưới vào.
<ul class="menu">
<li class="drop0"><a href="http://vinacer.blogspot.com/">Home</a></li>
<li class="drop0"><a href="http://vinacer.blogspot.com/p/so-o-trang-blog-vinacer.html">Site map</a></li>
<li class="drop0"><a href="#">About Me</a></li>
<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>

<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">

<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>

</div></div></li></ul>
Trong đó:
  • Thay dấu # là liên kết tới bài viết, nhãn hoặc trang của bạn.
  • Thay các phàn màu xãnh là các nhãn, bài viết trên menu chính.
  • Thay phần màu cam là các tiêu đề trong phần Sub menu xổ xuống.
  • Bạn có thể thêm các Sub menu drop bằng cách thêm các phần màu xanh da trơi và xanh la mạ vào ngay trước thẻ </ul>
Chúc thành công!

The Sunrise Drop Down Menu


Đặc điểm: The Sunrise Drop Down Menu không sử dụng các file javarscrip do vậy các bạn có thể yên tâm về tốc độ của nó.
Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

@charset "utf-8"; /* CSS Document */ body{ padding: 25px; } /* ----Navigation Structure -------- */ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWeiuJognjlq6rFiRDy1EkJ7YX2Pdf7GySRYqA9Lg3CPXNUqB1Dm2Bvy6809ragdrKBlPWDxdgD1K_1_v5WtaB_NZlHobAEde3bCDMOPlHv5yrW7Jn85tHCO38pTTtg8sCM_D9tKT7Ts/s512/nav-bg-vinacer.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRLEwJGJ6mxbGFI4sUg6i091-k6pXl3HqLKQCYkp3D70m5ih4R0xmRow8Wbn-pkDP1Ll9sRM6sA_V2ZS4BggJtj0gaoga54oaEfM28LIDuDbh_h2jo0jJfoxi4Zg0fFRuqNoZqep4bu8/s512/item-primary-bg-vinacer.gif); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #6C3600; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRLEwJGJ6mxbGFI4sUg6i091-k6pXl3HqLKQCYkp3D70m5ih4R0xmRow8Wbn-pkDP1Ll9sRM6sA_V2ZS4BggJtj0gaoga54oaEfM28LIDuDbh_h2jo0jJfoxi4Zg0fFRuqNoZqep4bu8/s512/item-primary-bg-vinacer.gif); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGS-xZSdP3d-ErPdZ2qPDsmSR6n8iA4wO6wbFMzdA1PNhztS2_ejDhpx4G4zLpTeX9Go6YT0RW6SwMIdQezM5s4xuY8Jf1DtCJbu6rARU3BYhJPFcE636MvqwUAHVSZJKMhyenn8dhkM0/s512/item-secondary-container-bg-vinacer.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; } /* -------- Secondary Items------ */ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtwCx9yE8ydaKWAUb_QYgLRq5qEih6vHAXCyxEDDOO20grT_5JQEaovRTJK7VU5s8cxfQlPynrrI_mg0nUdYPwU75t2aM_K8dA9FrJPZdx3X4u2kMbiHxGb19JScDrte6RejvlzfU-PqU/s512/item-secondary-bg-vinacer.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtwCx9yE8ydaKWAUb_QYgLRq5qEih6vHAXCyxEDDOO20grT_5JQEaovRTJK7VU5s8cxfQlPynrrI_mg0nUdYPwU75t2aM_K8dA9FrJPZdx3X4u2kMbiHxGb19JScDrte6RejvlzfU-PqU/s512/item-secondary-bg-vinacer.jpg); background-repeat: no-repeat; color:#CC0000; } /* ---- Secondary Item Titles ---- */ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuOgmPb8GBf8CLUjHe7dSPN0ExS-yD20W9rFEpku5TNclatn1OU7z6uU6Y_k6cwsxd2NP_drYgGaN0l3-76cXAA-Sh1p_IO3g3azMVum9g6IH-hXqtQuvEwHS1nWB8EfgWxoOV4L2CLdo/s512/item-secondary-title-bg-vanacer.jpg); */ background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }


6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)


<div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkK_9r_4E-ADOqu95XGnfKBgr_GwFaUW6vDc0bPKTYejvT922m6PYD-PDKmI_dHLOxoW3aqOonELjA7HkcJvYIlcHAWwDWRn7A3qEtTUiWnrVLOvfqHT_em3v6tAUgce-0ap9pHt7zRbLd/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_ZLJ0O4s3um3vlyTyttV1IDGxUelteWqdGYw4GlMfxTRoHIIjdarp_UCjZHHzo5HrqpmqCXlGN3i8OMQWel-gVrLE7OenN7UQHA-3FSPUzGKQ6e97n0NH-KybQFZ1zRpvXrubFxAntvK/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Products</a>

<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Quality</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Services</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear">&nbsp;</li></ul>
</div>
Chúc thành công!

Menu dọc xổ xuống dạng thư mục

Hôm nay Karl sẽ giới thiệu cho các bạn một mẫu menu dọc đẹo dành cho việc thiết kế blog. Menu này có đặc điểm trượt từ trên xuống, hết hợp hiệu ứng hover khi dê chuột. Điểm khác biệt là menu sử dụng 2 button để ẩn hiện các sub menu. 







Và đây là hình demo:




☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế (Mẫu)
   3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng   ]]></b:skin>.
.button {border:1px solid #055;border-radius:3px;box-shadow:0 1px rgba(255,255,255,0.3) inset;background:#41A317;color:#FFFF00 !important;text-decoration:none !important}
a.button:hover,.submit.button:hover{border:1px solid #222;background:#810541}
.button.medium{padding:5px 10px;font-size:12px}
.button.big{padding:10px 20px;font-size:14px}
div.sdmenu {
width: 200px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYRb16HaYzc5XOoumkSDQ4Y51TtWCcGm226_T2dN1lytuGe2w2uuh1JyJmy6GCkW2Cm_eslHi06-b9tu4kcLrM7XvPCFNRy6avWWmDklb0tNfEli19AHNgpZlZMWBA7zDQ9Xt-bh0zz0/s512/bottom-menu-doc-vinacer.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGtbQUtKLWEJcGjyc2PKs1dlvvP23izS7ITu9ROzQTquX6gtjN8ym14MSo6khmbph6FKS6nyF_CkMnNgqCbQswFymwoKsPyYR2FDHvmsi2Ns9lFg-F8zzCWIivJiw28vpIckvjIP4FDQ/s512/menu-vinacer-dot-blogspot-dot-com.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGtbQUtKLWEJcGjyc2PKs1dlvvP23izS7ITu9ROzQTquX6gtjN8ym14MSo6khmbph6FKS6nyF_CkMnNgqCbQswFymwoKsPyYR2FDHvmsi2Ns9lFg-F8zzCWIivJiw28vpIckvjIP4FDQ/s512/menu-vinacer-dot-blogspot-dot-com.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 30px;
}
div.sdmenu div span {
display: block;
padding: 8px 30px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 8px 30px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGtbQUtKLWEJcGjyc2PKs1dlvvP23izS7ITu9ROzQTquX6gtjN8ym14MSo6khmbph6FKS6nyF_CkMnNgqCbQswFymwoKsPyYR2FDHvmsi2Ns9lFg-F8zzCWIivJiw28vpIckvjIP4FDQ/s512/menu-vinacer-dot-blogspot-dot-com.gif) 0 -32px;
color: #fff;
text-decoration: none;
}

     5-  Bấm Lưu Mẫu  (save template) lại.

    6. Tạo một widget HTML/Javarscip và dán đoạn code sau vào:
<script type="text/javascript" src="http://code-pro.googlecode.com/files/sdmenu.js"></script>
<script type="text/javascript">
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
<input class="submit button medium" type="button" value="
Hiện Menu" onclick="myMenu.expandAll()" />
<input class="submit button medium" type="button" value="
Rút gọn menu" onclick="myMenu.collapseAll()" />
</form>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>
Menu 1</span>
<a href="
#">Sub Menu 1.1</a>
<a href="
#">Sub Menu 1.2</a>
<a href="
#">Sub Menu 1.3</a>
<a href="
#">Sub Menu 1.4</a>
<a href="
#">Sub Menu 1.5</a>
</div>
<div>
<span>
Menu 2</span>
<a href="
#">Sub Menu 2.1</a>
<a href="
#">Sub Menu 2.2</a>
<a href="
#">Sub Menu 2.3</a>
<a href="
#">Sub Menu 2.4</a>
</div>
<div class="collapsed">
<span>
Menu 3</span>
<a href="
#">Sub Menu 3.1</a>
<a href="
#">Sub Menu 3.2</a>
<a href="
#">Sub Menu 3.3</a>
<a href="
#">Sub Menu 3.4</a>
<a href="
#">Sub Menu 3.5</a>
<a href="
#">Sub Menu 3.6</a>
</div>
<div>
<span>
Menu 4</span>
<a href="
#">Sub Menu 4.1</a>
<a href="
#">Sub Menu 4.2</a>
<a href="
#">Sub Menu 4.3</a>
<a href="
#">Sub Menu 4.4</a>
<a href="
#">Sub Menu 4.5</a>
</div>
</div>
Trong đo:
  • Thay các dấu thăng màu đỏ thành URL (địa chỉ) liên kết tới bài viết, nhãn, trang của bạn.
  • Thay các phần màu xanh thành tên của các bài viết, nhãn, trang của bạn/
  • Bạn hãy tải file sdmenu.js và Upload lên Google code hoặc Dropbox để sử dụng lâu dài.

   5-  Bấm Lưu   (save Widget) lại.

- Ở trên mình dùng file ảnh làm background bạn cũng có thể thay thành các hình ảnh của bạn. Nếu không muốn dùng ảnh bạn có thể xóa các file ảnh đó đi.
 Chúc thành công!

Tạo menu đẹp và load nhanh cho Blogger



Nếu trước đây các bạn phải than phiền về tốc độ blog bị giảm đi ít nhiều khi áp dụng các thanh menu xổ dọc nhiều cấp kết hợp JQuery của blog khác. Thì hôm nay mẫu menu VinaCer Blog giới thiệu này sẽ đem đến cho các bạn một trải nghiệm tuyệt vời với CSS3.





Các bạn có thể xem hình demo ở dưới










☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin>.
#MBT-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSKFDhp5TsfdKjQDwBrxjOb8hXt8j6gFoUrBRAdVBeqtfEJve7VzNe9BhGbvwPoH9A-hMp6nyXUUD2kOa9VFG37yV0LpxIbkOvo_fv9yBXbbxM9tc6abwnGqgkK3USsM1Ezi0XG_Wz58/s512/vinacer-blogspot.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSKFDhp5TsfdKjQDwBrxjOb8hXt8j6gFoUrBRAdVBeqtfEJve7VzNe9BhGbvwPoH9A-hMp6nyXUUD2kOa9VFG37yV0LpxIbkOvo_fv9yBXbbxM9tc6abwnGqgkK3USsM1Ezi0XG_Wz58/s512/vinacer-blogspot.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSKFDhp5TsfdKjQDwBrxjOb8hXt8j6gFoUrBRAdVBeqtfEJve7VzNe9BhGbvwPoH9A-hMp6nyXUUD2kOa9VFG37yV0LpxIbkOvo_fv9yBXbbxM9tc6abwnGqgkK3USsM1Ezi0XG_Wz58/s512/vinacer-blogspot.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSKFDhp5TsfdKjQDwBrxjOb8hXt8j6gFoUrBRAdVBeqtfEJve7VzNe9BhGbvwPoH9A-hMp6nyXUUD2kOa9VFG37yV0LpxIbkOvo_fv9yBXbbxM9tc6abwnGqgkK3USsM1Ezi0XG_Wz58/s512/vinacer-blogspot.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
- Trong code trên bạn thay đổi các thông số sau cho phù hợp. Dấu # thay bằng liên kết tới các nhãn hoặc bài viết.
- Sau đó bấm Lưu lại
- nếu muốn đổi màu khác bạn hãy đổi phần  #7d7d7d  thành mã màu của bạn như màu xanh (#0080ff).
5- Toại một tiện ích HTML/Javarscip
- Thêm đoạn code sau vào.
<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="/">Home</a></li>
<li><a href="http://vinacer.blogspot.com/">Menu-Level Item 1</a>

<ul>
<li><a href="#">Sub-Level Item 1.1</a>
<ul>
<li><a href="#">Sub-Level Item 1.1.1</a></li>
<li><a href="#">Sub-Level Item 1.1.2</a></li>
<li><a href="#">Sub-Level Item 1.1.3</a></li>
<li><a href="#">Sub-Level Item 1.1.4</a></li>

</ul>
</li>
<li><a href="#">Sub-Level Item 1.2</a>
<ul>
<li><a href="#">Sub-Level Item 1.2.1</a></li>
<li><a href="#">Sub-Level Item 1.2.2</a></li>
<li><a href="#">Sub-Level Item 1.2.3</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item 1.3</a></li>

<li><a href="#">Sub-Level Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Menu-Level Item 2</a>
<ul>
<li><a href="#">Sub-Level Item 2.1</a>
<ul>

<li><a href="#">Sub-Level Item 2.1.1</a></li>
<li><a href="#">Sub-Level Item 2.1.2</a>
<ul>
<li><a href="#">Sub-Level Item 2.1.2.1</a></li>
<li><a href="#">Sub-Level Item 2.1.2.2</a></li>
<li><a href="#">Sub-Level Item 2.1.2.3</a></li>
<li><a href="#">Sub-Level Item 2.1.2.4</a></li>

</ul>
</li>

<li><a href="#">Sub-Level Item 2.1.3</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item 2.2</a></li>
<li><a href="#">Sub-Level Item 2.3</a></li>

<li><a href="#">Sub-Level Item 2.4</a>
<ul>
<li><a href="#">Sub-Level Item 2.4.1</a></li>
<li><a href="#">Sub-Level Item 2.4.2</a></li>
<li><a href="#">Sub-Level Item 2.4.3</a></li>
<li><a href="#">Sub-Level Item 2.4.4</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#">Menu-Level Item 3</a></li>
<li><a href="#">Menu-Level Item 4</a></li>
</ul>
</div>
- Trong code trên bạn thay đổi các thông số sau cho phù hợp. Dấu # thay bằng liên kết tới các nhãn hoặc bài viết.
- Sau đó bấm Lưu lại



Menu trên có style được định dạng bằng HTML và CSS3. Menu có sử dụng các thuộc tính border-radius để bo tròn góc, thuộc tính box-shadow tạo bóng đổ cho menu con và text-shadow để tạo bóng đổ cho chữ. Menu này hoạt động tốt trên các trình duyệt có hỗ trợ CSS3 như Firefox, Safari, Chrome, IE 9+. Trên các trình duyệt không hỗ trợ CSS3 như IE6, IE7, IE8 thì tính năng Dropdown vẫn hoạt động tốt ngoại trừ những hiệu ứng của CSS3 (border-radius, box-shadow, text-shadow)
- Nếu có host chứa file riêng thì bạn có thể copy tất cả code ở bước 4 vào thành 1file.CSS sau đó upload lên host. Lấy link file đó và chèn vào trước thẻ </head> theo cấu trúc:
<link href="URL_style.css" rel="stylesheet" type="text/css" />
URL_style.css chính là link CSS.
Chúc thành công!

Thứ Sáu, 21 tháng 12, 2012

[ HOT ] Nhận 45.000 tiền điện thoại và 20Mb DATA Miễn Phí

Chương trình chăm sóc khách hàng đăng ký nhận tin nhắn quảng cáo  Từ ngày 18/12/2012 đến ngày 31/03/2012, MobiFone triển khai chương trình chăm sóc khách hàng đối với các thuê bao trả trước kích hoạt trước thời điểm 0h00 ngày 01/12/2012 hoặc thuê bao trả sau đăng ký nhận các thông tin giới thiệu sản phẩm, dịch vụ, khuyến mại từ MobiFone. 
Để tham gia chương trình, khách hàng có thể đăng ký bằng 2 hình thức: Soạn tin nhắn với cú pháp QC gửi đến số tắt 9241 hoặc Gọi 18001090 nhánh 7 để yêu cầu điện thoại viên hỗ trợ đăng ký.  Khi tham gia chương trình, khách hàng sẽ được tặng tổng cộng 45.000 đồng (đã bao gồm thuế GTGT) chia làm 3 kỳ trong vòng 90 ngày.
 
http://www.mobifone.com.vn/web/vn/home/promotion.jsp?id=3520

Thứ Bảy, 15 tháng 12, 2012

Săn tìm backlink với Google Alerts

Xây dựng backlinks là một việc tất yếu của Internet Marketing, nhưng đặt backlink ở đâu để có hiệu quả vì không phải back link lớn là hiệu quả vì mục đích của bạn là những click để dẫn đên website của mình.