Tạp chí thời trang và làm đẹp

Home » Archives for 2009

Hiển thị ngày đăng cho các bài viết xuất bản cùng ngày

18:49 |

Như các bạn đã biết, ở blogger, khi ta xem các trang như trang Home, Label, Archive thì ngày đăng bài viết (date-header) chỉ được hiển thị với bài viết mới nhất của ngày đó, còn các bài viết cũ hơn trong ngày đó sẽ không được hiển thị. Dưới đây mình sẽ hướng dẫn 1 cách để hiển thị ngày đăng ở các bài khác cùng ngày.

Đây là thủ thuật khá đơn giản, các bạn chỉ cần thực hiện các bước bên dưới :
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. Tìm đoạn code bên dưới :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

5. Và thay thế nó bằng đoạn code bên dưới :

<b:if cond='data:post.dateHeader'>
<script>var sameDay = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(sameDay);</script>
</h2>
</b:if>

6. Save template.

Thủ thuật tham khảo từ blog : blogspottutorial.com

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

Read more…

Hiệu ứng thay đổi tiêu đề cho blog theo thời gian

09:18 |

Theo yêu cầu của bạn TOBU

Đôi khi các tiêu đề blog của bạn quá dài và nó không thể hiển thị được hoàn toàn trên thanh Navigation của trình duyệt web. Để khắc phục điều này ta có thể thay thế bằng các tiêu đề ngắn gọn, xúc tích. Hoặc cũng có thể tạo hiệu ứng chạy chữ cho các tiêu đề dài (cách này khá phổ biến). Hôm nay mình sẽ giới thiệu cách khác để khắc phục điều này. Đó là hiệu ứng thay đổi tiêu đề bài viết theo thời gian.

Thủ thuật này mình không có kèm hình minh họa, các bạn có thể xem demo ở đây : http://www.thuthuatpc.info/

Để thực hiện thủ thuật này, chúng ta chỉ cần chèn 1 đoạn script nhỏ vào trong code template là xong. Bên dưới 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 Javascript bên dưới vào trước thẻ đóng </head>

- Thay đổi các code màu xanh thành các tiêu đề mà bạn muốn hiển thị.
- if (step==6) {step=1} :đây là đoạn code để quay về vòng lặp. nếu bạn có 10 tiêu đề, thì sửa nó lại thành if (step==11) {step=1}
- setTimeout("flash_title()",700);} : đây là code điều chỉnh thời gian giãn cách giữa 2 tiêu đề (đơn vị là ms)
4. Save template.

Tham khảo thủ thuật từ website : thuthuatpc.info

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

Read more…

Hiển thị widget khi xem các bài viết của 1 nhãn nhất định

08:33 |

Bài viết hôm nay mình sẽ giới thiệu cho các bạn việc tùy chỉnh để 1 widget nào đó chỉ được phép hiển thị khi bạn vào xem 1 bài viết của 1 nhãn nào đó. Đây là 1 thủ thuật mà có một số bạn đã có nhờ mình, nhưng khi đó mình chưa trả lời được, nên bây giờ mới cho "ra lò". Mở rộng thủ thuật này ra ta có thể áp dụng cho tác giả của bài viết. Ví dụ tác giả A sẽ hiển thị widget A...

Hình ảnh minh họa :

Khi xem ở 1 trang bài viết
(ở hình minh họa là bài viết thuộc nhãn Love)

Khi xem ở trang chủ

Thủ thuật : các tiện ích được chọn sẽ mặc định được ẩn đi, khi bạn vào xem 1 bài viết nào đó, nếu lệnh lặp nhãn (Label) tìm thấy nhãn đã chỉ định thì tiện ích sẽ được hiển thị.

