Create Breadcrumb navbar with Label

[FD's BlOg] - Đây là một thủ thuật đơn giản, ứng dụng từ các label, mình vừa nghĩ ra, nên post lên cho mọi người xem luôn. Thủ thuật này đơn giản hơn nhiều so với thủ thuật trước mà mình đã đăng.(xem thêm ở đây)

Với thủ thuật này thanh navbar chỉ hiển thị ở mỗi bài viết, và nó rất đơn giản, chỉ gồm 2 lớp, đó là lớp chính(trang chủ) và lớp phụ (các nhãn). Nó sẽ hiển thị đẹp nhất cho các bài viết có 1 nhãn. Nếu bài viết có nhiều nhãn thì ở lớp phụ (lớp nhãn), sẽ hiển thị bấy nhiêu label, và ngăn cách bằng dấu phẩy.

Xem hình mình họa kết quả:

☼ Bây giờ ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code CSS bên dưới lên trên dòng ]]></b:skin>

#s-nabar {
text-color : #ffffff;
font-size : 11px;
text-decoration : none;
font-weight:bold;
}
#s-nabar:hover {
text-color : #000000;
font-size : 12px;
font-weight:bold;
}

- ở đây mình chỉ áp dụng thủ thuật đơn giản là thay đổi màu chữ và phóng to chữ cho thanh breadcrumb, các bạn muốn thêm hiệu ứng khác thì có thể chèn thêm vào đọan code CSS đó.

6. Tìm đọan code sau:

<b:includable id='post' var='post'>

7. Thêm ngay sau nó đọan code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
» <a expr:href='data:blog.homepageUrl' id='s-nabar'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span id='s-nabar'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</b:if>

8. Save temolate lại là xong.

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

Read more…

Create sidemenu by Label

[FD's BlOg] - Blogger có hỗ trợ tiện ích hiển thị các nhãn của blog, giúp cho người đọc có thể dễ dàng tìm kiếm cũng như truy cập cách danh mục có trên blog. Tuy nhiên nó trông hơi sơ xài, và bài viết này mình sẽ hướng dẫn các bạn biến nó thành 1 menu dọc. Kèm theo các hiệu ứng hình ảnh từ CSS.

Xem hình minh họa:

Trước khi áp dụng thủ thuật:

Sau khi áp dụng thủ thuật:

Bạn sẽ thắc mắc tại sao sau khi thủ thuật lại có thêm nhãn HOME, thực ra đây không phải nhãn, mà một menu mình chèn thêm, ta sẽ nói rõ hơn ở phần dưới.

- Trước khi tiến hành thủ thuật bạn phải tạo cho mình một tiện ích hiển thị các nhãn của blog từ blogger. (cái này rất cơ bản, hy vọng mọi người ai cũng biết).

☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Chèn đọan code CSS của menu vào trên dòng ]]></b:skin>

#menu-label li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}

/*- menu-label--------------------------- */

#menu-label {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu-label li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu-label li a:link, #menu-label li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu-label li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

- Chú ý: code màu đỏ là độ rộng của menu, bạn hãy cân chỉnh cho bằng với độ rộng của sidebar. Code màu xanh là hình ảnh tạo hiệu ứng cho menu, bạn có thể thay thế chúng, và lưu ý là nếu có thay thế thì ảnh thay thế phải có kích thước hòan tòan khớp và đồng dạng với ảnh gốc (nếu ai rành về CSS thì có thể chọn ảnh không khớp với ảnh gốc, nhưng khi đó bạn phải chỉnh lại code CSS). Còn không tốt nhất là cứ xài ảnh này.

6. Tìm đến code của tiện ích nhãn, nó sẽ trông giống như bên dưới :

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Thay thế tất cả chúng bằng code bên dưới :

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='menu-label'>

<ul>

<li><a expr:href='data:blog.homepageUrl'><span>HOME</span></a></li>

<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

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

