Horizontal Menu CSS3 - chữ cuộn tròn theo chuột cho Web, blogspot

Tạo 1 Menu đẹp làm điểm nhấn cho Website, blog luôn là yếu tố quan trọng trong thiết kế Website, blog. Menu hiệu ứng đẹp và có đầy đủ chức năng, gọn nhẹ luôn là mục tiêu hướng tới của thiết kế Web, blog.
Hôm nay mình chia sẻ tới các bạn 1 dạng menu được sử dụng khá nhiều trên Website, blog.

Với Horizontal Menu sử dụng CSS3 tạo nên hiệu ứng khi rê chuột vào thì text cuộn tròn.

DEMO:

• Trang chủ
• Thủ thuật Blogger
• Tin shock
• Ảnh bìa FB

- Mình gửi Tới các bạn Code chung, sau đó mình sẽ hướng dẫn thủ thuật trên Blogspot.
1. Code CSS:

<style>

ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
</style>


2. Code HTML

<ul>
<li><a class="glidebutton" href="http://www.itviet360.com/"><span data-text="Trang chủ">Trang chủ</span></a></li>
<li><a class="glidebutton" href="http://www.itviet360.com/search/label/thu-thuat-blogger"><span data-text="Thủ thuật Blogger">Thủ thuật Blogger</span></a></li>
<li><a class="glidebutton" href="http://shock360.blogspot.com/"><span data-text="Tin shock">Tin shock</span></a></li>
<li><a class="glidebutton" href="http://anhbiafb.blogspot.com/"><span data-text="Ảnh bìa FB">Ảnh bìa FB</span></a></li>
</ul>

- Hướng dẫn thủ thuật trên Blogspot:
1. Đăng nhập vào bảng điều khiển blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML / Javascrip.
2. Dán lần lượt từ code CSS đến Code HTML và lưu lại xem kết quả nhé
Chúc các bạn thành công.

Code thêm nút Like Facebook (FB), G+ cho Web ASP.NET

Làm thế nào để thêm buttons Like Facebook, G+ cho Website viết bằng mã nguồn ASP.NET?
Có rất nhiều bạn gặp vấn đề trong việc thêm nút Like FB và G+ cho dạng Website có mã nguồn ASPX này vì 1 số trang cho tự động nút này không hỗ trợ Web ASP. Khi thêm vào thì Website báo lỗi (Error)

Ở bài viết này mình chia sẻ Code mình vẫn dùng khi thêm Like và G+ cho các site có Code viết bằng ASP.NET. Like và G+ sẽ tự động nhận Link của trình duyệt và thay đổi con số đã được Like, G+ theo link đó.
 Demo tại Website: Noi that van phong
- Hướng dẫn:
Các bạn lựa chọn vị trí cần thêm nút Like và G+ trên Website của mình rồi dán đoạn code dưới đây vào:

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" id="like-button"></a>
<br />
<div class="g-plusone" data-annotation="inline" data-width="230"></div>

Chúc các bạn thành công !

CSS 3D Menu Vertical đẹp cho web, blog

Thủ thuật hôm nay mình muốn giới thiệu tới các bạn là 1 dạng Menu được dùng nhiều trong thời gian gần đây. CSS 3D tạo menu cực đẹp cho Web, blog.

Ở bài viết này mình gửi các bạn code và hướng dẫn thực hiện thủ thuật trên blogspot. Trên nền Website, blog khác các bạn thêm bình thường như thêm mã code CSS và HTML.

Ở đây mình sẽ phân làm 2 code khác nhau. 1 phần là Code của CSS, 1 phần là code của HTML để khi sử dụng trên nhiều dạng Web khác nhau các bạn dễ hình dung. Sau đó mình hướng dẫn trên Blogger nhé.
Code CSS:

/* CSS menu 3D huong dan itviet360.com */
#nav12,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav12 {
display: block;
padding: 5px;
position: relative;
width: 112px;

-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav12 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;

-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav12 li {
background-color: #FFFFFF;
position: relative;
}
#nav12 < li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav12 li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;

-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav12 li:hover < a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;
}
#nav12 li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;

-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;

-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav12 ul li {
width: 100%;
}

Code HTML:

<div class="container">
<ul id="nav12">
<li><a href="http://www.bloggertrix.com/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.itviet360.com.com/">Add This</a></li>
</ul>

