Thứ Hai, 10 tháng 2, 2014

Thêm Like Facebook, G+, Twitter chia sẻ mạng xã hội cho Blogspot

<style>
/* huong dan thuthuat-vui.blogspot.com */
.sharing_box_thuthuat-vui {
position: fixed;
top: 38%;
left: 0;
border: 0px solid #00EE00;
padding: 3px 3px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 55px;
min-height: 290px;
}
.sharing_box_thuthuat-vui .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:45px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_thuthuat-vui'>
<div style='text-align:center; margin-top:5px'>

</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:0px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<!-- FACEBOOK -->
<div class='item' style='margin-left:0px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:0px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:0px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'> 
(function() { 
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
})(); 
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- ABC -->

Tạo Phân Trang cho Blog bằng Load More cho Blogger

Hướng dẫn thủ thuật: Phân trang dạng Load More cho Blogger

1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascrip
Lưu ý, cho tiện ích ngay dưới tiện ích POSTS nhé



<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >XEM THÊM BÀI ĐĂNG</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/fb-style-loader.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#3772AB;}
.techirshloader{font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; font-weight:bold; text-align: center; color: #3772AB; font-size: 24px;}
.techirshloader a:hover{color: #000000;}
</style>

code hình xoay

<style type= "text/css" >
img
{
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 1.5s;
-o-transition:width 2s, height 2s, -o-transform 2s;
}
img:hover
{
transform:rotate(720deg);
-moz-transform:rotate(720deg);
-webkit-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
 </style>

Làm Hiệu ứng cho đường link khi rê chuot vào

them tien it
chon HTML/JavaSript
đán đoạn cốt vào
<style type="text/css">
a
{
background-image: url( THAY LINK ẢNH 1 VÀO ĐÂY);
}
a:hover
{text-decoration:blink;
color: red;
text-decoration: underline;
letter-spacing:5px;
word-spacing:8px;
font-family: curlz mt;
font-weight:bold;
background-image:url( THAY LINK ẢNH 2 VÀO ĐÂY );}
</style>

Một Số Lihk hiệu ứng khác


Bụi hồng:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/707620lbi5rc3g3f.gif
Sao xanh rơi:    http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/729494slbsccif1n.gif
Tim rơi vỡ tan:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/729649bvmsrm5c4d.gif
Rainbow (cầu vòng):   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/rainbow.gif
Sấm chớp:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/lightning.gif
Sao bạc lấp lánh:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/grey_stars.gif
Lửa bùng nền đen:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/flames2.gif
Xe hơi mini cute:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/cop.gif
Hoa tuyết rơi:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/590938stswwg4xyf.gif
Music on:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/AddEmoticons10947.gif
Sao chớp tắt nền xanh:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/domsanglaplanh.gif
Mưa ngũ sắc:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/muamausac.gif
Tim hồng mini rơi nhanh:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/804261s5734qt18i.gif
Tim hồng mini cute:  http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/721369nrxraya324.gif
Pháo hoa mini:   http://i1179.photobucket.com/albums/x381/acma0103/gif_animation/707618jyfmp3jbxr.gif

Chủ Nhật, 29 tháng 12, 2013

Code Tạo Blog

<script language=javascript> var rev = "fwd"; function titlebar(val) { var msg  = "Xin chào các bạn"; var res = " "; var speed = 100; var pos = val;  msg = "   |---* "+msg+" *---|"; var le = msg.length; if(rev == "fwd"){  if(pos < le){  pos = pos+1;  scroll = msg.substr(0,pos);  document.title = scroll;  timer = window.setTimeout("titlebar("+pos+")",speed);  }  else{  rev = "bwd";  timer = window.setTimeout("titlebar("+pos+")",speed);  } } else{  if(pos > 0){  pos = pos-1;  var ale = le-pos;  scrol = msg.substr(ale,le);  document.title = scrol;  timer = window.setTimeout("titlebar("+pos+")",speed);  }  else{  rev = "fwd";  timer = window.setTimeout("titlebar("+pos+")",speed);  } } }  titlebar(0); </script>
Cách tạo chạy cho tên miền tên logr


Tạo cu vui cho bogl
<marquee style="color: #FF00FF; font-weight: bold" bgcolor="#F2FBFF"; direction= “left”> Chào mừng các bạn ghé thăm Blog của tôi CĐQTKD5A. Mong các bạn góp ý để Blog ngày càng phát triển </marquee>


Cot tao ngua chay dưới chan trang
<div class="content"><a style="position: fixed; bottom:-10px; right:-10px;"><embed src=
"https://sites.google.com/site/dungflash/danngua2.swf" width=
"1300" height="150" type="application/x-shockwave-flash" wmode=
"transparent" allowscriptaccess="never"></embed></a></div>

Read more: 
FLASH ĐÀN NGỰA CHẠY DƯỚI CHÂN BLOG | dunghennessy 
Under Creative Commons License: 
Attribution Share Alike


Cot chen facebook
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/xaynhanuoichimyen&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 545px;background:#fff;"></iframe>
Làm chủ chạy truoc chuot di chuyen
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 
Times new roman;
color:    
#4AA02C;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){

// Your message here (QUOTED STRING)
var msg = "
DUNGHENNESSY.BLOGSPOT.COM!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 
15;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};

})();