- Chú ý: dòng code màu xanh chính là menu ta thêm vào, như đã nói ở trên HOME không phải là 1 nhãn, mà là 1 menu ta chèn thêm vào. Nếu muốn thêm menu khác nữa ta chỉ việc thêm đọan code bên dưới vào ngay sau dòng code màu xanh là được.

<li><a expr:href='link liên kết của bạn'>Menu 1</a></li>

8. Save template.

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

Read more…

Widebar for three columns template

[FD's BlOg] - Widebar thực ra chỉ là tên gọi, đơn giản là 1 sidebar lớn hơn bình thường, sở dĩ nói lớn hơn là do thủ thuật này ứng dụng cho các template có 3 cột. Trong template sẽ có 2 sidebar, và ta chèn thêm widebar này ngay lên trên 2 sidebar đó.

Và thủ thuật này mình chỉ áp dụng cho các template có 2 sidebar cùng nằm 1 bên (trái hoặc phải). Ở đây mình nói chỉ áp dụng cho các template có 2 sidebar nằm cùng 1 bên không hẳn là không áp dụng được cho các template 3 cột khác, nhưng nếu áp dụng sẽ trông không được đẹp cho lắm.

Ứng dụng của widebar này giúp tạo cho bạn một không gian riêng để hiển thị những gì nổi bật, hot của blog bạn, ví dụ như một bảng thông báo quan trọng chẳng hạn.

Hình minh họa thủ thuật :

Hình minh họa kết quả:

☼ Bắt đầu thủ thuật:
- Đầu tiên bạn chèn code CSS của widebar vào code template
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML(edit code HTML), không cần nhấp chọn mở rộng mẫu tiện ích
4. Chèn đọan code CSS của widebar vào trên dòng ]]></b:skin>

#widebar-wrapper {
width:400px;
float:left;
border: 1px solid #ddd;
padding-bottom:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:400px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

- Chú ý: dòng code màu đỏ là độ rộng của widebar, và nó bằng tổng độ rộng 2 sidebar. Còn code màu xanh là để xác định vị trí cho widebar, nếu 2 cột sidebar của bạn ở bên phải thì sửa lại thành : float:right;

5. Bây giờ cho widebar hiển thị, tìm dòng <div id="main wrapper"> (hoặc tương tự), rồi dán code bên dưới vào ngay sau nó:

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

6. Save template.

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

Read more…

[FD's BlOg] - Tương tự bài viết trước (chia footer thành nhiều cột), bài viết này cũng áp dụng thủ thuật tương tự để chia Post Footer (bên dưới bài viết) thành nhiều cột.

Xem hình minh họa thủ thuật:

Còn đây là kết quả hiện thị ngòai blog

Bắt đầu:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code màu đỏ vào như bên dưới:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

...
...
...

</b:section>

<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>

...
...
...

</b:section>
</div>

- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là 300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng <div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.

<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>

- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.

6. Save template.

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

Read more…

[FD's BlOg] - Hôm nay mình lại quay về với menu cho blog. Và bài này mình xin giới thiệu 9 kiểu menuside cực kì bắt mắt.

Xem demo trực tiếp ở đây :http://fandung.110mb.com/9-menuCSS/index.html

Xem hình minh họa :
(nhấp vào hình để xem kích thước thật)

Đầu tiên các bạn download gói hình ảnh này về : FD-images.rar
Giải nén ta được 9 file ảnh tương ứng với 9 menu : menu1.gif, menu2.gif, ... menu9.gif


Hãy chọn cho mình một menu rồi up ảnh tương ứng lên host để lấy link.

☼ Bây giờ ta bắt đầu:
1. Vào bố cục (Layout)
2. Vào chỉnh sửa code HTML(edit code HTML)
3. Chọn cho mình 1 trong 9 đọan code CSS bên dưới và dán chúng lên trên dòng ]]></b:skin>

/* =-=-=-=-=-=-=-[Menu 1]-=-=-=-=-=-=-=- */

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(menu1.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu 2]-=-=-=-=-=-=-=- */

