2011 ~ Những thử nghiệm của vngreenzone

Dec 18, 2011

[Trailer] 2 templates sắp tới

Đây là 2 mẫu sẽ được share ở sắp tới , sẵn nói đôi điều cho các bạn mong các bạn đừng buồn , để có thể ghi nhớ công lao tác giả rip temp sang WP , các bạn có thể tìm 2 mẫu nào trên mạng và sẽ thấy ủa blogspot , nhưng vấn đề là rip chưa kỹ , mình đợi fandung nghiên cứu thủ thuật là mình sẽ share 2 cái này cho các bạn , temp đầu thì các bạn thấy rồi , còn temp thứ 2 các bạn vào đây . Còn không chúng ta xem clip ở dưới đây

Chúc các bạn giáng sinh vui vẻ

Test2

Tag a Testing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Testing

Tag Testing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non nisi et diam consequat cursus. Donec eget molestie justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tạo ảnh loading đẹp với css và js

Tag Thủ thuật blogger

Cái thủ thuật này xưa lắm rồi các bạn ạ , nhưng làm thì chúng ta phải có ảnh loading , mà trong khi đó thì các ảnh không được đa dạng và nhìn nó chạy cảm thấy rất nặng , nhưng với cssload.net Chúng ta không phải ngại về vấn đề trên nữa.

1.Thêm .js:
Thêm đoạn js sau vào trước </head> :

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("loading").style.display="none";
}
</script>

2.Đoạn html:
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:

<style>
#circleG{
width:149.33333333333334px;
}

.circleG{
background-color:#48c7a9;
float:left;
height:32px;
margin-left:17px;
width:32px;
-webkit-animation-name:bounce_circleG;
-webkit-border-radius:21px;
-webkit-animation-duration:1.35s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circleG;
-moz-border-radius:21px;
-moz-animation-duration:1.35s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
opacity:0.3}

#circleG_1{
-webkit-animation-delay:0.27s;
-moz-animation-delay:0.27s}

#circleG_2{
-webkit-animation-delay:0.63s;
-moz-animation-delay:0.63s}

#circleG_3{
-webkit-animation-delay:0.8099999999999999s;
-moz-animation-delay:0.8099999999999999s}

@-webkit-keyframes bounce_circleG{
0%{
opacity:0.3}

50%{
opacity:1;
background-color:#19409a}

100%{
opacity:0.3}

}

@-moz-keyframes bounce_circleG{
0%{
opacity:0.3}

50%{
opacity:1;
background-color:#19409a}

100%{
opacity:0.3}

}

</style>
<div border="0" style="position:fixed; width: 100%; height: 70px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="0" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="0" style="background-color: #000; color: #fff;filter: alpha(opacity=70); opacity: .7; width: 190px; height: 70px; z-index: 1; border-collapse: collapse;-moz-border-radius: 5px;
-webkit-border-radius: 5px;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br /><div id="circleG">
<div id="circleG_1" class="circleG">
</div>
<div id="circleG_2" class="circleG">
</div>
<div id="circleG_3" class="circleG">
</div>
</div> Nhấn F5 nếu đợi quá lâu</div> </td> </tr> </table> </div>

Nếu các bạn không thích thì vào cssload.net để tạo các style khác nhau , và thay chỗ css màu xanh thành đoạn css mà bạn muốn , thay code màu đỏ thành chỗ hiển thị ảnh loading. Đoạn code màu vàng để thay đổi chiều cao cho khung.

Đồ họa thật kinh ngạc với cs3

Tag Cảm nhận

Woa , thật ngoạn mục khi yolks lên youtube giải trí , thì thật kinh ngạc nhóm FlashDesk này làm film rất hay. Không ngờ Cs3 không những nổi tiếng về mặc thiết kế web , nó còn làm hình ảnh , làm flash được nữa . Chúng ta hãy quan sát 2 video của nhóm này làm nhé . Và đúc kết được kinh nghiệm gì ?? Các bạn hãy comment phía dưới , phần thưởng là Style comment phân cấp cho các bạn.

1.Xem video:
Tập 1

Tập 2:

Xin ké cái clip của Yolks quay góp vui cho anh em:

hehe, lúc này ta hơi xấu
2.Đúc kết ( Event ) :
Có thể nói style cho comment phân cấp rất đơn giản , nhưng đây chỉ là 1 bài cảm nhận nên mong các bạn sẽ nhận được gì nho nhỏ . Mình hi vọng là với style phân cấp này và những trận cười nho nhỏ các bạn hãy ủng hộ event nhỏ này nhé.

Xin cảm ơn các bạn đã xem , và mong các bạn gửi comment đúc kết để có thể tham gia

Không cho sao chép nội dung bài viết cho blogger

Tag Seo Thủ thuật blogger

Có thể mọi thành quả , công lao chúng ta khi chúng ta suy nghĩ hoặc tạo ra nó , các bạn muốn sự làm việc siêng năng của mình được bù đắp. Nhưng , đã có một số kẻ gọi là ăn cắp chất xám người khác vd : "copy cat" , con mèo con chỉ biết bắt chước mèo mẹ mà thôi.
Để chống lại tình trạng copy vô tội vạ của một số blogger . Chúng ta hãy thử cách này xem .

1.Đăng kí:
Vào trang Tynt.com để đăng kí cho mình 1 tài khoản giống hình trên

2.Cách cài cho blogspot:
Vào giao diện chính của blogger

Vào mục thiết kế >>>> chỉnh sửa html:

Chèn đoạn js của Tynt vào trước thẻ html:

Đây là đoạn js lúc đầu các bạn nhận được lưu ý đây là code của vngreenzone.com , các bạn hãy thay nó thành code mình đã đăng kí , xin lưu ý là khi các bạn lấy code này vào , sẽ tự động dính thử nghiệm , mà các bạn sẽ hiểu code trên , nếu đã thấy thì các bạn hãy xóa nó đi nhé . Không bật mí đâu , trừ khi các bạn test :)):

