Hoàng Lê

Thứ Tư, 16 tháng 8, 2017

[Official MV] Quê Em Mùa Nước Lũ - Phương Mỹ Chi

Thứ Tư, 1 tháng 7, 2015

Thứ Năm, 29 tháng 1, 2015

Thứ Bảy, 20 tháng 12, 2014

Hiển thị bài đăng phổ biến dạng ảnh chuyển động

Chắc mọi người đều không xa lạ với hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.
Xem Demo

Demo for Post

Xem ảnh minh họa.

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào thiết kế (Mẫu)

3- Chọn Chỉnh sửa HTML.

4-Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHOr4RRbLi6C25VqEY5vdW-t54hw1Y2WA04V2FZBfXJb4iOprrArUlJoPgbtdfy7zCM1o4x773Hnoe_eaR4R0pb1b8Ey2znftPr-gKGp2Fiupu1UhudxhdryiyFWcF2LqHHvFIcpfG502/h120/bg-slider-namkna-blogspot-com.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

5- Thêm đoạn mã dưới đây vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/66256041/Popular-Posts/namkna-blogspot-com/auto-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c1qAul73vo0O2jwqMiclRX_4KvohBRTgOIHXHJWxndDU6Ddi9oKg5yo6XYkOUpmK9Tbc_fYmCuKQyk5LqtHQpZJQG3xuOUVnfkwpoKrVlFBE-0tqI-o2hEzOoKU02qIUMqwDByyEircW/h120/prev-namkna-blogspot-com.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9LWQuzAdBSEETFs4_v3pX2lZkJsos4I4Y-Pt7lOuNYQ1quiNnG9TMjct_o_1eXTNUKYRyeI6TJtfyKWAkFMds4-WPY27khZD1gfR0f6uyWlVlIyiBbIUEIXQMuaWaVwAJMfLctTVVujKZ/s1600/next-namkna-blogspot.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

6- Tìm thẻ

<b:section class='main' id='main' showaddelement='yes'/>

hoặc

<b:section class='main' id='main' showaddelement='no'/>

và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGbMR-viaJGIFB_rlPG9mhZZrMkKY2V8vvfysz-frv-pP7UTsaVakIb4xvkjq1Ll15ZW2X2qyMQOHjmRTNI8YeU-W3U0g15xBLkGA0hXiQyJRpc8AsKljJRZN4N_aEzTLU2jBBf2Le4AC/s1600/no-image-namkna-blogspot.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

7- Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thịchọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.

8- Bấm Lưu Mẫu và xem thành quả.

Một lần nữa mình phải nhắc lại là để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...

Đây là 1 trong số hiếm hoi những thủ thuật về Blogger mà mình chủ động "đầu tư" thêm vào CSS, thông thường phần này mình để các bạn tự thiết kế theo ý thích.

Chúc thành công!

Theo: Duypham.info

Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger

Để Blog đẹp hơn ta có thể áp dụng hiệu ứng cuộn tròn cho các hình ảnh. Với hiệu ứng này các nút Share sẽ quay vòng theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ tùy vào sự điều chỉnh của các ban.
Các bạn có thể xem Demo Demo:

Xem Demo

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn tao hiệu ứng quay vòng:
Tiếp theo vào Thiết kế -> Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Thêm một HTML/Javarscrip và thêm đoạn dưới vào:

<b>360 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons">
<a href="http://namkna.blogspot.com/feeds/posts/default">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnclh4A0PZv2jM0s-nNTQxnKXr6NGqeluFFmAp-yoFdn2iqGOwwfHkoiqzwvE2OcQkQaixeK0y75rF9Htrvp91LAj0ESU6SDUGwDMYP9XVpOd9sa8r_q9nk9UzyGjlibLfZNR9ghWNs-L/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9aya7m9A2HSe-6No5mpEBI9OlO53Yu8ZzvSHnHejPxbRvz_iQVeMTSjg_oQebTQ0nsgkuvGuOoqUQcq5whGHNov-BlmyaDk-g2jzGsC1CBgDQYTUb7zEUyU2-obPA4ixhT_UUY-2K-LG/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWAyXQcEfD-Kdir9YtfwUlqufpWn-vMK8QSwti87corbn9TG2EcWkj7ZjJ59uAxdNjT4cNMsSbDbpTpybtm4BVs0ZHva_BcSeHozzy9M8RRPZGF-NYx3C4Hbv8Gq7yQiEMM4xG5cFsGR6/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhakLnUqrwbu-p3hOGCmemwlYP1DgUpPILAnH2SdNSqvRISUlTFqnMZYYIJXhKEP-I77VEfezg-mlwDRztvsip1nwT5UkEZPcrDb4ZsMmA-i-mf-var7FbyYKh1He-S1pcgwjIFE8ziVyhI/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWjtJhBR7uPvga4ZCMSInkpZHJHu8EUFan7z7yxojlgCXt-902fthnbXpb6WnGHWFK5Mtr9A5OUSI7L7QwSCYqmQe23PhIkm8xwNHpgW3wKmEe58zknvK7Ydl8Fk0-FDtqawwX7fnINLr/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>60 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons2">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnclh4A0PZv2jM0s-nNTQxnKXr6NGqeluFFmAp-yoFdn2iqGOwwfHkoiqzwvE2OcQkQaixeK0y75rF9Htrvp91LAj0ESU6SDUGwDMYP9XVpOd9sa8r_q9nk9UzyGjlibLfZNR9ghWNs-L/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9aya7m9A2HSe-6No5mpEBI9OlO53Yu8ZzvSHnHejPxbRvz_iQVeMTSjg_oQebTQ0nsgkuvGuOoqUQcq5whGHNov-BlmyaDk-g2jzGsC1CBgDQYTUb7zEUyU2-obPA4ixhT_UUY-2K-LG/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWAyXQcEfD-Kdir9YtfwUlqufpWn-vMK8QSwti87corbn9TG2EcWkj7ZjJ59uAxdNjT4cNMsSbDbpTpybtm4BVs0ZHva_BcSeHozzy9M8RRPZGF-NYx3C4Hbv8Gq7yQiEMM4xG5cFsGR6/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhakLnUqrwbu-p3hOGCmemwlYP1DgUpPILAnH2SdNSqvRISUlTFqnMZYYIJXhKEP-I77VEfezg-mlwDRztvsip1nwT5UkEZPcrDb4ZsMmA-i-mf-var7FbyYKh1He-S1pcgwjIFE8ziVyhI/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWjtJhBR7uPvga4ZCMSInkpZHJHu8EUFan7z7yxojlgCXt-902fthnbXpb6WnGHWFK5Mtr9A5OUSI7L7QwSCYqmQe23PhIkm8xwNHpgW3wKmEe58zknvK7Ydl8Fk0-FDtqawwX7fnINLr/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>-360 degree spin onMouseover ONLY</b></p>

<p id="socialicons3">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnclh4A0PZv2jM0s-nNTQxnKXr6NGqeluFFmAp-yoFdn2iqGOwwfHkoiqzwvE2OcQkQaixeK0y75rF9Htrvp91LAj0ESU6SDUGwDMYP9XVpOd9sa8r_q9nk9UzyGjlibLfZNR9ghWNs-L/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9aya7m9A2HSe-6No5mpEBI9OlO53Yu8ZzvSHnHejPxbRvz_iQVeMTSjg_oQebTQ0nsgkuvGuOoqUQcq5whGHNov-BlmyaDk-g2jzGsC1CBgDQYTUb7zEUyU2-obPA4ixhT_UUY-2K-LG/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWAyXQcEfD-Kdir9YtfwUlqufpWn-vMK8QSwti87corbn9TG2EcWkj7ZjJ59uAxdNjT4cNMsSbDbpTpybtm4BVs0ZHva_BcSeHozzy9M8RRPZGF-NYx3C4Hbv8Gq7yQiEMM4xG5cFsGR6/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhakLnUqrwbu-p3hOGCmemwlYP1DgUpPILAnH2SdNSqvRISUlTFqnMZYYIJXhKEP-I77VEfezg-mlwDRztvsip1nwT5UkEZPcrDb4ZsMmA-i-mf-var7FbyYKh1He-S1pcgwjIFE8ziVyhI/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWjtJhBR7uPvga4ZCMSInkpZHJHu8EUFan7z7yxojlgCXt-902fthnbXpb6WnGHWFK5Mtr9A5OUSI7L7QwSCYqmQe23PhIkm8xwNHpgW3wKmEe58zknvK7Ydl8Fk0-FDtqawwX7fnINLr/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

