Cập nhật yêu cầu của bạn Tài (roboonline.tk)- (1/7/2009)

[FD's BlOg] - Bài viết này mình sẽ giới thiệu cho các bạn 1 style khác của tiện ích Recent posts. Bài viết này cũng tương tự dạng hiển thị theo gallery, nhưng ở bài này mình chỉ cho nó hiển thị trên cùng 1 hàng, mang phong cách tương tự như trang mp3.zing.vn.

Xem demo ở đây : http://data.fandung.com/blog/demo/news-recent/zingnews.html

Ở bài viết này mình chỉ hiển thị ảnh thumnail và tiêu đề bài viết, như thế sẽ hợp lý hơn cho tab.

Hình ảnh minh họa:

Hình ảnh từ trang mp3.zing.vn

Hình ảnh từ thủ thuật này

Rút kinh nghiệm từ các thủ thuật trước, ở thủ thuật này mình đã đổi lại tất cả các biến thay thế trong code JS, để tránh gây ra xung đột.

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

<style type="text/css">

#zart {
height:108px;
margin-right: 3px;
float:left;
width:100px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#z-title {
height:40px;
}

#z-content {
height:50px;
padding-top:5px;
}

#z-news {
height:120px;
background:#ccc url(http://farm4.static.flickr.com/3656/3677502552_3f0c38be7d_o.gif) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left: 30px;
}
</style>

<div id="z-news">
<script language="JavaScript">
imgr = new Array();

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


showRandomImg = true;

zimgwidth =100;
zimgheight =70;
zfntsize = 12;
zacolor = "#555";
zaBold = true;

text = "no";
showPostDate = false;

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

</script>
<script src="http://data.fandung.com/blog/demo/news-recent/zart-label.js" type="text/javascript"></script>

</div>

- Các bạn hãy tùy chỉnh lại kích thước và màu sắc của các khung (tùy chỉnh code CSS) cho phù hợp với blog của bạn. (xem hình minh họa bên dưới để hiểu rõ hơn)

- Nếu muốn hiển thị bài viết mới của cả blog thì các bạn đổi link JavaScript thành link bên dưới:

http://data.fandung.com/blog/demo/news-recent/zart-post.js

☼ Style 2 : Hiện thị tiêu đề khi rê chuột vào ảnh (Yêu cầu của bạn Tài - Roboonline.tk)
- Theo như yêu cầu, style thứ 2 này sẽ có chỉnh sửa đôi chút. Thay vì tiêu đề luôn hiển thị thì giờ nó chỉ hiển thị khi rê chuột vào ảnh. Thủ thuật này mình từng gặp ở hiệu ứng jQuery, nhưng ở bài viết này mình sẽ không sử dụng nó, thay vào đó mình sẽ chỉ sử dụng CSS, như thế nó sẽ nhẹ hơn.

- Xem demo ở đây : http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zingnews.html

Hình ảnh minh họa:

- Các tùy chỉnh tương tự style ban đầu. Chỉ có thêm phần hiển thị tiêu đề bài viết, chiều cao của vùng hiển thị này sẽ phụ thuộc và độ dài của tiêu đề bài viết, do đó bạn hãy tùy chỉnh các kích thước sao cho hợp lý nhất. Để tùy chỉnh vùng hiện thị tiêu đề, các bạn có thể điều chỉnh trong phần code CSS của class zmota:hover span trong code bên dưới :

và đây là code của style này :

<style type="text/css">
#zart {
height:108px;
margin-right: 3px;
float:left;
width:100px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#z-title {
height:40px;
}

#z-content {
height:50px;
padding-top:5px;
}

#z-news {
height:120px;
background:#ccc url(http://farm4.static.flickr.com/3656/3677502552_3f0c38be7d_o.gif) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left: 30px;
}

.zmota{
position: relative;
z-index: 0;
text-decoration:none;
}

.zmota:hover{
background-color: transparent;
z-index: 50;
}

.zmota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #fff;
text-decoration: none;
font-family:arial;
font-size:11px;
}

.zmota span img{
padding: 0px;
text-decoration: none;
}

.zmota:hover span{
padding:2px 5px 2px 5px;
visibility: visible;
bottom: 0px;
left:0px;
width:90px;
background:#000;
line-height:15px;
}
</style>

<div id="z-news">
<script language="JavaScript">
imgr = new Array();

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


showRandomImg = true;

zimgwidth =100;
zimgheight =100;
zaBold = true;

text = "no";
showPostDate = false;

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

</script>
<script src="http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-label.js" type="text/javascript"></script>

</div>

- Code trên là dùng cho từng nhãn, nếu muốn hiển thị bài viết của cả blog thì các bạn đổi link Javascript ở trên lại thành link bên dưới:

