Hướng dẫn tạo 1 PAGE cho blogspot

[FD BlOg] - Như các bạn đã biết, muốn tạo thêm 1 page cho blogspot ta chỉ có 1 cách duy nhất là tạo thêm 1 bài viết mới. Và lợi dụng điều này, và áp dụng các thủ thuật cũ đã đăng, hôm nay mình sẽ hướng dẫn 1 cách nhỏ để tạo thêm 1 page cho blogspot của bạn. Với thủ thuật này blog bạn sẽ ngày càng giống 1 weblog hơn.

Các bạn có thể xem thử demo minh họa ở đây : http://www.fandung.com/2009/02/contact-me.html

Mô tả chung thủ thuật : thủ thuật này lợi dụng việc tạo thêm 1 bài viết mới để lấy link liên kết cho trang page mà bạn sẽ tạo. Tức là khi xuất bản bài viết mới, ta không cần quan tâm tới nội dung của bài viết này, có thể bạn không cần soạn nội dung của nó cũng đc, ko sao cả. Khi đã có được link, bây giờ ta sẽ tạo 1 widget HTML/Javascript, và soạn nội dung của page vào đó. Tiếp đến ta dùng thủ thuật ẩn bài viết khi truy cập tới link liên kết này, và thêm 1 thủ thuật nữa là chỉ cho phép widget vừa tạo hiển thị khi truy cập tới link liên kết trên.

Như vậy ở thủ thuật này sẽ có 3 bước :
- Bước 1: tạo 1 trang bài viết để lấy link cho page.
- Bước 2: tạo 1 widget HTML/Javascript, và dán nội dung của trang page sẽ được tạo vào.
- Bước 3: tùy chỉnh việc hiển thị bài viết và widget HTML/Javascript.

☼ Bây giờ ta sẽ đi vào từng bước:
I. Bước 1 : tạo 1 trang bài viết để lấy link cho page.
- Vào phần soạn thảo bài viết mới và tạo 1 trang bài viết mới. với nội dung của bài viết để trống, nhãn cũng được để trống, chỉ duy nhất có phần tiêu đề.
- Mẹo : để link của trang page được đẹp, ta nên đặt tên của tiêu đề bài viết này là không dấu, ví dụ như hình minh họa :

- Ví dụ như với tiêu đề của mình minh họa trên ta sẽ có link liên kết của trang page như thế này :
http://www.fandung.com/2009/02/contact-me.html

- Và thêm 1 mẹo thứ 2 ở bước 1 này là : nên chỉnh sửa lại ngày đăng bài viết, để cho bài viết được nằm ở cuối của danh sách các bài đăng. Ví dụ như blog bạn tạo ngày 20/4/2008 thì ta chỉnh lại ngày đăng cho bài viết nằm trong ngày này chẳng hạn. Với mẹo này sẽ làm việc hiển thị bài viết ở trang chủ trở nên khó hơn.

II. Bước 2 : Tạo 1 widget HTML/Javascript và dán nội dung của trang mà bạn muốn tạo.

- Với việc này, bạn sẽ phải soạn thảo code HTML cho trang page ngay trên widget. Code để tạo nên trang này nhất thiết phải là code HTML, ngoài ra có thể kèm theo các code CSS, code Javascript để trang được tạo sẽ đẹp hơn. Việc này tương tự như các thủ thuật khác.

- Lưu ý : widget này phải nằm ở vị trí bên trên (hoặc dưới) phần "Bài đăng trên blog", tức là nó nằm ở cột Main. Như hình minh họa bên dưới:

- Như vậy đã xong bước 2, tiếp tục sang bước 3.

III. Bước 3 : ẩn bài viết và tùy chỉnh việc hiển thị của widget chứa nội dung của trang page.
- Ở bước 3 này ta sẽ có 2 bước nhỏ phải làm : ẩn bài viết khi truy cập tới link liên kết của trang page, và tùy chỉnh để widget chỉ hiển thị khi bạn truy cập tới link liên kết của trang page.

+ b1 : ẩn bài viết khi truy cập tới link liên kết của trang page.

Với bước này, ta sẽ ẩn hoàn toàn phần bài viết và chỉ cho phép hiển thị widget (và các phần còn lại của blog). Khi đó widget hiển thị chính là trang page mà bạn muốn tạo.
Để thực hiện điều này rất đơn giản, bạn chỉ cần thực hiện các bước như bên dưới :
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 code </head>