</div>

- Hướng dẫn thêm menu này trên blogspot:
1. Vào bảng điều khiển blogger -> Mẫu (template) -> chỉnh sửa HTML (Edit HTML)
2. Ctrl + F tìm tới ]]></b:skin>  và dán Code CSS ngay trên nó và lưu mẫu lại
3. Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
4. Dán Code HTML vào tiện ích vừa thêm
Xem kết quả nhé các bạn.

Menu CSS3 bar đẹp đa tầng với icon riêng cho Web, Blogspot

Menu sử dụng CSS3 luôn tạo cho chúng ta độ bóng bo rất đẹp, làm thế nào để thêm menu CSS3 bar cho blogger? Code menu CSS3 ngang cho Website, blog.

Thủ thuật hôm nay mình chia sẻ tới các bạn dùng cho Web và blogspot. 1 dạng menu rất thích hợp với Website, blog có nội dung nhiều chuyên mục con.

DEMO

Hướng dẫn cách thêm menu này trên Blogspot

1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

2. Tìm tới thẻ > ]]></b:skin> và dán code dưới đây ngay trên nó:

/* icons Css3 menu bar www.itviet360.com*/

ul#navbt {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;

background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */
}
ul#navbt,ul#navbt ul {
list-style:none;
margin:0;
}
ul#navbt,ul#navbt .subs {
background-color:#444;
border:1px solid #454545;

border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
ul#navbt .subs {
background-color:#fff;
border:2px solid #222;
display:none;
float:left;
left:0;
padding:0 6px 6px;
position:absolute;
top:100%;
width:300px;

border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
ul#navbt li:hover>* {
display:block;
}
ul#navbt li:hover {
position:relative;
}
ul#navbt ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#navbt ul {
padding:0 5px 5px;
}
ul#navbt .col {
float:left;
width:50%;
}
ul#navbt li {
display:block;
float:left;
font-size:0;
white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
margin:0 0 0 5px;
}
ul#navbt ul>li {
margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
outline-style:none;
}
ul#navbt a {
border-style:none;
border-width:0;
color:#181818;
cursor:pointer;
display:block;
font-size:13px;
font-weight:bold;
padding:8px 18px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 1px 1px;
vertical-align:middle;
}
ul#navbt ul li {
float:none;
margin:6px 0 0;
}
ul#navbt ul a {
background-color:#fff;
border-color:#efefef;
border-style:solid;
border-width:0 0 1px;
color:#000;
font-size:11px;
padding:4px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 0 0;

border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#navbt li:hover>a {
border-style:none;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
border:none;
margin-right:8px;
vertical-align:middle;
}
ul#navbt span {
background-position:right center;
background-repeat:no-repeat;
display:block;
overflow:visible;
padding-right:0;
}
ul#navbt ul span {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenUOdKBlz0DBI6IGUz3qjx2TqcoIYnCQyUgu2QIRI0ye231IhmyNsk59ur5J0xf1SKYvnC_NrlO7zehEcy8Il25VgCqNNyztsnU9irhb4dnn8Ozbavf7VrKMAaedX6b3X4dK4IM6QL7o/s1600/bloggetrix-arrow.png");
padding-right:20px;
}
ul#navbt ul li:hover>a {
border-color:#444;
border-style:solid;
color:#444;
font-size:11px;
text-decoration:none;
text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
background-color:transpa;
height:25px;
line-height:25px;

border-radius:11px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
background-color:#313638;
line-height:25px;
}

Lưu mẫu lại.
3. Vào bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
4. Dán đoạn code dưới đây vào tiện ích vừa thêm:

