Tin tức Quảng Nam 24h

Home » Archives for tháng 8 2009

Pro TabNews mang phong cách của VnExpress

08:29 |

[FDs BlOg] - Bài viết này mình lại giới thiệu cho các bạn 1 TabNews hiển thị các bài viết mới nhất theo từng nhãn theo phong cách của VnExpress. Điểm nổi bật của thủ thuật này là việc hiển thị random các bài viết theo nhãn mỗi khi reload trang hoặc chuyển trang, thêm vào đó thành Header của TabNews sẽ thay đổi tương ứng với Nhãn được hiển thị bài viết, như vậy sẽ dễ dàng hơn cho người đọc nhận biết được nhãn (chuyện mục)mình đang xem.

Xem demo: LIVE DEMO

Ở TabNews sẽ gồm có các nhãn khác nhau có chung điểm nào đó, ví dụ như ta có các nhãn như :"Ảnh vui, Xe độ, Nghe nhạc,..." có chung 1 điểm là Thư Giãn chẳng hạn. Ngòai ra TabNews còn có phần SumPost là title cho các link liên kết

Hình ảnh minh họa:

- Ngoài ra ở phần Header của TabNews sẽ thay đổi theo đúng với nhãn được hiển thị bài viết (xem hình minh họa bên dưới)

Đối với nhãn "Chuyện Lạ"

Đối với nhãn "Thư Giã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 bên dưới vào trước thẻ đóng </head>

- Thay đổi tên nhãn và link liên kết của nhãn lại cho phù hợp với blog của bạn.

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

<div class="folder">

<div class="folder-title">

<script type='text/javascript'>
document.write(rdlabels[index]);
</script>

<div class="folder-titleright fr"></div>

</div>

<div class="folder-content" id="tdHomeFolder2">

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

☼ Cập nhật yêu cầu của bạn 9xhot:

- Thay vì Header của TabNews sẽ thay đổi mỗi khi Load trang theo đúng như bài viết hiển thị thì ở yêu cầu này phần Header sẽ ko thay đổi, và thay vào đó ta sẽ thêm 1 phần gọi là chuyên mục chính (parentMenu), với các Nhãn được hiển thị sẽ là các chuyên mục phụ (subMenu). Với yêu cầu này thì thủ thuật ở trên sẽ trở nên đơn giản hơn 1 chút.

- Xem demo : LIVE DEMO

Hình minh họa:

☼ Các bước thực hiện cũng tương tự như trê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>

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

<div class="folder">

<div class="folder-title">

<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="#">Giải Trí</a></div>

<div class="folder-activeright fl"></div>

<div class="subfolder fl">
<a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Relax?max-results=10">Thư Giãn</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10">Chuyện Lạ</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Film?max-results=10">Điện Ảnh</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Xe?max-results=10">Xe Độ</a>
</div>

<div class="folder-titleright fr"></div>

</div>

<div class="folder-content" id="tdHomeFolder2">

<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

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

Read more…

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

07:17 |