<style type="text/css">
<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>
#Blog1 {display:none;}
</b:if>
</style>

- Với link màu xanh sẽ là link liên kết của bài viết mà bạn đã tạo để gán cho trang page.
4. Save template.

+ b2: chỉ cho phép widget chứa nội dung hiển thị khi bạn truy cập tới đúng link liên kết của trang page (ví dụ như trong code mẫu sẽ là link : http://www.fandung.com/2009/02/contact-me.html )

Với bước này, trước tiên bạn phải xác định ID của widget chứa nội dung của trang page. Để biết được ID, thực hiện các bước sau :
1. vào phần tử trang
2. Nhấp chọn chỉnh sửa ở widget chứa nội dung của trang page.
3. Và ta sẽ thấy được ID của nó như bên dưới :

- Trong hình minh họa ta thấy ID của nó là HTML8
- Bây giờ ta sang bước chính là chỉ cho widget này hiển thị khi ta truy cập tới link của trang page. Để làm điều này, các bạn thực hiện các bước như 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 của widget chứa nội dung của trang page (nhấn Ctrl + F và điền ID của widget vào là có thể tìm thấy Code của nó)

Và code của nó tương tự như thế này :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

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

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

- Thay link (code màu đỏ) lại thành link liên kết tương ứng với trang page của bạn.

6. Save template.

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

Tạo tab nội dung đơn giản với jQuery

[FD BlOg] - Sau một thời gian dài bỏ hoang BlOg FD, hôm nay mình sẽ trở lại với các bạn với một thủ thuật tạo tab nội dung. Thủ thuật này sẽ hướng dẫn các bạn tạo các tab nội dung đơn giản nhưng cũng không kém phần bắt mắt. Ở thủ thuật này mình sẽ hướng dẫn khung sườn để tạo tab nội dung, còn phần nội dung bên trong các tab các bạn sẽ tự mình thêm vào.

Mình nhớ là có lần 1 bạn nào đó đã nhờ mình giới thiệu dạng tab như thế này. Dùng nó sẽ giúp tiết kiệm cho không gian blog của bạn. Tab mẫu mình giới thiệu chỉ có 2 màu trắng đen, rất giản dị và dễ phù hợp khi các bạn đưa vào blog của mình nếu không muốn chỉnh sửa gì nhiều.

Như các bạn đã biết, muốn tạo các tab nội dung như vậy thì nhất thiết phải dùng tới javascript, và ở đây cụ thể là jQuery ( Tuy nhiên cũng có thể dùng CSS để tạo tab dạng này nhưng nó trông không được pro cho lắm ). Do đó để cho tab được load nhanh, mình có lời khuyên là không nên dùng javascript vào trong các nội dung của tab. Các bạn nên thêm các thủ thuật đơn thuần chỉ là HTML. Như thế tab của mình sẽ load nhanh hơn.

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

Và bên dưới là code của thủ thuật: (các bạn tạo mội widget HTML/Javascript rồi dán code của thủ thuật vào)

<link rel="stylesheet" href="http://data.fandung.com/blog/demo/jquery-tab/data/style.css" type="text/css" media="screen">

<script src="http://data.fandung.com/blog/demo/jquery-tab/data/jquery-1.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>

<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">

<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Tips</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

<div style="display: block;" id="content_1" class="content">
<!-- nội dung của tab1 -->
<ul>
<li><a href="#">HTML Techniques <small>24 Posts</small></a></li>
<li><a href="#">CSS Styling <small>32 Posts</small></a></li>
<li><a href="#">Blogspot Tutorials <small>112 Posts</small></a></li>
<li><a href="#">Web Design <small>19 Posts</small></a></li>
</ul>
<!-- END nội dung của tab1 -->
</div>

<div style="display: none;" id="content_2" class="content">
<!-- nội dung của tab2 -->
<ul>
<li><a href="#">November 2009 <small>4 Posts</small></a></li>
<li><a href="#">October 2009 <small>22 Posts</small></a></li>
<li><a href="#">September 2009 <small>12 Posts</small></a></li>
<li><a href="#">August 2009 <small>43 Posts</small></a></li>
<li><a href="#">July 2009 <small>15 Posts</small></a></li>
</ul>
<!-- END nội dung của tab2 -->
</div>

<div style="display: none;" id="content_3" class="content">
<!-- nội dung của tab3 -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toturials</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- END nội dung của tab3 -->
</div>

</div>
</div>

- Khác với khác thủ thuật trước, mình không đưa code CSS vào trong thủ thuật mà đưa link (để code cho đỡ rườm rà). Nếu bạn nào muốn thay đổi lại cho phù hợp thì download file CSS về (http://data.fandung.com/blog/demo/jquery-tab/data/style.css) và thay đổi lại code chút ít cho phù hợp. Các bạn có thể tùy chỉnh lại code CSS ở 1 vài điểm chủ yếu như bên dưới :

#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}
...
...
...

.tabbed_area {
border:1px solid #494e52;
background-color:#636d76; /*màu nền của tab (nền đen bên ngoài)*/
padding:7px;
}

- Trong demo mẫu, mình chỉ giới thiệu 3 tab, nếu muốn thêm các tab khác, các bạn chỉ cần thêm 1 vài code nhỏ như bên dưới :

...
...
...
<li><a href="#" title="content_3" class="tab">Pages</a></li>
<li><a href="#" title="content_4" class="tab">FAQs</a></li>
</ul>
...
...
...

<!-- END nội dung của tab3 -->
</div>

<div style="display: none;" id="content_4" class="content">
<!-- nội dung của tab4 -->

{Nội dung TAB}

<!-- END nội dung của tab4 -->
</div>

</div>
</div>

- Lưu ý : khi thêm tab vào, các bạn nên thay đổi lại độ rộng của tab, nếu không sẽ bị lỗi nhỏ như bên dưới

- và code để thay đổi là đây (trong file CSS)

#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}

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

Hướng dẫn tạo widget "Bài viết hot" (Hot Pots)cho blogspot

Đây là ý tưởng mình vừa nghĩ ra, và liền post ngay lên cho mọi người, và hình như chưa có ai làm nó bao giờ. Hy vọng mình là người đầu tiên hướng dẫn cho mọi người. Thủ thuật này mình sẽ lợi dụng việc sử dụng các nhãn bài viết để tạo 1 widget các bài viết hot cho blog của bạn. Tất nhiên các bài viết hot này đều phải được các bạn tự chọn lọc và đưa nó vào 1 nhãn riêng. Và lưu ý là top bài viết hot ở đây là hot về nội dung chứ không phải hot về số người đọc hay số người comment.


Nghe tới đây có vẻ như thủ thuật không có gì mới lạ, giống như ta tạo 1 widget các bài viết có nhãn là Hot và cho hiển thị lên blog mà thôi. Nhưng ở bài viết này mình sẽ hướng dẫn các bạn 1 thủ thuật đơn giản để người đọc không biết widget Hot Posts đựơc trích xuất ra từ 1 nhãn.
Ví dụ ta có 1 lọat các bài viết đã đăng rồi, và có 1 số bài hot, bây giờ ta chỉ cần lọc lại chúng, và add thêm cho nó 1 nhãn, ví dụ ta đặt tên nhãn đó là hot. Và sau này nếu có bài viết mới có nội dung hot thì các bạn chỉ việc add thêm nhãn này.
Sau khi ta có 1 lọat các bài với nhãn là hot, bây giờ ta sẽ làm ẩn nhãn hot này ở footer của bài viết. Tức là khi người đọc xem ở trang chủ thì sẽ không biết bài nào sẽ thuộc nhãn hot. Khi đó tiện ích Hot Posts sẽ mang một cái nhìn mới.

Ví dụ như hình minh họa bên dưới :

Trước khi thực hiệc việc ẩn nhãn hot

Sau khi thực hiệc việc ẩn nhãn hot

Bây giờ ta sẽ thực việc ẩn nhãn này ở footer của bài viết:
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 đọan code như bên dưới :

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

5. Thay nó bằng đọan code bên dưới :

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

- Chú ý dòng code này :

<b:if cond='data:label.name != "hot"'>

- đây là đọan code để làm ẩn nhãn hot . Nếu nhãn hot này bạn đặt với 1 cái tên khác thì thay đổi nó lại cho phù hợp.

6. Save template.
- Như vậy ta đã thực hiện xong việc ẩn nhãn.

Có thể xem demo ở đây: DEMO

Để làm được điều này, các bạn thực hiện các bước như sau :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước thẻ đóng </head> hoặc sau dòng code ]]></b:skin>