<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iNFGVwVx-2tXZ8LSOLxBmmzcBldRCfjE54R8f04n4h1oIR0XL9m7MWclXdkdoWaGv8TV4v34hWOmQCHKBFY86ZR552cWNCsi9SdYRTRVLv1TslBIGVMZT6G7uW2qhkyScgJgQ1XzieE/s1600/bloggetrix-home.png" /> Home</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGvR0m1Aoh4-321h1KJldo5JAWArCuOGnkZsaUSseSP5l3XA_NQsNnuipkONTYSPe9vd3kmXJxBo29oVZW2QfqM1HQu9-57yncfYMgSq4Q5uIWXRGOoHoVN0DGh1uiPcTpRGJRvPrpVyw/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 4</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 41</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 42</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 43</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 44</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 46</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 47</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 48</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14aGaCen0HFkMziM6V7C-fYKNKDMVSqVscOwGgeCieuHyGxmhAAZaG-tZXYaAOd05WQ64-ykC1bgmoai0v74v_A6gxptTU8xy3wLznZgSthoYe5n2yjaM9uu8MamnFzW7lSJMj4BnCZI/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 4</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BGXI5oGI7t-Dy6RvcGeszBznXV_oeq-5I-Qij0GQAk5ohyphenhyphenZtihyEdXJBWt15gGDBEqrQ2UjEhLA6minhPIDMbqi4Z02jq7voPBfkYoaaAHVBr6MmXCDs1xMvKg6l6TMNawW6zrnLlqY/s1600/bloggetrix-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rjwY2R8VFS7tQmObIjuOUtBSWQAp34isi0f1AUDVd_a-bU4CnMD-0E-wgTa4CcDt0-R1b072w0Lu371P-1ht1U3wXXVG-wNL5vHgwTHimf3BLDH7n8oZjGgp3iIoJG6j3Zmw6ZFEN98/s1600/bloggetrix-top3.png" /> PHP</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEiZ3naNZojJInE6BoodAOlBIYzBzFBfrh3MKI7zAQklk27AQjAZC8dPyO954izP8DaWJ-olym-YXMFbVK6tjYbxNp_YUJQlPRPJ_74tYZ1GZbBuyhSWYVKPpXVhH9WYPjqCCSekORWx8/s1600/bloggetrix-top4.png" /> MySQL</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3PesP8IFE3Qn7KqwNfZsLDFB8T_kiQTr7TOfmNEzoljtesz-nP1W9kIy3mcU9RCiFxeVwXPGQ0shnr5I0QQOFE2BcAaVZRfYSRNLMPqNqvSUFgtV5DCygIxUc-ETkzYH46Foc8qLA3Ms/s1600/bloggetrix-top5.png" /> XSLT</a></li>
</ul>

Lưu tiện ích và xem kết quả nhé :)

Menu CSS3 Navigation đơn giản, đẹp cho blogspot, Web

Làm thế nào để thêm được menu ngang cho Website, blog. Thủ thuật hôm nay mình giới thiệu tới các bạn là làm 1 menu ngang Menu CSS3 Navigation đơn giản mà đẹp và cần thiết cho blog, website có nhiều mục con.

Hướng dẫn thủ thuật trên Blogspot. Đổi với Website các bạn tìm vị trí muốn hiển thị và dán code vào nhé, Code này là CSS và HTML thôi.

1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML).

2. Tìm (Ctrl + F) ]]></b:skin>  và dán code dưới đây trên nó:


/* The CSS3 Code for the menu starts here itviet360.com */
#btrixsimplemenu{
clear:both;
margin:5px auto;
border:0px solid #000;
font-size:12px;
font-family: verdana;
height: 236px;
}

ul#li{color:black;}
ul#level-one{
width:700px;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxwMLzDrwaWxcU7OVHAxD3RYz2Fk3Htel1P5FANM-YY6rAuibyUVX1qKIAtUGmbSIZaGzLoWd013t5YbKyjPCr2hK8iIs9Pt53R1NfjwrG68-FKzZ6J8IHHs8bMucUY-qoqSBLfetv5Y/s1600/btrix_menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */
border:solid 1px #4d4d4d;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
border:solid 0px #000000;-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover{
background:#FFA500;
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
background:#FFA500 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVgCmpth1ngXC6sl9B73PW49noH3t9pWOVD8oE8nPz0q8rTIvelopfteRyEqL5MkebkGT3CEmufhdQBvZZbRWPM89GIefyu4FyktVXZbzMqyQ39Wu7-MuhPph-wrLHUnuQBcz_T67C4w/s1600/btrix_menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:240px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkR6BvEm4fuxmxMeMKXeDy6Qm1IMDa2YhmWyu4W9bA2_4Ji5gvkQT0XZg6_eg08pOZgQ5h2BwJLVEWA1e7XKmQpe8iP4f_3nuZnf67QuhQsxN1NcmAh4DSakUuAZjVzhaV_C1g99jnSw8/s1600/btrix_menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5Uz9gDS2O1hABzkQ3EwEEXyF0qwfiD9Lk3cq5R6LZkeBPEhikw2He45zXPeXxM3_-yWGs9kWQUHbvqNIcs6a4ufgHsoq7b-6GsFG6bCYS7hDyeWCXKIEwQi6Fka_I4T2swJvvq-K0fg/s1600/btrix_menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}