☼ Các bước thực hiện :
1. Xác định ID của widget cần thực hiện. (các bạn có thể tham khảo cách xem ID ở bài viết này : http://www.fandung.com/2009/09/huong-dan-tao-1-page-cho-blogspot.html)

2. Sau khi đã xác định được ID của widget cần thực hiện, các bạn làm tiếp theo các bước 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. chèn đoạn code CSS bên dưới vào trước thẻ đóng </head>

- Với HTML3 là ID của widget cần thực hiện.
e. tiếp tục tìm đoạn code tương tự như thế này :

f. và thêm đoạn code được đánh dấu highlight như bên dưới :

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:label.name == "love"'>
<style type='text/css'>
#HTML3 {display:block;}
</style>
</b:if>
</b:if>

</b:loop>
</b:if>
</span>

- Với love : chính là nhãn của bài viết muốn hiển thị widget
- HTML3 : là ID của widget.

- Code màu đỏ ở trên chính là để loại bỏ các trang có chứa nhãn muốn thực hiện. Ví dụ như trang chủ, trang archive hoặc trang label có các bài viết có nhãn muốn thực hiện, nếu không có lệnh này thì tiện ích vẫn sẽ hiển thị. Do khi bạn xem các trang này thì các nhãn đã được quét, chỉ cần thấy nhãn muốn thực hiện thì tiện ích sẽ hiển thị ngay.

g. Save template.

* Lưu ý :

- Khuyết điểm của thủ thuật này là cho dù tiện ích được ẩn nhưng nó vẫn sẽ được load, chỉ khi bạn tác động trực tiếp vào trong code của widget thì nó mới không load, còn dùng lệnh display:none; thì nó sẽ vẫn load nhưng chỉ không hiển thị mà thôi.
- Điều thứ 2 nữa là khi dùng cách này thì tiện ích sẽ không hiển thị trong phần Bố cục -> Phần tử trang ở Bảng điều khiển, chính vì thế nếu muốn chỉnh sửa nội dung của nó, bạn phải thực hiển điều này ngay trên giao diện của blog.

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

Read more…

PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts

08:23 |

Theo yêu cầu của bạn letrannguvu

[FD's BlOg] - Bài viết này mình sẽ lại giới thiệu 1 style khác cho tiện ích recent posts theo yêu cầu của letrannguvu. Đây là 1 style mang phong cách 1 cuốn sách, được mình modify từ trang phunuonline.com.vn. Đây cũng là 1 trong những style khó chịu, vì thế mà mình cũng tốn khá nhiều thời gian để chỉnh sửa cho phù hợp với khung mẫu của blogspot.

Các bạn có thể xem demo ở đây : LIVE DEMO

Thủ thuật tạm thời đã bi thất lạc, mình sẽ code lại sau

Hình ảnh minh họa :

Như ở trên mình có nói là thủ thuật này mình có chỉnh sửa đôi chút cho phù hợp với blogspot. Thứ nhất là về khung ảnh mẫu, mình đã chỉnh lại nhỏ hơn, tầm 500px cho vừa với khung bài viết của blogspot. Thứ 2 trong thủ thuật gốc chỉ hiển thị cố định 5 bài viết, ở đây mình có thêm 1 chút code để hiển thị được nhiều hơn.

☼ Để thực hiện, các bạn tạo 1 widget HTML/Javascript và dán toàn bộ code của thủ thuật vào.
- Dưới đây là toàn bộ code của thủ thuật :

<style type="text/css">
.homeTop,.dd-homeTop{
width:500px;
}
.homeTop .topnews{
height:210px;
background:url('http://i342.photobucket.com/albums/o433/bkprobk/bg-phunu-rc.gif') no-repeat;
margin-left:0px;
padding-left:5px;
}
div.topnews div.topnewsImg{
width:265px!important;
float:left;
padding-top:20px;
}
.topnews div.topnewsImg a{
padding:0px 0px 0px 15px;
display:block;
}
.topnewsImg img{
border:0px;
width:200px;
height:160px;
}
div.topnews div.topnewsCont div{
float:left;
width:215px!important;
}
div.topnews div.topnewsCont{
float:left;
width:215px!important;
padding-top:15px;
}
.topnewsTitle{
color:#fff;
font-size:1px;
padding:10x 0px 7px 0px;
font-weight:bold;
}
.topnews-title{
font-weight:bold;
padding-bottom:5px;
font-family:Arial;
}
div.topnews-title a,div.topnews-title a:link, div.topnews-title a:visited{
color:#457a02;
font-size:17px;
text-decoration:none;
}
div.topnews-title a:hover{
color:#d00;
text-decoration:none;
}
.topnews-des{
color:#000;
height:125px;
overflow:hidden;
font-family:Arial!important;
font-size:13px!important;
font-weight:normal!important;
}
.topnews-des p, .topnews-des strong, .topnews-des b, .topnews-des span{
padding:0px;
margin:0px;
font-weight:normal;
}
.topnews-other{
color:#a2adb0;
padding-top:0px;
padding-right:30px;
float:right;
}
.topnews-pre{
padding-left:5px;
}
.topnews-next{
padding-left:5px;
}
.topnews-other img{
cursor:pointer;
padding:3px 5px;
border:0px;
}
</style>



<div class="homeTop">
<div class="topnews">
<div>
<script type="text/javascript" src="http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-Resource.js"></script>

<div id="fd_Div" style="overflow: hidden; position: relative; height: 175px; width: 500px;">
<div id="fd_FrameContainer" style="position: relative; width: 500px; top: 0px; left: 0px;">

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

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

fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";

showRandomImg = true;

fntsize = 12;
acolor = "#555";
cmcolor = "#555";
aBold = true;

text = "no";
showPostDate = false;

summaryPost = 120;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 6;

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

</script>
<script src="http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-recentpost.js" type="text/javascript"></script>

</div>
</div>

<script type="text/javascript">
window["fd"] = new RadRotator('fd',1);
window["fd"].AutoAdvance = 1;
window["fd"].FrameTimeout = 5000;
window["fd"].RotatorMode = 'Slideshow';
window["fd"].NumberOfFrames = 6;
window["fd"].PauseOnMouseOver = 1;
window["fd"].HasTickers = 0;
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5');
window["fd"].UseRandomSlide = 0;
window["fd"].UseTransition = 0;
window["fd"].Start();
</script>

</div>

<div class="topnews-other">

<span class="topnews-pre"><img src="http://i342.photobucket.com/albums/o433/bkprobk/iconPre.gif" onclick="fd.ShowPrevFrame()"></span>
<span class="topnews-next"><img src="http://i342.photobucket.com/albums/o433/bkprobk/iconNext.gif" onclick="fd.ShowNextFrame()"></span>
</div>

</div>
</div>

- Thay đổi các code màu tím cho phù hợp (phần này khác quen thuộc, nên mình sẽ đi qua).
- Bây giờ tới phần chính của thủ thuật, bây giờ các bạn sẽ chú ý tới các đoạn code màu đỏ. Code này chính là điểm khác biệt so với khác style khác của tiện ích recent Posts. Chúng ta thấy có 4 vùng được tô đỏ, trong đó :

+ numposts = 6; và code window["fd"].NumberOfFrames = 6; : đây là 2 đoạn code điều chỉnh số bài viết sẽ được trình diễn.
+ Mảng :
fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
và mảng :
window["fd"].FrameIdArray = new Array('fd_frame0','fd_frame1','fd_frame2','fd_frame3','fd_frame4','fd_frame5');

hai mảng này chính là code để điều chỉnh số frame sẽ được hiển thị. Nếu bạn cho phép hiển thị 10 bài viết mà quên điều chỉnh lại các mảng này, thì số bài viết sẽ hiển thị sẽ không phải là 10.

Việc chỉnh sửa 2 mảng này rất đơn giản, ở trong code mẫu là dùng cho hiển thị 6 bài viết, nếu bạn muốn hiển thị 10 bài thì sửa lại code của 2 mảng như bên dưới :

fd_frame = new Array();

fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
fd_frame[6] = "fd_frame6";
fd_frame[7] = "fd_frame7";
fd_frame[8] = "fd_frame8";
fd_frame[9] = "fd_frame9";

mảng thứ 2
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5', 'fd_frame6', 'fd_frame7', 'fd_frame8', 'fd_frame9');

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

Read more…

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

10:14 |

Theo yêu cầu của 1vn.biz

[FD's BlOg] - Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.
Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.

Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Hình ả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 mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>

.post-icon img {
height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */
float:left;
margin-right:8px;
}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

6. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "Label 1"'>
<img src='Link ảnh 1'/>
</b:if>

<b:if cond='data:label.name == "Label 2"'>
<img src='Link ảnh 2'/>
</b:if>

</b:loop>
</b:if>
</div>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == "Label 3"'>
<img src='Link ảnh 3'/>
</b:if>

<b:if cond='data:label.name == "Label 4"'>
<img src='Link ảnh 4'/>
</b:if>

7. Save template.

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

Read more…

Hướng dẫn hiển thị avatar cho comment của Blogger (mở rộng)

22:49 |

[FD BlOg] - Như chúng ta đã biết Blogger đang chuẩn bị kỉ niệm 10 năm ngày blogger ra đời, chính vì thế mà gần đây blogger liên tục tung ra những tiện ích mới cho blogspot. Mới đây nhất là tiện ích hiển thị ảnh avatar cho comment từ các ảnh profile của các tài khoản từ blogger.

Việc hiển thị ảnh avatar này sẽ chỉ cập nhật cho các blog mới được tạo, các blog đã được tạo từ lâu, và qua chỉnh sửa template nhiều (như blog của mình) thì muốn hiển thị avatar cho comment thì các bạn phải chỉnh sửa đôi chút trong code template.

Ở thủ thuật này, ngoài việc chỉnh sửa code để có thể sự dụng chức năng ảnh avatar thì mình còn hướng dẫn thêm cho các bạn tạo avatar mặc định cho comment không có avatar. Do hiện tại tiện ích mà blogger cung cấp chỉ cho phép hiển thị ảnh avatar của các tài khoản blogger, vì thế những comment từ các tài khoảng khác sẽ không hiển thị được ảnh avatar, và avatar mặc định sẽ lấp đầy chỗ thiếu hụt đó.

Và đây là ảnh minh họa avatar cho comment.

☼ Để hiển thi được avatar cho các comment, các bạn thực hiện 2 bước sau:
1. Tùy chỉnh trong phần cài đặt :
- bước này không quan trọng lắm, vì blogger đã mặc định chế độ hiển thị ảnh avatar cho comment rồi, tuy nhiên chúng ta cũng nên kiểm tra lại.
- vào bảng điều khiển
- vào phần cài đặt
- vào phần nhận xét
- ở phần "Hiển thị các hình hồ sơ trên các nhận xét?" nhấp chọn "Có"
- Lưu cài đặt

Ảnh minh họa :

2. Chỉnh sửa trong code template:

- Ở đây mình sẽ dùng 1 cách rất đơn giản để tạo avatar default cho các comment không có avatar, đó chính là việc sử dụng ảnh nền (background), khi các comment có ảnh avatar, ảnh avatar sẽ đè lên hình nền, còn các comment không có avatar thì sẽ hiển thị ảnh nền, và hình nền hiển thị này chính là ảnh avatar thay thế.

☼ Các bước thực hiện :
a. vào phần bố cục
b. vào chỉnh sửa code HTML
c. Chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif); width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

e. Tiếp đến tìm đoạn code sau :

f. và thay thế nó bằng đoạn code bên dưới :

g. tiếp tục tìm đoạn code như bên dưới :

h. và thay thế bằng đoạn code bên dưới :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

i. Save template.

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

Read more…

Ẩn phần comment cho 1 bài viết nhất định

08:54 |

[FD's BlOg] - Với thủ thuật đơn giản này ta sẽ ẩn toàn bộ phần comment cho 1 bài viết nhất định nào đó. Tức là sẽ không cho phép hiển thị hay post comment. Thích hợp cho các bạn tạo thêm các trang từ bài viết cho blog. Thủ thuật này cũng là thủ thuật yêu cầu của 1 blogger đã nhờ mình qua yahoo.

Khi bạn muốn tạo 1 trang nào đó cho blog, ta chỉ có thể tạo từ việc soạn thảo thêm 1 bài viết mới. Tức là biến 1 bài viết thành 1 trang cho blog. Ví dụ khi bạn muốn tạo 1 trang nào đó, để cho trang này trông pro hơn, các bạn có thể lược bỏ các phần như : tiêu đề, label, comment, footer của bài viết... nó chung chỉ giữ lại phần nội dung của bài viết, khi đó nội dung của bài viết chính là nội dung của page đó. Ví dụ tạo trang contact, khi lược bỏ hết các phần đó, ta sẽ chỉ còn lại form liên hệ.

Đó là 1 số giới thiệu nhỏ cho việc tạo các trang cho blog. Bây giờ ta sẽ vào phần chính của thủ thuật này.

Hình ảnh minh họa :

Trang đã ẩn phần comment

Trang khác

☼ Để thực hiện các bạn thực hiện các bước quen thuộc bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Thêm đoạn code bên dưới vào sau dòng code ]]></b:skin>

Nếu muốn ẩn phần comment cho nhiều bài khác nhau thì bạn dùng code như bên dưới :

Đối với các template đã qua convert (chỉnh chỉnh sửa lại), có thể id của phần comment không phải là comments, vì thế nếu code template của bạn nào ko có id này thì hãy xác định lại cho đúng id của phần comment.

4. Save template.

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

Read more…

[ Yêu cầu ] : 1 style phân trang (Navigation page) khá đẹp mắt cho blogspot

10:15 |

Theo yêu cầu của bạn Trần Tuấn (suckhoe24h.blogspot.com)

[FD's BlOg] - Trước kia mình có giới thiệu cho các bạn 1 thủ thuật tạo thanh phân trang cho blogspot, bài viết này cũng sử dụng cách tương tự để tạo thanh phân trang, nhưng chỉ khác ở giao diện hiển thị mà thôi.

Xem demo ở blog này : blogger-templates-designs.blogspot.com

Do bài viết này dùng thủ thuật tương tự như thủ thuật cũ mà mình đã đăng, vì thế các bạn có thể tham khảo thêm thủ thuật cũ ở đây nếu có gì không hiểu.

Hình ảnh minh họa :

☼ Để đơn giản các bạn hãy tạo 1 widget HTML/javascript (tốt nhất nên tạo widget nằm ở phía dưới phần main trong bố cục) và dán code bên dưới vào :
- Thực hiện với cách chèn tất cả code của thủ thuật vào 1 widget giúp ta dễ dàng tháo gỡ nó khi không còn dùng nữa. Ngoài ra nếu bạn không thích thực hiện theo cách này thì có thể chèn vào code template. Thực hiện với cách này bạn có thể tham khảo ở thủ thuật cũ.

<style type="text/css">
.showpageArea {padding: 10px; color:#003366;text-align:left;width:530px;
}
.showpageArea a {
float:left;
text-align:center;
display:block;
margin:0 5px;
color:#333;
}
.showpageArea a:hover {
color:#333;
margin:0 5px;
}
.showpageNum a { background: url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 0;
width:37px;
height:42px;
display:block;
text-align:center;
float:left;
margin:0 5px;
padding-top:6px;
text-decoration:none;
color:#333;
}
.showpageNum a:hover { background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
color:#FFF;
}
.showpagePoint {background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
width:37px;
height:42px;
display:block;
float:left;
text-align:center;
margin:0 5px;
padding-top:6px;
font-weight:bold;
color:#FFF;
}
.showpageNum a:link, .showpage a:link {
text-decoration:none;
color:#cc0000;
}
.showpageupPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpageupPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/provup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}
.showpagedownPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/backbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpagedownPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}