<style type='text/css'>
#hotposts {
width:510px;
padding:5px;
text-align:center;
font-weight:bold;
}
<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
#Blog1 {display:none;}
</b:if>
</style>

- các bạn nhớ thay link trong dòng code bên dưới cho đúng với link label chứa các bài viết hot của bạn :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>

4. Tiếp tục xuống bên dưới tìm dòng code này (hoặc tương tự). Dòng code này là thẻ div chứa nội dung của phần main của blog. Sở dĩ mình nói tương tự là vì có thể 1 số blog sẽ không có dòng code này.

<div id='main-wrapper'>

5. thêm vào sau nó đọan code bên dưới :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
<div id='hotposts'>
No post in this label. Go back to <a href='http://m2t-homepage.blogspot.com/'>HomePage</a>
</div>
</b:if>

- Lưu ý link của label nhãn hot trong bước 4 và 5 phải giống nhau.
- Ngòai ra các bạn có thể thay đổi lại nội dung dòng thông báo nếu như bạn muốn.
6. Save template.

Và cuối cùng ta chỉ việc chèn tiện ích recent posts theo Nhãn hot vào blog là ta đã có 1 widget "bài viết Hot" cho blog rồi.
Các thủ thuật về tiện ích "recent post theo nhãn" mình đã đăng nhiều rồi, các bạn có thể search ngay trên blog để tìm hiểu thêm.

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