Lưu mẫu (Save Template) lại.
3. Vào Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript (Tiện ích này nên thêm ở trên tiệc ích POST)
4. Dán code dưới đây vào tiện ích vừa thêm:

<div id="btrixsimplemenu">
<ul id="level-one">
<li><a href="#">Home</a></li>
<li>Campaign
<ul id="level-two">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Download
<ul id="level-three">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>List
<ul id="level-four">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Lưu lại và xem kết quả nhé. :)

Tạo Menu jQuery Horizontal trỏ xuống ngang cho Web, blog

Làm thế nào để thêm menu trỏ xuống ngang cho Website, blog? Mình muốn tạo menu ngang trên blogspot của mình thì làm thế nào?
Code sử dụng cho dạng menu đó thì CSS cũng làm được nhưng có vẻ không đẹp bằng JQuery. Ở bài viết này mình giới thiệu tới các bạn code đó và hướng dẫn thủ thuật trên blogspot. Đối với Website thì các bạn chèn theo hình thức code JS và HTML tương tự

Code này mình chia làm 2 phần. Phần code Jquery + CSS và Code HTML.
Code  Jquery + CSS:

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>

Tiếp theo là code HTML:

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

Hướng dẫn thêm vào Blogger:
1. Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán code Jquery + CSS trước thẻ đóng </head> và lưu mẫu.
3. Vào bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/Javascript (tiện ích này thêm ở bên trên tiện ích POST nhé)
4. Dán code HTML vào tiện ích đó và lưu lại.

Menu dọc cho Web, blog [V2] - Menu thanh trái đẹp

Hôm nay mình chia sẻ tới các bạn 1 mẫu menu động khá đẹp dành cho Website, blog. Dạng menu này khá giống với site 24h.com.vn, dùng bên cột trái cho website, blog. Khi sử dụng menu này người truy cập không cần Click chuột thì cũng thấy được các danh mục con của mục chính. Menu này hiện tại khá được ưa chuộng cho Web blog có nhiều danh mục con, nhóm sản phẩm.

Xem thêm: Menu CSS sang phải động đẹp cho web blog V1

Demo trực tiếp:

• Home
• Folder 0
  • Sub Item 1.1
  • Sub Item 1.2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1

Code:


