Wap giải Trí

Home » Archives for tháng 7 2009

1 Sript đổi màu background khá hay

[FD's BlOg] - Bài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước.

Xem demo : LIVE DEMO

Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.

Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>

- Các code màu xanh : 16 là số phần tử của mảng, 300 là thời gian delay giữa các lần đổi màu
- Chú ý đoạn code này : col_val = "#56" + c[x] +"00"; : đây là code tạo trị màu nền theo các phần tử trong mảng c , ví dụ khi x = 2 ta sẽ có màu nền là #562200.
- Ngoài ra bạn có thể chỉnh đoạn code trên lại như thế này : col_val = "#5600" + c[x] ; tức là trị màu sẽ thay đổi ở 2 bit cuối. ví dụ khi x=2 ta sẽ có màu nền là #560022

- Nếu muốn màu thay đổi nhiều hơn nưa thì các bạn cứ việc thêm phần tử vào mảng c. Ví dụ ta có 20 màu sẽ được thay đổi như bên dưới:

- Hãy tạo cho mình 1 list màu để việc thay đổi trong cho đẹp mắt.

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

Read more…

Tạo menu giống trang Tuổi Trẻ

[FD's BlOg] - Hôm nay mình lại tiếp tục giới thiệu cho các bạn thêm 1 style Menu mới nữa, đó là 1 style menu giống như trang Tuổi Trẻ. Style menu này cũng tương tự như trang VnExpress, như nó có thêm chức năng sổ dọc ở các menu con khi ta rê chuột vào.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọa code CSS bên dưới vào trước thẻ đóng </head>

// Code CSS
<style type="text/css">
a {
text-decoration:none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation
{
position: relative;
width :100%;
height: 47px;
float:left;
line-height:normal;
list-style-type:none ;
padding:0;
display :inline ;
background-color : #ddd;
}
#navigation li{
display:inline;
margin:0;
padding:0;
float: left;
height: 15px;
cursor:hand;
}

/*-------Menu Chính------------*/
/*- li -> div -*/
#navigation li div
{
float: left;
height :22px;
width: auto;
display: inline;
color: #696969;
cursor:hand ;
font-family :Tahoma ;
font-size :12px;
font-weight :bold ;
background:#ddd;
}
#navigation li:hover div ,
#navigation li.hover div
{
color: white;
cursor: hand;
background: transparent ;
background-color :#0a65a8;
}
#navigation li:Visited div ,
#navigation li.Visited div
{
background: transparent ;
background-color :#0a65a8;
color: White;
}

/*- li -> div -> a -*/
#navigation li div a
{
color: #696969;
font-family :Tahoma ;
font-size :12px;
font-weight :bold ;
}
#navigation li:hover div a,
#navigation li.hover div a
{
color: White;
}
#navigation li:Visited div a,
#navigation li.Visited div a
{
color: White;
}

/*-----------Menu phụ (sub)------------*/
/*--- subsection rollovers ---*/
/*- li -> ul -*/
/*- turn off subesection by default -*/

#navigation li ul
{
display: none;
position: absolute;
top: 22px;
left: 0;
height :21px;
width :800px;
background:#3287C2;
border-bottom :solid 1px #747474;
}
#navigation li:hover ul,
#navigation li.hover ul
{
display:block ;
z-index: 1000;
}
#navigation li:Visited ul,
#navigation li.Visited ul {
display: block;
z-index: 1000;
}

/*- li -> lu -> span -*/
/*- subsection rollovers -*/

#navigation li ul span
{
height :23px;
width :auto ;
}

/*- li -> lu -> span -> li -*/
/*- for all links in the list -*/
#navigation li ul span li
{
display :inline ;
height :23px;
background-color: Transparent;
}

/*- li -> ul -> span -> li -> a -*/
#navigation li ul span li a
{
float:left ;
cursor: hand;
color :#e8e8e8;
font-family :Tahoma ;
font-size :11.5px;
padding :3px 5px 0px 9px;
}
#navigation li ul span li:hover a,
#navigation li ul span li.hover a
{
text-decoration :none;
color :White;
font-weight:bold;
}
#navigation li ul span li:Visited a,
#navigation li ul span li.Visited a
{
text-decoration :none;
color :#FFFFFF;
font-weight:bold;
}
#navigation li ul span li a:hover,
#navigation li ul span li a.hover
{
text-decoration :none;
color :White;
font-weight:bold;

}

/*--------------SubMenu sổ dọc--------------*/
#dropmenudiv
{
position:absolute;
border-bottom-width: 0;
line-height:16px;
z-index:10000;
top :45px;
}
#dropmenudiv a
{
width :auto ;
display: block;
text-indent: 10px;
border-bottom: 1px solid #dddddd;
padding: 3px;
text-decoration: none;
color :#e8e8e8;
font-family :Tahoma;
font-size :11.5px;
}
#dropmenudiv a:hover
{
/*hover background color*/
background-color:#38A3EE;
text-decoration :none;
color :White;
font-weight:bold;
}

</style>

// Code JS
<script type="text/javascript" language="javascript">
var LineItems11=new Array()
var LineItems12=new Array()
LineItems12[0]='<a href=Link1.2.1>SubMenu 1.2.1</a>'
LineItems12[1]='<a href=Link1.2.2>SubMenu 1.2.2</a>'
LineItems12[2]='<a href=Link1.2.3>SubMenu 1.2.3</a>'
var LineItems13=new Array()
LineItems13[0]='<a href=Link1.3.1>SubMenu 1.3.1</a>'
LineItems13[1]='<a href=Link1.3.1>SubMenu 1.3.2</a>'
LineItems13[2]='<a href=Link1.3.1>SubMenu 1.3.3</a>'
var LineItems21=new Array()
var LineItems22=new Array()

var LineItems31=new Array()
LineItems31[0]='<a href=Link3.1.1>SubMenu 3.1.1</a>'
LineItems31[1]='<a href=Link3.1.2>SubMenu 3.1.2</a>'
LineItems31[2]='<a href=Link3.1.3>SubMenu 3.1.3</a>'
var LineItems32=new Array()
LineItems32[0]='<a href=Link3.2.1>SubMenu 3.2.1</a>'
LineItems32[1]='<a href=Link3.2.2>SubMenu 3.2.2</a>'
LineItems32[2]='<a href=Link3.2.3>SubMenu 3.2.3</a>'

var LineItems41=new Array()
var LineItems42=new Array()
LineItems42[0]='<a href=Link4.2.1>SubMenu 4.2.1</a>'
LineItems42[1]='<a href=Link4.2.2>SubMenu 4.2.2</a>'
LineItems42[2]='<a href=Link4.2.3>SubMenu 4.2.3</a>'

var ChannelIDSelect=new Array()

</script>

- Đoạn code JS trên là để tạo các menu sổ dọc cho các SubMenu.
- Mình sẽ đặt quy tắc đặt tên cho các mảng để các bạn dễ hình dung và không bị nhầm lẫn :
+ Các SubMenu ta sẽ đặt từ 1-->10...
+ Ví dụ : SubMenu của menu chính thứ nhất sẽ là 11 (số 1 đầu tiên là menu chính, số 1 thứ 2 là Submenu), ví dụ menu chính thứ 1 có 5 submenu thì ta sẽ đặt tên như sau : 11, 12, 13, 14, 15 . Nếu menu 1 có trên 10 submenu thì ta cứ tuần tự thêm vào, ví dụ 110, 111, 112...
+ Mỗi Submenu sẽ là 1 mảng, và các menu sổ dọc ở mỗi submenu sẽ là 1 phần tử của mảng. Ví dụ submenu42 có 3 menu con sổ dọc xuống, thì phần tử trong mảng submenu42 sẽ là 3 (như trong code mẫu)

- Lưu ý : các tên của các submenu này sẽ được dùng cho code HTML ở bước sau, vì thế khi thêm bớt menu ở code JS thì các bạn cũng phải chỉnh sửa ở code HTML.
- Các code Link4.2.2, Link4.2.3... là địa chỉ của các menu dropdown.

4. Save template.

5. Tạo 1 widget HTML và dán code bên dưới vào :

<ul id="navigation">
<li style="height: 22px;" class="" onmouseover="Mouseover(this);">
<div style="cursor: pointer; height: 22px;" class="Visited" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<a href="http://fandung.blogspot.com"><img src="http://i342.photobucket.com/albums/o433/bkprobk/home-1.gif" alt="" title="Về Trang Chủ" border="0" width="58" height="22"></a>
</div>
<ul style="border-top: 1px solid rgb(0, 102, 160);" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<span onmouseover="ClearsetTimeout();"></span>
</ul>
</li>


<li id="1" class="" onmouseover="Mouseover(this);">
<div style="border-left: 1px solid rgb(195, 195, 195); vertical-align: middle; cursor: pointer;" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<div style="border: 1px solid White; padding: 0px 5px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center;">
<a href="#" class="lnkLevel1" title=""> Menu 1 </a>

</div>
</div>


<ul style="border-top: 1px solid rgb(0, 102, 160);" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<span style="display: block;">
<li style="width: 52px; text-align: right; background-color: transparent; padding-left: 0px;" class=""> </li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">

<a href="#" target="_blank" onmouseover="dropdownmenu(this, event,LineItems11, '0px');" onmouseout="delayhidemenu();">SubMenu 1.1</a>

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems12, '150px');" onmouseout="delayhidemenu();">SubMenu 1.2<img id="imgMenuTriangle_12" src="http://i342.photobucket.com/albums/o433/bkprobk/subIcon.gif" alt="" align="bottom" border="0">
</a>

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#2" onmouseover="dropdownmenu(this, event,LineItems13, '150px');" onmouseout="delayhidemenu();">SubMenu 1.3<img id="imgMenuTriangle_13" src="http://i342.photobucket.com/albums/o433/bkprobk/subIcon.gif" alt="" align="bottom" border="0">
</a>