http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-post.js

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

Read more…

[FD's BlOg] - Thông thường việc hiển thị ảnh và văn bản trên cùng 1 hàng chỉ dùng để trang trí các list hay danh sách nào đó. Và phổ biến nhất là dùng các đoạn code CSS, như thế tiện hơn. Đó là sử dụng chung và đồng nhất, còn việc sử dụng riêng lẻ thì sao?, ví dụ khi ta muốn chèn 1 ảnh icon nhỏ vào trước 1 menu hay 1 dòng nào đó.

Thông thường khi ta chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó thì ảnh sẽ nằm lệnh so với các đoạn văn bản, ví dụ như bên dưới :

ĐOẠN VĂN BẢN

Ta thấy là lề dưới của ảnh và đoạn văn bản được căn trùng nhau, như thế trông hơi bị lệch.

Việc này thì sẽ dễ dàng khắc phục khi ta dùng lệnh background, ví dụ như bên dưới:

ĐOẠN VĂN BẢN

Tuy nhiên khi dùng lệnh background ta phải sử dụng lênh padding để căn lề, nếu không dùng lệnh padding ta sẽ có kết quả như bên dưới :

ĐOẠN VĂN BẢN

Như thế ta sẽ thấy quá phức tạp khi phải dùng CSS chỉ để chèn 1 ảnh nhỏ vào trên cùng 1 hàng với các đoạn văn bản. Có 1 cách đơn giản hơn nhiều đó là ta sử dụng trực tiếp lệnh align cho thẻ img, như thế ta hoàn toàn có thế căn lề cho ảnh và cho đoạn văn bản.

Ví dụ :
1. Ảnh và văn bản nằm cân đối trên 1 hàng :
ĐOẠN VĂN BẢN

Để làm điều này ta chỉ cần chèn đoạn code màu đỏ vào trong thẻ img là được:
CODE:

<img src="link ảnh" align="middle" />

2. Ảnh và văn bản được căn lề trên trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="top" />

3. Ảnh và văn bản được căn lề dưới trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="bottom" />

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

Read more…

[FD's BlOg] - Lần trước mình có test 1 cái jQuery cho tiện ích Recent posts, tuy là có chạy, nhưng không ổn định. Và lần này mình lại test một hiệu ứng khác của jQuery, và lần này đã thành công. Hiệu ứng jQuery này mình khai thác từ template Tribune trong 1 lần giải đáp thắc mắc cho 1 blogger.

Thủ thuật này cũng tương tự như cái hiệu ứng lần trước mà bạn LouLou có nhờ mình. Nhưng cái jQuery mà Loulou nhờ mình hơi khó nên chưa áp dụng được cho tiện ích Recent posts. Tuy nhiên bạn LouLou vẫn có thể dùng cái này, nó hoàn toàn tương tự.

Và bài viết này được xuất bản cũng nhờ sự gợi ý của anh YSK (Yêu Sức Khỏe).

Các bạn có thể xem demo ở đây: http://data.fandung.com/js/RecentPosts-jQuery/test.html

Hình ảnh minh họa :

Ở tiện ích này, vì 1 số lí do nên mình sẽ không cho phép hiển thị comment và ngày đăng, nên mọi người không cần thắc mắc hoặc yêu cầu show nó ra.

Một vài thông tin về tiện ích này :
- Hiển thị ảnh thumbnail là chính
- Tiêu đề bài viết và phần tóm tắt bài viết sẽ hiển thị khi ta đưa chuột vào ảnh.
- Có button cho phép di chuyển qua lại giữa các bài viết.

☼ Bây giờ ta bắt đầu thủ thuật:
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn đoạn code bên dưới vào trước thẻ đóng </head>

// Code JS
<script src='http://data.fandung.com/js/RecentPosts-jQuery/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/hover.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/glide.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/superfish.js' type='text/javascript'></script>

<script type='text/javascript'>
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

<script type='text/javascript'>
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 1,
persiststate: true,
speed: 300,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

// Code CSS
<style type='text/css'>

#glidercontent{
margin:0px 0 5px 0px;
font-family:Arial;
}

.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 570px;
height: 300px;
overflow: hidden;
margin:0px 0px 0px 0px;
background:#D9D1CE;
}
.glidecontent{
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:540px;
color:#fff;
margin:0px 0px;
height: 330px;
background:#ec03d9 url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/minibg.pg) no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
text-decoration:none;
}
.glidemeta{
height: 85px;
width: 550px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/balloon.png);
top:165px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{
height:38px;
z-index:150;
width: 570px;
background: url(http://farm3.static.flickr.com/2440/3670445565_757cfaaee8_o.gif);
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev{
top:6px;
right:35px;
position:absolute;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/left.jpg) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/right.jpg) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
.glidecontenttoggler a.next:hover {
background:url(http://farm4.static.flickr.com/3376/3670481633_24740d7c90_o.gif) bottom;
}
.glidecontenttoggler a.prev:hover {
background:url(http://farm3.static.flickr.com/2594/3670481657_5465256487_o.gif) bottom;
}
</style>

- Bây giờ mình sẽ hướng dẫn 1 chút để các bạn có thể tùy chỉnh code CSS.

Trước tiên hãy xem qua hình bên dưới :

- Phần khung bên ngoài chính là id glidecontentwrapper , các bạn có thể thay đổi kích thức của tiện ích ở đây.
- Phần màu đen chính là vùng hiển thị của tiêu đề và summary post. đó chính là id glidemeta. và như trong hình độ rộng của nó là 85px, chiều cao 550px; ngoài ra ta sẽ thấy còn có 1 lệnh top:165px; lệnh này để căn lề trên cho phần màu đen, tức là nó sẽ bị đẩy xuống dưới 1 đoạn là 165px. Và lưu ý : 85px+165px = chiều cao của ảnh thumbnail. Nếu như bạn chỉnh ảnh thumbnail nhỏ lại mà quên chỉnh 2 thông số này, nhất là lệnh top:165px; thì khi đó phần màu đen sẽ bị đẩy sâu xuống dưới, kết quả có thể vùng màu đen không hiển thị được.
- Ngoài ra các bạn có thể tùy chỉnh thêm sao cho hợp lý nhất, mình chỉ có thể hướng dẫn tới đây.

- Save template sau khi đã tùy chỉnh xong

- Và bây giờ hãy tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào :

<div class='glidecontentwrapper' id='glidercontent'>

<div class='glidecontenttoggler' id='togglebox'>
<a class='prev' href='#'></a>
<a class='next' href='#'></a>
</div>


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

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

showRandomImg = true;

imgwidth = 550;
imgheight = 250;
fntsize = 16;
acolor = "#f00";
aBold = true;

text = "no";
showPostDate = false;

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

numposts = 6;
home_page = "http://fandung.blogspot.com/";

</script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/recentposts_jQuery.js' type='text/javascript'></script>


</div>

- Các phần tùy chỉnh bên trên có lẽ đã quá quen thuộc vì thế mình sẽ không đề cập ở đây(nếu không rõ hãy tham khảo các bài viết về tiện ích recent posts ở blog của mình).

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

Read more…

Theo yêu cầu của bạn Hiệp Cò (www.hiepco.com)

[FD's BlOg] - Như theo yêu cầu, bài viết sẽ hướng dẫn làm ẩn 2 cột sidebar khi xem bài viết, thêm vào đó là tạo thêm 1 cột sidebar thứ 3 sẽ hiển thị bên phải, còn phần bài viết bên trái. Và cột sidebar thứ 3 này sẽ chỉ hiện thị duy nhất ở trang bài viết mà thôi. Hay nói cách khác, cột sidebar thứ 3 này và 2 cột sidebar cũ sẽ không thể hiện thị cùng 1 lúc.

Có thể nói thủ thuật này là 1 thủ thuật thay đổi bố cục blog theo trang, với trang bài viết thì sẽ hiển thị dạng template 2 cột, còn ở các trang khác trang bài viết sẽ hiển thị dạng 3 cột. Và ta có thể xem đây là 1 template 4 cột, và ta chỉ thấy được điều này trong Bố cục » Phần tử trang.

Đây là hình ảnh minh họa thủ thuật

Giả sử ta có 1 template có các phần main, sidebar1, sidebar2 có tên tương ứng là : main-wrapper, newsidebar-wrapper, sidebar-wrapper (do là thủ thuật yêu cầu của bạn HC, nên mình lấy tên các id này trùng với các id trong code template của bạn HC)

Bây giờ ta vào Bố cục » Chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích), và tìm các đoạn code CSS và HTML của 3 phần trên, nó sẽ trông như bên dưới:
Code CSS:

#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Code HTML:

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>

☼ Bây giờ ta bắt đầu thủ thuật (Lưu ý save template lại trước khi thực hiện - nếu cho chắc chắn hãy tạo 1 blog mới và test trước khi thực hiện với blog của mình)
A. Bước 1 : chỉnh sửa code CSS
- ở bước này ta sẽ có 2 điều phải làm, 1 là thay đổi style cho phần main khi hiển thị ở trang bài viết, và tạo 1 đoạn code CSS mới cho cột sidebar thứ 3
- Với đoạn code CSS ở trên, ta sẽ xóa phần code CSS của main (phần code bị xóa này sẽ được chỉnh sửa thêm và dán vào bên dưới sau dòng code ]]></b:skin>) và tạo thêm code CSS cho cột sidebar thứ 3. Ta sẽ đặt tên cho nó là rightsidebar-wrapper và code CSS sẽ trông như bên dưới:

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#rightsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

- Như vậy đã tạo xong code CSS cho cột thứ 3, bây giờ ta tùy chỉnh CSS cho phần main, hãy dán đoạn code bên dưới vào trước dòng code ]]></b:skin>