<style>
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
.ddsmoothmenu-v ul {
margin: 0;
padding: 0;
width: 250px;
/* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
position: relative;
}

.downarrowclass {
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass {
position: absolute;
top: 10px;
right: 5px;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a {
display: block;
overflow: auto;
/*force hasLayout in IE7 */
height: 32px;
color: white;
text-decoration: none;
padding: 5px 5px 5px 25px;
border-bottom: 0px solid #778;
border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWawRSkk7Ey7HKiG6U03nhgnEHChQaksH6cV-F2Yv7qsCDpFX0K_QiPkfWEa_sY9-PkPbZboj8Ust-5dasqARTzkoz7Mod8siTOL3ABWGpA-1ZM0-UbbC5lfjvihYv4wvY5GukyveD8s/s1600/tab_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPw6810TGziMgDXSHp4T0yW8FNBR5puGRA0Ogkmqq9k4S7T4kC18aMIYrSvjv69FcOiagqMvYq7OrTHDdvZUqRsvWkxcFV2QimL50lpPZBAU3A5E_tFvBfZOhYazxShiWc9O5upeveLg/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPw6810TGziMgDXSHp4T0yW8FNBR5puGRA0Ogkmqq9k4S7T4kC18aMIYrSvjv69FcOiagqMvYq7OrTHDdvZUqRsvWkxcFV2QimL50lpPZBAU3A5E_tFvBfZOhYazxShiWc9O5upeveLg/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul {
position: absolute;
width: 170px;
/*Sub Menu Items width */
height: 22px;
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
float: left;
height: 1%;
}

* html .ddsmoothmenu-v ul li a {
height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
})
</script>
<script type="text/javascript">
ddsmoothmenu.init({

mainmenuid: "smoothmenu2",
//Menu DIV id
orientation: 'v',
//Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v',
//class added to menu's outer DIV

//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li>
<a href="http://www.helperblogger.com/">Home</a>
</li>
<li>
<a href="#">Folder 0</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Folder 1</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Folder 2</a>
<ul>
<li>
<a href="#">Sub Item 2.1</a>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>

- Hưởng dẫn thủ thuật thêm menu này cho Blogspot:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm 1 tiện ích (Add a Widget) -> HTML/ Javascript
2. Dán code trên sau đó lưu lại xem kết quả. ^^

Rê chuột chuyển hình đơn giản nhất cho Web - Blog

Làm thế nào để rê chuột mà hình ảnh thay đổi nhau?
Việc thay đổi hình ảnh khi rê chuột tới tạo nên 1 hình ảnh sống động trong nhiều hình ảnh hơn. Thủ thuật này được khá nhiều Website, blog khác nhau sử dụng. Có thể là những blog về những mặt hàng cần giới thiệu được nhiều hình ảnh cho khách hàng thấy. Chỉ cần sử dụng 1 hiệu ứng onclick trong HTML là chúng ta có thể làm được việc đó. Với việc sử dụng code đơn giản này không hề ảnh hưởng tới tốc độ tải (Load) của site như sử dụng javasript.
Ví dụ mình có 2 ảnh sau:

Hình 1

Và

Hình 2

Và mình sử dụng Code mẫu:
<a href="http://itviet360.com"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>
Trong đó:
IMAGE-1-LINK: là URL của link hình 1
IMAGE-2-LINK: Là URL của link hình 2
Ví dụ Code và kết quả minh họa
<a href="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcPE-jd7GV3yrpaMh6hRZqfiwdM8GEOJVLf0fMq0TgmnhzCdFb6rMTAYIOZSC0fpV-ZQqFNEjP2Ax_W7rTgxyP47eyPOIM-y3mfmOH-JUidLkDdCpsSWm0qXGShc5uy_DTpSvYD3XldAE/s640/anh-bia-fb-de-thuong-3.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqc079L7RLfwthxt-ikjb-sD7UzMGRXCflB_u0H5qsN2VdxIviB9EzUwImWey2_gmPVYz56YbqWfhZMDtx0g9tin2DWKXdMsdub2gvcVyXNvR9grj613svJgaWP4aeMrGpcVnwpKr77wb-/s640/anh-bia-fb-de-thuong-5.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcPE-jd7GV3yrpaMh6hRZqfiwdM8GEOJVLf0fMq0TgmnhzCdFb6rMTAYIOZSC0fpV-ZQqFNEjP2Ax_W7rTgxyP47eyPOIM-y3mfmOH-JUidLkDdCpsSWm0qXGShc5uy_DTpSvYD3XldAE/s640/anh-bia-fb-de-thuong-3.jpg'" /></a>
Kết quả:

---

Tạo Menu CSS đa cấp trỏ xuống động cho Web - blogger

Làm thế nào để thêm menu đa cấp cho Website? Muốn tạo menu đa cấp CSS cho blogspot phải làm thế nào? ...
Thủ thuật hôm nay mình giới thiệu tới các bạn đó là cách thêm Code để làm Menu đa cấp đẹp chỉ sử dụng CSS. Trước hết mình sẽ đưa code sau đó hướng dẫn các bạn thêm ở blog, trên nền Website các bạn thực hiện tương tự như chèn mã CSS + HTML cho Website

CODE menu CSS động:

<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ##### Huong dan thu thuat itviet360.com ##### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}

.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li {
display: inline;
margin: 0;
}

.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited {
color: white;
}

.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}

.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li>
<a href="#">LINK1</a>
</li>
<li>
<a href="#" rel="ddsubmenu1">LINK2</a>
</li>
<li>
<a href="#" rel="ddsubmenu2">LINK3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<a href="#" rel="ddsubmenu3">LINK5</a>
</li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li>
<a href='#'>LINK2 ITEM 1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 2.1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2.2</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 3.1</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 4</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li>
<a href='#'>LINK3 ITEM 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 3.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.3</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 4</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.2 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 6</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li>
<a href='#'>LINK5 ITEM 1</a>
</li>
<li>
<a href='#'>LINK5 ITEM 2</a>
</li>
<li>
<a href='#'>LINK5 ITEM 3</a>
</li>
<li>
<a href='#'>LINK5 ITEM 4</a>
</li>
<li>
<a href='#'>LINK5 ITEM 5</a>
</li>
</ul>

- Trong đó các thuộc tính của các lớp Menu các bạn có thể chỉnh sửa màu sắc, kích thước...
- Để thêm vào blogger các bạn lựa chọn thêm 1 tiện ích HTML/Javascript bằng cách:
+ Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript

Sau đó dán code vào
Lưu ý: Nếu các bạn muốn thêm trực tiếp code vào mẫu (Template) blogger để thay thế menu hiện tại thì các bạn tìm đến code menu hiện tại (cái này phụ thuộc vào từng mẫu nên mình ko hướng dẫn chung được)

---

Chúc các bạn thành công !

Menu CSS đa cấp động bên phải cho Web, blog

Website, blog của bạn có nhiều thư mục, nhiều nhóm con. Bạn muốn thiết kế Menu gọn và đẹp hơn Ở bài viết này mình giới thiệu tới các bạn mẫu menu CSS đa cấp động xổ xuống bên phải. Dạng menu CSS này các bạn có thể bắt gặp ở nhiều site khác nhau. Hiện tại thì site 24h.com.vn cũng sử dụng dạng menu này nhưng Code thì mình không biết có giống nhau không nữa.
Đây là một cái nhìn thực đơn đơn giản nhưng chuyên nghiệp bên cạnh trình đơn đa cấp. Nó chỉ là một thường xuyên danh sách UL lồng nhau, biến thành một trình đơn thả xuống bằng cách sử dụng một mã JavaScript rất nhỏ. Lưu ý rằng nền của trình đơn phải là một màu đặc thay vì có một hình nền, như tài sản sau đó được dành riêng để hiển thị hình ảnh mũi tên bên phải xuất hiện bên cạnh các mục menu với các menu bổ sung phụ.
DEMO:

• Item 1
• Item 2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1
  • Folder 2.1
    • Sub Item 2.1.1
    • Sub Item 2.1.2
    • Sub Item 2.1.3
    • Sub Item 2.1.4
• Item 4

Hình ảnh Right:  
Để làm được menu này chúng ta có 2 đoạn Code: Gồm CSS + Javascript và HTML.
CODE CSS + Javascript:
<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: black;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
} .sidebarmenu a.subfolderstyle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ccJbM3wZTtuWaLAgUEm1HaSCAnm0TTiDkMSw6yzAXE6Ib4OSgPusbqDxHQvxAz28X35NrQGwx1AWTe2DwizOPYeZ2gZYu7mi-tKNwHfKogRns8rksNV8FyW76tYiXHtqqlnkZavWTM99/s1600/right.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//huong dan http://itviet360.com
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block" }
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none" }
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" }
}
}
if (window.addEventListener) window.addEventListener("load", initsidebarmenu, false) else if (window.attachEvent) window.attachEvent("onload", initsidebarmenu)
</script>
CODE HTML: <div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