</li>

</span>
</ul>
</li>




<li id="2" class="" onmouseover="Mouseover(this);">
<div style="border-left: 1px solid rgb(195, 195, 195); vertical-align: middle; cursor: pointer;" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<div style="border: 1px solid White; padding: 0px 5px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center;">
<a href="#" class="lnkLevel1" title="">Menu 2</a>
</div>
</div>


<ul style="border-top: 1px solid rgb(0, 102, 160);" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<span style="display: block;">
<li style="width: 52px; text-align: right; background-color: transparent; padding-left: 0px;" class="">

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems21, '0px');" onmouseout="delayhidemenu();">SubMenu 2.1</a>

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems22, '0px');" onmouseout="delayhidemenu();">SubMenu 2.2</a>

</li>

</span>
</ul>
</li>



<li id="3" class="" onmouseover="Mouseover(this);">
<div style="border-left: 1px solid rgb(195, 195, 195); vertical-align: middle; cursor: pointer;" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<div style="border: 1px solid White; padding: 0px 5px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center;"><a href="#" target="_blank" class="lnkLevel1" title="">Menu 3</a>
</div>
</div>


<ul style="border-top: 1px solid rgb(0, 102, 160);" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<span style="display: block;">
<li style="width: 52px; text-align: right; background-color: transparent; padding-left: 100px;" class=""> </li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems31, '150px');" onmouseout="delayhidemenu();">SubMenu 3.1<img id="imgMenuTriangle_31" src="http://i342.photobucket.com/albums/o433/bkprobk/subIcon.gif" alt="" align="bottom" border="0">
</a>

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems32, '150px');" onmouseout="delayhidemenu();">SubMenu 3.2<img id="imgMenuTriangle_32" src="http://i342.photobucket.com/albums/o433/bkprobk/subIcon.gif" alt="" align="bottom" border="0">
</a>

