[FD's BlOg] - Adnet là một hệ thống quảng cáo trực tuyến trên nền tảng mạng Internet mà công cụ chính là các Website & Blog. Adnet là đơn vị đi đầu trong công nghệ quảng cáo affiliate tại Việt Nam cho phép các Publisher là chủ các Website & Blog có thể chủ động tạo các quảng cáo và nhúng vào các Website & Blog của mình một cách linh động và nhanh nhất. Với những tính năng nổi bật so với hệ thống Ads@CĐT, Adnet.VN hy vọng sẽ đem tới những cơ hội thu nhập lớn cho cộng đồng các Publisher ở Việt Nam. (theo Adnet.vn)

Việc đăng kí và sử dụng các widget quảng cáo từ trang adnet.vn có lẽ không quá lạ lẫm với các blogger việt, nhưng hôm nay mình cũng xin giới thiệu sơ lược qua cách đăng kí và sử dụng cho tất cả mọi người, nhất là những bạn mới làm quen với việc kiếm tiền online.

Adnet.vn là 1 hệ thống quảng cáo trực tuyến, những ai có web, blog, forum... đều có thể tham gia kiếm tiền với adnet.vn, tuy nhiên trang của bạn cũng phải có 1 thứ hạng tương đối trên alexa thì việc đăng kí sẽ dễ dang hơn (tầm từ 2tr trở xuống). Khi đăng kí làm thành viên của adnet, bạn sẽ được adnet cấp cho code của các widget quảng cáo để bạn chèn nó vào trang của bạn. Và khi người truy cập ở trang của bạn click vào quảng cáo này bạn sẽ nhận được tiền. 1 click hợp lệ bạn sẽ nhận được 600VND.

☼ Sau đây là các bước hướng dẫn :
1. Truy cập vào trang chủ Adnet.vn
2. Đăng kí cho mình 1 tài khoản.
3. Sau đó đăng nhập lại trang adnet.vn để hoàn tất các thông tin của mình (button Thông tin cá nhân) như bên dưới:

4. Sau khi hoàn tất, nhấp lại button widget để bắt đầu tạo các widget quảng cáo cho mình:
- Click vào nút "Tạo mới"

- Và 1 popup sẽ được hiển thị, và bạn bắt đầu tạo widget:

- Sau khi tạo xong ta sẽ thấy như bên dưới:

- Khi tạo xong, bạn phải chờ cho Adnet duyệt quảng cáo của bạn, chỉ khi quảng cáo được duyệt thì việc click vào quảng cáo mới có tiền. Thông thường bạn phải đợi vài ngày để adnet duyệt quảng cáo cho bạn.

- Sau khi quảng cáo được duyệt sẽ có dòng "Đã được duyệt" ở phần trạng thái:

- Khi đó thì bạn mới có thể thêm quảng cáo vào trang của bạn.
- Nhấp chọn vào widget đã được duyệt » rồi nhấp vào button "Xem mã nhúng" để copy code và dán vào trang của bạn. Xem hình bên dưới:

- Sau khi nhấp vào button "Xem mã nhúng" thì sẽ xuất hiện 1 popup hiển thị code của quảng cáo, có 2 loại cho bạn lựa chọn để chèn vào trang của bạn : 1 là dạng flash, 2 là dạng javascript, như hình bên dưới:

- Hãy lựa cho mình 1 code rồi dán nó vào trong trang của bạn, và như thế ta có thể bắt đầu kiếm tiền với adnet được rồi.

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

Read more…

Theo yêu cầu của bạn Thanh Phuong (thphuong.blogspot.com)

[FD's BlOg] - Đây là 1 style hoàn toàn mới cho các menu nằm ngang có hiệu ứng sổ dọc, thay vì trước kia ta chỉ hiển thị các menu con khi rê chuột vào menu chính, thì ở thủ thuật này khi nó sẽ hiển thị 1 tab khi rê chuột vào menu chính, và trong tab đó ta hoàn toàn có thể thêm vào bất cứ cái gì ta muốn. Như trong bài này sẽ hiển thị list bài viết mới và các chuyên mục con.

Xem demo trực tiếp ở đây : LIVE DEMO

Hình ảnh minh họa kết quả :

☼ Để đơn giản các bạn tạo 1 widget HTML và dán tất cả code bên dưới vào :

<script src="http://data.fandung.com/blog/demo/menu-danong/Menu.js" type="text/javascript"></script>

<style type="text/css">
#nav {
height:24px;
padding-top:5px;
margin:0px 0 0 0;
color:#eee;
}

#nav span {
color: #000;
font-weight: bold;
cursor: pointer;
padding-right:2px;
}