Làm nổi bật cho bài viết đầu tiên

Hôm nay mình sẽ giới thiệu cho các bạn cách làm nổi bật bài viết đầu tiên. Mình sẽ giới thiệu 2 cách : cách dùng jQuery và không dùng jQuery. 2 cách đều có điểm chung là thêm code CSS cho bài viết đầu tiên để nó khác với các bài khác, và điểm khác biệt giữa 2 cách là 1 cái phức tạp, nặng nề hơn, còn 1 cách thì dễ hiểu, đơn giản hơn. Tuy vậy mình vẫn sẽ giới thiệu cho các bạn cả 2 cách, để các bạn có thêm nhiều thông tin, kiến thức hơn.

Xem demo trên blogspot : DEMO

Hình ảnh minh họa:

A. Cách 1 : dùng Jquery
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.post.first {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

4. Tiếp tục chèn đọan code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClas<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClass("first");
});
</script>
</b:if>s("first");
});
</script>
</b:if>

Ở đây mình có sử dụng điều kiện b:if để thủ thuật chỉ hiển thị ở ngòai trang chủ, nếu như không có lệnh này, thì khi mở ở trang bất kì nào như : bài viết, trang archive, label … thì bài viết đầu tiên đều được làm nổi bật.

5. Sau cùng là save template lại.

B. Cách 2 : Không dùng jQuery (update)
- Cách này mình sẽ chính lệnh b:if của blogger để chọn bài viết đầu tiên.
- Sau đây là cách thực hiện:

a. Vào bố cục > chỉnh sửa code HTML > nhấp chọn mở rộng mẫu tiện ích. tìm đoạn code này:

<b:include data='post' name='post'/>

b. Thay thế nó bằng đoạn code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div id='first-post'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

- Với đoạn code trên ta đã dùng div với id là first-post để bao bài viết đầu tiên lại. Nhưng nếu làm tới đây thì ta sẽ chưa thấy được gì, muốn bài viết đầu tiên khác với các bài còn lại thì ta phải thêm code CSS cho nó.
- Code CSS các bạn thêm vào trong code template, trước dòng code ]]></b:skin>, ví dụ như code mẫu bên dưới:

#first-post {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

c. save template lại.

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

Repost from mothuthuat.com
Update from duypham.info

Plugin Lightbox cho blogspot (Phần II)

Ở phần 1 mình đã giới thiệu cho các bạn cách sử dụng chung của plugin lightbox khi bạn muốn tạo 1 slide ảnh nào đó thì có thể tham khảo ở phần 1. Ở phần 2 này mình sẽ hướng dẫn các bạn chèn thẳng nó vào bài viết, tức là mỗi khi bài viết có ảnh nào đó thì khi bạn nhấp vô ảnh thì nó sẽ tự động hiển thị lightbox ra. Các này sẽ dễ dàng hơn rất nhiều nếu bạn dùng cách ở Phần 1 mình hướng dẫn.

Xem demo mình test trên blogspot : DEMO

Hình ảnh minh họa :