</li>

</span>
</ul>
</li>



<li id="4" class="" onmouseover="Mouseover(this);">
<div style="border-left: 1px solid rgb(195, 195, 195); vertical-align: middle; cursor: pointer;" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<div style="border: 1px solid White; padding: 0px 5px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center;">
<a href="#" class="lnkLevel1" title="">Menu 4</a>
</div>
</div>


<ul style="border-top: 1px solid rgb(0, 102, 160);" class="" onmouseout="Mouseout();" onmouseover="ClearsetTimeout();">
<span style="display: block;">
<li style="width: 52px; text-align: right; background-color: transparent; padding-left: 100px;" class=""> </li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">
<a href="#" onmouseover="dropdownmenu(this, event,LineItems41, '0px');" onmouseout="delayhidemenu();">SubMenu 4.1</a>

</li>

<li id="Li1" class="" onmouseover="ClearsetTimeout()">

<a href="#" target="_blank" onmouseover="dropdownmenu(this, event,LineItems42, '150px');" onmouseout="delayhidemenu();">SubMenu 4.2<img id="imgMenuTriangle_42" src="http://i342.photobucket.com/albums/o433/bkprobk/subIcon.gif" alt="" align="bottom" border="0">
</a>

</li>

</span>
</ul>
</li>


</ul>