#menu2 {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 10px;
}

#menu2 li a:hover {
color: #283A50;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu2 li a:active {
color: #283A50;
background: url(menu2.gif) 0 -64px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu 3]-=-=-=-=-=-=-=- */

#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}

#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 30px;
}

#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

/* =-=-=-=-=-=-=-[Menu 4]-=-=-=-=-=-=-=- */

#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 30px;
}

#menu4 li a:hover {
color: #fff;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}

#menu4 li a:active {
color: #fff;
background: url(menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}

/* =-=-=-=-=-=-=-[Menu 5]-=-=-=-=-=-=-=- */

#menu5 {
width: 200px;
border-style: none solid none solid;
border-color: #D0D0D0;
border-width: 1px;
margin: 10px;
}

#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu5 li a:link, #menu5 li a:visited {
color: #777;
display: block;
background: url(menu5.gif);
padding: 8px 25px 0 10px;
text-align: right;
}

#menu5 li a:hover {
color: #fff;
background: url(menu5.gif) 0 -32px;
padding: 8px 25px 0 10px;
text-align: right;
}

#menu5 li a:active {
color: #fff;
background: url(menu5.gif) 0 -64px;
padding: 8px 25px 0 10px;
text-align: right;
}

/* =-=-=-=-=-=-=-[Menu 6]-=-=-=-=-=-=-=- */

#menu6 {
width: 200px;
margin: 10px;
}

#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}


#menu6 li a:link, #menu6 li a:visited {
color: #8D9179;
display: block;
background: url(menu6.gif);
padding: 8px 0 0 10px;
}

#menu6 li a:hover, #menu6 li a:active {
color: #6C7250;
background: url(menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu 7]-=-=-=-=-=-=-=- */

#menu7 {
width: 200px;
border-style: none dashed dashed dashed;
border-color: #608FB5;
border-width: 1px;
}

#menu7 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu7 li a:link, #menu7 li a:visited {
color: #1D537F;
display: block;
background: url(menu7.gif) repeat-x;
padding: 10px 0 0 10px;
}

#menu7 li a:hover {
color: #fff;
background: url(menu7.gif) repeat-x 0 -32px;
padding: 10px 0 0 10px;
}

#menu7 li a:active {
color: #fff;
background: url(menu7.gif) repeat-x 0 -64px;
padding: 10px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu 8]-=-=-=-=-=-=-=- */

#menu8 {
width: 200px;
margin-top: 10px;
}

#menu8 li a {
text-decoration: none;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}

#menu8 li a:link, #menu8 li a:visited {
color: #777;
display: block;
background: url(menu8.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover {
color: #257EB7;
background: url(menu8.gif) 0 -32px;
padding: 8px 0 0 25px;
}

#menu8 li a:active {
color: #fff;
background: url(menu8.gif) 0 -64px;
padding: 8px 0 0 25px;
}

/* =-=-=-=-=-=-=-[Menu 9]-=-=-=-=-=-=-=- */

#menu9 {
width: 200px;
margin-top: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}


#menu9 li a:link, #menu9 li a:visited {
color: #E5E8D4;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 10px;
}

#menu9 li a:hover {
color: #725033;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu9 li a:active {
color: #fff;
background: url(menu9.gif) 0 -64px;
padding: 8px 0 0 10px;
}

- Thay các dòng code màu xanh bằng link ảnh mà bạn đã up.

4. Save template.

5. quay lại bố cục, vào phần tử trang, tạo 1 widget HTML/Javascript rồi dán code HTML bên dưới vào.

<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="Store">Store</a></li>
<li><a href="#" title="Download">Download</a></li>
</ul>
</div>

- Chú ý dòng : <div id="menu"> : nếu bạn chọn menu 2 thì id="menu2" (tương ứng với id trong code CSS).
6. Save widget.
- Thay kí tự "#" bằng liên kết của bạn.
Chúc các bạn thành công.

Read more…