.pagenextprov {
text-align: center;
}
</style>





Link file : code-navigation.txt

- 1 chút chia sẻ : nên upload lại các ảnh có trong thủ thuật lên 1 host ảnh khác, để tránh trường hợp nhiều người dùng chung sẽ hết bandwidth. Dạo này photobucket hay gặp trường hợp hết bandwidth.

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

Read more…

Code đếm số lượt download

04:37 |

[FD's BlOg] - Lang thang trên mạng 1 hồi mình có tìm thấy 1 trang web hỗ trợ việc đếm số lượt download. Nên cũng post lên giới thiệu cho mọi người. Đây cũng là 1 dạng của bộ đếm số đếm số lượt click. Và thủ thuật này bạn sẽ phải thực hiện thủ công cho từng link download mà bạn muốn hiển thị.

Có thể xem demo ở ngay trên blog của mình.

Đây cũng chính là yêu cầu của 1 bạn mà đã nhờ mình từ lâu, nhưng giờ mình mới giải đáp được.

Hình ảnh minh họa:

Ở hình minh họa trên ta thấy có số lượt đếm là -1, đó là do file đó chưa được download lần nào.

☼ Và đây là code của thủ thuật :

<a href="http://dstats.net/download.php?file=http://yourhost.com/yourfile.rar" target="_blank">yourfile.rar</a> ( đã tải : <script src="http://dstats.net/dstatsjs.php?file=http://yourhost.com/yourfile.rar" type="text/javascript"></script><script type="text/javascript">document.write(dsCounter);</script> lần )

- Thay code màu xanh thành link file của bạn, ví dụ http://www.mediafire.com/?jezhyztiawz
- Code màu cam là tên hiển thị của file download.

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

Read more…

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

19:32 |

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.

Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:

Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
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. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

6. Save template.

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

Read more…

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…

Xem nhiều trong tuần

Giới thiệu về tôi

Tạp chí thời trang và làm đẹp

Lưu trữ Blog

Hiển thị ngày đăng cho các bài viết xuất bản cùng ngày

Hiệu ứng thay đổi tiêu đề cho blog theo thời gian

Hiển thị widget khi xem các bài viết của 1 nhãn nhất định

PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Hướng dẫn hiển thị avatar cho comment của Blogger (mở rộng)

Ẩn phần comment cho 1 bài viết nhất định

[ Yêu cầu ] : 1 style phân trang (Navigation page) khá đẹp mắt cho blogspot

Code đếm số lượt download

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

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

Top Hot