<script language="javascript" type="text/javascript" src="http://data.fandung.com/blog/demo/menu-tuoitre/MenuTab.js"></script>
<div id="dropmenudiv" style="visibility: hidden; width: 165px; background-color: rgb(50, 135, 194);" onmouseover="clearhidemenu()" onmouseout="dynamichide(event)"></div>

- Các code màu đỏ chính là tên của các submenu mà bạn đã đặt ở trong bước 3.
- Với các Submenu có các menu con sổ dọc thì các bạn hãy thêm ảnh icon (subIcon.gif) vào sau tên của các submenu này . Ví dụ submenu42, nếu submenu không có các menu con thì các bạn không nên thêm vào (như submenu21, submenu22). Thêm icon này vào chủ yếu để ta phân biệt rõ submenu nào có sổ dọc và submemu nào ko có sổ dọc.

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

Read more…

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}

</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>

Kết quả hiển thị:

- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :

top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;

Ta sẽ có kết quả như sau:

- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :

top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, right :

bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, left :

bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;

ta sẽ có kết quả :

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

Read more…

[ Yêu cầu ] : Tạo sidebar trượt dọc theo blog

Theo yêu cầu của bạn Dulichbui (www.dulichbui.org)

[FD's BlOg] - Thủ thuật này tương tự như thủ thuật tạo banner chạy dọc theo blog, nhưng ở đây ở đây có tích hợp thêm hiệu ứng show/hide từ mootools.

Tham khảo từ website baliwww.com
Xem demo : LIVE DEMO

Ảnh minh họa kết quả:

☼ Các bước thực hiện:

1. Vào bố cục

2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau thẻ <body> :

<div id="floatdiv" style="border: 0px solid rgb(34, 102, 170); padding: 16px; position: absolute; width: 200px; height:50px; left: 533px; top: 238px;">

<style type="text/css">
.li{
margin:0px 5px 7px 31px;
padding:2px;
list-style-type:none;
display:block;
width:200px;
}

#sideBar{
position: absolute;
width: auto;
height: 585px;
top: 0px;
right:-20px;
background-image:url(http://baliwww.com/images/backgroundsidebar.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:150px;
}
</style>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/prototype.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/effects.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/side-bar.js"></script>

<div id="sideBar">

<a href="#" id="sideBarTab"><img src="http://data.fandung.com/blog/demo/slide-sidebar/slide-button.gif" alt="sideBar" title="sideBar"/></a>

<div id="sideBarContents" style="width: 0px; height: 0px; visibility: hidden; opacity: 0;">

<div id="sideBarContentsInner">

<span class="ul">
<span class="li">
{NỘI DUNG THỨ 1}
</span>

<span class="li">
{NỘI DUNG THỨ 2}
</span>
</span>

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

- Lưu ý : nội dung mà bạn muốn hiển thị trong slidebar này bạn phải đặt nó vào trong thẻ <span class="li"> ... </span> nếu muốn phân thành các phần khác nhau thì tạo nhiều thẻ <span class="li"> ... </span> khác nhau rồi dán nội dung cần hiển thị vào trong thẻ.

4. Save template.

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

Read more…

Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)