[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.

Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:

Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

Và thêm code được đánh dấu highlight như bên dưới:

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :

- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code như bên dưới :

e. thêm vào trước nó đoạn code bên dưới:

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

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

Read more…

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

21:46 |

[FD's BlOg] - Với tiêu chí tổng hợp thật nhiều style khác nhau cho tiện ích "Recent posts" hôm nay mình sẽ lại giới thiệu cho các bạn 1 style khác theo phong cách giống trang news.zing.vn . Style này giống với style giống trang vnExpress mà mình đã từng giới thiệu. Trong bài viết này mình có convert lại độ rộng để có thể hiển thị được trên blogspot.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần "Mô tả bài viết (summaryPost)" vào các link ở cột topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :

☼ Các bước thực hiện thủ thuật :
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 thẻ đóng </head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)

- Code màu cam : là độ rộng của ảnh lớn nhất
- Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
- Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news, top2_news, topo_news)
- Xem hình minh họa bên dưới :

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình (kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

4. Save template.

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

- 2 dòng code màu đỏ bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :

thành code bên dưới:

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

Read more…

Tiện ích Recent Comments cho cho 1 bài viết cụ thể

07:29 |

[FD BlOg] - Chúng ta đã từng làm quen với tiện ích Recent Posts with icon của Anhvo (vietwebguide.com), hôm nay mình sẽ giới thiệu lại cho các bạn thủ thuật này, nhưng không phải áp dụng để hiển thị các comments mới của blog mà là các comments mới nhất của 1 bài viết cụ thể nào đó.

Thủ thuật này thích hợp cho việc theo dõi comment của 1 bài viết đặc biệt nào đó trong blog, ví dụ như blog của mình, khu vực "Yêu Cầu thủ thuật" thường xuyên có comment mới, vì thế để dễ dàng theo dõi, mình có thể tạo 1 widget recent comments riêng cho bài viết này.

Đây là hình minh họa mình đã thực hiện cho vài viết "Yêu cầu thủ thuật" :

Như đã nói ở trên, thủ thuật này mình sẽ dùng lại tiện ích "Recent comments with icon" của Anhvo , tuy nhiên mình có vài chỉnh sửa nhỏ.

☼ Để thực hiện thủ thuật này, trước hết bạn phải biết ID của 1 bài viết, để làm điều này, bạn thực hiện các bước như bên dưới :

1. Vào chỉnh sửa bài đăng
2. Nhấp chọn chỉnh sửa bài viết (bài viết mà bạn muốn hiển thị comment)

3. Và bạn có thể thấy ngay ID của bài viết ở ngay trên thanh Address

Trước khi đi vào thủ thuật mình cũng giới thiệu sơ cho các bạn về link RSS comment từng bài viết. Như ta đã biết, link RSS của comment cả blog sẽ có dạng như bên dưới :

http://fandung.blogspot.com/feeds/comments/default

và link RSS comment của 1 bài viết cụ thể sẽ là:

http://fandung.blogspot.com/feeds/1262266524725959138/comments/default

- Code màu đỏ chính là ID của viết (postID)
và đây là ảnh minh họa 1 trang RSS comment của 1 bài viết:

☼ Và cuối cùng là code của thủ thuật :
- Bạn chỉ việc tạo 1 widget HTML/javascript và dán code bên dưới vào là xong :

- Thay đổi các code màu xanh lại cho thích hợp.

☼ Nếu muốn hiển thị các comment mới nhất cho cả blog thì chỉ cần thay code màu đỏ (link file recentcomment-4post.js) thành link bên dưới :

http://data.fandung.com/js/recentcomment-4allpost.js

Mở rộng từ tiện ích "Recent comments with icon" của Anhvo

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

Read more…

Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey

06:49 |

[FD's BlOg] - Mình đã từng giới thiệu với các bạn 2 cách khác nhau để chèn code vào bài viết (cách mã hóa (xem thêm) và cách dùng Javascript (xem thêm)), và bài viết này mình sẽ hướng dẫn thêm 1 cách khác để chèn code vào bài viết, đó là dùng tiện ích từ Greasemonkey. Với thủ thuật này ta sẽ thực hiện trực tiếp trên khung soạn thảo bài viết, và chỉ việc khối code cần post lại rồi click vào button là code được mã hóa. Thủ thuật này rất thích hợp cho các blog thủ thuật như mình.

Sau khi thực hiện, ở khung soạn thảo bài viết của trình duyệt Fire Fox trên máy tính của bạn sẽ có thêm 1 button như hình bên dưới:

Button này sẽ cho phép bạn mã hóa code ngay trong khung soạn thảo bài viết, lưu ý để chế độ soạn thảo là "Chỉnh sửa Html" để mã hóa code.
Khi bạn muốn mã hóa đoạn code nào đó, bạn chỉ việc khối chúng lại rồi click vào button "HTML ENCODE SELECTION" là được, ví dụ như hình minh họa bên dưới:

Trước khi thực hiện thủ thuật, mình xin lưu ý lại là : Muốn thực hiện thủ thuật này, bạn phải dùng trình duyệt web là Firefox. Do vậy, bạn cũng sẽ phải dùngFirefox để sọan thảo bài viết. Và 1 điều nữa là thủ thuật này chỉ hiển thị vớifirefox đã cài đặt tiện ích này.

Nếu bạn nào chưa có cài đặt Firefox thì có thể download ở đây về để cài vào máy của mình.

Bây giờ ta bắt đầu với các bước sau::
☼ Bước 1: Mở trình duyệt Firefox
☼ Bước 2 : Cài đặt Greasemonkey
- Các bạn nhấp vào link bên dưới :
https://addons.mozilla.org/en-US/firefox/addon/748
- Sau đó nhấn vào nút Add to Firefox để cài đặt Greasemonkey cho FireFox. Nếu bạn nào đã cài đặt Greasemonkey thì có thể bỏ qua bước này.(xem hình bên dưới)

- Sau khi cài đặt xong nó sẽ đòi bạn phải restart firefox, nhấn vào nút restart firefox để restart (như hình bên dưới)

Sau khi restart Firefox, một cửa sổ popup hiện lên thông báo "Đã cài đặt Greasemonkey" vào firefox , và bên dưới góc phải của Firefox sẽ có 1 biểu tượng nho nhỏ (như hình bên dưới)

☼ Bước 3 : Cài đặt thủ thuật
- Click vào link bên dưới :
http://userscripts.org/scripts/source/42696.user.js
- Sau khi click vào link của file JS trên, 1 cửa sổ Popup sẽ xuất hiện, và bạn chỉ việc click vào button "Install" để cài đặt (như hình bên dưới)

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

Read more…

Tiện ích Recent posts khá ấn tượng với jQuery

06:54 |

[FD's BlOg] - Ở bài viết này mình sẽ lại giới thiệu 1 style mới cho tiện ích Recent Posts, đó là sẽ tạo thêm button "Xem thêm" bên dưới, khi click vào button này thì sẽ hiển thị thêm các bài viết khác. Với hiệu ứng hiển thị sử dụng từ jQuery. Ngoài việc hiển thị bài viết, ở thủ thuật này mình cũng giới thiệu khung trang trí mẫu cho tiện ích.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

Ở thủ thuật này, khung trang trí mẫu có kích thước cố định, vì thế nếu muốn hiển thị tốt trên blog của bạn, bạn phải chỉnh sửa các hình ảnh của khung mẫu lại cho phù hợp. (Việc chỉnh sửa đơn thuần là dùng các chương trình đồ họa để tăng hoặc giảm kích thước của ảnh)

Bên dưới là 3 file ảnh của khung trang trí, các bạn có thể download về để chỉnh sửa lại :

http://i342.photobucket.com/albums/o433/bkprobk/head.gif
http://i342.photobucket.com/albums/o433/bkprobk/center.jpg
http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg

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

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

<div style="margin: 0pt auto; width: 300px; padding-top: 5px;">

<div style="padding-bottom: 5px;">
<div id="divContainerRight">
<div id="divContainerRightHead" class="clearfix">
<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; font-size:12px;"> 
</div>

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

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

numposts = 10; // số bài viết sẽ hiển thị khi click vào button "Xem thêm"
showposts = 5; // số bài viết sẽ được mặc định hiển thị

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

</script>

<script src="http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-post.js" type="text/javascript"></script>

<div id="ctl00_ContentPlaceHolder1_ucMp3Detail1_ucRelateArtistOnSearch1_divButtonArtistNext" style="margin:0pt auto; width: 270px; text-align: right; cursor: pointer; padding-top: 4px; ">Xem thêm <label style="color:rgb(250, 1, 134);">»</label> </div>
</div>
<div id="divContainerRightFoot"></div>
</div>
</div>

- Nếu muốn hiển thị bài viết theo nhãn nào đó thì các bạn đổi file RP_jQuery-post.js thành file RP_jQuery-label.js.
- Và đây là link của file RP_jQuery-label.js :

http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-label.js

- Gợi ý nhỏ khi hiển thị các bài viết từ nhãn, các bạn có thể chú thích thêm ở phần header của khung như hình bên dưới :

- Để làm điều này, các bạn tìm đến đoạn code như bên dưới (trong code của thủ thuật), và thêm vào đoạn code màu đỏ như bên dưới:

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

Read more…

Trang trí các widget

08:02 |

[FD's BlOg] - Bài viết này mình sẽ hướg dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.

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 CSS bên dưới vào trước dòng ]]></b:skin>

.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}

.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

4. Save template

- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.

- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.

5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :

<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>

<div class="widget_01_content">
Nội dung widget
</div>


<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>

<div class="widget_02_content">
Nội dung widget
</div>

Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.

☼ Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):
- Vào bố cục
- vào chỉnh sửa code HTML
- Nhấp chọn mở rộng mẫu tiện ích
- tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code 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>