</script>


Read more: 
CHỮ XOAY TRÒN THEO CON TRỎ CHUỘT | dunghennessy 
Under Creative Commons License: 
Attribution Share Alike
Tạo bang hieu quang cáo ho bog
<embed src="http://www.notcelebrity.co.uk/flashcontent/flashHeader.swf?thename=Yến Sào Tầm Cao Việt" type="application/x-shockwave-flash" wmode="transparent" width="500" height="330"></embed>



Code lam anh chay dong tron
1. Đu tiên bn đăng nhp vào tài khoblogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ 
</head>
<script src='http://nguyenhoangnam.googlecode.com/files/circle_img.js.txt' type='text/javascript'/>

4. Save template lại và trở về phần tử trang và thêm 1 HTML/Javascript
5. Thêm code bên dưới vào phần tử vừa thêm ở trên
<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200, 
//độ rộng của ảnh trình diễn
height:163, 
//chiều cao của ảnh trình diễn
sides:12,
steps:23,
speed:3, 
//tốc độ trình diễn
direction:'left',
 //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iIIrzo9FUaFOPu7dTCT8dBhLx7IYWzuzUhHee9l8Myx5jejUI01FXEc7QbU8herdKzWiDyN-CyOPnxCRt1qUXT_jt6WnEUf1elwok2TVJw1jsu1JtZBCzNLed2BYFYWRAxx1RAkUb8iV/s400/5.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2MlYzed-AE3d3qgjpcCWytvn7uGUWrwkFa05GnF7Fogfb6rxhBO-ksDN5XI2Gbo7UeomdD5d1Gc2nB5G7jLJ8qlE15SXEqLKMFR3dLI_KxxwFSZD_6qr7Ye_vidEK7N86Uh35ilj-Q5b/s400/3.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4yuNySv79CoGrAbxp-7IGuTMTY6f-5L070ifMNZuM5uGrJjoG4ayDrsUMUVCtzAP1wki0Xf33OVzAdJX-8aGKA7DuhtfTMstgCsl0gj7nF4DugQnHVkM9pxRAOuPyMITyDjHa-eEj5TvM/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNtWH_CL7JYT3MRTpdVjqUBvIYVqBa4CFV5fTqyBSeTomO_W4tTp5WqHhX3hm2OO56JMISEUfP4_9sx2YdtMZ2S19NJW698w47YKJjfn5nH8zsPUptd9jaoO0PmIsvzapEAgTj3HPihLL/s400/4.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3in2-orv8QAb5qf2T9mpQNnDjqgUDOODzWwSmhV-8e9nvVnEbfDAkfWNakIsFraTxdFDOWI0B1JLRdl1GV1ud7xX4QGzogURbLpxNfdN7Koo5BH9GdRHLC-mJJILgKhDcysRcUmKDnWi/s400/2.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooYnB_chd_MOHfixf1kmZGkWsfXh8UqxcAvXk6cyA4dS0K7RTPn6nvPsAKen_eiSjbSJhu0FeOVhK2hNNLvzXKoSP62GM_2A4mQ08mpqZiOzX-S7Zh-ckPNWWuY89vwtXXBUkbom7Is4N/s400/3.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGzqSsqXNtSC8Ecfykn0UIoreeTi_qE1KR7V6Y40P91hyab-PO0wFFnnfSfUF0KeHN3gdAQmhAzIaD8KsGV5-haG5TJumzI_fFG7j2oFcg-IetJtxD6QlsXRS-FPZt6XEczvXyaPYTvlKG/s400/5.jpg',
'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDLBAuyKXp70H6hdOkzqKZtw5ESEr5FpL9dIP6pX8DkgWffh-08MP4QBYBpeuQiU31s9SDzlVg2HEfhoWAHv65AvIT1QztyF0PwY3UE1SWz9rs89jcJEnA54t0vCV0ScDHofAsJxT9jWN/s400/2.jpg'
],