#nav a {
border-left:1px #000 solid;
color:#000;
text-decoration:none;
padding-left:3px;
padding-left:2px;
margin-right:0px
}

#nav a:hover {
text-decoration:underline
}

#nav .mainNav {
width: 980px;
padding-left:10px;
position:relative;
margin: 0px auto 0px auto;
z-index: 1000;
}

#sub_menu {
background:#4d4c4c url(http://danong.com/images/default/bg_sub_nav.gif) repeat-x 0 0;
height:20px;
border-bottom:1px #606060 solid;
margin-bottom:15px
}

.menuWrap {
float: left;
display:block;
position:relative;

}
.menuSub {
/*visibility:hidden;*/
position:absolute;
}

.BmenuSub {
/*visibility:hidden;*/
position:absolute;
top:-200px;
}

.menuMain {
clear:both;
padding: 0px 3px 0px 0px;
}

.menuMain a {
font-weight:bold;
}
.inv {
width: 10px;
height: 10px;
z-index:-100;
float: left;
display: none;
}


/* Drop Down Menu */
.drop_down {
border:1px #888787 solid;
position:relative;
/*width:450px;*/
padding:10px;
background:#000 url(http://danong.com/images/default/bg_nav_submenu_2.gif) repeat-y 35px 0
}

.drop_down .left {
float:left;
width: 270px;
}
.drop_down .right {
float:right;
width:160px;

}