<script type="text/javascript">
if(document.location.protocol=='http:'){
 var Tynt=Tynt||[];Tynt.push('adoU5Ihzqr4A9macwqm_6l');Tynt.i={"ap":"Nguồn bài viết :"};
 (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

3.Cách thức hoạt động:
Quan niệm của Tynt

Nếu có một người copy bài viết của bạn , nó sẽ tự động chèn vào phím ctrl+C và khi các bạn ctrl+v thì coi như người đó đã giúp các bạn 1 vé , và thế là cứ tiếp tục và tiếp tục. Ví dụ như hình ảnh trên:

Thủ thuật trên cũng mang tính về seo khá nhiều đó các bạn ạ.

Các bước và cách bảo vệ blog khỏi google

Tag Thủ thuật blogger

Google là ông chùm của ngành internet . Ừm thì ông là vua tôi là giặc , tôi vi phạm thì ông xử chém . Qua việc vnblogspot.com bị google đá mất tài khoản là không chấp nhận được và hãy tìm cách làm sai cho ông vua nhà ta bớt giận.

1. Hãy tìm và đọc lại điều khoản:
Các bạn vào link sau vào xem lại ở đây . Sau khi đọc xong thì đến bước 2 thôi
2.Sao lưu blog lại khi có bài viết mới:

Các bạn nên làm những lúc có bài mới , xuất blog hàng ngày lưu vào 1 file mục . Thì chắc chắn google khóa tài khoản thì chuyển qua tài khoản mới
3.Sao lưu templates trên blog:
Làm theo các hình sau đây :

Xong . Chỉ cần làm theo 3 bước trên thì không lo google
Còn nếu như sub domain mà còn bị dính trên blog cũ thì chúng ta hãy liên hệ với google để giải quyết vấn đề này.

Manga-Anime [template]

Tag Template

Lại 1 templates được ra mắt vào hôm nay . Trước khi làm tôi chỉ muốn nói 1 lời với cái bạn : " Template này làm từ 2010" Không sao cái thời mà Yolks chỉ mới bước chân vào blogger . Ngày 7/1/2010 là ngày Yolks tạo cái template này.

Demo

1.Ưu điểm:

Lưu trữ dạng lịch ( load sẽ nặng hơn nếu blog tầm 300 trở lên)
Tiện ích share cho Y!H
Auto readmore thông minh
Khó lòng bắt chước template thứ 2

Hỗ trợ ie 6 , 7 , 8 , 9
firefox: 3x >>>>>>>>6x
opera: tốt trên mọi phiên bản

Nói chung template này rất công phu
2.Khuyết điểm:
Lâu quá rồi cũng ko nhớ , mà nó không có khuyết điểm gì
Template code
Hãy gõ vào khung "Xin cảm ơn" nó sẽ tự hiện Link download cho các bạn

Download

Khi thấy lưu trữ báo lỗi :

Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

Thì các bạn hãy làm theo hình trên

Save template

Tùy biến label thành tag cloud giống WP

Tag Thủ thuật blogger

Bạn có thấy tag cloud của WP đẹp không ? , vậy giờ chúng ta sẽ làm giống y hệt nhé , chúng ta sẽ làm cho WP phải lác mắt với sức mạnh blogger.

1.Nói lại code hiển thị số bài đăng trong label của Duypham (blog.duypham.info) :
Bởi vì trong blog chúng ta sẽ có 2 thẻ <data:label.count/> một cho dạng list , một cho dạng tag cloud như trong ảnh của bạn Duy Phạm chụp

Ta thay thế:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

Thành:

<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

Rồi tiếp tục:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>

Thành:

<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

2.Tạo dạng tag cloud:
Các bạn vào Thiết Kế >>> Phần tử trang và bấm vào chỉnh sửa , chúng ta sẽ có như hình trên và làm theo 2 bước như trong hình

Sau đó thêm đoạn code sau trước ]]></b:skin> :