<style>

<b:if cond='data:blog.pageType == "item"'>
#main-wrapper {
background: #ffffff;
width: 760px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
<b:else/>
#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
</b:if>

</style>

- Chú ý đoạn code màu đỏ :
+ width: 760px; : đây là độ rộng của phần main khi hiển thị ở trang bài viết (các bạn có thể bỏ dòng code này, tức là không gán độ rộng cho nó). Giá trị này được tính bằng (540px + 220px + 220px) - 220px = 760px, tức là độ rộng của 3 cột ban đầu trừ đi độ rộng của cột sidebar thứ 3 được thêm vào.
+ width: 540px; : đây là độ rộng của phần main khi hiển thị ở các trang khác trang bài viết.

Như vậy đã xong phần code CSS, bây giờ ta sang phần Code HTML của các phần

B. Bước 2 : thêm cột thứ 3 vào trong code template .
- Tiếp tục ở bước 1 (bước 1 vẫn chưa save template) tiếp tục xuống phía dưới, ta sẽ thấy code HTML như bên dưới :

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>

- Và ta thay đổi nó như bên dưới :

<b:if cond='data:blog.pageType != "item"'>
<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>
</b:if>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<b:if cond='data:blog.pageType != "item"'>
<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<div id="rightsidebar-wrapper">
<b:section class="sidebar section" id="rightsidebar" preferred="yes">

