Tên Miền Miễn Phí Hỗ Trợ Full DNS Kiểm TRa VÀ Đăng Kí Ngay

Showing posts with label Thu Thuat Blog. Show all posts
Showing posts with label Thu Thuat Blog. Show all posts

Label Cloud Cho Blogger

Trong hàng loạt các hoạt động chuẩn bị cho lễ kỷ niệm Blogger tròn 10 năm tuổi, Google đã và đang cho ra rất nhiều các tính năng giúp cho blogger.com ngày một thân thiện, tiện ích và đa năng hơn.

Một trong những tính năng đó phải kể đến Label Cloud giống như Tag Cloud trong WordPress mà chúng ta thường thấy.

Trước đây, chúng ta thường hiển thị các label (Nhãn) theo dang bullet thông thường, tuy nhiên các bạn sẽ có thêm các lựa chọn như Cloud để hiển thị trên blog của mình. Tính năng này giúp các blogger linh hoạt hơn khi thêm các label của mình lên blog.

Để làm được điều này, các bạn có thể chọn Add Gadget->Labels bạn sẽ thấy hình như sau:



Bình thường thì chỉ có dạng List, tuy nhiên tính năng Cloud bây giờ đã hiển thị ngay bên cạnh List để bạn dễ dàng sử dụng.



Ngoài việc hiển thị giống như tag cloud trên WordPress như thế thì tính năng Label Cloud này còn có một tiện ích hơn vượt trội là cho phép bạn chọn các label sẽ hiển thị trong Cloud chứ không mặc định là hiển thị tất cả như chúng ta thường thấy.



Blogger là dịch vụ Blog miễn phí mã nguồn đóng và là 1 trong những dịch vụ blog được sử rộng rộng rãi nhất hiện nay (chỉ sau Wordpress). Blogger tuy là mã nguồn đóng nhưng có khả năng tùy biến linh hoạt, được Google hỗ trọ rất nhiều tính năng và tốc độ phát triển rất nhanh. Sử dụng Blogger người dùng có thể tạo được 1 trang như ý muốn mà không cần tốn bất kỳ 1 khoản tiền nào.

Theo blogviet.info

Xem Tiếp ...

TẠo widget Bài mới đăng hỗ trợ hình ảnh



Các ban Chọn 1 tiện ích Html/javascript và dán đoạn code này vào



<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://www33.websamba.com/anhvosite/vwg/LDP08-06-11-02.png";
imgr[1] = "http://www33.websamba.com/anhvosite/vwg/LDP08-06-11-04.png";
imgr[2] = "http://www33.websamba.com/anhvosite/vwg/LDP08-06-11-05.png";
imgr[3] = "http://www33.websamba.com/anhvosite/vwg/LDP08-06-11-06.png";
imgr[4] = "http://www33.websamba.com/anhvosite/vwg/LDP08-06-11-08.png";
showRandomImg = true;
tablewidth = 305;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 70;
imgheight = 70;
fntsize = 12;
acolor = "#000";
aBold = true;
icon = " &#8226; ";
text = "cm";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " &rarr; ";
numposts = 4;
rc_feedLink = "http://www.blogger.com/feeds/6864240912693447626/posts/default";
</script>
<script src="http://www.hotlinkfiles.com/files/2577896_efngr/recentposts_thumb_final2.js" type="text/javascript"></script>


Chú ý dòng này
http://www.blogger.com/feeds/6864240912693447626/posts/default";

6864240912693447626 cái này bạn thay bằng ID của blog mình là okey hehehe
Xem Tiếp ...

Thủ thuật yêu cầu : Tạo banner quảng cáo trượt dọc 2 bên (Với việc ẩn hiện tùy vào độ phân giải của màn hình)