- Hướng dẫn sử dụng cho Blogger
Trên Blogger các bạn tạo 1 Widget HTML/Javascript và dán lần lượt code CSS + Javascipt và HTML

---

Chúc các bạn thành công !

Chỉnh sửa Fan Facebook, khung Like cho Web, blog

Ở bài viết Đưa trang Like FAcebook vào trong Website, blog mình đã giới thiệu tới các bạn cách đưa Like button vào site. Nhưng đó là 1 cách theo mặc định của Plugin đó. Vậy làm thế nào để chỉnh sửa cho khung Like Pages khi được nhúng vào blog hoặc Website trở nên đẹp hơn.
Thủ thuật này mình hướng dẫn các bạn làm được điều đó với việc tùy chỉnh CSS để thay đổi giao diện mặc định của LIKE Pages.

Để làm được điều này chúng ta sử dụng đoạn Code sau:

<style>
.fbInner{
background:#F6CECE;
width:300px;
border:1px solid #FA5858;
padding:2px;
}
</style>
<div class="fbInner">
<div class="textwidget"><script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="153138708123803" stream="0" connections="10" logobar="0" width="300" height="274" css="http://itviet360.googlecode.com/files/btsnts-custom-fbv4.css?1" class=" FB_fan FB_ElementReady"></fb:fan><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: right;">
<span style="font-family: Verdana, sans-serif; font-size: xx-small;"><a href="http://www.itviet360.com/2013/01/chinh-sua-fan-facebook-khung-like-web-blog.html" target="_blank">Tùy chỉnh FB Like Box</a></span></div>
</div></div></div>