Lưu ý: Ở trên mình phân làm 3 mầu khá nhau ứng với một loại menu khác nhau, nếu chỉ sử dụng 1 loại thì bạn xóa các màu còn lại đi nha.

Chúc thành công!

theo: dynamicdrive.

☼ Cách tạo một tiện ích nhạc ẩn hiện khi click chuột cho blogspot

Theo yêu cầu của một số bạn giới thiệu cho các bạn thủ thuật tạo một trình nghe nhạc tự đổng ẩn hiện khi ta click chuột vào. Tiện ích này rất phù hợp với các bạn có tính phá cách, muốn tạo điểm nổi bật cho Blog của mình. Ưu điểm thủ thuật này là khi bạn ẩn trình nghe nhạc vẫn tiếp tục chạy nếu bạn không ấn tạm dừng. Có thể áp dụng với cả nhạc hình và nhạc không hình

Các bạn có thể xem demo của mình ở link bên dưới để kiểm tra xem tiện ích này hoạt động như thế nào nha:

Xem Demo

Bạn nào thích dạng tự động ẩn hiện khi dê chuột vào thì xem Tại đây

1. Đăng nhập vào tài khoản blogger

2. Vào bố cục (Layout) => Chọn phần Thêm tiện ích (Add widget) - Chọn để tạo một tiện íchHTML/Javarscripts và dán code bên dưới vào phần nội dung của tiện ích đó nha:

<style type="text/css">
#gb{
position:fixed;
bottom:5px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:74px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJxIe2VcNp3Luryy2JMsmJygmEEelCQ5tEGQFBXIxoO1Hlbu9T-xbgYASq83DXPjRf4twNlCKqGvyWlaSeoIo6uFH1V4xVvd6_zP0AAfPntZHcLA3-8SM20eCsANzYDbUJVx7TpFyxL_P/s1600/widget-choi-nhac-an-hien-namkna-ngoctra.gif') no-repeat;
}
.gbcontent{
float:left;
background:none;
padding:3px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<iframe allowfullscreen="" frameborder="0" height="320" src="http://www.youtube.com/embed/WS8OMAmmuSY" width="520"></iframe></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (75-gb.offsetWidth).toString() + "px";
</script>

» Tùy biến code:

Phần màu đỏ là mã nhúng của đoạn nhạc, video hoặc là khung chatbox của bạn. Bạn có thể chèn bất cứ thứ gì bạn muốn ở đó.
Link ảnh Màu xanh là ảnh luôn luôn hiện thị, Nó đóng vai trò như một chiếc công tắc để bạn bật hoặc tắt trình nghe nhạc hoặc chat box của bạn bằng cách Click vào link ảnh đó. Các bạn cso thể dùng Photoshop để tự thiết kế cho mình các ảnh đẹp nha. Nếu bạn nào chưa cài photoshop có thể thiết kế Online TẠI ĐÂY

3- Giờ lưu tiện ích đó lại và quay trở lại giao diện blog của bạn để xem tiện ích này hoạt động như thế nào nha.

Cuối cùng hãy để lại một comment ở bên dưới nếu bạn gặp bất cứ khó khăn nào khi áp dụng thủ thuật này, và đừng quyên chia sẻ bài viết nếu cảm thấy bài viết này có ích bới bạn nha :)

Thêm ảnh tác giả Author Avatar ở đầu tiêu đề cho Blogspot Blogger

Thủ thuật blog cực hay dành cho các bạn viết blog cá nhân & khẳng định thương hiệu của mình trong cộng đồng

Một thủ thuật rất hay dành cho các bạn viết blog cá nhân, cách để khẳng định bản quyền tác giả và dễ phân biệt tác giả là ai trong blogspot, với thủ thuật [Tips] - Thêm ảnh tác giả Author Avatar ở đầu tiêu đề cho Blogspot Blogger mà Terocket mang đến.

