Home » html-css

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

5:31 AM |
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.

Horizontal Menu CSS3

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:



- 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:




2. Code HTML



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



Read more…

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

2:54 AM |
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)

Logo asp.net. asp dot net

Ở 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:





230">


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

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

10:28 PM |
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.
CSS 3D Menu Vertical

Ở đâ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:






- 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 ]]>  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.
Read more…

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

2:15 AM |
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.
Menu CSS3 bar, Menu CSS3 đẹp
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ẻ > ]]> 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/AVvXsEgzeP7lb1O2NJAl5p3iU79F-WmZjK7bvjuXt15iHkm7Y6YzN-NgjgMvbLnvosNnYIFGtUdWtj_9cIjbazlADVg1RGbTAUt6uEVuEQu6rfo27oG3SFru33I3srvSoEdOOK_ppzKZGufhkRA/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:



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

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

8:34 PM |
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.
menu CSS3 Navigation for blogspot
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) ]]>  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/AVvXsEhUbxrO3QKYIqaFdLjO55Q6VrzSQpAffPn9fCyWqdVPHqe3RLCqY9CNiOTAF4ZiqmWx_aySSPymXpkR_a4DZv39C-FZvjhCugCFhnW5EUkCTok_wSKIvHRxsQ3MxB4VpAexNWUcZaOLx7o/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/AVvXsEhS2bSZBNY_wjEc3WMFtNcoOsBsp1buZQUO_bnVZ46HSbGcSYHwVfTxYk1AQifrI1OOhLl1xyktIlHNvPAdwienmtvk1fDurZBRskiIftXmjeQmGGw1gGF5MRbg-NhA_h2RAuh2lAVhuLs/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/AVvXsEgkTrGLJPyyYSI1gIRTaTlRJQgLto7extMCeeHJ6lnOqMTQwgCJKg1bv-XD3rA8IhNhhRWbSA2-Ts5-AIsjkGgJfjNzuWDYR75qZp6CiPtJKs_JQ6W37bl5R2URPBf4tAGAOrwAIcFnFWc/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/AVvXsEhh1Ctq4QOFomQskZwF6dhQP1gEJaWuYI_Qy_Lj7ZkkcJV8OZuDLjGtHGGRfJq2O2-zHZH9PpKgQtDS282J0TzYdZjgvy6WzqkxsDVKDRAMoc7RgIwHQl-FHFjAx83sV2gFxGeocgHIA9s/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:



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

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

2:56 AM |
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ự
How To Add jQuery Horizontal Sub Navigation to Blogger, menu ngang đẹp cho web blog
Code này mình chia làm 2 phần. Phần code Jquery + CSS và Code HTML.
Code  Jquery + CSS:




Tiếp theo là code HTML:



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

Read more…

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

8:15 AM |
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.


Drop menu CSS brautiful for Website blogger, blogspot, menu đẹp cho blogspot
Demo trực tiếp:







Code:








- 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ả. ^^

Read more…

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

11:12 PM |
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:
Rê chuột chuyển hình đơn giản nhất cho Web - ảnh bìa Facebook song ngu de thuong
Hình 1
Và
ảnh bìa Facebook song ngu de thuong
Hình 2
Và mình sử dụng Code mẫu:
IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" />
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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyOdRTrkRu0IkPiVmMzU6sMDaQ0c6VnGxlslL8bmX8BsJi1Cb3_ZDHVAalOe__O0dhEqbcZPHohHKkkIEZw11TAo6rOWoxRnK6AcPFSaciPnvXLtExYlocfEgX7jYSOa6lOd4sR1IyFXjz/s640/anh-bia-fb-de-thuong-3.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim6_MWyBzrZgSVpWx07oKpLRlyISvUygPYG3gyI5jIaobGdgcV3DCRdqd2K1HRLHu5uLzCcAKNh5ocb3xSHxYzlQvMHSnCedQz8ZhSxQi4MnaxzwjQeLcDf5Aa0I-UFXxzqmOYIsk9EvDa/s640/anh-bia-fb-de-thuong-5.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyOdRTrkRu0IkPiVmMzU6sMDaQ0c6VnGxlslL8bmX8BsJi1Cb3_ZDHVAalOe__O0dhEqbcZPHohHKkkIEZw11TAo6rOWoxRnK6AcPFSaciPnvXLtExYlocfEgX7jYSOa6lOd4sR1IyFXjz/s640/anh-bia-fb-de-thuong-3.jpg'" />
Kết quả:

Read more…

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

4:32 PM |
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
down menu for blog itviet360, down menu CSS, menu da cap dong tro xuong
CODE menu CSS động:









- 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
Thêm tiện ích blogspot - add a widget blogger
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 !

Read more…

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

8:46 PM |
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:

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:


CODE HTML:




- 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 !
Read more…