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

Read more…

Ở 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.

Read more…

Để 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.

Read more…