Thủ thuật này cực kỳ đơn giản, chỉ cần vài bước nhỏ bạn có thể gắn logo hình ảnh của mình lên đằng trước tiêu đề rồi, đây là cách khẳng định bản quyền và xây dựng thương hiệu cá nhân rất tuyệt vời. Cùng Terocket thực hiện thủ thuật [Tips] - Thêm ảnh tác giả Author Avatar ở đầu tiêu đề cho Blogspot Blogger này nhé.

Bước 1 - Chèn CSS vào HTML chính của website bạn

Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F. Bạn tìm được <b:skin>...</b:skin> chèn code sau vào giữa đó. Hoặc tìm kiếm ]]></b:skin> và chèn code sau vào trên ]]></b:skin>.

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Bước 2 - Chèn Javascript vào HTML chính của website bạn

Tìm </head> và chèn code sau vào trước </head>.

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Bước 3 - Tìm kiếm <b:if cond='data:post.title'> và chèn code

Tiếp theo các bạn tìm kiếm <b:if cond='data:post.title'> và chèn code sau ở trước nó. Và nhớ rằng có nhiều <b:if cond='data:post.title'>, nên bạn phải chắc chắn rằng tìm đến vị trí đúng. Thử cái này không được thì hoàn tác lại và thử ở vị trí <b:if cond='data:post.title'> khác nhé!

<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>

Sau đó các bạn Lưu lại và xem thành quả nhé.

Hiệu ứng xoay tròn hình ảnh cho Blogger

Bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng quay một hình ảnh từ hình vuông sang hình tròn trong khá là hấp dẫn và bắt mắt độc giả. Bên trên là hình ảnh Demo, bạn chạm vào để xem hiệu ứng nhé. Vì đây là hiệu ứng bằng CSS nên bạn có thể yên tâm về tốc độ tải trang của mình.

Các bước thực hiện

Bước 1: Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS sau:

.post img {
    border: 2px solid #098047;
    overflow: hidden;
    transition: all .5s ease;
    margin: 20px;
}

.post img:hover {
    border-radius: 50%;
    transform: rotate(360deg);
}

Trong đó
border: 2px solid #098047;
Là đường viền cho hình ảnh, bạn có thể xóa nó đi nếu thấy không cần thiết.
25px là kích thước viền
#098047 là màu đường viền

Bước 2: Nhấn Lưu mẫu

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

Thứ Sáu, 19 tháng 12, 2014

Trang trí giáng sinh-Noel độc đáo cho Blog/Website

Mùa giáng sinh-Noel sắp tới, đó là sự báo hiệu một năm mới 2015 sắp đến, một năm mới hứa hẹn thật nhiều niềm vui, sự thành công trong cuộc sống, cũng như công việc của bạn. Trong chúng ta, mỗi con người đều có một cảm xúc riêng của mình và mỗi người lại có một cách thể hiện riêng. Với các Blogger cũng vậy, họ tạo nên những nét rất độc đáo, những nét rất riêng ngay trên chính mảnh đất Blog này.

Trang trí mùa giáng sinh-Noel

Bài viết dưới đây mình sẽ giới thiệu cách trang trí Blog dịp mùa giáng sinh-Noel đẹp nhất, với nhiều họa tiết, hiệu ứng độc đáo.

1. Giàn chuông độc đáo từ ViệtDesiger