Trong đó:
Dãy số được bôi màu xanh: là ID Pages của bạn. Ví dụ pages itviet360: http://www.facebook.com/pages/itviet360com/166823093455666
Width: Tương ứng với chiều rộng của khung Fan
Heigt: Tương ứng với chiều cao của khung Fan

---

Thử làm và xem kết quả các bạn nhé.
Được thì LIKE cho mình phát nào ^_^

jQuery Gooey Menu đẹp cho web, blogger

jQuery Gooey Menu là 1 dạng menu sử dụng "lava lamp" phổ biến có hiệu lực để tạo ra các menu CSS với một hiệu ứng nền chuyển động dính. Bất cứ khi nào di chuyển chuột trên một mục trình đơn, phong cách mong muốn cho biết các mục menu được chọn sau chuột đến hạng mục đó, suốt làm nổi bật các mục hiện đang hoạt động. Mỗi menu đơn giản chỉ là một danh sách UL tiêu chuẩn và rất dễ dàng để tùy chỉnh, bao gồm cả bản thân hiệu quả dính.
- Đối với dạng Menu này, itviet360 giới thiệu cho các bạn thực hiện trên Blogger. Web thì các bạn làm tương tự không khác gì ^^
DEMO: DEMO Gooey Menu

CODE (các bạn chú ý đây là phần Code chung và cách làm trên cả Blogger và Web. Ở phần dưới bài viết mình sẽ hướng dẫn các bạn thực hiện chi tiết trên blogger)
CODE 1: - Đặt code này ngay trước thẻ đóng </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://itviet360.googlecode.com/files/gooeymenu.js">
/* Huong dan: http://itviet360.com */
</script>

CODE 2: - Code CSS này có thể đặt trước thẻ </head> hoặc ngay sau thẻ <body>

<style>
hr{
margin:50px 0;
color:#eee;
}

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}