links: [
'
http://www.traidatmui.com',
'
http://www.traidatmui.com',
'
http://www.traidatmui.com',
'
http://www.traidatmui.com',
'
http://www.traidatmui.com',
'
http://www.traidatmui.comL',
'
http://www.traidatmui.com',
'
http://www.traidatmui.com'
],

titles:[
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com',
'
traidatmui.com'
],
image_border_width:1,
image_border_color:'transparent'
});
</script>

Chỉnh code: 
- Dòng 
màu cam chính là link của các hình ảnh trình diễn trong tiện ích này, bạn thay thành những địa chỉ hình ảnh của bạn.
- Thay 
http://www.traidatmui.com màu xanh đậm trong code thành đường dẫn của ảnh tương ứng.
- Cuối cùng là phần Title là tiêu đề mô tả cho ảnh (dòng 
màu đỏ), phần này sẽ hiển thị khi bạn rê chuột vào ảnh, bạn hãy thay đổi tương ứng với ảnh của bạn.

6. Cuối cùng bạn save tiện ích lại



<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200, //độ rộng của ảnh trình diễn
height:163, //chiều cao của ảnh trình diễn
sides:12,
steps:23,
speed:3, //tốc độ trình diễn
direction:'left', //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/Copy%20of%20amli-A16.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/Copy%20of%20amli-A8.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/amp%20tecnik%20BS8.JPG?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/B16.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/ARROW9000.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/loa__loadu_230_w175_watermarks.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/13.jpg?',
'https://cf705af3-a-62cb3a1a-s-sites.googlegroups.com/site/cachnuoichimyencom/Copy%20%282%29%20of%20D13.jpg?'
],

links: [
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.comL',
'http://www.xaydungnhayen.com',
'http://www.xaydungnhayen.com'
],

titles:[
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com',
'xaydungnhayen.com'
],
image_border_width:1,
image_border_color:'transparent'
});

</script>



code xoa bo thanh chinh sua trong blog
+ vào bố cục
+ vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
+ chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>
.quickedit{
display:none;
}




code chong sau chep bai viet

Các bạn vào Thiết kế, chọn Chỉnh sửa HTML, check vào ô Mở rộng mẫu tiện ích nhé.
- Bấm tổ hợp phím Ctrl+F để tìm Mã:

]]></b:skin> Chèn đoạn mã dưới này vào ngay trước ]]></b:skin>:


.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

code lam phan chan trang
1. Đăng nhập Blogger và chọn mục Mẫu 
2. Click chọn Chỉnh sửa HTML 
3. Tìm đoạn code </body> và dán trước nó đoạn mã bên dưới.
<style type="text/css"> .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;} .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5f8ZgFV8kHLhzgCxpDcKPAWLWYJ_CI3x3cCMBtXofJXjX-Y-ai5eB5T1nKujThIiQk3y2gHcgke2g2B72a1j6XZFyKLYaqTjAEO2KCUhUmlukn0r4rbV8Q_NuIVCoDbNbkKSgy-05FIT/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;} .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;} .showpageOf{float:left;padding-top : 6px;} .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLggcwyu7Ju3ispB8gISbzRAw-JrwJMlEzYzzbwFfJOdavHkGib_mnlFkcubx0Lf8S7pW-8lCbNKI5kz2EtpoqXj8Nj1f2fpfDwEQ_c0PMkk7K6NaGc5hcq6En8EiAw5FtwuHDWRpgVLW/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;} .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLggcwyu7Ju3ispB8gISbzRAw-JrwJMlEzYzzbwFfJOdavHkGib_mnlFkcubx0Lf8S7pW-8lCbNKI5kz2EtpoqXj8Nj1f2fpfDwEQ_c0PMkk7K6NaGc5hcq6En8EiAw5FtwuHDWRpgVLW/) no-repeat 0 100%;color : #fff;} .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLggcwyu7Ju3ispB8gISbzRAw-JrwJMlEzYzzbwFfJOdavHkGib_mnlFkcubx0Lf8S7pW-8lCbNKI5kz2EtpoqXj8Nj1f2fpfDwEQ_c0PMkk7K6NaGc5hcq6En8EiAw5FtwuHDWRpgVLW/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;} .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;} </style> <script style='text/javascript'> var pageCount=5; var displayPageNum=1; var upPageWord="Previous"; var downPageWord="Next"; </script> <script type='text/javascript' src="http://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>
#var pageCount=5; là số bài đăng mỗi trang
Lưu mẫu và xem kết quả
code tao phao bong
<script type="text/javascript">
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); 
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*      Fireworks Effect     *
*(c)2004-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;

window.onload=function() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}

function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}

function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}

function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) { 
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) { 
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
} 

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>