Cách thực hiện
Bước 1: Chèn đoạn code sau lên trên thẻ </head>.
Lưu ý: Hai File JS holiday_bells.js và swfobject.min.js. Các bạn tiến hành tải về và up lên host riêng nhé!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script src="https://sites.google.com/site/dongvietblog/holiday_bells.js"></script>
<script src="https://sites.google.com/site/dongvietblog/swfobject.min.js"></script>
<style type='text/css'>
/* HOLIDAY BELLS */
.b-page__content { min-height:60px; }
.b-head-decor { display:none; }
.b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url('https://lh4.googleusercontent.com/-Fw52YRWmOes/UMB0XOjXsnI/AAAAAAAAC1E/EENsIn76nXk/b-head-decor_newyear.png') repeat-x 0 0; }
.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
.b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
.b-page_newyear .b-head-decor__inner_n2 { left:373px; }
.b-page_newyear .b-head-decor__inner_n3 { left:746px; }
.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
.b-ball { position:absolute; }
.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
.b-ball_n1 .b-ball__i { background:url('http://4.bp.blogspot.com/-o8ExrWxD9EI/VI0pOAwVkGI/AAAAAAAABlw/aptaT6-bVms/s1600/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('http://4.bp.blogspot.com/-5GkhokXgsMc/VI0pOTGrDUI/AAAAAAAABl0/b-n38qH1lRw/s1600/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('http://4.bp.blogspot.com/-Yw-wHKmgZtA/VI0pOz7NFsI/AAAAAAAABl4/gO2xVUXKDTE/s1600/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('http://3.bp.blogspot.com/-SBb0N3xQ4IE/VI0pPpdX9jI/AAAAAAAABmE/A-Xfmv5gsJg/s1600/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('http://2.bp.blogspot.com/-v5ktjungrjk/VI0pP4oKjSI/AAAAAAAABmA/HimseosW7TI/s1600/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('http://3.bp.blogspot.com/-2yQJWKlJ8-U/VI0pQfM9xWI/AAAAAAAABmM/ZTqVFo4QLJs/s1600/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('http://2.bp.blogspot.com/-cO3kL2XZ_HY/VI0pQnfyVDI/AAAAAAAABmQ/yleOjkBNx7Y/s1600/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('http://2.bp.blogspot.com/-wYgPdE87Fwo/VI0pRvrTQUI/AAAAAAAABmg/qs4KU8Ve7A0/s1600/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('http://1.bp.blogspot.com/--7SMOCZDFUo/VI0pRfJcnqI/AAAAAAAABmc/AMazgusKfxU/s1600/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('http://1.bp.blogspot.com/-wNgESig5F1I/VI0pMEn4ZcI/AAAAAAAABlU/f_jW6zs5NLY/s1600/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('http://1.bp.blogspot.com/-BA5B5n0gP90/VI0pMaRxqPI/AAAAAAAABlg/5K855QEDDKw/s1600/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('http://2.bp.blogspot.com/-d7WzjA_Jrs0/VI0pMeqP8yI/AAAAAAAABlY/h4rwHRBohdI/s1600/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('http://4.bp.blogspot.com/-3kJK3iIUbqU/VI0pNCLeaPI/AAAAAAAABnI/_zFvMYEsMPk/s1600/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('http://3.bp.blogspot.com/-yAH7l41FLI4/VI0pNStlC0I/AAAAAAAABlk/gXxhFjyg7_Y/s1600/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('http://1.bp.blogspot.com/-4Gx9Q2PUTGI/VI0pNuSFXpI/AAAAAAAABlo/Md88m6jNrHY/s1600/b-ball_i6.png') no-repeat; }
.b-ball_i1{top:0; left:0; width:25px; height:71px; }
.b-ball_i2{top:0; left:25px; width:61px; height:27px; }
.b-ball_i3{top:0; left:176px; width:29px; height:31px; }
.b-ball_i4{top:0; left:205px; width:50px; height:51px; }
.b-ball_i5{top:0; left:289px; width:78px; height:28px; }
.b-ball_i6{top:0; left:367px; width:6px; height:69px; }
.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
.b-ball_bounce:hover .b-ball__right{ display:none; }
.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
.b-ball_bounce.bounce>.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
.b-ball_bounce.bounce1>.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
.b-ball_bounce.bounce2>.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
.b-ball_bounce.bounce3>.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
</style>

Bước 2: Chèn đoạn code sau bên dưới thẻ <body>

<div class='b-page_newyear'>
<div class='b-page__content'>
<i class='b-head-decor'>
<i class='b-head-decor__inner b-head-decor__inner_n1'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n2'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n3'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n4'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n5'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n6'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n7'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
</i>
</div>
</div>

2. Hiệu ứng tuyết rơi và trang trí cây thông Noel

Cách thực hiện
Truy cập trang quản trị Blogger→Bố cục→Thêm tiện ích HTML/Javascript→Paste đoạn code sau và lưu lại.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}body{background:#FFF;padding-bottom:100px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivX1azCj2hEMztW1tLCBr3WGGyVodEtvswDgS716p5V6Xw6C3DX0CG0nY2zN5wCACYDEGpSPeX27sutPqzJ1pvenCXHt_rtltP9n9KVgPb80qIJBqzBJAi6HBVEdpxhgWTjX8PVBMOeqE/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDMPa04V3TvYm7BEg26WzbxHQ23aBssUvtz2yciPZtGy44X7X7R2SxXf_ijXNBsTx8Lvrypb8riu43t8h4ckWByvlyp0ozFHK29iQak1FgrWVypZN-wTDBXwP9PxnlCBHzFblyflkzUs/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZH7lUcw3p4-w5ZebmSk6GGId6CtYIlv8HseH_jixJCB69Z4bBPrQO9agXvUtWBXSLSpIVUs1zORbhvVw37smI8lY9hpG_3lkq0v-ZDZsDwWjdOvDFol5E1OB2sfHUhxWgK7GmoBJnTo/s1600/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2XsEFANzDU_eKwDPODo3tSLTA8borhZ6jmCgukiNu0OKFavpxDRHSbYyHYK9MLsuF25BcLHyzHorqJ5LsYr7qTSWqZylWm0gOx1i3p2TySoY0M7fF6I-eEmdun8vtKcXizR_7SgBYX4/s180/bottom-left.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:iecompattest().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?iecompattest().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?iecompattest().scrollHeight:iecompattest().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>

3. Xe tuần lộc cùng ôn già Noel "bay" trên Blog.

Cách thực hiện
Truy cập trang quản trị Blogger→Bố cục→Thêm tiện ích HTML/Javascript→Paste đoạn code sau và lưu lại.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
$('html').append('<img id="halo" title="Happy Noel" style="cursor:pointer;position:fixed;z-index:99999" height="120" src="http://1.bp.blogspot.com/-Zr0wE5ybMMg/VI1Ck0K-OQI/AAAAAAAABns/ZlbWbcj5hqY/s1600/ghost.gif"/>')
setInterval(function(){
var $X=Math.ceil(Math.random()*$(window).width())
var $Y=Math.ceil(Math.random()*$(window).height())
$('img#halo').animate({'left':$X,'top':$Y},5000)
},5000)
$('img#halo').click(function(){
window.open('http://1.bp.blogspot.com/-Zr0wE5ybMMg/VI1Ck0K-OQI/AAAAAAAABns/ZlbWbcj5hqY/s1600/ghost.gif','')
})
})
</script>

