Bài đăng

Hiển thị các bài đăng có nhãn Javascript

Tạo Slideshow với HTML, CSS và Javascript căn bản

Hình ảnh
Slideshow là một phần rất quan trọng và không thể thiếu trong website hiện nay, thực chất thì đây chỉ là những hình ảnh chạy qua lại chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này longanit sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.



Bước 1: Tạo code HTML
<div class="slideshow-container">
  <h2>longanit.com hướng dẫn tạo slideShow đơn giản</h2>
  <div class="mySlides fade">
    <img src="./images/slide-1.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide đầu tiên!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-2.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 2!</div>
  </div>

  <div class="mySlides fade">
    <img src="./im…

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

Hình ảnh
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


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…

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

Hình ảnh
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.


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…

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

Hình ảnh
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:
Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTMLCode 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 &…

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

Hình ảnh
Đâ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.

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é.


Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTMLTì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)…

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

Hình ảnh
Đâ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|…

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

Hình ảnh
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
/************************…