</b:section>
</div>
</b:if>

- Đoạn code màu cam là code của cột sidebar thứ 3
- Các đoạn code màu đỏ là để thiết lập bố cục hiển thị của blog ở các trang.


C. Bước 3: cuối cùng là save template.

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

Read more…

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

[FD's BlOg] - Thủ thuật mình sẽ hướng dẫn các bạn thay đổi vị trí của các cột trong template 3 cột. Như ở template 2 cột, việc này khá đơn giản, ta chỉ cần gán thuộc tính float cho các cột là left hoặc right thì có thể thay đổi vị trí của nó. Còn ở template 3 cột, ta cũng dùng cách đó nhưng phức tạp hơn 1 chút.

Và do đây là thủ thuật yêu cầu nên mình sẽ hướng dẫn theo code template của yêu cầu. Và sẽ rút ra các tổng quát cho các template 3 cột khác.
Cụ thể trong thủ thuật này mình sẽ nói đến template FalknerPress (Design by CamelGrap)

Hình ảnh minh họa:

Bố cục gốc

Bố cục thay đổi theo yêu cầu

☼ Bây giờ ta bắt đầu thủ thuật:
- Do trong code của template mẫu này, các thuộc tính float của các cột đã phù hợp nên mình sẽ bỏ qua bước chỉnh sửa thuộc tính float, phần này sẽ nói ở bên dưới.

1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Tìm đến đoạn code HTML của left-sidebar , và trong code template của mẫu trên thì nó là code bên dưới:

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

4. Sau khi tìm được đoạn code trên, ta hãy di chuyển nó vào vị trí như bên dưới :

<div id='container'>

{chèn đoạn code ở bước 3 vào vị trí này}

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

- và nó sẽ trông như thế này :

<div id='container'>

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

5. Save template.

☼ Hướng dẫn tổng quát :
- Giả sử 1 template 3 cột có layout như hình bên dưới:

- Và code CSS của nó như sau:

#main {
float:left;
...
...
...
}
#sidebar1 {
float:left;
...
...
...
}
#sidebar2 {
float:left;
...
...
...
}

- Và bố cục của nó trong code template như bên dưới :

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Với bố cục trong code template và các thuộc tính trong code CSS như trên thì vị trí các cột lần lượt là main, sidebar1, sidebar2 . Nếu các bạn chỉ chỉnh sửa code CSS (chỉnh sửa thuộc tính float) thì ta chỉ được 2 bố cục duy nhất từ 3 cột này, đó là 2 cột sidebar nằm bên trái hoặc phải. Mà không thể cho cột bài viết nằm vào giữa 2 cột sidebar. Muốn làm được như vậy các bạn phải thay đổi vị trí code của các cột trong code template.