Theo yêu cầu của bạn Ngân (www.blogtruyen.com)
[FD's BlOg] - Chúng ta đã khá quen với banner trượt quảng cáo trượt dọc ở 2 bên của 1 site nào đó. đa phần các banner này được thiết kế nằm sát 2 mép (trái & phải) của 1 website nào đó, và nó luôn trượt theo khi ta di chuyển chuột. Ở bài hướng dẫn này mình sẽ giới thiệu 1 cách hiển thị khác, đó là banner quảng cáo sẽ nằm ở 2 mép trái và phải của màn hình hiển thị, và việc hiển thị của nó sẽ phụ thuộc vào chế độ xem của màn hình.

Xem demo : LIVE DEMO
(lưu ý : nếu bạn không thấy banner quảng cáo thì zoom nhỏ lại (Ctrl -) banner sẽ hiển thị, nếu muốn test không hiển thị thì zoom lớn lên (Ctrl +))

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 đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.slideads1 {text-align:left}
.slideads2 {text-align:right}
</style>

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

<div id="divAdLeft" style="position: absolute; width: 110px; float: left; left: 0pt; top: 0.00000103038px;">

<div class="slideads1">
<a href="http://fandung.blogspot.com/"><img src="link banner 1" border="0"></a>
</div>

</div>

<div id="divAdRight" style="position: absolute; width: 120px; float: right; left: 989px; top: 0.00000100252px;">

<td class="slideads2">
<a href="http://fandung.blogspot.com/" target="_blank"><img src="link banner 2" border="0"></a>
</div>

</div>

<script language="JavaScript" src="http://fandung.110mb.com/banner-slide/slide_ads.js"></script>
- để đơn giản các bạn có thể gộp code của bước 3 và 5 vào chung trong bước 5, tức là dán tất cả code của thủ thuật vào widget HTML/javascript.
- Ngoài ra code ở bước 5 ta có thể dán nó thẳng vào trong code template.
- Lưu ý : file JS http://fandung.110mb.com/banner-slide/slide_ads.js luôn phải đặt ở vị trí sau cùng của code thủ thuật. Tức là phải load phần code HTML trước phần code JS.

Các bạn chú ý có thể chèn quảng cáo của adnet.vn vào trượt dọc ở 2 bên các bạn hãy chú ý dòng này

thay nó bằng code quảng cáo của adnet là okey
Ở thủ thuật này, với màn hình có độ phân giải trên 1024px thì banner mới hiển thị. Chi tiết có thể xem trong file slide_ads.js

Chúc các bạn thành công.
Xem Tiếp ...

Thu Thuật yêu cầu : Menu Sohoa (Bản hoàn thiện) - Cập nhật 6/8/2009

Theo yêu cầu của bạn Tài (www.teentai.com)
[FD's BlOg] - Theo yêu cầu, hôm nay mình lại giới thiệu cho các bạn 1 style menu khác, cũng tương tự menu giống VnExpress, đó là menu giống trang Số Hóa. Ở style lần này, các bước thực hiện menu cũng tương tự, nhưng sẽ khó ở chỗ là việc tạo ảnh cho các menu. Do style này dùng ảnh để hiển thị menu. Do đó các menu chính các bạn đều phải tự design lấy.

Với các style khác, ta chỉ đánh tên menu vào các thẻ <li>là sẽ tạo được 1 thanh menu, nhưng ở đây, các menu sẽ phải được tạo từ các phần mềm đồ họa, tức là dùng hoàn toàn CSS để tạo menu. Tức là 1 menu chính ta sẽ cần có 2 ảnh để tạo nên nó.

Xem demo bản hoàn thiện: LIVE DEMO

Hình ảnh minh họa :


- Ở style menu này sẽ khác với menu VnE mà mình đã giới thiệu, ta sẽ không dùng mảng để tạo các menu, vì thế với menu này ta sẽ đỡ cực hơn và việc tạo các menu con sẽ thực hiển trược tiếp trên file JS (các bạn có thể tạo menu trong file JS hoặc nhúng thẳng code JS này vào template). Tuy vậy, bù lại ta sẽ phải tốn 1 ít công sức để tạo các menu chính từ các phần mềm đồ họa.
- Ở thủ thuật này mình có điều chỉnh lại ô search cho phù hợp với blogspot, tức là tìm kiếm ngay trên trang blog của bạn.

☼ 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 này vào sau trước thẻ đóng </head>

<script type="text/javascript" language="javaScript">
var RelatedFolder=1;
var PAGE_ID=1;

</script>

<script type="text/javascript" language="javascript" src="http://fandung.110mb.com/JS-files/menu-sohoa/menu-sohoa.js"></script>

<style type="text/css">
#top-menu {
width: 964px;
height: 27px;
position: relative;
padding-top: 10px;
}

.topmenu-left {
width: 11px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/combor-corner.gif) no-repeat 0px -28px;
}

.topmenu-mid {
width: 950px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/1px-loop.gif) repeat-x 0px 0px;
overflow: hidden;
}

.topmenu-right {
width: 3px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/combor-corner.gif) no-repeat -3px 0px;
}

.s_logo {
width: 44px;
padding-top: 7px;
text-align: center;
}

.s_logo img {
width: 29px;
height: 10px;
border: none; }