.drop_down .right .sectionStar {
background:url(http://danong.com/images/default/ico_section_star.gif) no-repeat 0 5px;
background-color: #383838;
}

.drop_down .sectionStar2 {
background:url(http://danong.com/images/default/ico_section_star.gif) no-repeat 0 5px !important;
background-color: #383838 !important;
width: 170px;
height: 20px;
padding-top:5px;
}

.drop_down .right li {
padding-left:15px;
font-weight:normal;
background:url(http://danong.com/images/default/ico_section.gif) no-repeat 0 5px;
border-bottom:1px #404040 solid;
line-height:20px
}

.drop_down .celebs_left {
float:left;
width: 170px;
}

.drop_down .celebs_right {
float:right;
width:190px;
}

.drop_down .n_links .celebs_right .section li {
padding-left:15px;
font-weight:normal;
background:url(http://danong.com/images/default/ico_section.gif) no-repeat 0 5px;
border-bottom:1px #404040 solid;
line-height:20px
}

.drop_down .gallery_left {
float:left;
width: 280px;
}

.drop_down .gallery_right {
float:right;
text-align:center;
width:150px;
}

.drop_down .topics {
float:left;
width:120px;
}

.drop_down .objects {
float:left;
width:120px;
}


.drop_down h2 {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 10px;
letter-spacing:normal !important;
}

.drop_down h4 {
font-size:11px;
letter-spacing:0;
font-weight:bold;
font-family:Arial, sans-serif
}


.drop_down a {
color:#c8effd;
text-decoration:none;
font-weight:bold
}

.drop_down a:hover {
text-decoration:underline
}


.drop_down .opa_bckgrd {
position:absolute;
top:0;
left:0;
background:black;
width:350px;
height:245px;
filter:alpha(opacity=65);
opacity:0.65
}
/*
.drop_down .n_links {
position:absolute;
top:0;
left:0;
padding:15px 10px 0 10px;
width:330px;
height:230px
}
*/

.drop_down .custom_channel {
font-size: 18px;
text-transform:uppercase;
font-family:arial,Lucida Sans Unicode, Lucida Grande, sans-serif;
font-weight: normal;
letter-spacing:-1px;
color: white;
padding-bottom:10px;
}

.drop_down ul {
margin-bottom:10px;
overflow:hidden;
list-style:none;
}

.drop_down .c_keywords li {
float:left;
padding-right:5px;
margin-right:5px;
border-right:1px #a4a4a4 solid
}

.drop_down .n_links .read_more {
clear:both;
display:block;
padding-left:18px;
font-weight:bold;
background:url(http://danong.com/images/default/ico_more_b.gif) no-repeat 0 1px
}

.drop_down .n_links .more_articles li {
padding-left:13px;
background:url(http://danong.com/images/default/ico_article_b.gif) no-repeat 0 3px
}

.drop_down .n_links .more_articles a {
font-weight:normal
}

.drop_down .n_links .section li {
padding-left:13px;
background:url(http://danong.com/images/default/ico_square.gif) no-repeat 3px 6px;

}

.drop_down_title {
padding-bottom:10px;
font:18px "optima", Arial, Helvetica, sans-serif;
}

.drop_down .channel_home {
font-size: 18px;
text-transform:uppercase;
font-weight:normal;
font-family:arial,Lucida Sans Unicode, Lucida Grande, sans-serif
font-weight: normal;
letter-spacing:-1px;
}

#nav .odd {
border:0
}
#nav .drop_down h2 {
color:#E2E2E2;
text-transform:uppercase
}
#nav .drop_down h4 {
font-size:11px;
letter-spacing:0;
font-weight:bold;
font-family:Arial, sans-serif
}

#nav .drop_down a {
color:#c8effd;
border:0;
text-decoration:none
}

#nav .drop_down a:hover {
text-decoration:underline
}

.subMenu a, .subMenu a:visited { color:#FFFFFF; font-size:12px; }
.subMenu h1 { border:1px solid #FFFFFF; padding:2px 5px; float:left}
</style>

// CODE HTML

<div class="menu">
<div id="nav">
<div class="mainNav">

<!-- Menu 1 -->
<div id="content_1" class="inv">

<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 1</a>
</div>

<div class="n_links" style="">
<div class="left">
<h2>Bài mới</h2>

<div>
<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">

<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 1 -->

<!-- Menu 2 -->
<div id="content_2" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 2</a>
</div>
<div class="n_links" style="">
<div class="left">
<h2>Bài mới</h2>

<div>
<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>

</ul>
</div>

</div>
</div>

<div class="right">

<h2>Chuyên mục</h2>
<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 2 -->

<!-- Menu 3 -->
<div id="content_3" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 3</a>
</div>

<div class="n_links" style="">

<div class="left">
<h2>Bài mới</h2><div>

<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">
<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 3 -->

<!-- SUB menu -->
<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(1,0)' class="menuMain">
<a href='#'>Menu 1</a></div>
<div class="menuSub" id='menu_1'></div>

</div>


<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(2,0)' class="menuMain">
<a href='#'>Menu 2</a></div>
<div class="menuSub" id='menu_2'></div>
</div>


<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(3,0)' class="menuMain">
<a href='#'>Menu 3</a></div>
<div class="menuSub" id='menu_3'></div>
</div>
<!-- END SUB menu -->

</div>
</div>
</div>

- Chú ý tới các code màu cam, xanh, tím : nếu bạn muốn thêm vào nhiều menu thì cứ làm tương tự như trên. Ví dụ ta thêm vào menu thứ 4 thì ta thực hiện như bên dưới:
a. Chèn đoạn code bên dưới vào sau dòng <!-- END Menu 3 -->

<!-- Menu 4 -->
<div id="content_4" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 4</a>
</div>

<div class="n_links" style="">

<div class="left">
<h2>Bài mới</h2><div>

<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">
<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 4 -->

b. thêm tiếp đoạn code bên dưới vào trước dòng code <!-- END SUB menu -->

<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(4,0)' class="menuMain">
<a href='#'>Menu 4</a></div>
<div class="menuSub" id='menu_4'></div>
</div>

Ngoài ra các bạn có thể tùy chỉnh thêm về phần code CSS như : màu nền, màu chữ, độ rộng... để việc hiển thị là tốt nhất.

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

Read more…