Mẫu Code HTML dành cho website Google Site





MẪU 1: SHOP BÁN SẢN PHẨM THEO CHIỀU NGANG























Hướng dẫn: Muốn làm giống mẫu trên thì hãy Coppy Code phía dưới và paste vào website của mình ở chế độ HTML làm theo hướng dẫn hình dưới

Coppy mã từ thẻ <div> đầu tiên đến thẻ  </div>  cuối cùng và paste vào chỗ cần paste vào 

Code Mẫu sản phẩm dành cho Shop bán hàng ( Dành cho website Google Site)

<div style="background-color:#f1f1f1;width:100%;height:380px;">
<div style="background-color:white;width:30%;height:320px;float:left;margin:2%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:60%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:39%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>

<div style="background-color:white;width:30%;height:320px;float:left;margin:2% 1% 2% 1%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:60%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:39%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>


<div style="background-color:white;width:30%;height:320px;float:left;margin:2%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:60%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:39%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>




</div>

MẪU 2: SHOP BÁN SẢN PHẨM THEO CHIỀU DỌC































Chèn Code HTML bên dưới vào website của mình ở chế độ HTML


<div style="background-color:#f1f1f1;width:100%;height:500px;">
<div style="background-color:white;width:30%;height:90%;float:left;margin:2%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:70%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:29%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>

<div style="background-color:white;width:30%;height:90%;float:left;margin:2% 1% 2% 1%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:70%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:29%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>


<div style="background-color:white;width:30%;height:90%;float:left;margin:2%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="width:100%;height:70%;background-color:white;"> </div>
<div style="background-color:#f6f6f6;width:100%;height:29%;;text-align:center">
<b>Giá: 180.000 đ</b>
<h2>Sản phẩm</h2>

<div style="text-align:center;display:block">
<div style="text-align:center;display:block"><a href="https://sites.google.com/site/damdahoicaocaphoamay/lien-he" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-mua-hang.png" border="0"></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="https://sites.google.com/site/damdahoicaocaphoamay/dam-da-hoi/dam-da-hoi-cao-cap/dhamdahoikethatcaocap" target="_blank"><img style="font-size:10pt" src="https://sites.google.com/site/damdahoicaocaphoamay/home/icon-chi-tiet.png" border="0"></a></div>
</div>
</div>
</div>

</div>



 Hôm nay mình viết bài này hướng dẫn các bạn chèn một tiện ích do chính các bạn tạo ra để chèn vào google site. Mặc định google site cung cấp rất nhiều tiện ích để các bạn chèn vào site của mình, nhưng vì một lý do nào đó ví dụ như các bạn không tìm kiếm được một tiện ích ưng ý hay các bạn tự tạo được một tiện ích cho riêng mình nhưng chưa biết phải làm sao để đưa được lên site của mình. Để đưa tiện ích của chính các bạn tạo ra "thường các tiện ích này chỉ chứa các mã html, css và một ít js thui chú ý là google site không hỗ trợ js nên các bạn hạn chế đưa js lên" các tiện ích thường được đặt trong một file có phần mở rộng là *.xml
        Bên trong file *.xml có nội dung như sau:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
Hello, world!
]]></Content>
</Module>
        Ở đoạn code trên các bạn chú ý:- hello world example: đây là tên tiện ích của bạn
-  Hello, world!: đây là code html tiện ích của bạn
          Sau khi hoàn thành tiện ích các bạn lưu file lại với phần mở rộng là *.XML và đính kèm luôn vào trang mà bạn định chèn tiện ích. kích chuột phải vào chỗ Tải xuống chọn sao chép địa chỉ đường dẫn.
Sau đó đặt dấu nháy chuột vào vị trí muốn chèn tiện ích chọn trên menu Chèn > Tiện ích khác... > Thêm tiện ích bằng URL. Tại đây bạn có dán luôn đường dẫn mà bạn vừa sao chép ở trên vào ví dụ của mình là 
http://sites.google.com/site/qbinh68/home/new.xml?attredirects=0&d=1
        Chú ý: nếu file đó các bạn đính kèm ngay tại trang mà các bạn chèn tiện ích thì cứ để đoạn ?attredirects=0&d=1 không sao còn nếu link từ một trang khác thì bỏ nó đi.
        Cuối cùng chỉ cần chỉnh sửa chiều rộng và chiều cao của tiện ích sao cho phù hợp rùi nhấn OK là xong.



SERIES HƯỚNG DẪN TẠO WEBSITE MIỄN PHÍ BẰNG GOOGLE SITE TỪ A-Z

Bước 1: Lập 1 tài khoản Gmail ( ví dụ: phanvanngon@gmail.com)  ( bước này hầu hết tất cả các bạn đều có rồi - nếu ai chưa có thì lên Youtube tìm bài hướng dẫn lập Gmail để tạo cho mình 1 tài khoản Gmail nhé)

Bước 2: Hướng dẫn tạo 1 website miễn phí bằng Google Site




     NỘI DUNG BÀI HỌC - 01 
  • Giới thiệu về Google Site 
  • Đăng nhập Gmail và truy cập link https://sites.google.com/site
  • Hướng dẫn tạo Site Cổ điển
  • Cài đặt bố cục trang
  • Chỉnh sửa tiêu đề và mô tả trang
  • Chỉnh màu sắc  và Phông chữ cho site
  • Download Banner Link và Upload lên site
  • Chỉnh màu sắc và size chữ của Menu ngang
  • Coppy phần chạy chữ và Chia sẽ lên mạng xã hội
  • Chèn banner Hoặc Logo cho trang web

     NỘI DUNG BÀI HỌC - 02 
  • Tạo 1 trang trong website theo mẫu Template 
  • Cách tạo Menu ngang và cài đặt menu
  • Cách đăng và chỉnh sửa bài viết trong Website
  • Hướng dẫn cách tạo 1 trang tin tức Post bài tự động lên trang chủ

     NỘI DUNG BÀI HỌC - 03 
  • Hướng dẫn tạo Slide ảnh trong GoogleSite 
  • Tạo khung hỗ trợ trực tuyến
  • Tạo khung đếm số lượt truy cập

     NỘI DUNG BÀI HỌC - 04 
  • Giới thiệu lợi ích của Làm Web bằng Google Site
  • Hướng dẫn nhanh làm 1 website hoàn chỉnh
  • Hướng dẫn tải và thiết kế bằng phần mềm Paint 
  • Hướng dẫn thiết lập Menu ngang với website thực tế
  • Hướng dẫn tạo Slide ảnh

Nâng cấp Giao diện Cho Website Google Site

Bước 3: Kết Nối tên miền .com/.vn / .net  với Google site ( Bấm vào đây xem hướng dẫn cụ thể)