[FD's BlOg] - Tương tự thủ thuật trước, thủ thuật "Tạo màu nền riêng biệt cho các comment", hôm nay mình tiếp tục giới thiệu cho các bạn thủ thuật "Gắn tem cho bài comment đầu tiên" của mỗi bài viết. Ở bài này mình cũng dùng jQuery để chọn tag, nhưng khác với bài trước, ở bài này mình sẽ chỉ chọn 1 tag đó là tag đầu tiên.

Có 1 điểm mình chưa khắc phục được, đó là tạm thời 2 thủ thuật ở bài 10 và bài 11 chưa thể sử dụng chung được. Tức là không thể áp dụng cùng 1 lúc 2 thủ thuật này. Sau này mình sẽ khắc phục sau.

Đây là hình ảnh minh họa kết quả mình đã thực hiện:

☼ Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.comment-body.first {
background:url(http://farm3.static.flickr.com/2589/3761562886_8357d61da8_o.gif) no-repeat right top;
}

4. Tiếp tục chèn đoạn code javascript bên dưới vào sau dòng code ]]></b:skin>

- Lưu ý : đối với 1 số template, class chứa các bài comment không phải là comment-body vì thế các bạn hãy thay đổi tên của các class chứa các comment lại cho thích hợp, khi đó thủ thuật mới hiển thị được.

5. Save template.

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

Read more…

Hướng dẫn kiếm tiền online với Adnet.vn

[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…

[ Yêu cầu ] : tạo Menu Hover giống trang danong.com

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 :

- 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

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

b. thêm tiếp đoạn code bên dưới vào trước dòng code

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…

Modify Form Comment : Bài 9 - Thêm ảnh avatar đại diện cho các comment - (Cập nhật)

[FD's BlOg] - Tiếp tục về loạt bài chỉnh sửa form comment, hôm nay mình sẽ giới thiệu cho các bạn 1 cách nữa để làm cho các bài comment trông bắt mắt hơn. Ở bài thứ 9 này mình sẽ hướng dẫn các bạn chèn avatar đại diện vào các bài comment.

Cập nhật avatar cho tác giả - 22/7/2009
Cập nhật việc hiển thị trên IE - 24/7/2009

Sở dĩ mình nói avatar đại diện là do trong blogger họ cũng phân các icon đại diện cho của những người comment theo 3 loại:
- Nhóm 1: Nặc danh(khách) , Name/URL
- Nhóm 2: các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 3: tài khoản blogger

Ở trên có 3 nhóm, nhưng trong bài này mình sẽ mở rộng thành 6 nhóm, nhóm 1 ở trên mình sẽ chia thành 2 nhóm. Ngoài ra sẽ có thêm nhóm các bài comment bị xóa tạm thời, mình cũng sẽ cho nó 1 avatar riêng. Như vậy tổng cộng ta sẽ có 6 avatar đại diện cho 6 nhóm sau:
- Nhóm 1: comment từ khách (Nặc danh)
- Nhóm 2: comment từ Name/URL
- Nhóm 3: comment từ các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 4: comment từ các tài khoản từ Blogger
- Nhóm 5: Comment bị xóa tạm thời.
- Nhóm 6: Comment từ tác giả. (cập nhật)

Và đây là kết quả mình đã thực hiện :

Cập nhật thêm avatar cho tác giả bài viết:

☼ Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS bên dưới vào trước đoạn code ]]></b:skin>

