Code Popup under cho Web, blog - cửa sổ hiện sau trình duyệt

Code Popup cũng đã được mình giới thiệu 1 số Code Popup quảng cáo thông dụng nhất hiện nay và được nhiều bạn sử dụng.
- Dưới đây mình giới thiệu 1 dạng Popup nữa cũng được khá nhiều Webmaster sử dụng. Popup hiện cửa sổ sau trình duyệt Website, blog hiện tại của mình.

Popup under là hình thức quảng cáo Website nào đó, khi Website được đặt Popup xuất hiện phía sau trình duyệt Website đang truy cập
Lợi ích của Code Popup under:
- Kéo dài thời gian ở lại trang quảng cáo
- Gây ảnh hưởng ít đến người dùng
...
Hướng dẫn trên Blogger.
1. Vào bảng điều khiển Blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/javascipt
2. Dán 1 trong 2 Code dưới đây vào tiện ích vừa thêm.
Code 1:

<script>
function popup() {
var url = "http://itviet360.com/";
window.open(url);
popWin = window.open(page,'popWin');
popWin.blur();
window.focus();
}
popup();
</script>


Code 2:

<script>

//Pop-under window- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//specify page to pop-under
var popunder="http://itviet360.com/"

//specify popunder window features
//set 1 to enable a particular feature, 0 to disable
var winfeatures="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0"

//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=0

///No editing beyond here required/////

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadornot(){
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}

function loadpopunder(){
win2=window.open(popunder,"",winfeatures)
win2.blur()
window.focus()
}

if (once_per_session==0)
loadpopunder()
else
loadornot()

</script>


- Hướng dẫn thêm trên Website, Blog có mã nguồn khác (hoàn toàn áp dụng được cho Blogger)
Các bạn chỉ cần dán 1 trong 2 đoạn code trên trước thẻ </head>

---

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

Code Javascript tạo thêm đồng hồ cho Website, blog

Làm thế nào để thêm đồng hồ cho website? Blogger của mình muốn thêm đồng hồ.
Thủ thuật Blogspot hôm nay chia sẻ với các bạn 1 đoạn Code Javascript giúp website, blog của các bạn có thêm được 1 công cụ đo đồng hồ đơn giản và chuyên nghiệp

Demo trực tiếp: Demo thủ thuật blogspot
Code:

<form name="BM1">
<input type="text" name="MucVB" />
</form>

<script language="javascript">
function HamThoiGian(){
// Khoi tao doi tuong thoi gian.
var ThoiGian = new Date(); // Khoi tao doi tuong Date.
var Gio = ThoiGian.getHours(); // Lay gia tri gio tu doi tuong Date.
var Phut = ThoiGian.getMinutes(); // Lay phút tu doi tuong Date.
var Giay = ThoiGian.getSeconds(); // Lay giây tu doi tuong Date
// Thêm so 0 vào truoc so chi thoi gian neu nhu nó nho hon 10.
if(Gio<10){
Gio="0"+Gio;}
if(Phut<10){
Phut="0"+Phut;}
if(Giay<10){
Giay="0"+Giay;}
// Xuat ket qua ra muc nhap van ban có tên MucVB
document.BM1.MucVB.value="Bây giờ là: "+Gio+":"+Phut+":"+Giay;
// Goi lai hàm HamThoiGian sau moi mot giây trôi qua.
}
setInterval("HamThoiGian()",1000); // Su dung setInterval de goi lap di lap lai hàm HamThoiGian sau 1 giây.
</script>

- Hướng dẫn thêm thủ thuật vào blogspot.
1. Vào bảng điều khiển Blogger -> bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán đoạn code trên vào tiện ích vừa thêm.

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.

Code mở popup cửa sổ quảng cáo nhỏ dưới góc màn hình

Làm thế nào để tạo được Popup quảng cáo windows nhỏ ở góc phải màn hình? Mình muốn chèn Code Popup cho mở cửa sổ nhỏ thôi ở dưới góc màn hình mà không được. Xin code Popup quảng cáo hiệu quả nhất....
Bài viết này mình chia sẻ code Popup mở new Windows ngay dưới góc màn hình.
Chắc các bạn cũng biết việc lợi và hại của đặt Popup. Chúng ta nên làm giảm tránh cái hại và đem lại hiệu quả cao nhất cho việc đặt Pop này.

Những điểm hay của Code Popup này:
- Xuất hiện 1 lần khi trình duyệt Website mở.
- Cửa sổ trang Website được Pop nhỏ ở góc màn hình -> kéo dài thời gian ở lại của Website được Pop.
...
Demo trực tiếp: http://anhbiafb.blogspot.com/ các bạn nhấp vào vị trí bất kỳ ở bên trang Demo và xem kết quả ở góc phải màn hình nhé.
Code:

<script>function addEvent(obj,eventName,func){if(obj.attachEvent){obj.attachEvent("on"+eventName,func);}else if(obj.addEventListener){obj.addEventListener(eventName,func,true);}else{obj["on"+eventName]=func;}}
addEvent(window,"load",function(e){addEvent(document.body,"click",function(e){var pX;pX=screen.width;if(!pX){pX=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;}
if(pX>800){if(document.cookie.indexOf("pnpopup=popactive")==-1){document.cookie='pnpopup=popactive';params='width=50';params+=', height=50';params+=', top=1650, left=1460, resizable=no, scrollbars=yes, location=yes';var w=window.open("http://itviet360.com/",'window1',params).blur();window.focus();}}});});</script>

Thay link bằng link http://itviet360.com/ Website các bạn cần đặt Pop nhé.
Trên các nền Website thì đây chỉ là 1 đoạn code javascript nên các bạn dán vào mã <script> là nó hoạt động.
- Hướng dẫn trên Blogspot.
Các bạn vào bảng điều khiển blogger -> bố cục (Layout) -> Thêm 1 tiện ích (Add a Widget) -> HTML/Javascript.
Sau đó dán code trên vào tiện ích vừa thêm và lưu lại là OK men :)

Code do anh Qúy tại blog dophuquy.com gửi.

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

Code popup Javascript tạo quảng cáo cho Web, blog [tổng hợp]

Theo yêu cầu của 1 số bạn. Ở bài viết này mình sẽ tổng hợp 1 số code Popup quảng cáo cho Website, blog. Mình sẽ cập nhật những code Popup javascript ở bài viết này luôn. Nên có thể các bạn sẽ quay lại bài viết này để xem cập nhật.

Khi ghé thăm Website có đặt Popup chắc hẳn bạn cũng sẽ không hài lòng, nhưng vì lý do quảng cáo nên Admin của Website vẫn phải sử dụng. Nên mình mong các bạn hãy thông cảm cho. Code Popup được nhiều người hài lòng nhất vẫn là những dạng code popup chỉ chạy popup 1 lần trong thời gian cố định. code mở new Tab, mở new windows nhỏ

1. Code Popup nhiều lần, cứ Click bất kỳ vị trí nào là nó lại nhảy 1 new Windows mới.
- Loại này thêm code thì rất đơn giản nhưng người xem rất không hài lòng.
Code:

<body onclick="open_popup()">
<script type="text/javascript">
function open_popup()
{
window.open("http://itviet360.com/")
}
</scirpt>

Nếu muốn Popup nhiều trang thì bạn thêm những dòng Window.open tương tự

window.open("link Web muốn popup")

2. Code Popup theo thời gian 1 lần / 1 ngày / 1 địa chỉ IP
- Dạng này bạn xem ở bài viết đã hướng dẫn cụ thể: http://www.itviet360.com/2012/10/code-popup-javascript-xuat-hien-mot-lan.html
3. Code Popup mở new Tab
- Code này thì chỉ xuất hiện 1 lần / 1 lần mở trình duyệt. Nghĩa là khi bạn không tắt đi mở trình duyệt lại thì không bị popup lần nữa nhé.
- Xem chi tiết tại bài viết: http://www.itviet360.com/2012/10/code-popup-javascript-xuat-hien-mot-lan.html
4. Code javascript popup trên màn hình
- Loại code này rất được vì nó Popup lên giao diện màn hình luôn, và chỉ xuất hiện 1 lần. Người xem Website chỉ cần tắt nó đi là ổn. Không bị gây phiền, tuy nhiên hiệu quả
- Xem chi tiết tại: http://www.itviet360.com/2013/01/thua-thuat-jquery-popup-like-facebook-box-cho-web-blog.html
5. Dạng Javascript hiển thị góc màn hình.
- Loại này thì được sử dụng nhiều hơn vì nó không làm ảnh hưởng gì tới người xem webstie của bạn.
Xem chi tiết hướng dẫn dạng này tại bài viết: http://www.itviet360.com/2013/03/code-tao-quang-cao-goc-man-hinh-cho-web-blog.html
6. dạng code Popup mở cửa sổ nhỏ ở góc phải màn hình; Xem chi tiết tại bài viếthttp://www.itviet360.com/2013/04/code-mo-popup-cua-so-quang-cao-nho-duoi-goc-man-hinh.html

Tiếp tục cập nhật...

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

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 !