.menu_active {
background: url(http://sohoa.vnexpress.net/images/1px-loop.gif) repeat-x 0px -28px;
height: 20px;
padding: 7px 7px 0px;
text-align: center;
}

.menu_active a {
font: bold 11px Tahoma;
color: #231f20;
}

.Menu{
width:962px;
float:left;
background-image:url(http://i342.photobucket.com/albums/o433/bkprobk/BgMenu.gif);
height:35px;
background-repeat:no-repeat;
position:relative;
}

.MarrginTop{
width:100%;
height:10px;
overflow:hidden;
}

.PaddingLeft{
width:63px;
float:left;
height:5px
}

.menuDefault102 {
background: url(http://sohoa.vnexpress.net/images/menu/menu100.gif) repeat-x;
width: 2px;
height: 23px;
float:left;
}

.bgSubMenu {
background-image: url(http://sohoa.vnexpress.net/Images/BgSubMenu.jpg);
height:22px;
background-repeat:no-repeat;
float:left;
width:962px;
overflow:hidden;
}

.MenuTime{
width:175px;
height:23px;
color:#848484;
font-family:Arial;
font-size:11px;
font-weight:bold;
float:left;
line-height:23px;
text-align:left;
margin-left:10px
}

.subMenu{
float:left;
font-family:tahoma;
font-size:11px;
height:16px;
margin-top:6px
}

.subMenu a{
color:#373737;
text-decoration:none;
}

.TextSearch{
background:url(http://i342.photobucket.com/albums/o433/bkprobk/search-bg.gif) no-repeat;
width:180px;
height:23px;
float:left;
padding-left:5px;
margin-left:7px;
}

.HyperLink{
background-image:url(http://sohoa.vnexpress.net/Images/menu/Menu8.gif);
width:118px;
height:23px;
background-repeat:no-repeat;
float:left;
margin-left:10px;
cursor:pointer;
position:relative
}

#MNSubLink{
position:absolute;
border:1px solid #888;
background-color:#FFF;
width:109px;
display:none;
z-index:1001;
top:23px;
right:2px;
height:133px;
overflow:hidden;
padding-left:5px;
}

.nodsubLink{
background-image:url(http://sohoa.vnexpress.net/Images/menu/menu10000.gif);
width:10px;
float:left;
background-repeat:no-repeat;
background-position:left;
float:left;
height:25px;
overflow:hidden;
margin:0px;
padding:0px;
}

#MNSubLink .subLink{
width:90px;
text-align:left;
font-family:tahoma;
font-size:11px;
height:25px;
line-height:25px;
float:left;
overflow:hidden;
margin:0px;
padding:0px;
}

#MNSubLink .SpesubLink{
width:100px;
float:left;
border-bottom:1px dotted;
height:1px;
overflow:hidden;
margin:0px;
padding:0px;}

.seach-button {
width: 30px;
height:22px;
background:url(http://sohoa.vnexpress.net/Images/menu/MenuButtonSearch.jpg);
}

.seach-button:hover {
width: 30px;
height:22px;
background:url(http://i342.photobucket.com/albums/o433/bkprobk/seach-botton-hv2.gif);
}

/* CODE CSS CỦA MENU CHÍNH*/

/*Menu HOME*/
.menuDefault1 {
background:url(http://i342.photobucket.com/albums/o433/bkprobk/home-2.gif) repeat-x;
cursor: Pointer;
width: 76px;
height: 23px;
float:left;
margin-left:0px;
}
.menuActive1_1 {
background:url(http://i342.photobucket.com/albums/o433/bkprobk/home-hv.gif) repeat-x;
cursor: Pointer;
width:76px;
height: 23px;
float:left;
}
/*END Menu HOME*/

/*Menu 1*/
.menuDefault2 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu1.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
margin-left:37px;
}
.menuActive2_2 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu1-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
margin-left:37px;
}
/*EBND Menu 1*/

/*Menu 2*/
.menuDefault3 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu2.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}

.menuActive3_3 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu2-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 2*/

/*Menu 3*/
.menuDefault4 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu3.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
.menuActive4_4 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu3-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 3*/

/*Menu 4*/
.menuDefault5 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu4.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}

.menuActive5_5 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu4-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 4*/

/*Menu 5*/
.menuDefault6 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu5.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}

.menuActive6_6 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu5-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 5*/

</style>

- Khi bạn đã có các ảnh cho các menu chính của mình thì hãy thay thế link cho chúng (trong đoạn code CSS ở trên - các link in đậm màu đen)
- Mỗi code CSS của 1 Menu chính đều có độ rộng và chiều cao, các giá trị này chính là kích thước của ảnh mà bạn đã tạo.
- Lưu ý : không nên thay đổi tên id của các code CSS của các menu chính. Khi muốn tạo thêm menu khác thì cứ thêm code CSS tương tự như bên dưới :

/*Menu 6*/
.menuDefault7 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu6.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}

.menuActive7_7 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu6-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 6*/

= Việc tiếp theo phải làm ở bước 3 này là bạn phải download file JS (menu-sohoa.js) về để chỉnh sửa lại. Việc chỉnh sửa này chính là bước tạo các Submenu .
- Sau khi download về, dùng NotePad mở nó lên, và tìm đoạn code như bên dưới :

function setFolderDefault() {
if (FolderId == 10000) {
FolderId = 1;
flagOtherFolder = false;

} else if (FolderId != 2 && FolderId != 3 && FolderId != 4 && FolderId != 5 && FolderId != 6) {
FolderId = 1;
flagOtherFolder = false;
}
document.getElementById(FolderId).className = 'menuActive' + FolderId + '_' + FolderId;
writeSubmenu(FolderId);
}

//Đoạn code màu cam ở trên : nếu bạn có thêm nhiều menu chính khác (menu 6, menu 7) thì thêm vài đoạn code vào như && FolderId != 7 && FolderId != 8 ...
// Xóa đoạn hướng dẫn này khi thực hiện


// Tạo SubMenu ở code bên dưới

function writeSubmenu(id) {
//alert(id);

if (id == 1) {
//home
document.getElementById("subMenu").innerHTML = "<div style='color:#848484;font-style:Arial;margin-top:-1px;'><img src='http://sohoa.vnexpress.net/images/menu/iconPhone.gif' align=absmiddle' style='margin'/><a href='http://kontactr.com/user/fandung'> Liên hệ </a> <img src='http://sohoa.vnexpress.net/images/menu/iconMenu.gif' align='top' style='margin' style='margin-top:-2px' /> <a href='#'>Quảng cáo </a> <img src='http://i342.photobucket.com/albums/o433/bkprobk/rss-ico.gif' align='top' style='margin' style='margin-top:-2px' /> <a href='http://feeds2.feedburner.com/fandung'> RSS</a></div>";

document.getElementById("subMenu").style.marginLeft = "0px";
DelayId = id;
}

else if (id == 2) {
//menu1
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 1.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 1.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 1.3 </a>";
document.getElementById("subMenu").style.marginLeft = "-5px";
DelayId = id;
}

else if (id == 3) {
// menu2
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 2.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 2.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 2.3 </a>";
document.getElementById("subMenu").style.marginLeft = "20px";
DelayId = id;
}

else if (id == 4) {
//menu3
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 3.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 3.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 3.3 </a>";
document.getElementById("subMenu").style.marginLeft = "22px";
DelayId = id;
}

else if (id == 5) {
//menu4
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 4.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> Submenu 4.2 </a>";
document.getElementById("subMenu").style.marginLeft = "130px";
DelayId = id;
}

else if (id == 6) {
//menu5
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 5.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> Submenu 5.2 </a>";
document.getElementById("subMenu").style.marginLeft = "190px";
DelayId = id;
}

else {
setFolderDefault();
}
}

- Hãy thêm cáo Submenu vào tương tự như code mẫu,
- Đoạn code màu tím chíh là khoảng cách căn lề trái cho các Submenu.(để điều chỉnh cho Submenu hiển thị ngay bên dưới menu chính)
- Sau khi chỉnh sửa xong, save file JS lại và up lại lên host để lấy link.
- Ngoài ra các bạn có thể nhúng thẳng trực tiếp file JS vào code template, như thế sẽ tiện cho việc thêm bớt SubMenu. Tuy nhiên khi nhúng vào chắc chắn nó sẽ báo 1 và lỗi nhất định, vì thế phải modify lại code 1 chút. (do mình không có thời gian nên không test việc này)
- Tuy nhiên để đơn giản các bạn nhúng thẳng code JS của file JS menu-sohoa.js vào chung trong code HTML của thủ thuật (tức là dán vào widget HTML/Javascript) như thế sẽ không bị báo lỗi như nhúng vào code template.

4. Save template.

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

<div class="Menu">
<div class="MarrginTop"></div>
<div class="PaddingLeft"></div>

<a href="http://fandung.blogspot.com"><div id="1" class="menuActive1_1" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menu1"></div>

<a href="#"><div id="2" class="menuDefault2" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="3" class="menuDefault3" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="4" class="menuDefault4" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="5" class="menuDefault5" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="6" class="menuDefault6" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>

<div class="TextSearch">

<form action="http://www.google.com/search" target="_blank" method="get">
<input maxlength="255" style="width: 130px; height:20px; background:#e6e6e6;" value="Nhập từ khóa" name="q" type="text"/>
<input class="seach-button" value="" type="submit"/>
<input checked="checked" value="fandung.blogspot.com" name="sitesearch" type="hidden"/>
</form>

</div>

<div class="HyperLink" id="HyperLink" onclick="displayDiv('MNSubLink');setDelayHiddenDiv('MNSubLink',2000);">
<div style="display: none;" id="MNSubLink" onmouseout="setDelayHiddenDiv(this.id,1000);">
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 1 </div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 2</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 3</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 4</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 5</div>
</div>

</div>
</div>
<div class="bgSubMenu" onmouseover="clearTimeout(t);clearTimeout(t1);" onmouseout="reChangeStyle(DelayId);">
<div class="MenuTime" id="MN1">BlOg - FD | Tips 4 Blogger</div>
<div style="margin-left: 360px;" class="subMenu" id="subMenu"></div>
</div>
</div>


Chúc các bạn thành công
Xem Tiếp ...

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>

<script type="text/javascript">
var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 16)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

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

<script type="text/javascript">
var c = new Array("00", "10", "15", "20", "25", "30",
"35", "40", "45", "50","55", "60", "65", "70", "75", "80", "85", "90", "95", "AA");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 20)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

