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 !