Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website

LongAnIT 8/27/2019 Bình luận
Trong bài viết hôm nay mình xin chia sẻ cho các bạn code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website. Các bạn có thể áp dụng cho blogspot của mình. Cách thực hiện rất đơn giản

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp

Chèn code này vào bất cứ vị trí nào muốn hiện, hoặc widget HTML/Javascript trong Bố cục.

<center><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer() {var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("h").innerHTML=t;}</script>
<span id="h"></span>
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></center>
<style>
#h {font-weight:400;
    display: block;
    font-size: 30px;
    margin: 0 0 5px;
    letter-spacing: 5px;
}
</style>
Chúc các bạn thành công!
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Chia sẻ code cành đào trang trí website blog ngày tết

LongAnIT 2/01/2019 Bình luận
Tết đến rồi các bạn muốn trang trí cho Blog của mình thêm sinh động hơn để có không khí ngày tết và thêm phần sinh động.

Code cành đào trang trí website/blog ngày tết
Code cành đào trang trí website/blog ngày tết

Trong bài viết ngày hôm nay mình sẻ chia sẽ cho các bạn đoạn code Javascript rất nhỏ và nhẹ để tô điểm thêm vẻ đẹp cho blog với 2 hình banner là hoa mai chạy dọc trượt từ trên xuống. Đặc biệt code này Reponsive trên tất cả các thiết bị. Chúc các bạn có một năm mới vui vẻ, hạnh phúc và thành công. Để thực hiện bạn làm theo các bước sau

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Cody toàn bộ đoạn code bên dưới và dán vào trước thẻ đóng </body>

<!--Trang Trí tết by longanit.com -->
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}</style><img style="width:10%;position:fixed;z-index:9999;top:0px;left:0" src="https://i.imgur.com/8x9z6Pg.png"/><img style="width:10%;position:fixed;z-index:9999;top:0;right:0" src="https://i.imgur.com/nRndMWC.png"/>');
//]]>
</script>
<!--End Trang Trí Tết-->

Bước 3: Tiến hành save lại và xem kết quả.

Share code banner trượt hai bên trang trí cho ngày tết

LongAnIT 1/07/2019 Bình luận
Code banner trượt hai bên trang trí cho ngày tết
Code banner trượt hai bên trang trí cho ngày tết 
Lang thang trên mạng tìm được code Javascript trang trí rất đẹp cho ngày tết với 2 banner trượt dọc 2 bên  với 2 câu đối liểng tùy chỉnh. Mình share lại code banner trượt hai bên này cho các bạn nào cần có nhu cầu. Thực hiện các bước sau đây để chèn code.

Bước 1:
  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Code toàn bộ code bên dưới vào trước thẻ </body> 

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web
var pictureWidth = 15; //Chiều rộng của hoa mai or đào
var pictureHeight = 15; //Chiều cao của hoa mai or đào
var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
var downSpeed = 0.01; //Tốc độ rơi của hoa
var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>
<style type='text/css'>body{padding-bottom:20px}</style><a href='https://www.longanit.com//' target='_blank'><img _cke_saved_src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' style='position:fixed;z-index:9999;top:0;left:0;'/></a><a href='https://www.longanit.com/' target='_blank'><img src='http://4.bp.blogspot.com/-A85wPjYE2BM/UsA7mDDQWmI/AAAAAAAAA3U/R9bxy6zSrLs/s1600/banner_right.png' style='position:fixed;z-index:9999;top:0;right:0;'/></a><div style='position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(https://3.bp.blogspot.com/-uQrQaR3IkxE/WF9dDUUVLLI/AAAAAAAAAdw/VKNA5q7FJSQX5OWofOiPafEEENaoBcY9wCLcB/s1600/nentet.png) repeat-x bottom left;'></div><a href='https://www.longanit.com/' target='_blank'><img src='http://3.bp.blogspot.com/-4Zt-ZB4tols/UsA_qIR0w9I/AAAAAAAAA3w/Ffyy-5OqGec/s320/banner_header.png' style='position:fixed;z-index:9999;bottom:20px;left:20px'/></a>
 Bước 2: Chỉnh sửa và thay đổi nội dung 2 banner trái và phải như hình trên tôi đã tô đậm màu đỏ 2 link này trong code bạn save nó về và chỉnh sửa lại nội dung theo ý bạn nhé.
Bước 3: Tiến hành save lại và hưởng thành quả.
Chú ý: Code này hoạt động tốt trên PC. Tuy nhiên code bị hạn chế trên Mobile bạn nên tham khảo thè điều kiện chỉ hiển thị trên desktop là ok. Chúc các bạn thành công!



Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