.sidebar .list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.sidebar .list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.sidebar .list-label-widget-content li a:hover{border:1px solid #F26535}

Nếu các bạn thấy không chạy thì hãy làm theo bỏ đoạn css trên và thay bằng đoạn css bên dưới:

.list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.list-label-widget-content li a:hover{border:1px solid #F26535}

Xây dựng một vngreenzone hoàn hảo , tại sao không ?

Tag Cảm nhận

Nút +1 đã đi sau vào tìm thức mỗi con người blogger chúng ta. Từ khi thành lập blog vngreenzone nó đã như là của bạn. Bạn hãy xem vngreenzone như một nơi thư giãn cũng được , là một quán bar , là một ngôi nhà , một gốc cây đễ chúng ta nghĩ lưng.

Vngreenzone không đòi hỏi các bạn phải donate gì cả , dù thủ thuật có cao siêu thì cũng không phải trả phí. Nhưng ngược lai, chúng ta hãy +1 cho ngôi nhà chúng ta , và ngôi nhà sẽ được sơn phết lại theo từng năm tháng bỏ lỡ

Các bước thực hiện ( vì web không có add nút +1 nên các bạn hãy add vào trình duyệt):

Truy cập http://www.google.com/chrome/intl/vi/p/google-plus.html cài đặt cho google chrome bạn nhé:

Các bạn hãy tìm lại các bài viết bạn thích và +1 và nó sẽ là động lực để vngreenzone.com có thể mở 1 sự kiện tặng template chẳng hạn.

Social media icons tuyệt đẹp cho blogger

Tag resource

Yolks sẽ mở thêm 1 thư mục là trang trí . Ở mục này sẽ có nhiều bài viết về các icons , các thủ thuật về thiết kế cho đẹp mắt , các bạn chú ý đón xem. và đây là bài đầu tiên.

1.Link download:

Downloads:

2.Áp dụng vào blog:

<a href="http://facebook.com/Yourlink" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKb0ct5XEhUwsbKWt4j7nPwuPtPBaKAgEKkh-8PySQinilw-oQC0pSOrF1E8qBwq7mjcFWjuggqSrCurE-Ry4mI8DhyphenhyphencH2TO9kTCp93i8P5w1TNt-X52Nvl24UlxJGGppUXhkRmLmQyY/s1600/facebook-30x43.png" /></a><a href="http://twitter.com/vngreenzone" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjdepdUX-6UeTVc3aQ-6VRp6T3XsNOID4o2DBtO8fxiSyM2aH2xRrZzXo_CoqgBeWEiqNiu2XM8RdI_Wf9mZsRC06dcYaJv1_DVbQc8kWkqv7LMfZ8zkWaNrJXUv5s9VX589-CA3OyhQ/s1600/twitter-30x43.png" /></a><a href="https://plus.google.com/104766042142182533647/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatAbCsXj5D6UKVCGPLK_ohqd7XCjTdtVTJCK0zAeU-PCGxN9wI3W4KSS07ogET2DZe4exPoFYy0LS-7vS1vMl5j2KOf2MLgdRBnkcd2LMZh6AYt05xwlkZ0la2nh0Yqqx9TjlNSEgBzg/s1600/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/vngreenzone" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPirFV1D5Yniyq90_-3mMPeuNzHlGIWyfLHLlUuTus0OJTdAkgNuSBkBHfV9rRaxizBB8X9RSbz6W8shD1pDNk2e9jOPdQDs52SZw8sRKDUSHDzPdMtQTHw2L3XpcNApHfDOhHmM80T24/s1600/rss-30x43.png" /></a>

và có kết quả

Khung tìm kiếm biết nói cho blogspot

Tag Thủ thuật blogger

Bạn đã thấy khung tìm kiếm biết nói chưa ? Đa số là chưa đâu vì Yolks đã mới nghiên cứu trình duyệt Google Chrome nên giờ thấy thích thú quá.

Demo sẽ là blog Yolks (Chỉ xem bằng Google Chrome)

1.Cách chỉnh sửa:

<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text'/>
<input class='button' type='submit' value='Search'/>
</div>

Chúng ta xem đoạn code màu đỏ , và chúng ta sẽ thay nó thành:

<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value='' x-webkit-speech='x-webkit-speech'/>
<input class='button' type='submit' value='Search'/>
</div>

Xong. Vậy là chúng ta sẽ có hệ thống đọc tiếng Anh giống Lạc Việt trên khung tìm kiếm

Trình diễn đa năng với koolbox

Tag Thủ thuật blogger

Trong lúc đi dạo các blog chuyên về design thì Yolks thấy, một số designer dùng plugin của jQuery là koolbox. Cho một số trang web của họ để làm đẹp ảnh trình bày bai viết.

Tuy nhỏ gọn , nhưng bảo đảm với các bạn koolbox có thể sẽ đánh ngã được prettyphoto trong thời gian sắp tới vì đây chỉ mới phiên bản v1.

Chúng ta sẽ xem qua các kiểu của nó nhé:

BASIC:

<a href="images/1.jpg" class="kool-box" title="Dragon ball"> <img src="images/thumb/1.jpg" alt="" /></a>
<a href="images/2.jpg" class="kool-box"> <img src="images/thumb/2.jpg" alt="" /> </a>
<a href="images/3.jpg" class="kool-box"> <img src="images/thumb/3.jpg" alt="" /></a>

GALLERY:

<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a> 
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a> 
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>

GALLERY (Other theme):

<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a> 
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a> 
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>

HTML:

<ul>
  <li><a href="#infoContent" class="kool-box {width:300,height:200}">Inline Content</a></li>
  <li><a href="ajax.htm" class="kool-box {width:600,height:400}">Ajax Content</a></li>
  <li><a href="http://www.google.com/search?sclient=psy&hl=en&biw=1920&bih=920&site=&source=hp&q=vngreenzone" class="kool-box {
type:'iframe',width:800,height:600}" >Iframe</a></li>
</ul>

MEDIA:

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf"
class="kool-box"><img src="images/video/flash.png" /></a>
<a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov"
class="kool-box"><img src="images/video/quicktime.gif" /></a> 
<a href="http://www.youtube.com/watch?v=EFJOZkKi7gk" class="kool-box"> <img src="images/video/youtube.png" alt="Youtube" title="Youtube" /></a>
<a href="http://vimeo.com/8578886" class="kool-box"><img src="images/video/vimeo.png" alt="vimeo" title="vimeo" /></a> 
<a href="http://www.megavideo.com/?v=22DU0O7O" class="kool-box"> <img src="images/video/megavideo.png" alt="Megavideo" title="Megavideo" /></a>
<a href="http://www.facebook.com/video/video.php?v=452462259845" class="kool-box"> <img src="images/video/facebook.png" alt="Facebook" title="Facebook" /></a>
<a href="http://www.dailymotion.com/video/xhzwb7_videotest-de-dragon-ball-z-budokai-3-sur-ps2_videogames"
class="kool-box"> <img src="images/video/Dailymotion.jpg" alt="Dailymotion" title="Dailymotion" /></a>
<a href="http://www.veoh.com/watch/v20859242sSZ5BzKR" class="kool-box"> <img src="images/video/veoh.png" alt="veoh" title="veoh" /></a> 
<a href="http://www.metacafe.com/watch/6415350/dragon_ball_game_project_age_2011_teaser_trailer/"
class="kool-box"> <img src="images/video/Metacafe.png" alt="Metacafe" title="Metacafe" /></a>
<a href="http://clip.vn/watch/DragonBallZ056,zOr" class="kool-box"><img src="images/video/clip.vn.png" alt="clip.vn" title="clip.vn" /></a>

CÁC THEME KHÁC

<ul>
  <li><a href="images/1.jpg" class="kool-box {theme:'facebook'}" title="Dragon Ball Z">Facebook</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'white'}" title="Dragon Ball Z">White</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'violet'}" title="Dragon Ball Z">Violet</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'window7'}" title="Dragon Ball Z">Widnow 7</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'003366'}" title="Dragon Ball Z">003366</a></li>