- 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.
Xem Tiếp ...

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

<!-- Main Menu 1 -->
<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>

<!-- Submenu 1 -->
<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>
<!-- END Menu 1-->

<!-- Main Menu 2 -->

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

<!-- Submenu 2 -->
<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>
<!-- END Menu 2-->

<!-- Main Menu 3 -->
<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>

<!-- SubMenu 3 -->
<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>
<!-- END Menu 3-->

<!-- Main Menu 4-->
<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>

<!-- SubMenu 4 -->
<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>
<!-- END Menu 4-->

</ul>


<script language="javascript" type="text/javascript" src="http://fandung.110mb.com/JS-files/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.
Xem Tiếp ...

Thủ thuật yêu cầu : Tạo thanh HotNews cho blog (sử dụng mootools)

Theo yêu cầu của bạn MiKaNguyen
[FD's BlOg] - Ở thủ thuật trước mình cũng đã giới thiệu cho các bạn 1 thanh Hotnews với việc tự cập nhật bài viết mới theo nhãn hoặc cả blog. Ở thủ thuật đó mình chỉ dùng lệnh marquee để hiển thị các bài viết. Và ở bài này mình sẽ dùng mootools để hiển thị. Với việc dùng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều.


Xem demo : LIVE DEMO

Với việc sử dụng mootools, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.

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 đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://fandung.110mb.com/Hotnews-mootools/mootools.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/Hotnews-mootools/engine_compress.js' type='text/javascript'/>

<script type='text/javascript'>

try {$Gavick;}catch(e){$Gavick = {};};

$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 2,
"animationSpeed" : 250,
"animationInterval" : 5000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>


<style type='text/css'>

#bd {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #000000;
margin-top: 5px;
font-size: 12px;
}

.text {
color:#98BF2F;
margin-left:8px;
}

/* CSS HotNews */

div#news-1 .gk_news_highlighter{
font-family: Verdana, Arial;
font-size: 11px;
color: #666;
}

div#news-1{
width: 960px;
height: 24px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #c51c99;
clear: both;
overflow: hidden;
}

div#news-1 .gk_news_highlighter_wrapper{
float: left;
width: 820px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: relative;
}

div#news-1 .gk_news_highlighter_item{
width: auto;
height: 24px;
padding-left: 20px;
display: none;
position: absolute;
}

div#news-1 .nowrap{
white-space: nowrap;
}

div#news-1 .gk_news_highlighter_title{
padding-left: 5px;
}

div#news-1 .gk_news_highlighter_desc{
padding-right: 5px;
}

div#news-1 .gk_news_highlighter_interface{
float: left;
width: 120px;
height: 24px;
text-align: right;
line-height: 24px;
z-index: 1000;
}