- Như ở đoạn code trên, nếu muốn di chuyển cột sidebar vào giữa thì bạn di chuyển cho đoạn code của cột main nằm giữa 2 đoạn code của 2 cột sidebar (như bên dưới)

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Ngoài ra muốn đảo vị trí các cột sidebar cho nhau thì các bạn cũng thực hiện tương tự.

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

Read more…

Theo yêu cầu của bạn Thuấn (share4vnn.tk)

[FD's BlOg] - Một tiện ích nhỏ sử dụng Javascript, cho phép bạn tùy chỉnh việc hiển thị hình nền theo ý muốn của bạn. Chỉ với việc chọn ảnh muốn hiển thị và 1 cái click chuột vào button là bạn đã có thể thay đổi hình nền theo ý bạn.

Xem demo ở đây : http://fandung.110mb.com/test/bg.html

Hình ảnh minh họa :

☼ Bây giờ ta bắt đầu thực hiện:
A. Bước 1 : Trước tiên hãy thiết lập một số thuộc tính background cho thẻ body
- Vào bố cục
- vào chỉnh sửa code HTML
- Tìm đoạn code CSS của body

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#695641 url(link ảnh);

}

- Hãy chú ý tới dòng code màu xanh, hãy xóa nó đi (nếu trong code template của blog bạn ko có dòng này thì thôi, nhưng nếu có phải xóa nó đi), và thêm 1 vài đoạn code màu đỏ như bên dưới:

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

- Giải thích về 3 đoạn code màu đỏ :

+ background-repeat:no-repeat; : code không cho ảnh nền lặp lại, nếu không có code này, khi thực hiện thủ thuật ảnh nền sẽ bị lặp lại.
+ background-attachment:fixed; : với đoạn code này, ảnh nền sẽ không bị dịch chuyển khi bạn trượt lên hoặc xuống trang.
+ background-position:center; : code xác định vị trí hiển thị của ảnh nền.

- Save template.

B. Bước 2 : Sau khi thực hiện xong bước trên ta tiếp tục chèn thêm đoạn code bên dưới vào trước thẻ đóng </head> (trong code template)

<script language="JavaScript">

var backImage = new Array();

backImage[0] = "link ảnh nền 1";
backImage[1] = "link ảnh nền 2";
backImage[2] = "link ảnh nền 3";
backImage[3] = "link ảnh nền 4";
backImage[4] = "link ảnh nền 5";


function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

function go1(){
if (document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value != "none") {
location = document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value
}
}
</script>

- nếu muồn thêm các ảnh nền khác thì cứ việc thêm dòng code này : backImage[5] = "link ảnh nền 6";
- Save template.

C. Bước 3 : Tạo một widget HTML/Javascript và dán code bên dưới vào:

<script type="text/javascript">

document.write('<form name="selecter1"><select name="select1" size=1>');
document.write('<option value=none>Select Background');
document.write('<option value="javascript:changeBGImage(0)">ảnh nền 1');
document.write('<option value="javascript:changeBGImage(1)">ảnh nền 2');
document.write('<option value="javascript:changeBGImage(2)">ảnh nền 3');
document.write('<option value="javascript:changeBGImage(3)">ảnh nền 4');
document.write('<option value="javascript:changeBGImage(4)">ảnh nền 5');
document.write('</select>');
document.write('<input type="button" value="Change" onclick="go1()">');
document.write('</form>');

</script>

- Tương tự như bước 2, khi thêm 1 ảnh nền nào đó thì ta phải thêm đoạn code này vào bước 3 :

document.write('<option value="javascript:changeBGImage(5)">ảnh nền 6');

Như vậy đã hoàn thành.

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

Read more…