</ul>

1.Cách cài vào blog:Thêm đoạn .js sau vào trước </body> rồi dùng các đoạn code nêu ở trên ví dụ để làm hiệu ứng:

  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/003366/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/facebook/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/white/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/violet/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/window7/theme.css" rel="stylesheet" type="text/css" />
  <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>-->
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.validate.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.easing.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/metadata.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/koolbox.min.js" type="text/javascript"></script>

<script type="text/javascript">





    $(function () {



      /* regex = /http\:\/\/www\.youtube\.com\/watch\?v=(\w{11})/;



      url = 'http://www.youtube.com/watch?v=Ahg6qcgoay4';



            var url = 'http://abc.com/a.swf'; // \\"http://vimeo.com/7058755";

            var regExp = /[^\.]\.(swf)\s*$/i; // /youtube\.com\/watch\?v=([A-Za-z0-9._%-]*)[&\w;=\+_\-]#1# ; ///youtube\.com\/watch\?v=(\w{11})/ ; // /vimeo.com\/(\d+)($|\/)/; //|| /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;

            

            var match = url.match(regExp);



            alert(match.length);



            if (match) {

              alert("id: " + match[1]);

            } else {

              alert("not valid url");

            }*/







      $('.kool-box').koolbox();



      $('img').css({ opacity: 0.8 }).hover(

        function () {



          $(this).animate({ opacity: 1.0 });

        }, function () {

          $(this).animate({ opacity: 0.8 });

        });

    });



  </script>

Những thử nghiệm của vngreenzone

Ads 468x60px

Dec 18, 2011

[Trailer] 2 templates sắp tới

Dec 17, 2011

Test2

Testing

Dec 9, 2011

Tạo ảnh loading đẹp với css và js

Dec 4, 2011

Đồ họa thật kinh ngạc với cs3

Dec 3, 2011

Không cho sao chép nội dung bài viết cho blogger

Nov 25, 2011

Các bước và cách bảo vệ blog khỏi google

Nov 21, 2011

Manga-Anime [template]

Nov 8, 2011

Tùy biến label thành tag cloud giống WP

Xây dựng một vngreenzone hoàn hảo , tại sao không ?

Nov 2, 2011

Social media icons tuyệt đẹp cho blogger

Khung tìm kiếm biết nói cho blogspot

Nov 1, 2011

Trình diễn đa năng với koolbox

Follow Now......!

Template Video

Popular Posts

Labels

Blog Archive

Followers

Labels

Labels

Labels