MY CONNECTIONS

Keep updates via social networks:

SUBSCRIBE VIA EMAIL

Enter your email to form bellow receive latest posts

6

Hiệu ứng phóng to ảnh dùng Jquery

Posted 1/06/2012 / By / ,

Mình cũng đã từng giới thiệu đến các bạn hiệu ứng phóng to ảnh khi rê chuột vào chúng. Hiệu ứng lần này sẽ giúp trong việc trình bày các hình ảnh trong một cách rất đẹp trong blog của bạn. Nó giúp để trình bày hình ảnh với nhiều kích thước hơn bằng cách phóng to để xem kích thước thật của ảnh gốc ( hình ảnh chỉ được phóng to khi Click chột vào nó ). Scrip này là của Dynamicdrive.

Xem Demo


Để làm được thủ thuật, các bạn làm theo 2 bước sau:
1. Chèn code bên dưới vào trước thẻ </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/560192341/magnifier.txt.js">
</script>

Đoạn màu xanh nếu Template của bạn có rồi thì xóa đi.

2. Như vậy khi nào bài đăng của bạn có hình ảnh mà muốn có hiệu ứng thì bạn dùng Code để chèn
<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="URL_IMAGE" alt="" border="0" />
Thay URL_IMAGE bằng một LINK ẢNH .
Tham khảo: Bloggerzbible

2

Hiệu ứng phóng to hình ảnh khi rê chuột vào

Posted 1/06/2012 / By / ,

Hôm nay Dangcapblog sẽ giới thiệu cho các bạn một hiệu ứng phóng hình ảnh khi bạn rê chuột vào nó. Khi rê chưa rê chuột ảnh sẽ nhỏ và có hiệu ứng mờ ảo nhưng khi rê chuột vào thì ảnh lớn và sáng hẳn lên. Hiệu ứng này khá đẹp mắt cho những blog có bộ sưu tập ảnh, hôm trước mình cũng đã đăng cho các bạn một Template Ảnh khá đẹp, nếu dùng tiện ích này cho template NÀY thì quá tuyệt.

Các bước thực hiện
1. Các bạn vào Thiết kế rồi Chỉnh sửa HTML
2. Thêm đoạn Code dưới đây trước thẻ </head>


<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>

Như vậy mỗi khi viết bài có hình ảnh các bạn chỉ cần bật qua HTML và dán code sau:

<div class="hovergallery">
<img src="URL" />
<img src="URL" />
</div>
Nguồn Dynamicdrive

19

Tạo mật khẩu ( password ) cho bài viết blogspot

Posted 12/30/2011 / By /

[ BlogspotVn ] - Đôi khi các bạn muốn viết một số bài nhưng chỉ muốn một số người nào đó mới biết được, thủ thuật này mình sưu tầm được và sẽ hướng dẫn cho các bạn cách thiết lập password để xem 1 bài viết nào đó. Với thủ thuật này, khi bạn muốn xem bài viết nào đó (hoặc 1 trang nào đó trong blog) thì nó sẽ hiển thị 1 bảng popup nhỏ yêu cầu điền password vào.

Có thể xem demo ở ĐÂY  ( với password là blogspotvn )
Read More

6

Làm đẹp phần bài đăng blogspot

Posted 12/30/2011 / By /

[ BlogspotVn ] - Footer của bài viết có chứa tiện ích như : Người đăng, thời gian post bài, nhãn comment... Các bạn có thể chỉnh sửa theo ý mình cho blog của bạn.

Việc chỉnh sửa có thể làm như cách sau : vào layout (Bố cục)-> Tìm đến tiện ích "Bài đăng trên blog" và click vào Edit(chỉnh sửa) -> và một hộp thọai hiện ra, và bạn có thể chỉnh sửa theo ý mình (xem hình bên dưới)

Read More

0

Thay liên kết Bài đăng mới hơn, cũ hơn bằng hình ảnh

Posted 12/30/2011 / By / ,


[ BlogspotVn ] - Đối với mỗi template của blogspot, mặc định cuối mỗi trang sẽ có 3 link liên kết là "Bài viết mới hơn", "Trang chủ", "Bài viết cũ hơn". Để làm cho blog trông đẹp hơn, hôm nay mình giới thiệu cho các bạn 1 thủ thuật nhỏ để đổi các liên kết đó thành hình ảnh.
Các bạn coi hình minh họa bên dưới.


Read More

0

Thêm biểu tượng vui cho comment

Posted 12/30/2011 / By / ,

[ BlogspotVn ] - Thủ thuật này có lẽ khá quen thuộc với nhiều người, tuy nhiên một số bạn sẽ chưa biết, và mình cảm thấy nó rất tiện dụng trong cộng đồng blogger hiện nay nên mình cũng đã sưu tầm được và hôm nay xin đăng lại cho mọi người cùng xem. Thủ thuật này còn có thêm hiệu ứng khá đẹp mắt là ẩn hiện tab chú thích những kí hiệu cho các biểu tượng.