* Sau đây là cách thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng ]]></b:skin>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'></script>
<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/b-jquery.lightbox-0.5.js' type='text/javascript'></script>
<link href='http://data.fandung.com/blog/demo/jquery-lightbox/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(function() {
$('#lightbox a[href$=.jpg]').lightBox();
$('#lightbox a[href$=.JPG]').lightBox();
$('#lightbox a[href$=.jpeg]').lightBox();
$('#lightbox a[href$=.JPEG]').lightBox();
$('#lightbox a[href$=.gif]').lightBox();
$('#lightbox a[href$=.GIF]').lightBox();
$('#lightbox a[href$=.bmp]').lightBox();
$('#lightbox a[href$=.BMP]').lightBox();
$('#lightbox a[href$=.png]').lightBox();
$('#lightbox a[href$=.PNG]').lightBox();
$('#lightbox a[href$=.tif]').lightBox();
$('#lightbox a[href$=.TIF]').lightBox();
});
</script>

- Ở phần 2 này có nhiều hàm gọi hơn ở phần 1 . Ở đây mình sử dụng hàm để gọi tất cả thẻ a trong link có các kí tự như “.png“, “.gif“, “.jpg“, … trong id lightbox. Tức là các link hình ảnh. Ở đây nó không phân biệt được chữ hoa chữ thường nên mình mới phải làm nhiều hàm gọi như vậy, và ở trên mình chỉ liệt kê 1 số đuôi ảnh thường dùng, nếu ai muốn đầy đủ thì cứ add thêm.

5. Sau khi chèn xong code ở bước 4, các bạn khoan save template lại, tiếp tục xuống dưới tìm đọan code như bên dưới :

<data:post.body/>

và thêm đọan code đánh dấu highlight như bên dưới :

<div id='lightbox'>

<data:post.body/>

</div>

Ở bước này mình ép cho tòan bộ phần nội dung của blog mang id là “lightbox” để đọan mã javascript trên có thể dễ dàng tìm đến các thẻ a trong bài viết.

6. Cuối cùng là save template lại.

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

Plugin LightBox cho blogspot (Phần 1)

Để mở hàng cho các thủ thuật về blogspot ở nhà mới, hôm nay mình xin giới thiệu với các bạn cách chèn plugin Light Box vào blogspot. Đây là 1 plugin sử dụng jQuery, vì thế mà khi chạy trông nó sẽ rất mượt. Light box là 1 plugin cho phép ta trình diễn ảnh (xem ảnh) ngay trên blog mà không cần hiển thị ở của sổ mới. Plugin này họat động cũng gần giống với các forum VBB version từ 3.8 trở lên. Khi bạn nhấp vào 1 ảnh thumbnail nào đó thì sẽ có 1 box nhỏ hiển thị ảnh với kích thước thật.

Xem Demo ở đây : DEMO

Còn đây là demo mình text trên blogspot : Demo on Blogspot

Hình ảnh minh họa :

Sau đây là các bước thực hiện:

I. Chèn code chính của thủ thuật vào template của blog:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng code ]]></b:skin> :

<style type='text/css'>

/* jQuery lightBox plugin – Gallery style */

#gallery {
background-color: #777;
padding: 5px;
width: 592px;
height:125px;
}

#gallery ul { list-style: none; }

#gallery ul li { display: inline;}
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;

}

#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;

}

#gallery ul a:hover { color: #fff; }

/* END – jQuery lightBox plugin – Gallery style */

</style>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/b-jquery.lightbox-0.5.js' type='text/javascript'/>

<link href='http://data.fandung.com/blog/demo/jquery-lightbox/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(function() {
$('#gallery a').lightBox();
});

</script>

4. Save template.

Lưu ý : đọan code CSS trong bước 3 chỉ là code mẫu, các bạn có thể tùy chỉnh lại theo ý mình.

II. Chèn code hiển thị :

- ở bước này các bạn có thể chèn vào đâu tùy thích, ví dụ muốn plugin
này hiển thị trong bài viết thì chèn vào nội dung bài viết, hoặc muốn
hiển thị đâu đó ngòai trang chính thì tạo 1 widget HTML/Javascript rồi
dán code bên dưới vào :

<div id=”gallery“>