4. Hiệu ứng tuyết rơi.

Cách thực hiện
Truy cập trang quản trị Blogger→Bố cục→Thêm tiện ích HTML/Javascript→Paste đoạn code sau và lưu lại.

<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuc2NaNWJrQU1fQjA" type="text/javascript"></script>

5. Updating...Post bài cho đỡ buồn ^^

Bạn đang xem bài viết Trang trí giáng sinh-Noel độc đáo cho Blog/Website. Please respect the copyright!
Copyright:

.

Thứ Tư, 16 tháng 8, 2017

[Official MV] Quê Em Mùa Nước Lũ - Phương Mỹ Chi

Thứ Tư, 1 tháng 7, 2015

Thứ Năm, 29 tháng 1, 2015

Thứ Bảy, 20 tháng 12, 2014

Hiển thị bài đăng phổ biến dạng ảnh chuyển động

Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger

☼ Cách tạo một tiện ích nhạc ẩn hiện khi click chuột cho blogspot

Thêm ảnh tác giả Author Avatar ở đầu tiêu đề cho Blogspot Blogger

Bước 1 - Chèn CSS vào HTML chính của website bạn

Bước 2 - Chèn Javascript vào HTML chính của website bạn

Bước 3 - Tìm kiếm <b:if cond='data:post.title'> và chèn code

Hiệu ứng xoay tròn hình ảnh cho Blogger

Các bước thực hiện

Thứ Sáu, 19 tháng 12, 2014

Trang trí giáng sinh-Noel độc đáo cho Blog/Website

1. Giàn chuông độc đáo từ ViệtDesiger

2. Hiệu ứng tuyết rơi và trang trí cây thông Noel

3. Xe tuần lộc cùng ôn già Noel "bay" trên Blog.

4. Hiệu ứng tuyết rơi.

5. Updating...Post bài cho đỡ buồn ^^

.

▀▄▀▄▀▄▀▄▀▄▀▄TRUYỆN CƯỜI▀▄▀▄▀▄▀▄▀▄▀