Read More

1

Thêm tiện ích đánh giá bài viết vào blog

Posted 12/29/2011 / By /

Để giúp người đọc gắn kết với blog, Blogvn đề nghị một công cụ đánh giá bài viết khá hay từ trang JS-Kit. 5 sao là mức đánh giá cao nhất cho một bài đăng. Đây là một công cụ viết bằng JavaScript và dễ dàng chèn vào Template (Mẫu) của Blogger như hướng dẫn của người đề nghị trên. Tuy nhiên tôi xin cung cấp thêm vị trí đặt code khác hay hơn.

Sau khi đăng nhập Blogger, bạn chọn Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML) và đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu). Bạn cũng nên sao lưu template của mình trước khi thực hiện tiếp.
Chúng ta sẽ chèn vào vị trí phía ngay sau tiêu đề của bài đăng và nằm cùng bài viết.Bây giờ kéo thanh trượt hoặc nhấn phím Ctrl + F để tìm đoạn code này:

<div class='post-header-line-1'/>

Bạn chỉ việc dán đoạn code dưới đây phía ngay sau đoạn code trên:

<div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div> <script src="http://js-kit.com/ratings.js"></script>

Thay left bằng right nếu muốn công cụ xuất hiện bên phải.

Trường hợp sử dụng Read more (Đọc thêm) chỉ muốn công cụ xuất hiện khi bài đăng hiện ra đầy đủ, ví dụ như blog này, hãy dùng đoạn code sau:

<b:if cond='data:blog.pageType == "item"'> <div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div> <script src="http://js-kit.com/ratings.js"></script> </b:if>

Và bên dưới là thành quả

1

Tạo dropdown cho Nhãn ( label )

Posted 12/26/2011 / By / ,


[ Dangcap9x ] - Đôi khi các bạn thấy tiện ích Label ( Nhãn ) có sẵn của blogger chiếm nhiều không gian của blog bạn đúng không? Mình cũng thấy như vậy và đã đi tìm kiếm thủ thuật giúp nó gọn hơn, và hôm nay mình xin được giới thiệu lại thủ thuật này để các bạn cùng xem. Với thủ thuật này sẽ blog bạn sẽ gọn hơn, và sẽ không bị chiếm nhiều chỗ do list Label của bạn quá dài nữa.





Để thực hiện, trước tiên bạn phải tạo cho blog mình một widget Label được tích hợp sẵn trong blogger.
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Thêm tiện ích Label vào blog.


Sau khi thêm tiện ích label vào blog các bạn tiếp tục thực hiện các bước bên dưới:
1. Vào bố cục
2. Vào phần chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đọan code bên dưới:


<ul><b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


5. Thay thế tất cả bằng code bên dưới:
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>

<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

6. Save template

0

Tạo con trỏ chuột đón giáng sinh

Posted 12/21/2011 / By / ,

Nếu bạn muốn có kiểu con trỏ được thiết kế đặc biệt cho blog của mình thì bạn có thể tìm nhiều kiểu có sẵn miễn phí trên Internet. Nhưng điều quan trọng là cách cài đặt nó mà thôi.Sau đây là một ví dụ kiểu con trỏ tham khảo từ Internet có dạng hộp sọ ông già Nô-el nhân dịp Giáng Sinh sắp đến gần.
Kiểu con trỏ hộp sọ ông gia Nô-el có dáng như thế này:

Sau đây là hướng dẫn thiết lập:

Bước 1: Đăng nhập Blogger, vào Bố cục (Layout), Chỉnh sửa HTML (Edit HTML).

Bước 2: Trong Template tìm thẻ mở <body> rồi dán đoạn mã sau đây vào bên dưới nó.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol281.cur), progress;}</style>

Lưu Template và bạn có thể kiểm tra tác dụng của hiệu ứng con trỏ rồi đấy.

3

Tạo chữ merry christmas mừng giáng sinh

Posted 12/17/2011 / By /

Để blog của mình thêm sinh động chuẩn bị đón ngày"Noel", các bạn có thể gắn chữ "Merry Christmas"lên Blog và chữ "Merry Christmas" này sẽ trượt dọc theo Blog. Đi kèm với chữ "Merry Christmas"Blog của bạn còn có một trận "Tuyết rơi" cho toàn Blog đúng nghĩa mùa "Noel", chiều rơi của những bông tuyết này sẽ ngược hoặc cùng chiều với chiều rê con chuột, có nghĩa là khi chuột rê qua phải thì hướng tuyết rơi sẽ qua trái hoặc qua phải (tuỳ theo lần load trang).


Read More

←
RECENT COMMENTS