div#news-1 .gk_news_highlighter_interface .text{
float: left;
display: block;
width: auto;
padding-left: 5px;
font-weight: bold;}

div#news-1 .gk_news_highlighter_interface div {width: 30px; float: right;}
div#news-1 .gk_news_highlighter_interface a.prev,
div#news-1 .gk_news_highlighter_interface a.next {
cursor: pointer;
width: 13px;
height: 24px;
display: block;
background: url('http://i342.photobucket.com/albums/o433/bkprobk/play.png') no-repeat 0 50%;
float: left;
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position: -13px 50%;
}

div#news-1 a,
div#news-1 a:link,
div#news-1 a:visited,
div#news-1 a:active,
div#news-1 a:focus {
color: #FFFFFF;}

div#news-1 a:hover {
}

div#news-1 .gk_news_highlighter_interface a.next {
float: right;
background-position: -26px 50%;
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position: -39px 50%;
}
</style>

4. Save template.

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

<div id="bd">
<div class="gk_news_highlighter" id="news-1">
<div class="gk_news_highlighter_interface">

<span class="text">HOT NEWS</span>
<div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
</div>

<div class="gk_news_highlighter_wrapper">

<script language="JavaScript">
imgr = new Array();

showRandomImg = false;
aBold = true;

text = "no";

showPostDate = false;

summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";

label = "Love";
numposts = 10;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://fandung.110mb.com/Hotnews-mootools/post-hotnews.js" type="text/javascript"></script>

</div>

</div>
</div>

- Điều chỉnh lại các code màu đỏ.
- code trên là hiển thị các bài viết mới của blog, nếu muốn hiển thị các bài viết mới theo từng 1 nhãn nhất định thì thay link javascript (ở đoạn code trên) : http://fandung.110mb.com/Hotnews-mootools/post-hotnews.js

thành link này :

http://fandung.110mb.com/Hotnews-mootools/label-hotnews.js

và sửa code label = "Love"; tương ứng với nhãn mà bạn muốn hiển thị bài viết.

Chúc các bạn thành công.
Xem Tiếp ...

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 CSSHTML 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.
Xem Tiếp ...

Slide.com: Chèn ảnh với hiệu ứng đẹp vào Blog và website cá nhân

(danghienIT) - XHTTWebsite: Blog đang là xu hướng của khá nhiều bạn ưa thích tại Việt Nam. Với những người đam mê thì việc trang trí hình ảnh trên blog sao cho hiệu quả, đẹp mắt là điều mà nhiều người hay làm. Với Slide.com, bạn có thể trình diễn ảnh thông qua nhiều hiệu ứng đẹp mắt, trình diễn một slide show trên blog thật dễ dàng chỉ với vài thao tác đơn giản.
Đầu tiên, bạn cần đăng ký một tài khoản miễn phí tại slide.com. Sau khi quá trình đăng ký hoàn tất, bạn có thể đưa hình ảnh lên slide.com và trình diễn. Sau đây là các dịch vụ mà bạn có thể sử dụng sau khi là thành viên của Slide.com 1. Trình diễn hiệu ứng cho nhiều ảnh dưới dạng Slide show. Để trình diễn hiệu ứng cho nhiều ảnh, bạn chọn Make a Slide Show. Tiếp theo, bạn chọn Add Photos From để thêm hình ảnh vào Slide show. Phần customize cho bạn cá nhân hóa các hình ảnh này theo hiệu ứng và theo từng danh mục trình diễn riêng biệt. Với phần Style, bạn có thể chọn từng kiểu trình diễn trong khung Preview. Phần Themes cho bạn chọn các kiểu trình diễn sẵn trong khung chọn với các hiệu ứng kèm theo. Phần Skins cho bạn chọn cách phối màu sẵn có trong Slide.com. Phần Size cho bạn tùy chọn kích thước ảnh khi trình diễn. Phần Privacy cho bạn tùy chọn người xem. Bạn có thể tận dụng các web host hình ảnh miễn phí từ các site khác để rút ngắn thời gian upload ảnh thông qua thao tác chọn danh mục website từ phái trái của mục My Files. Các website được hỗ trợ bao gồm: Flickr, bebo, photobucket…Ngoài ra, bạn cũng có thể sử dụng đường dẫn tập tin hình ảnh để làm silde show này.

2. Upload hình ảnh miễn phí. Để upload hình ảnh miễn phí, bạn chọn tập tin hình ảnh cần upload trong phần Host an Image. Quá trình upload sẽ thực hiện ngay khi bạn chọn xong tập tin. Sau khi chọn tập tin hoàn tất, bạn có thể sử dụng các công cụ tân trang ảnh với ThemePic hoặc dùng tạo slide show hiệu ứng.



3. Tân trang hình ảnh với hiệu ứng đẹp. Phần ThemePic cho bạn thêm hiệu ứng vào từng ảnh đã host. Tương tự như việc tạo hiệu ứng cho nhiều ảnh trên slide show. Việc chọn theme và Skin được tích hợp cho bạn chọn và xem ngay khi chọn để có thể ưng ý trước tác phẩm đã làm.

4. Tạo sổ góp ý (GuessBook) Để tạo một cuốn sổ ghi nhận những đóng góp của người đọc, bạn chọn Make a GuessBook để tạo. Phần Theme và Skin cũng được thêm vào nhằm làm cho nhật ký hình ảnh cùng text của bạn được bắt mắt hơn với hiệu ứng và các template cung cấp sẵn.