LongAnIT 12/29/2018 Bình luận
Đây là hiệu ứng tạo chữ chạy trên thanh tiêu đề cho Blog của trang chạy qua lại trông rất bắt mắt, với đoạn code tôi chia sẻ bên dưới sẽ giúp cho các bạn thực hiện được hiệu ứng ấy một cách dễ dàng trên Blogger.
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

Thật ra thì code kiểu này có từ rất lâu rồi, nhiều bạn chuyên về thiết kế Web hoặc Blog thì nó quá đơn giản rồi đúng không nào. Tuy nhiên đối với những bạn mới bước vào nghề thì hơi bị khó đấy. Qua đây  mình cũng xin giới thiệu lại cho một số bạn mới đến với Blogger cũng như những bạn mới học thiết kế Web như mình đoạn coe này trên nền tản CSS và HTML. Các bạn thực hiện theo các bước sau nhé.


  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Tìm đến thẻ </head> và thêm đoạn code  bên dưới vào ngay bên trên nó


<script type="text/javascript">
var txt="Chào mừng bạn đến với Longanit.com. Chúc các bạn có những giây phút vui vẻ";
var espera=150;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

3. Bạn thay thế dòng text: Chào mừng bạn đến với longanit.com thành nội dung mà bạn muốn hiển thị trên thanh chạy.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn thủ thuật tạo chữ chạy trên thanh tiêu đề cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ giúp làm đẹp thêm cho 'ngôi nhà' của bạn.

Javascript tạo hiệu ứng chữ đẹp

LongAnIT 9/22/2018 Bình luận
Javascript tạo hiệu ứng chữ đẹp

Đây là script để tạo hiệu ứng chữ chạy lấp láy rất hay có thể áp dụng cho blog hay web. Các bạn nào thích màu mè có thể dùng code này nhé. Đây là code sưu tầm bạn có thể xem thông tin khai báo biến trên đó và sửa lại theo ý của mình

<script language="JavaScript1.2">
var message="Information Technology:Blog chuyên chia sẻ những kiến thức về công nghệ thông tin được cập nhật mới nhất, các thủ thuật windows, phần mềm, facebok, zalo... và công nghệ"
var neonbasecolor="#0F83A0"
var neontextsize="30"
var neontextcolor="#F26722"
var neontextcolor2="#FFFFFF"
var flashspeed=100      // speed of flashing in milliseconds
var flashingletters=3      // number of letters flashing in neontextcolor<br />
var flashingletters2=1      // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0      // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

Code pháo hoa trang trí tết năm cho website

LongAnIT 9/22/2018 Bình luận
Code pháo hoa trang trí tết năm cho website

Mình sưu tầm được một code pháo hoa khá đẹp chèn vào website cho ngày tết thêm lung linh. Nay mình chia sẻ lại cho những bạn làm Webiste muốn trang trí cho ngôi nhà thứ 2 của mình thêm lộng lẫy lung linh huyền ảo. Sau đây mình sẽ hướng dẫn cho các bạn cách tạo pháo hoa để tạo không khí tết cho Webiste nhé.

Bước 1: Trước tiên bạn cần tạo 1 file tên phaohoa.js (tên gì cũng được miễn là file có đuôi .js là được), nội dung code copy ở dưới nhé. Rồi up lên Hosting. Nếu xài wordpress thì up vào trong thư mục theme cho dễ quản lý nhé.

<script>
// <![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-14 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=1000;
var shigh=600;
var boddie;
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
addRVLoadEvent(light_blue_touchpaper);
function light_blue_touchpaper() { 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.zIndex = '9999';
  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.zIndex = '9999';
  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";
    if (decay[i]>1 && Math.random()<.1) {
       Z.visibility="hidden";
       setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
    }
    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>
Bước 2: Chèn đoạn code dưới đây vào dưới thẻ body của trang Web
Lưu ý: src=”link den file .js” đây là đường dẫn của file phaohoa.js mà bạn up lên Website, nhớ thay đường dẫn cho đúng nhé.

<script src="link den file .js"></script>
<script type="text/javascript">
var bgBegin = 22;
var bgEnd = 31;
var bgTetId = 31;
var bgTetUrl = '/banner/';
document.body.style.backgroundImage = 'url(' + bgTetUrl + bgTetId + '.jpg)';
document.body.style.backgroundAttachment = 'fixed';
document.body.style.backgroundSize = 'cover';
setInterval(function(){
    if (bgTetId == bgEnd) bgTetId = bgBegin;
    document.body.style.backgroundImage = 'url(' + bgTetUrl + bgTetId + '.jpg)';
    document.body.style.backgroundAttachment = 'fixed';
    document.body.style.backgroundSize = 'cover';
    bgTetId++;
}, 15000);
</script>
Bây giờ bạn có thể mở lại Website và nhấn F5 để refresh và xem sự thay đổi nhé. Chúc bạn thành công!