[FD's BlOg] - Bài viết này là sự kết hợp của 2 thủ thuật trước mà mình đã đăng. Đó là việc kết hợp hiệu ứng show ảnh vào tiện ích Recent Posts (dạng Gallery). Do đây là sự kết hợp của 2 thủ thuật trước, nên mình sẽ không giới thiệu lại các thủ thuật đó, mình sẽ chỉ hướng dẫn các bạn chỉnh sửa đôi chút code.

Xem demo ở đây : http://data.fandung.com/js/recentposts-gallery/j-index.html

Hình ảnh minh họa:

Để thực hiện được thủ thuật này, blog của bạn phải được thêm 2 thủ thuật bên dưới:
1. Hiệu ứng show ảnh từ jQuery (xem hướng dẫn ở đây ) , chỉ cần chèn đoạn code chính (code JS + code CSS)
2. Tạo widget recent posts (Hiển thị dạng Gallery) cho các Nhãn (xem hướng dẫn ở đây)

Sau khi đã thêm 2 thủ thuật ở trên, các bạn vào thủ thuật 2 để chỉnh sửa lại.
a. Vào code chính của thủ thuật 2, bạn sẽ thấy link javascript như bên dưới:

http://data.fandung.com/js/recentposts-gallery/art-label.js

b. Hãy thay đổi link file JS đó lại thành link bên dưới :

http://data.fandung.com/js/recentposts-gallery/j-art-label.js

Như thế là đã hoàn thành.

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

Read more…

[FD's BlOg] - Với thủ thuật này, khi bạn rê chuột vào ảnh thu nhỏ, thì sẽ xuất hiện hiệu ứng zoom ảnh, cho bạn 1 ảnh có kích thước lớn hơn, tùy vào việc bạn tùy chỉnh độ lớn của hiệu ứng zoom. Thủ thuật này mình tham khảo từ trên mạng và đã có 1 chút chỉnh sửa để các bạn có thể tùy chỉnh hợp lý hơn.

Xem demo ở đây : http://data.fandung.com/blog/demo/resize-image/index.html

Ảnh minh họa :

Như đã nói ở trên, thủ thuật này mình có 1 chút chỉnh sửa so với thủ thuật gốc. Ở thủ thuật gốc, các ảnh đều có vị trí tuyệt đối (position:absolute;) như nhau, nên nếu để nhiều ảnh gần nhau, khi zoom 1 ảnh nào đó thì ảnh zoom sẽ bị các ảnh thu nhỏ khác đè lên, và mình đã sửa 1 chút code CSS để chỉ tạo vị trí tuyệt đối cho ảnh khi rê chuột (khi zoom), như thế các ảnh zoom lên sẽ không bị đè.

Và điều thứ 2 mình chỉnh sửa là tỉ lệ zoom ảnh, ở thủ thuật gốc, tỉ lệ này được tính bằng tỉ lệ của độ rộng chia cho chiều cao (width/height), và với cách tính này, các ảnh có độ rộng và chiều cao bằng nhau (tức ảnh hình vuông - hệ số zoom =1) thì hiệu ứng zoom ảnh sẽ không hiển thị. Ngoài việc sửa đổi như vậy, mình còn đưa biến mpx (hệ số zoom) ra ngoài file JS để các bạn có thể tùy chỉnh theo ý thích của mình.

☼ Bắt đầu thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HMTL
3. Chèn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
img.resize{
width:100px;
height:67px;
border:1px solid #ccc;
padding:2px;
z-index:1;
}
img.resize:hover{
position:absolute;

}
</style>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/jquery.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/functions.js"></script>
<script type="text/javascript">
var mpx = 2;
</script>

Lưu ý :

Code CSS :
- width:100px; , height:67px; : kích thước của ảnh thu nhỏ
Code JS :
- var mpx = 2; : thay đổi tỉ lệ zoom ảnh theo ý bạn. Có thể dùng tỉ lệ không nguyên, ví dụ : 1.5 , 2.3, ...

4. Save template.

- Và khi muốn chèn hiệu ứng này cho ảnh, ta chỉ cần thêm đoạn code màu đỏ vào trong thẻ <img> đó là xong (như bên dưới)

<img src="{Link ảnh}" class="resize" />

Tác giả thủ thuật : Justin Farmer

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

Read more…

[FD's BlOg] - Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.

Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/tooltips.html

Hình ảnh minh họa:

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

<script language="javascript" src="http://data.fandung.com/js/tooltip.js"></script>

<style type="text/css">
#dhtmltooltip{
border-right: black 1px solid;
padding-right: 4px;
border-top: black 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: black 1px solid;
padding-top: 4px;
border-bottom: black 1px solid;
font-family: Arial;
position: absolute;
background-color: lightyellow;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;

}
</style>

4. Save template.
5. Và sau đây code HTML:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của link liên kết')" onmouseout="hidetip();">Tiều đề của link</a>

-Thay đổi code màu xanh cho tương ứng với link liên kết của bạn.

Với thủ thuật này mình vẫn chưa áp dụng nó vào cho thủ thuật Recent post được.

Tham khảo từ source trên Net

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

Read more…

[FD's BlOg] - Ở 1 số template, các bạn thường thấy 1 điều : khi ta vào xem bài viết thì bố cục của blog bị thay đổi, không còn giống như bố cục ở ngoài trang chủ. Bài viết hôm nay mình sẽ hướng dẫn các bạn thực hiện tương tự thủ thuật này, đó là làm ẩn toàn bộ sidebar khi bạn xem bài viết, thủ thuật này sẽ giúp cho người đọc có thể load bài viết nhanh hơn.

Các bạn có thể xem demo tại blog test của mình : bl1-fd.blogspot.com

Hình ảnh minh họa:

Hiển thị sidebar ở các trang khác ngoài trang bài viết
(trong hình minh họa là ở trang chủ)

Ẩn sidebar khi xem bài viết

Trong bài viết này mình sẽ ứng dụng cho các template có 2 cột, các template có 3 cột các bạn cũng làm tương tự.
☼ Ở thủ thuật này ta sẽ có 2 bước phải thực hiên:

A. Bước 1 : Ẩn sidebar ở trang bài viết
1. Vào bố cục
2. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
3. Tìm đoạn code của sidebar, nó trông giống như bên dưới:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>

- Hãy xác định đúng thẻ đóng </div> của sidebar
4. Thêm đoạn code màu đỏ vào như bên dưới:

<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>
</b:if>

5. Save template.

B. Bước 2 : tùy chỉnh lại code CSS của class main (ở các template khác có thể class main có tên khác, như : content, main-wrapper,... )
- Thủ thuật chính trong bài viết này chính là ẩn sidebar và hiển thị style riêng cho class main khi ta đọc bài viết. Do vậy ta phải dùng tới lệnh b:if để làm việc này.

1. Đầu tiên hãy xác định code CSS của class main:

+ Vào bố cục
+ Vào chỉnh sửa code HTML
+ tìm đoạn code CSS của class main , nó trông giống như bên dưới:

#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

2. Khi tìm được code của class main, ta thay thế nó bằng đoạn code như bên dưới:

<style>
<b:if cond='data:blog.pageType == "item"'>
#main {
float: left;
word-wrap: break-word;
overflow: hidden;
}
<b:else/>
#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
</b:if>

</style>

- Để ý ở trên ta sẽ thấy là khi load trang bài viết mình không gán thuộc tính độ rộng (width) cho class main, sở dĩ làm như vậy là để lấp đi chỗ trống do phần sidebar tạo ra khi nó bị ẩn.
- Các thuộc tính bên trong của class này ta không nên thay đổi nhiều, chỉ lưu ý một điều, là thuộc tính float: left; của class main và class sidebar phải ngược nhau, tức là trong trường hợp này thuộc tính float của sidebar sẽ là float: right; . Mình lưu ý điều này chủ yếu là giúp cho bố cục blog trông hợp lý hơn thôi.
- Một điều lưu ý cuối cùng : ở 1 số template ta sẽ thấy thuộc tính float có dạng float: $startSide; hoặc float: $endSide; , hay thay đổi nó lại thành float: left; hoặc float: right;

3. Sau khi thay thế xong ta tiếp tục thực hiện bước cuối cùng, đó là di chuyển toàn bộ đoạn code vừa thay thế được đến vị trí ngay sau đoạn code ]]></b:skin> trong code template.
- Sở dĩ phải làm vậy là do ta không thể dùng lệnh b:if trong thẻ </b:skin> được.

