Hiển thị các bài đăng có nhãn Thủ Thuật Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật Blogger. Hiển thị tất cả bài đăng

Thứ Tư, 4 tháng 1, 2017

Hướng dẫn tạo pháo hoa mừng năm mới cho Blogspot

Hôm nay là ngày 01-04-2017 rồi, chỉ còn vài ngày nữa là sang năm mới tức là tết ta. Không khí tết rộn ràng thì ai cũng thích, và cũng là lúc mọi người tranh thủ thời gian đi ngắm pháo hoa tại các địa điểm trên cả nước.


Nghĩ đến pháo hoa, tại sao lại không tạo pháo hoa mừng năm mới trang hoàng cho các trang blog, web, mà cụ thể ở đây là cho Blogger của mình chứ. Chính vì ý tưởng này, hôm nay mình sẽ hướng dẫn các bạn cách tạo pháo hoa cho Blogspot để chào mừng năm mới. Cũng như cho trang blog, web của các bạn đẹp hơn, có không khí năm mới hơn.

Hướng dẫn tạo pháo hoa cho Blogspot

Đơn giản, dễ làm và ai cũng làm được, đó là tất cả những gì cần nói về thủ thuật tạo pháo hoa cho Blogspot này. Cùng theo dõi nhé:

- Truy cập vào trang quản trị blog của các bạn.

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

- Sau đó click vào vùng code, và bấm Ctrl + F để mở hộp tìm kiếm, sau đó tìm đến thẻ này:
</head>
- Thêm đoạn code sau vào ngay bên trên nó, đây chính là đoạn code để tạo ra pháo hoa:
<script type="text/javascript">
// <![CDATA[
var bits=80;
var speed=40; // Tốc độ như thế nào, càng nhỏ càng nhanh
var bangs=10; // Số pháo hoa có thể xuất hiện cùng lúc (Nhiều quá sẽ có thể gây lag cho trình duyệt)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
//                     Xanh    Đỏ     Xanh lá   Tía  Xanh cyan  Cam   Hồng
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>
Sau khi thêm vào thẻ <head> và tùy chỉnh các thông số như mong muốn rồi thì có thể lưu lại rồi. Tận hưởng thành quả! 

Như thế là chỉ với vài bước ngắn gọn là đã có thể tạo pháo hoa cho Blogspot để mừng năm mới đến cũng như để trang trí thêm cho Blogspot. Chúc các bạn thành công và nhớ theo dõi để nhận những Thủ Thuật Blogger mới nhé.
Read more

Trang trí tết cho Blogspot với hiệu ứng pháo hoa và câu đối chúc tết

Lại một năm nữa đi qua 2016 đã khép cửa để nhường bước cho 2017 mới mẻ, mở ra nhiều điều mới, sự nghiệp,...
Để cùng chung vui khoảnh khắc này hôm nay mình sẽ chia sẻ tới các bạn hai hiệu ứng để Trang trí tết cho Blogspot với hiệu ứng pháo hoa và câu đối chúc tết
Tăng thêm sinh động cho blog của bạn vào năm mới, cũng như thay đổi không khí đỡ nhàm chán hơn.

Đi thẳng vào vấn đề luôn nào đầu tiên là:
1. Hiệu ứng pháo hoa cho blog
Trang trí tết cho Blogspot với hiệu ứng pháo hoa và câu đối chúc tết
Cách làm có 2 cách bạn copy đoạn code dưới đây
Cách 1: Chèn lên trên thẻ đóng </body> của blog và lưu lại
Cách 2: Vào bố cục Thêm tiện ích mới sau đó dán vào và lưu lại
Bạn có thể làm một trong hai cách ở trên
<script src='https://rawgit.com/startruongblog/blogspot/master/phaohoajs.js' type='text/javascript'/>
Nếu bạn muốn có âm thanh của pháo hoa khi bắn thì chèn thêm đoạn code sau cùng với code ở trên 
<iframe src="http://www.nhaccuatui.com/mh/background/uCxytx9BioUS" width="0" height="0" frameborder="0" allowfullscreen=""></iframe>
Lưu lại và quay lại và xem kết quả!

2. Banner câu đối treo hai bên
Trang trí tết cho Blogspot với hiệu ứng pháo hoa và câu đối chúc tết
Cách làm tương tự như hiệu ứng pháo hoa nhé
Bạn copy đoạn code sau:
<!-- Start -->
<script type="text/javascript">
document.write('<style type="text/css">body{padding-bottom:20px}</style><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;left:0" src="http://i.imgur.com/r33SZg9.png" _cke_saved_src="http://i.imgur.com/XDJYGVA.png"/></a><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;right:0" src="http://i.imgur.com/a4mXrl0.png"/></a><div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;"></div><a href="#" target="_blank"><img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="http://i.imgur.com/Fh1ilSx.png"/></a>');
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>
<!-- End -->
Cuối cùng lưu lại và xem kết quả!
Nếu thấy hãy nhấn chia sẻ để bạn bè cùng sử dụng nhé. Chúc bạn có một năm mới An khang - Thịnh Vượng - Phát tài - Phát lộc

Nguồn : www.StarTruongIt.Net
Read more

5 kiểu loading cực đẹp và hiện đại cho blogger


Đây là 5 hiệu ứng được www.allbloggertricks.com chia sẻ, mình thấy nó rất đẹp nên mang về share cho mọi người cùng dùng.

Style 1

 <div id="loader">
        <div class="spinner">
            <div class="spinner-inner"></div>
        </div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>

Style 2 


<div id='loader'>
<div class="wrap"><div class="bg"><div class="loading"><span class="title">loading...</span><span class="text"><data:blog.title/></span></div> </div></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

Style 3 


<div id='loader'>
<div class='preload-juggle'>  <div class='ball'></div>  <div class='ball'></div>  <div class='ball'></div></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.preload-juggle&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}.preload-juggle div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;}.preload-juggle div:nth-child(1) {animation-delay: -0.7s;}.preload-juggle div:nth-child(2) {animation-delay: -1.4s;}@keyframes juggle {0% {transform: translateX(0px) translateY(0px);}12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;}25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  }37.5% {transform: translateX(25px) translateY(55px);}50% {transform: translateX(0px) translateY(0px);}62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; } 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;}87.5% {transform: translateX(-25px) translateY(55px); }100% {transform: translateX(0px) translateY(0px);}}</style>

Style 4 


<div id='loader'>
<div class="spinner"></div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle 1.2s infinite}@keyframes spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>

Style 5


<div id='loader'><div class='balls'></div><div class='balls'></div><div class='balls'></div><div class='balls'></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>


LƯU Ý:  Nếu trong template của bạn đã có đoạn mã code này tương tự này rồi thì hãy xoá đoạn mã đó đi để tránh bị xung đột với scrpit.

Source : www.Allbloggertricks.com
Read more