ul.gelbuttonmenu{
position:relative;
padding: 0;
margin: 0;
margin-bottom:1em;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.gelbuttonmenu li{
display: inline;
}

ul.gelbuttonmenu li a{
color: black;
font-weight:bold;
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
background:lightblue;
background:url(http://4.bp.blogspot.com/-pSN8MQyFlbM/UP0RwG2y4II/AAAAAAAAHSk/3Cyjzuh6AGA/s1600/gelbuttonleft.gif) top left no-repeat, url(http://3.bp.blogspot.com/-TPFxW8GdxQI/UP0RwBe0IKI/AAAAAAAAHSo/lTYEC2ZEVQs/s1600/gelbuttonright.gif) top right no-repeat, url(http://4.bp.blogspot.com/-B1TeQohfIkk/UP0RwN3jX9I/AAAAAAAAHSg/s4PhhoU5bRg/s1600/gelbuttoncenter.gif) top center repeat-x;
}

ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.solidblockmenu li{
display: inline;
}

ul.solidblockmenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
background:#d7ed93;
background: -moz-linear-gradient(top, #d7ed93, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
background: linear-gradient(top, #d7ed93, #fff);
}
/* ######### Thick Underline Menu CSS ######### */
ul.underlinemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.underlinemenu li{
display: inline;
}
ul.underlinemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}
ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border-bottom:5px solid navy;
}
/* ######### Frame Menu CSS ######### */
ul.framemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.framemenu li{
display: inline;
}

ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
</style>


CODE 3: Code HTML này đặt vào vị trí mà các bạn muốn hiển thị dạng menu này. Ở DEMO mình có 4 menu, nên các bạn sẽ chọn 1 trong 4 code HTML dưới đây (theo thứ tự lần lượt như trên hình hoặc DEMO trực tiếp nhé)
CODE 3.1

<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/" class="selected">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

CODE 3.2

<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>

CODE 3.3

<ul id="gooeymenu3" class="underlinemenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu3', fxtime:250})
</script>

CODE 3.4

<ul id="gooeymenu4" class="framemenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/" class="selected">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>

- Hướng dẫn trên blogger. Thêm trực tiếp vào template
Sao chép Code 1 và 2 đặt trước thẻ </head>
Ví dụ thêm menu này ở dưới vị trí header (giống như menu của mình đặt ở dưới vị trí header), tìm tới đoạn code:

<div id='header'>
...
</div>
Chọn CODE 3.1 hoặc 3.2 . 3.3 3.4 dán dưới code ở trên
- Lưu temPlate lại và xem kết quả

Treo banner, câu đối tết 2 bên cho Blogger, Web

Bạn có muốn Blog, Website của mình có 1 chút chuẩn bị để đón năm mới. 1 câu đối, 1 banner ngày tết cũng làm blog, web của bạn hòa vào cùng không khí vui xuân đón tết. Ở thủ thuật này mình hướng dẫn các bạn cách đơn giản nhất để có được câu đối, banner đó.

PS: Code này các bạn có thể dùng ở những mục đích khác nhau như: Tạo quảng cảo 2 bên cho web, blog...

- Ở đây mình sử dụng CSS: Ưu điểm của code này là ngắn gọn, nhẹ và thích hợp cho các trình duyệt...

- Nhược điểm: Nhiều bạn cho rằng nó không chạy lên chạy xuống nên không được đẹp, ^^ Mình chỉ ứng dụng trên blog mình rùi hướng dẫn các bạn.

DEMO 2 câu đối của blog mình

CODE: (dánh cho cả Blog và Website)

<a style="display:scroll;position:fixed;Top:0px;left:5px;" href="#"><img src="http://i1358.photobucket.com/albums/q765/phongvu18nd/1358174198_zpsc74e5e74.jpg" /></a>
<a style="display:scroll;position:fixed;Top:0px;right:5px;" href="#"><img src="http://i1358.photobucket.com/albums/q765/phongvu18nd/1358174232_zps89a1a2dd.jpg" /></a>

- Link hình ảnh 2 câu đối các bạn treo câu mình thích nhé
HƯỚNG DẪN TRÊN BLOGGER:
- Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
Dán đoạn code ở trên và lưu lại.
Xem kết quả nhé.

---

Mượn 2 câu đối gửi lời chúc tới các bạn !

CSS scroll - Tạo thanh cuộn cho Web, blogger

CSS scroll - Tạo thanh cuộn cho Web, blogger
Code CSS này tạo 1 thanh cuộn giúp giảm diện tích hiển thị ra ngoài Site nhưng không ảnh hưởng đến nội dung của nó. Hiện tại mình cũng sử dụng nó cho tiện ích "Liên kết site"
- CSS scroll chỉ là 1 đoạn code CSS đơn giản, dễ sử dụng ngay cả khi các bạn không rành về Code.
Các trình duyệt hỗ trợ thuộc tính này của CSS như: IE, Chrome, Firefox, Opera, Safari...

DEMO

Mạng máy tình

Tổng hợp thủ thuật Blogger

Tự học SEO

Tin học văn phòng

Download phần mềm miễn phí
Lab Network

Code CSS

<style>
div.scroll
{
background-color:#00FFFF;
width:280px;
height:100px;
overflow:scroll;
}

</style>

Các bạn tùy tình giá trị cho phù hợp với template.
Code HTML

<div class="scroll">
<a href="http://itviet360.com/" target="_blank"> Mạng máy tình </a>

<a href="http://itviet360.com/" target="_blank">Tổng hợp thủ thuật Blogger </a>

<a href="http://itviet360.com/" target="_blank"> Tự học SEO </a>

<a href="http://itviet360.com/" target="_blank"> Tin học văn phòng </a>

<a href="http://itviet360.com/" target="_blank"> Download phần mềm miễn phí </a>
<a href="http://itviet360.com/" target="_blank"> Lab Network </a>
</div>


---

- Dán code vào 1 tiện ích HTML/Javascript theo thứ tự Code CSS đến Code HTML
- Hoặc các bạn có thể dán Code CSS trong template (trước thẻ đóng </head>)