4. Cuối cùng là save template.

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

Read more…

Theo yêu cầu của bạn Cowboyvn (www.seosite1.com)

[FD's BlOg] - Bài viết này vẫn sẽ sử dụng tiện ích recent posts của Anhvo để hiển thị bài viết mới theo nhãn. Điểm chính trong yêu cầu này là bố trí việc hiển thị bài viết theo dạng Gallery, tức là chỉ hiển thị tiêu đề và ảnh thumbnail. Các ảnh thumbnail sẽ được bố trí theo 2 hoặc 3 cột tùy theo ý thích của mỗi người.

Xem demo trực tiếp ở đây: http://data.fandung.com/js/recentposts-gallery/index.html

Hình ảnh minh họa:

Như đã nói ở trên, bài viết này mình sẽ chỉ nói rõ việc trang trí cũng như bố trí hiển thị các bài viết sao cho hợp lý, còn việc tùy chỉnh trong code của thủ thuật Recent posts mình sẽ chỉ nói sơ qua thôi.

☼ Đây là code của thủ thuật: (tạo 1 widget HTML/Javascript rồi dán tất cả code vào)

// Code CSS
<style type="text/css">
#art {
height:221px;
margin-right: 15px;
margin-bottom:15px;
float:left;
width:250px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#a-title {
height:64px;
border-bottom:2px #ccc solid;
}

#a-content {
height:150px;
padding-top:5px;
}
</style>

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

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


showRandomImg = true;

imgwidth =250; // độ rộng của ảnh thumbnail
imgheight =150; // chiều cao của ảnh thumbnail
ftcm = 2; // kích thước chữ của dòng hiển thị ngày đăng và comment
fntsize = 16; // kích thước chữ của tiêu đề bài viết
acolor = "#f00"; // màu chữ của tiêu đề bài viết
aBold = true;