5. Cá nhân hóa tập tin Video. Bạn có thể tân trang lại tập tin Video đã upload trên Youtube với hiệu ứng đẹp từ Slide.com với thủ thuật SkinFlix. Để thực hiện, bạn chọn SkinFlix từ khung chính của chương trình, sau đó, bạn đưa đường dẫn của tập tin Video tại YouTube. Bạn chọn hiệu ứng bao gồm Theme, Skin tại khung bên phải để trang trí cách trình bày. Nhất Skin It để tân trang và trình chiếu lại Video với hiệu ứng đẹp mắt. Cách chèn các hiệu ứng đã tạo vào Blog hay website cá nhân.

Sau khi đã thực hiện bất kỳ một hiệu ứng đẹp nào lên hình ảnh, slide show, video…Bạn có thể đem vào blog hay bất kỳ website cá nhân nào có hỗ trợ. Để thực hiện, bạn chỉ cần copy đoạn code cung cấp sẳn trong phần embed bên dưới hay bên phải tác phẩm đã làm để trình diễn trên bất kỳ trang web nào.

Xem Tiếp ...

Tập hợp mã nguồn Html/JavaScript cơ bản cho Blogger

(danghienIT) - Tạo Blog là một trong những trào lưu IT được giới trẻ “yêu chuộng” nhất hiện nay, tạo Blog không quá khó tuy nhiên để có được một Blog thật hay và Pro thì đòi hỏi bạn phải biết nhiều thứ trong đó tùy biến mã nguồn nhúng HTML/JavaScript là một đối tượng vô cùng quan trọng.
Trong loạt bài viết “Những thủ thuật hay cho các Blogger” ở phần 1 này tôi sẽ chia sẽ với các bạn những đoạn mã nguồn HTML/JavaScript chọn lọc; mà nếu làm chủ tốt “nó” Blog của bạn sẽ vô cùng hiện đại và chuyên nghiệp. Bài viết được minh họa trên dịch vụ Blogspot của Google, các dịch vụ Blog khác cũng được tiến hành tương tự.

1. Cách nhúng HTML trên BlogSpot:

o Hiện nay hầu hết tất cả các dịch vụ tạo Blog như BlogSpot, MSN, YahooPlus, Violet… đều hỗ trợ người quản trị cho phép nhúng vào các đối tượng HTML/JavaScipt để thực hiện các tùy biến cao cấp trên Blog.

o Đăng ký tài khoản và tiến hành các bước thiết kế cơ bản cho Blog tại địa chỉ http://www.blogger.com (bạn có thể đăng nhập bằng tài khoản Gmail sẵn có ở đây). Đăng nhập vào quyền quản trị tài khoản > Chọn Layout > Page Elements: trên bố cục của Blog nhấp nút Add a page elements (hay Add a Gadget) ở cột bên phải để bắt đầu lựa chọn đưa vào các đối tượng nhúng (lưu ý: mặc định bố cục của BlogSpot có 2 nút Add a Gadget cho phép thêm đối tượng vào cột bên trái và phần Footer bên dưới; thông thường đối tượng nhúng sẽ ưu tiên vào cột trái).

o Trong cửa sổ Add a Gadget nhấp chọn nút HTML/JavaScript để nhúng vào mã nguồn, xem hình 1.





Hình 1

o Trên hộp thoại Configure HTML/JavaScript kế tiếp: đặt tên cho đối tượng vào khung Title và mã nguồn vào khung Content, xem hình 2.





Hình 2

o Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau này nếu muốn bỏ đi đối tượng đã nhúng nhấp chọn nút Remove)

2. Nhúng một hộp văn bản cuộn vào Blog:

o Thường vị trí của đoạn văn bản cuộn này nên đặt ở vùng Header hay Footer trên giao diện Blog.

o Nhúng đoạn mã nguồn sau vào chức năng Configure HTML/JavaScript của Blog:



<marquee style="color: #FF00FF; font-weight: bold" bgcolor="#F2FBFF"; direction= “left”>++ Chào mừng các bạn ghé thăm Blog của tôi ++ Mong các bạn góp ý để Blog ngày càng phát triển ++</marquee>


o Trong đó: Color (màu chữ), Bgcolor (màu nền hộp văn bản), direction (chiều di chuyển), đối với giá trị các màu sắc nếu không nắm được mã nhị phân tương ứng bạn có thể điền tên màu bằng tiếng anh.

3. Nhúng ngày tháng năm bằng tiếng việt:

o Đoạn mã HTML sau sẽ hiển thị nội dung ngày tháng năm bằng tiếng việt trên Blog.



<script language="" type="text/javascript">

<!-- // Array ofmonth Names

<!-- var monthNames = new Array("một","hai","ba","bốn","năm","sáu","bảy","tám","chín","mười","mười một","mười hai"); -->

var monthNames = new Array("01","02","03","04","05","06","07","08","09","10","11","12");

var dayNames = new Array("Chủ nhật,","Thứ Hai,","Thứ Ba,","Thứ tư,","Thứ Năm,","Thứ Sáu,","Thứ Bảy,")

var now = new Date();

thisYear = now.getYear();

thisDay = dayNames[now.getDay()];

if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem

document.write("Hôm nay : " + thisDay +" "+"ngày"+" "+ now.getDate() + " tháng " + monthNames[now.getMonth()] + " năm " + thisYear);

// -->

</script>
o Dùng chức năng nhúng HTML/JavaScript để tùy biến ở vị trí Header hay bên phải giao diện Blog, xem hình 3.





Hình 3

4. Nhúng bảng dự báo thời tiết vào Blog:

