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.