text = "Nhận xét"; // Nếu không muốn hiện comment thì thay "Nhận xét" bằng "no"
showPostDate = true; // Nếu không muốn hiện ngày đăng thì sửa true bằng false
poston ="Ngày đăng :";

numposts = 6;
label = "Love"; // nhãn cần hiển thị
home_page = "http://fandung.blogspot.com/"; // thay bằng địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/js/recentposts-gallery/art-label.js" type="text/javascript"></script>

- Có thể bỏ các dòng chú thích màu xanh.

☼ Sau đây là hướng việc chỉnh sửa code CSS:
- Đầu tiên các bạn hãy xem hình minh họa của bố cục hiển thị bài viết như bên dưới:
- Cơ bản của thủ thuật này ko phải là sử dụng thẻ table để hiển thị dạng gallery như hình minh họa, mà là thủ thuật xếp các thẻ <div> theo hàng.
- Trong đoạn code CSS ở trên ta sẽ có 3 class, đó là art, a-title và a-content.

a. Class a-title : đây là vùng hiển thị tiêu đề bài viết và hiển thị 1 chút thông tin về bài viết.
- Ở class này ta chỉ quan tâm tới chiều cao (height:64px;) của nó, sở dĩ ta đặt chiều cao cho nó là để cho các bài viết có cùng khung hiển thị giống nhau, nếu bạn ko đặt chiều cao cho class này thì với các bài viết có tiêu đề dài ngắn khác nhau sẽ tạo nên chiều cao của khung hiển thị bài viết khác nhau, như thế sẽ ko đồng nhất.
- Nếu bạn không muốn hiển thị phần thông tin bài viết thì chỉnh chiều cao của class này nhỏ lại cho hợp lý.

b. Class a-content : đây là vùng hiển thị ảnh thumbnail
- Chiều cao (height:150px;) của class này bạn hay điều chỉnh bằng với chiều cao của ảnh thumbnail.
- padding-top:5px; : lệnh này dùng để căn lề trên cho ảnh

c. Class art : đây là vùng hiển thị bài viết.
- height:221px; : chiều cao của class này được tính bằng công thức như sau : 64px + 150px + 2px + 5px = 221px (64px : là chiều cao của class a-title, 150px : là chiều cao của class a-content, 2px : là đường bo bên dưới của class a-title, 5px là căn lề trên của class a-content). Hãy tính toán đúng như trên để có 1 bộ khung hợp lý.
- margin-right: 15px; , margin-bottom:15px; : 2 lệnh này dùng để giãn cách các khung của bài viết cho hợp lý.
- width:250px; : độ rộng này được điều chỉnh bằng với độ rộng của ảnh thumbnail. và hãy điều chỉnh cho phù hợp với vùng hiển thị widget (sẽ nói ở bên dưới).

☼ Tùy chỉnh việc hiển thị các khung bài viết trong vùng hiển thị :

- Như đã nói ở trên, đây là thủ thuật xếp các thẻ div nằm trên 1 hàng ngang, do đó để điều chỉnh bố cục của các khung này ta sẽ điều chỉnh ở phần độ rộng.

- Nếu muốn hiển thị các khung dạng 2 cột (như hình minh họa) thì độ rộng của vùng hiển thị của bạn phải lớn hơn 2 lần độ rộng class art + tất cả các khoảng cách căn lề. Cụ thể trong hình minh họa, độ rộng của khung phải lớn hơn giá trị : 554px = 2*250px + 2*15px + 2*(1px +1px) +2*(5px + 5px).

- Nếu độ rộng của vùng hiển thị nhỏ hơn giá trị trên (cho dù là 1px) thì các khung sẽ chỉ hiển thị 1 cột.

- Với cách tính trên, để hiển thị 3 cột thì độ rộng của vùng hiển thị phải lớn hơn giá trị sau : 831px = 3*250px + 3*15px + 3*(1px + 1px) + 3* (5px + 5px).

- Ngoài ra bạn có thể điều chỉnh ngược lại, tức là từ độ rộng của vùng hiển thị suy ngược lại độ rộng của class art.

- Để giới hạn cho vùng hiển thi, bạn có thể đặt tất cả các code của thủ thuật vào trong thẻ <div> và đặt độ rộng cho thẻ <div> này.

Những hướng dẫn ở trên có vẻ hơi tỉ mỉ, nhưng cũng ko quá phức tạp. Những ai rành về CSS thì chắc không cần xem hướng dẫn của mình cũng có thể điều chỉnh được việc hiển thị các bài viết sao cho hợp lý với blog của mình. Tuy nhiên nó cũng rất cần cho nhưng người mới bắt đầu.

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

Read more…