o Đoạn mã HTML sau cho phép nhúng vào dự báo thời tiết của 5 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) trên cả nước theo 3 tiêu chuần quốc tế: nhiệt độ, thời gian và ẩm độ theo nguồn của trang web dự báo thời tiết nổi tiếng quốc tế http://banners.wunderground.com/, xem hình 4.




Hình 4



<p align="center"><img border="0" width="24" src="thoitiet.gif" height="20"/><font size="2"><b>Thời tiết một số địa phương ở nước ta </b></font></p>

<p align="center"> Nhiệt độ - Thời Gian - Độ ẩm </p>

<hr color="#d49f9f" width="95%" size="1"/>

<form action="--WEBBOT-SELF--" method="POST">

<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"

S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->

<p align="center"><font ><b>Hà Nội</b></font></p>

<p align="center">&nbsp;<img alt="Th&#7901;i ti&#7871;t m&#7897;t s&#7889; vùng &#7903; n&#432;&#7899;c ta" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48820.gif" height="41"/></p>

<p align="center"><font ><b>Tp Hồ Chí Minh </b></font></p>

<p align="center"><img alt="Th&#7901;i ti&#7871;t Tp H&#7891; Chí Minh" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48900.gif" height="41"/></p>

<p align="center"><font ><b>Huế</b></font></p>

<p align="center"><img alt="Th&#7901;i ti&#7871;t Hu&#7871;" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48852.gif" height="41"/></p>

<p align="center"><font ><b>Cà Mau</b></font></p>

<p align="center"><img alt="Th&#7901;i ti&#7871;t Cà Mau" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48914.gif" height="41"/></p>

<p align="center"><font ><b>Nha Trang</b></font></p>

<p align="center"><img alt="Th&#7901;i ti&#7871;t Nha Trang" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48877.gif" height="41"/></p>

</form>
o Nếu muốn bỏ đi phần dự báo của Huế thì bạn tìm và xóa đoạn mã tương ứng:




<p align="center"><font ><b>Huế</b></font></p>

<p align="center"><img alt="Th&#7901;i ti&#7871;t Hu&#7871;" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48852.gif" height="41"/></p>

o Lưu ý: tại trang chủ http://banners.wunderground.com/ mỗi một thành phố hay tỉnh của Việt nam có một mã số ảnh riêng, bạn có thể tham khảo ở đây để chèn vào cho phù hợp với đối tượng mà mình muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh là 48852.gif)

5. Chèn quảng cáo cố định ở hai bên giao diện Blog:

o Với đoạn mã này bạn có thể chèn vào các LOGO quảng cáo cho các đối tượng khác nhau ở hai bên cố định của giao diện Blog bằng cách sử dụng liên kết LINK.





<div><font color="#FF0000"size="3">HỖ TRỢ DẠY & HỌC</font></div> <div><hr width=180 align=""</a></div><div><a target="_blank" href="http://butnghien.vn/"> <img border="1" src="http://d.violet.vn/uploads/photo/961562.jpg"width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.google.com.vn/"><img border="1" src
="http://www.google.com.vn/intl/en_com/images/logo_plain.png"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://vn.yahoo.com/"><img border="1" src
="http://l.yimg.com/hb/i/vn/mastheads/logo_vn.png"
width="180" height="55"></a></div><div><a target="_blank"
href="http://translate.google.com.vn/"> <img border="1" src=
"http://www.google.com.vn/intl/vi/images/translate_beta_res.gif"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://vdict.com/?autotranslation/"> <img border="1" src=
"http://vdict.com/templates/user/images/logo.gif"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.srem.com.vn"><img border="1"
src="http://quangtri.edu.vn/image/SREM_BL_d.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www3.tuoitre.com.vn/TuyenSinh/Index.aspx?TopicID=210"><img border="1" src="http://quangcao.tuoitre.com.vn/service/ts2009.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.gdtd.com.vn/"> <img border="1"
src="http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.catlinhschool.edu.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/catlinh.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://tieuhocdanghai.com/"> <img border="1" src="http://www.catlinhschool.edu.vn/Data/Images/Adv/logo.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://toantuoitho.nxbgd.com.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/cs.jpg" width="180" height="55"></a></div> <div><a target="_blank"
href="http://violympic.vn"> <embed border="1" src="http://violympic.vn/images/violympic.swf" quality="high" wmode="transparent" type="application/x-shockwave-flash" width="180" height="60"></embed> </object></a> </div>

o Chú ý: Các link liên kết tới hình ảnh tương ứng phải có thực (tốt nhất bạn nên tự Upload cố định lên Host hay trực tiếp trên Blog), không nên liên kết tới LOGO của trang khác vì rất dễ xảy ra tình trạng chết LINK. Những đoạn Code màu xanh là liên kết tới các hình ảnh đại diện cho đối tượng mà bạn muốn nhúng vào Blog, với đoạn Code này bạn có thể tùy biến thêm vào hay xóa đi các đối tượng một cách thoải mái, xem hình 5.





Hình 5

o Ví dụ: Đối tượng báo giáo dục thời đại trong đoạn Code trên gồm các lệnh:






<div><a target="_blank"
href="http://www.gdtd.com.vn/"> <img border="1"
src=
"http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a></div>




o Trong đoạn Code trên đối tượng VIOLYMPIC có Logo nhúng vào là một File Flash SWF, khi đó ta phải thay đổi mã lệnh nhúng lại cho phù hợp là:





<div><a target="_blank"
href="http://violympic.vn"> <embed border="1" src
="http://violympic.vn/images/violympic.swf"quality="high" wmode="transparent" type="application/x-shockwave-flash" width="180" height="60"></embed> </object></a> </div>


6. Lịch âm dương trên Blog:

o Là người việt nam chắc chắn Blog của bạn sẽ chuyên nghiệp và mang cá tính hơn với một cuốn lịch âm dương hiển thị để khách viếng thăm tiện việc tra cứu, xem hình 6.





Hình 6

o Mã nguồn nhúng vào Blog:





<div class="content">

<center><a name="amlich"></a>

<script language="JavaScript" src="http://mangvn.org/nukeviet/js/amlich.js" type="text/javascript"></script>

<script language="JavaScript">showVietCal();</script>

<script language="JavaScript">document.writeln(printSelectedMonth());</script></center></div>

7. Tạo ComboBox trên Blog:

o Việc nhúng một ComboBox để liên kết nhanh tới các đối tượng khác nhau sẽ giúp bạn tiết kiệm được thời gian thiết kế và không gian hiển thị trên giao diện Blog, xem hình 7




Hình 7

o Mã nguồn:





<SELECT onchange="if (this.value != '#') window.open(this.value, '_blank');" style="font-family: Arial; font-size: 8pt; height: 23; width: 123">

<OPTION selected value=#>Website Liên Kết</OPTION>

<OPTION value=#>--- TIN TỨC ONLINE ---</OPTION>

<OPTION value=http://www.vnexpress.net>Vn Express</OPTION>

<OPTION value=http://www.tuoitre.com.vn>Báo Tuổi Trẻ</OPTION>

<OPTION value=#>--- CNTT Việt nam ----</OPTION>

<OPTION value=http://www.quantrimang.com>Quản trị mạng</OPTION>

<OPTION value=http://www.diendantinhoc.com>Diễn đàn Tin Học</OPTION>

<OPTION value=#>---Bộ máy tìm kiếm---</OPTION>

<OPTION value=http://www.vinaseek.com>Vina Seek</OPTION>

<OPTION value=http://www.google.com.vn>Google</OPTION>

</SELECT>

o Với đoạn Code này bạn cũng có thể Edit lại một cách thật dễ dàng.

8. Nhúng từ điển Anh - Việt vào Blog:

o Với đoạn mã nguồn sau Blog của bạn sẽ được trang bị một quyển từ điển ANH - Việt hết sức chuyên nghiệp.





<script src="http://bea.vn/course/blocks/dictionary_mc/clicksee.js"></script>
<script language="javascript">
function doSearch(obj){
window.open("http://bea.vn/course/blocks/dictionary_mc/dic/search.php?dict=" + obj.dict.value + "&word=" + obj.word.value, "quickview", "status=0,toolbar=0,scrollbars=1,width=500,height=400,location=0");
return false;
}
</script>
<form action="http://bea.vn/course/blocks/dictionary_mc/dic/search.php" style="margin:0px;" target="_blank" name="dictionary" onsubmit="return doSearch(this);" method="post">
<div style="padding-bottom:6px"> Dictionary: <br/>
<select style="font-size: 11px; width: 130px;" name="dict">
<option selected="true" value="ev"/>English - Vietnamese
<option value="ve"/>Vietnamese - English
</select></div>
<div> Enter word:<br/>
<input style="font-size: 11px; width: 87px;" name="word" type="text"/>
<input style="font-size: 11px;" value="Go" name="go" type="submit"/>
</div> </form>
<span style=" font-weight: bold;">© <a href="http://trandaiminhtri.blogspot.com/" target="_blank">Cftanhiep Groups 2009</a></span></p>




o Từ điển Anh Việt hiển thị trên Blog, xem hình 8.





Hình 8

9. Tự tạo hộp tìm kiếm thông tin trên Blog:

o Mặc dù bạn có thể dễ dàng thêm vào Blog Gadget tìm kiếm của Google, tuy nhiên nếu tự tay thiết kế được một công cụ riêng về tìm kiếm thì điều đó sẽ thú vị hơn nhiều, xem hình 9.





Hình 9

o Mã nguồn:





<p align="left">
<form id="searchthis" action="http://trandaiminhtri.blogspot.com/search" style="display:inline;" method="get">
<strong>Search this site<br/></strong>
<input id="b-query" maxlength="255" name="q" size="30" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>


10. Nhúng bảng tỷ giá vàng vào Blog:

o Mã nguồn:





<iframe src="http://www.vietstock.com.vn/Transweb/giavang.htm" width="180" height="150" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

o Hiển thị xem hình 10.





Hình 10

11. Nhúng bảng tỷ giá ngoại tệ cho Blog:

o Mã nguồn:





<iframe src="http://www.vietstock.com.vn/Transweb/tygia.htm" width="180" height="240" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>


o Hiển thị xem hình 11.





Hình 11

12. Nhúng lịch xem truyền hình Việt Nam vào Blog:

o Mã nguồn:





<iframe scrolling="yes" frameborder="1" width="240" src="http://bongda.com.vn/truyenhinh.aspx" height="300"></iframe>

o Hiển thị xem hình 12.





Hình 12

13. Nhúng cảnh đẹp Việt Nam vào Blog:

o Hãy để cho khách viếng thăm cùng đi một tour du lịch Việt Nam cùng với Blog của bạn bằng mã nguồn sau.





1. Nhúng theo mặc định :

<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript" type="text/javascript"></script>

2. Có thể thay đổi kích thước :

<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"></script>

3. Thêm các thông tin về tour du lịch :

<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"&tour=3></script>

4. Thay đổi khoảng thời gian giữa hai bức ảnh :


<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"&speed=2000></script>

o Hiển thị xem hình 13.




Hình 13

(Theo Xahoithongtin)
Xem Tiếp ...