<ul>
<li>
<a href=”Link ảnh 1″ title=”Mô tả cho ảnh 1″>
<img src=”Link ảnh thumbnail 1″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 2″ title=”Mô tả cho ảnh 2″>
<img src=”Link ảnh thumbnail 2″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 3″ title=”Mô tả cho ảnh 3″>
<img src=”Link ảnh thumbnail 3″ width=”72″ height=”72″ alt=”" />
</a>
</li>

</ul>

</div>

- Nếu muốn thêm nhiều ảnh thì các bạn chỉ việc thêm dòng code tương tự như bên dưới :

<li>

<a href=”Link ảnh 4″ title=”Mô tả cho ảnh 4″>
<img src=”Link ảnh thumbnail 4″ width=”72″ height=”72″ alt=”" />
</a>
</li>

</div>

- Link ảnh 1, 2, … : là link của những ảnh mà bạn muốn hiển thị (ảnh gốc)
- Link ảnh thumbnail 1, 2, … : là link của các ảnh nhỏ (thumbnail) sẽ được hiển thị sẵn ở plugin.
- Các link ảnh gốc và ảnh thumbnail có thể giống nhau, nhưng mình khuyên
nên tạo ảnh thumbnail riêng và có kích thước nhỏ thôi (như trong code
mẫu là 72×72px). Như thế plugin sẽ load nhanh hơn.
- Mô tả ảnh 1, 2, … : đây là dòng chú thích sẽ xuất hiện bên dước ảnh khi box hiển thị. Các bạn xem hình minh họa bên dưới :

- Nếu muốn tạo nhiều box để show ảnh thì các bạn chỉ cần tạo code tương tự như ở bước II. Như ng chú ý các bạn phải đổi lại tên id của thẻ div chứa nội dung của lightbox, vì nếu như trên cùng 1 trang mà có 2 thẻ div giống nhau thì chỉ có 1 lightbox chạy mà thôi. Như ở demo mình đã làm 2 cái trên cùng 1 trang.

- Việc sửa code lại tương tự như bên dưới :

<div id=”gallery2“>

<ul>
<li>
<a href=”Link ảnh 1″ title=”Mô tả cho ảnh 1″>
<img src=”Link ảnh thumbnail 1″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 2″ title=”Mô tả cho ảnh 2″>
<img src=”Link ảnh thumbnail 2″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li></div>

- Và tất nhiên là cũng phải tạo 1 đọan mã code CSS riêng cho id gallery2 này.
- Và 1 việc quan trọng cuối cùng để tạo 1 lightbox khác là bạn phải thêm 1 đọan code javascript nhỏ để nó có thể hoạt động.
- Các bạn tìm trong code ở bước I-3 sẽ thấy đọan code này :

<script type=’text/javascript’>

$(function() {
$(‘#gallery a’).lightBox();
});
</script>

và thêm đọan code như bên dưới (đã được đánh dấu highlight)

<script type=’text/javascript’>

$(function() {
$(‘#gallery a’).lightBox();

$(‘#gallery2 a’).lightBox();
});

- Lưu ý là tên id của thẻ div chứa nội dung phải trùng với tên id mà đã được thêm vào code javascript (ở đây là gallery2).
Như vậy thủ thuật đã hòan thành.

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

Thông báo : BlOg FD đã có nhà mới

Sau một thời gian chuẩn bị cho việc blog FD chuyển sang nhà mới thì hôm nay ngôi nhà mới cũng tương đối hòan chỉnh và hôm nay mình muốn thông báo nó với mọi người. Tuy nhiên cơ bản cũng chưa hòan thiện, và tất nhiên còn 1 số việc cần phải làm với nhà mới, vì thế tạm thời mình sẽ chưa link blog FD sang nhà mới.

Mời các bạn ghé thăm nhà mới
http://mothuthuat.com

Khi chuyển sang nhà mới, mình sẽ sửa chữa lại các bài viết do việc host 110mb.com không còn dùng được nữa. Và các file js mình sẽ up lên host cho các bạn tiện sử dụng.
Ngòai ra các liên kết của blog mình khi chuyển sang nhà mới mình sẽ liên kết lại, nếu ai có nhu cầu liên kết với mình thì hãy comment vào mục liên kết (có ở ngay trên header). Và việc liên kết sẽ có nhiều điểm khác hơn so với liên kết ở blogspot như thế này. Mọi người có thể xem chi tiết ở đây. Và tạm thời sẽ chỉ liên kết bằng link.

BlOg FD - Fandung