.comment-body {
border:1px solid #ccc;
padding:10px;
min-height:56px;
height:auto !important;
height:56px;
}
.img-avatar {
border:1px solid #555;
padding:2px;
margin-right:5px;
float:left;
}

- Nếu trong template của bạn đã có sẵn class .comment-body thì các bạn chỉ việc thêm thuộc tính cho nó.
- Chỉ riêng class .img-avatar là bạn phải thêm nguyên cả code vào (do class này chưa có trong code template).
- Đây là code để hiệu chỉnh nội dung của comment.
- Ở trên là code dùng với trường hợp avatar nằm ở bên trái, nếu các bạn muốn nó nằm ở bên phải thì thay dòng code float:left; thành float:right;

- Cập nhật việc hiển thị trên IE - 24/7/2009 : với lệnh min-height:56px; này thì sẽ không có tác dụng trên IE, muốn hiển thị tốt, tức là độ cao của bài comment sẽ tối thiểu là 56px, bạn phải thêm đọan code màu cam ở trên vào.

5. Tiếp tục, xuống phía dưới code template, tìm đoạn code bên dưới:

- Thay toàn bộ code được đánh dấu highlight thành đoạn code bên dưới: ( code được đánh dấu highlight bên dưới là code cập nhật thêm avatar cho tác giả bài viết)

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><img class='img-avatar' src='http://farm3.static.flickr.com/2623/3741961677_2c1988f41f_o.gif '/><data:comment.body/></span>

<b:else/>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author != data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2625/3741912407_8fea01c367_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author == data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2666/3744724206_50941fa3cd_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl == ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3478/3742704518_48e2b5327b_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl != ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3455/3742704550_8d63e16c90_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "openid-comment-icon"'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2596/3741912577_45a3daa143_o.gif'/><data:comment.body/>
</b:if>

</b:if>

6. Save template.

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

Read more…

[ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE

Theo yêu cầu của bạn Ngân (www.blogtruyen.com)

[FD's BlOg] - Theo yêu cầu của bạn Ngân, bài này sẽ hướng dẫn 2 việc : 1 là ngăn không cho các User dùng trình duyệt IE phiên bản 6 trở xuống, 2 là hiện 1 bảng thông báo nhỏ yêu cầu các user này phải sử dụng các trình duyệt khác như FireFox, chrome,... hoặc yêu cầu nâng cấp IE lên phiên bản mới để xem được blog.

Hình ảnh minh họa kết quả thực hiện :

Khi dùng trình duyệt khác IE , cụ thể là FireFox

Khi dùng trình duyệt IE6

Cơ bản của thủ thuật này là ta điều chỉnh việc hiển thị các ID cho từng trình duyệt, khi ở các trình duyệt khác IE hoặc IE với các phiên bản lớn hơn 6 thì ta sẽ xem được blog bình thường, và bảng thông báo được ẩn đi. Khi dùng trình duyệt nhỏ hơn hoặc bằng IE6 thì phần nội dung blog sẽ bị ẩn và thay vào đó là bảng thông báo sẽ được hiển thị (như trong hình mà mình đã minh họa)

☼ Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

#noticeIE6 {
width:500px;
background:#eee url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/23/10/76591248319987.gif) no-repeat top;
border:2px solid #ccc;
padding:100px 10px 10px 10px;
font-size:15px;
display:none;
}

- đây chính là ID chứa nội dung của bảng thông báo.
- Có thể tùy chỉnh lại các thuộc tính của ID này.
- Lưu ý đoạn code display:none; code này là để mặc định cho bảng thông báo luôn luôn được ẩn.

4. tiếp tục chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

- trong đoạn code ở bước 4 này ta thấy có 2 ID với việc hiển thị trái ngược nhau. ID noticeIE6 chính là ID chứa nội dung của bảng thông báo, ID lessIE6 chính là ID để ẩn nội dung blog với trình duyệt bé hơn IE7.
- Mình sẽ giải thích thêm về ý nghĩa của đoạn code màu xanh ở trên:

+ Đoạn code màu xanh ở trên có nghĩa là nếu trình duyệt hiện hành là trình duyệt IE với các phiên bản nhỏ hơn 7 thì các lệnh bên trong nó sẽ được thực thi.
+ Ngoài ra ta còn có các lệnh khác như :
- if IE 7 : trình duyệt là IE 7
- if gt IE 7 : trình duyệt IE với các phiên bản lớn hơn 7
- if gte IE 7 : trình duyệt IE với các phiên bản lớn hơn hoặc bằng 7
- if lt IE 7 : trình duyệt IE với các phiên bản bé hơn 7
- if lte IE 7 : trình duyệt IE với các phiên bản bé hơn hoặc bằng 7

5. Tiếp tục tìm đến thẻ <body> và thêm các đoạn code được đánh dấu highlight và code màu đỏ vào như bên dưới:

...
...
<body>
<center>
<div id='noticeIE6'>
{Nội dung của bảng thông báo}
</div>
</center>

<div id='lessIE6'>
...
...
...
</div>

</body>
</html>

- với code Highlight là code của bảng thông báo.
- Code màu đỏ là code dùng để ẩn nội dung blog khi người dùng truy cập blog bằng trình duyệt IE với các phiên bản nhỏ hơn 7.

6. Save template.

P/S: mở rộng ra ta có thể áp dụng thủ thuật này cho việc hiển thị từng tiện ích ở các trình duyệt khác nhau, như yêu cầu của bạn Tài đã nhờ mình.

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

Read more…

[ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)

[FD's BlOg] - Đây là 1 thủ thuật cũng khá đơn giản, tương tự như với nút edit widget. Chỉ khi đã đăng nhập quyền quản trị blog thì khi load blog bạn mới thấy được widget mà bạn đã ẩn đi. Lưu ý là chỉ nhưng người được cấp quyền admin cho blog mới thấy được tiện ích, còn những tác giả thông thường cũng sẽ không thấy được tiện ích này.

Hình ảnh minh họa :

Khi chưa đăng nhập quyền Admin

Khi đã đăng nhập quyền Admin

Ví dụ ta có 1 widget có ID là HTML 1. Các bạn vào Bố cục -> chỉnh sửa code HTML -> Nhấp chọn mở rộng mẫu tiện ích -> và các bạn sẽ thấy code của nó như bên dưới:

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>

- Ở đọan code trên, dòng <b:include name='quickedit'/> chính là code của icon chỉnh sửa widget. Như mình đã nói ở trên, thủ thuật này sẽ dùng cách tương tự như icon chỉnh sửa widget, nhưng các bạn cũng thấy, trong code của widget HTML1 này ko có đọan nào cho thấy icon chỉ hiển thị với quản trị blog.

- Muốn thấy được code này, các bạn hãy view source của blog thì sẽ thấy được ngay, và code của nó sẽ là đọan code này :

- khi đã tìm được dòng code này, giờ ta chỉ việc thêm nó vào trong code của widget là xong,

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>


<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</span>

</b:includable>
</b:widget>

- Save template lại sau khi thực hiện xong.

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

Read more…

Tin Tức

Những câu chuyện ngắn về tấm gương đạo đức của Bác Hồ

Xem nhiều trong tuần

Giới thiệu về tôi

Wap giải Trí

Lưu trữ Blog

1 Sript đổi màu background khá hay

Tạo menu giống trang Tuổi Trẻ

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

[ Yêu cầu ] : Tạo sidebar trượt dọc theo blog

Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên

Hướng dẫn kiếm tiền online với Adnet.vn

[ Yêu cầu ] : tạo Menu Hover giống trang danong.com

Modify Form Comment : Bài 9 - Thêm ảnh avatar đại diện cho các comment - (Cập nhật)

[ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE

[ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog

Top Hot