- chỉnh sửa lại code trê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 != ""'>

<div class="widget_01_title">
<h5><data:title/></h5>
</div>

</b:if>
<div class='widget_01_content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Save template.

Tham khảo source từ news.zing.vn

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

Read more…

[ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City

10:09 |

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

[FD's BlOg] - Thủ thuật này mình sẽ giới thiệu cho các bạn cách trang trí cho trang chủ của blogspot. Thủ thuật sẽ hiển thị các bài mới theo nhiều nhãn khác nhau ở trang chủ, với bố trí thành các ô , với mỗi ô tương ứng với 1 nhãn khác nhau.

Tham khảo thủ thuật từ template Revolution City
Cập nhật : Fix lỗi trên IE6 (15/8/2009)

Khác với bản DEMO mà mình đã giới thiệu trước, ở thủ thuật hoàn thiện này mình chỉ dùng 1 file JS thay vì 4 file JS như đã giới thiệu trước cho các bạn xem.

Xem DEMO template gốc : Revolution City

Còn đây là bản mình đã test : LIVE DEMO

Hình ảnh minh họa:

Hình ảnh đã test

Hình ảnh từ template Revolution City

Để thực hiển thủ thuật này, các bạn sẽ thực hiện 2 bước như bên dưới :
1. Đầu tiên sẽ là bước "Ẩn bài viết ở trang chủ" :
- Có thể tham khảo thủ thuật này ở đây

2. Sau khi đã ẩn bài viết ở trang chủ, các bạn hãy tạo 1 widget HTML/Javascript ở phần Main và dán tất cả code ở bên dưới vào :

☼ Bây giờ sẽ là 1 hướng dẫn nho nhỏ cho các bạn thực hiện:

- Ở thủ thuật này ta sẽ có 4 ô cho phép hiển thị bài viết mới nhất cho mỗi nhãn, với độ rộng của mỗi ô là 250px, cộng thêm các khoảng căn lề và đường viền thì độ rộng tổng cộng của 1 ô sẽ là 250px + 2*10px + 10px + 2*1px = 283px, như hình bên dưới

- Như vậy muốn cho hiển thị được như trong demo, độ rộng của phần main của bạn tối thiểu phải là 566px. tốt nhất cứ thay đổi độ rộng của class featured (thay đổi giá trị 250px) để việc hiển thị được hợp lý nhất.

- ở mỗi ô sẽ là 1 nhãn, tương ứng với 1 ô sẽ có 3 giá trị sau :
+ label1 = "Love"; : đây là tên của nhãn mà bạn muốn hiển thị vào ô nội dung này. (tên này phải chính xác với nhãn đó)
+ tLabel1 = "Tinh yeu"; : tên hiển thị của link liên kết ở cuối mỗi ô nội dung (có thể thay đổi tùy thích)
+ Title1 = "Love"; : tiêu đề của ô nội dung này.

- Để việc hiển thị được hợp lý. tức là các ô có cùng kích thước, thì mình đã dùng thủ thuật rút ngắn tiêu đề, để các tiêu đề có cùng độ dài, tránh trường hợp tiêu đề của các bài dài ngắn khác nhau sẽ dẫn đến các ô có độ dài khác nhau, như thế trông ko được đẹp cho lắm.

- Còn về phần kích thước của ảnh thumbnail, các bạn có thể tùy chỉnh trong code CSS của class featured img.

Fix lỗi hiển thị không tốt trên IE6

- Do việc dùng 1 file JS nên thủ thuật không hiển thị được trên IE6, để khắc phục lỗi này, mình tạm thời trở lại bản ban đầu, tức mỗi ô nội dung sẽ dùng 1 file JS. Như thế ta sẽ có 4 file JS
- Để khắc phục điều này, các bạn chỉ cần thay đoạn code bên dưới :

thành code bên dưới :

- Do mình không có thời gian nên tạm thời chỉ có thể fix lại như vậy, sau này sẽ có cách khắc phục tốt hơn.
Chúc các bạn thành công.

Read more…

[ Yêu cầu ] Tạo menu giống trang phununet.com

07:05 |

Theo yêu cầu của bạn vnbook.tk (vnbook.tk)

[FD's BlOg] - Tiếp tục loạt bài về tạo thanh menu cho blogspot, hôm nay mình lại giới thiệu cho các bạn 1 style menu khác nữa. Với thanh menu này ta sẽ dùng đến jQuery. Đặc điểm của style menu này là mỗi Menu chính sẽ có 1 màu nền riêng, và có các submenu nằm ngay bên dưới sẽ hiển thị khi rê chuột vào (tương tự như các menu VnE mà mình đã giới thiệu).

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 đoạn code bên dưới vào trước thẻ đóng </head> (nếu chèn đoạn code JS bên dưới vào trong code template nó báo lỗi thì hãy chèn thẳng nó vào trong widget HTML/javascript chứa code của thủ thuật)

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

Code màu cam trong đoạn code trên là để tùy chỉnh độ rộng của các menu chính cho phù hợp với với tên hiển thị của các menu chính. Như trong bản demo, mình đều dùng chung kích thước là 56px.

Code màu xanh chính là màu nền của menu chính.
Code màu đỏ là để liên kết với SubMenu
-->



</div>

<div class="horizontalbar" style="background: rgb(0, 98, 189) none repeat scroll 0% 0%; overflow: hidden; height: 5px; z-index: 1000000000;"></div>

</div>



<div style="overflow: hidden; height: 27px; clear: both; color: rgb(51, 51, 51); width: 100%; text-align: right; background-image: url(http://farm4.static.flickr.com/3448/3811418642_f21be69ed6_o.png); background-repeat: repeat;" id="divSubMenu">

<div id="DDSub0" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 480px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="http://www.fandung.com/feeds/posts/default">RSS posts</a> | <a href="http://www.fandung.com/feeds/comments/default">RSS Comments</a>
</div>
</div>

<div id="DDSub1" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 488px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 1.1</a> | <a href="#">Sub 1.2</a> | <a href="#">Sub 1.3</a>
</div>
</div>

<div id="DDSub2" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 430px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 2.1</a> | <a href="#">Sub 2.2</a> | <a href="#">Sub 2.3</a>
</div>
</div>

<div id="DDSub3" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 372px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 3.1</a> | <a href="#">Sub 3.2</a> | <a href="#">Sub 3.3</a>
</div>
</div>

<div id="DDSub4" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 312px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 4.1</a> | <a href="#">Sub 4.2</a> | <a href="#">Sub 4.3</a>
</div>
</div>

<div id="DDSub5" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 255px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 5.1</a> | <a href="#">Sub 5.2</a> | <a href="#">Sub 5.3</a>
</div>
</div>





</div>



<script>
menuInit();
</script>

</div>

- Chú ý đoạn code màu tím, đây chính là code để căn cho các SubMenu nằm ngay bên dưới Menu chính (đây là lệnh căn lề phải, các bạn điều chỉnh lại để cho các Submenu dược hiển thị tốt nhất)

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

Read more…

Bình luận

Download

Popular Posts

Market information

Blog Archive

Pro TabNews mang phong cách của VnExpress

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

Tiện ích Recent Comments cho cho 1 bài viết cụ thể

Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey

Tiện ích Recent posts khá ấn tượng với jQuery

Trang trí các widget

[ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City

[ Yêu cầu ] Tạo menu giống trang phununet.com

Top Hot

ADS

Welcome to HelloXimo.com

Yahoo: nguagovt

Email: nguagovt@gmail.com

My site: www.helloximo.com