Tổng hợp Html, css, Javascript đủ kiểu chèn vào blogspot & website của bạn
Chào các bạn, qua những bài viết trước Gia Bảo Blog đã chia sẻ cho bạn một số Code Html, Css, Javascript & các thủ thuật mẹo vặt giúp trang trí nội dung bài viết và làm đẹp giao diện Website / Blogspot của bạn lần này Gia Bảo Blog chia sẻ những code web hay dùng theo nhiều chủ đề cho các bạn " Copy Paste ".
Trước khi dán Code html & Css vào Web/Blog của mình, các bạn nên test thử trên trang :
http://jsbin.com
Để xem trước nhé.
- https://html-online.com/editor
- https://html-css-js.com/css/generator/box-shadow
- https://www.bestcssbuttongenerator.com
- https://www.niemvuilaptrinh.com/article/Product-Card-Snippet-trong-Bootstrap-4
- [Sidebar cố định] : https://www.jqueryscript.net/tags.php?/sticky sidebar
- [jQuery Layout Plugins] : https://www.jqueryscript.net/layout
- [Công cụ tạo cột Responsive ] : http://www.responsivegridsystem.com/calculator
Sau đây là một số code được sử dụng trên trang Digitalnomad.Vn :
- margin-top: -50px; { Ẩn phần đầu trang web chèn 50px }
- margin-bottom: -50px; { Ẩn phần cuối trang web chèn 50px }
- margin-left: 0px; { Nếu bạn thay 0px; = -300px ẩn phần bên trái trang web chèn 300px }
- margin-right: 0px; { Nếu bạn thay 0px; = -300px ẩn phần bên phải trang web chèn 300px }
.Linkbamlebenphai {
position: fixed;
top: 50%;
right: 0;
backface-visibility: hidden;
}
.Linkbamlebenphai {
transform-origin: top right;
transform: rotate(-90deg) translate(50%, -100%);
/*uncomment this if you want to reverse the order of the characters*/
/*transform: rotate(90deg) translateX(50%);*/
z-index: 2;
color: white;
background: linear-gradient(-45deg, #ffa600 0%, #ff5e03 50%);
}
.Linkbamlebenphai,
{
transition: all 0.35s ease-in-out;
}
.Linkbamlebenphai,
{
border-radius: var(--border-radius);
}
.Linkbamlebenphai,
{
background: var(--gradient);
color: var(--white);
}
.Linkbamlebenphai:hover,
{
filter: hue-rotate(-45deg);
}
.Linkbamlebenphai {
padding: 5px 10px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
</style>
<a href="https://www.digitalnomad.vn/p/best-seller-list.html#banggiasanphambanchayonline">
<div class="Linkbamlebenphai">Sản Phẩm Bán Chạy</div>
</a>
right: 0;
transform-origin: top right;
transform: rotate(-90deg) translate(50%, -100%);
right: 50%;
transform-origin: top right;
transform: rotate(360deg) translate(50%, -100%);
top: 0;
right: 50%;
transform-origin: top right;
transform: rotate(360deg) translate(50%, 100%);
Bám lề bên trái :
top: 50%;
left : 0;
transform-origin: top right;
transform: rotate(90deg) translate(50%, -100%);
<ul style="list-style: '🎯 ';">
<li>Dòng 1</li>
<li>Dòng 2</li>
</ul>
Thay ký tự đặc biệt 🎯 bằng ký hiệu, ký tự bạn muốn. ( Nếu chèn vào chỉnh sửa template blogspot Html sử dụng : <ul style="list-style: '🎯 &nbsp;'">
Xem thêm : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-type_all
Mẫu hiển thị code List - Thay thế dấu chấm "•" bằng ký tự đặc biệt, ký tự thông thường khi tạo list danh sách bằng cấu trúc code <ul><li> :
- Dòng 1
- Dòng 2
Bộ sưu tập code phù hợp với phong cách web tối giản, giản lược tối đa tiện ích rườm rà phức tạp, tối ưu thao tác làm hài lòng người dùng trên Blog/Web của bạn.
DiV đóng khung đơn giản :
</div>
<style>
.lien-ket-bloggrightSidebar li {
list-style: none
}
.lien-ket-bloggrightSidebar ul::-webkit-scrollbar-track {
background-color: #f0f1f5
}
.lien-ket-bloggrightSidebar ul::-webkit-scrollbar {
width: 0
}
.lien-ket-bloggrightSidebar ul::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 53.3%, .4)
}
.lien-ket-bloggrightSidebar ul {
max-height: 400px;
overflow-x: hidden;
overflow-y: overlay
}
.lien-ket-bloggrightSidebar li a {
font-size: 13.5px;
float: left;
list-style: none;
margin: 2.5px;
background: white;
padding: 4.5px 8px !important;
border-radius: 4px;
}
.lien-ket-bloggrightSidebar a {
color: black !important;
font-weight: 400;
width: auto;
padding: 5px 10px;
display: inline-block;
font-size: 14px!important;
margin : 0 0 4px 2px;
border: 1px solid #ccc;
border-radius: 3px;
}
.lien-ket-bloggrightSidebar a:hover {opacity:0.9}
.lien-ket-bloggrightSidebar a:hover {color:#fff; border: 1px dashed #fff; }
</style>
<!-- End Css Link SideBar : lien-ket-bloggrightSidebar -->
<!-- Css Link Button : buttonRightSideBar -->
<style>
.buttonRightSideBar {
font-size: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 130px;
margin: 2px;
padding: 2px 0;
cursor: pointer;
transition: all .5s;
text-decoration: none;
color: #fff;
border: none;
border-radius: 5px;
background-color: hsl(174, 100%, 29%);
}
</style>
<!-- End Css Link Button : buttonRightSideBar -->
<!-- Html Button : buttonRightSideBar -->
<center>
<!-- Tips -->
<a class='hvr-pulse-shrink buttonRightSideBar' href='https://www.digitalnomad.vn/p/tips.html' style='background: #AF002A;font-size: 12.5px;color: white;padding-left:5px;padding-right:5px;'>
Tips
</a>
<!-- Knowledge Experience & Skill -->
<a class='hvr-pulse-shrink buttonRightSideBar' href='https://www.digitalnomad.vn/p/knowledge-experience-skill.html' style='background: #AF002A;font-size: 12.5px;color: white;padding-left:5px;padding-right:5px;'>
Knowledge Experience & Skill
</a>
<!-- List -->
<a class='hvr-shrink buttonRightSideBar' href='https://www.digitalnomad.vn/p/list.html' style='background: #AF002A;font-size: 12.5px;color: white;padding-left:5px;padding-right:5px;'>
List
</a>
<!-- Best Seller List -->
<a class='hvr-shrink buttonRightSideBar' href='#' style='background: #AF002A;font-size: 12.5px;color: white;padding-left:5px;padding-right:5px;'>
Best Seller List
</a>
</center>
<!-- End Html Button : buttonRightSideBar -->
<!-- html Link SideBar : lien-ket-bloggrightSidebar -->
<div class="titlebankygui">
<center>
TIPS : TIỆN ÍCH - THỦ THUẬT - MẸO VẶT
</center>
</div>
<!-- Danh Sach Link-->
<div id="lien-ket-blogspotrightSidebar">
<div class="lien-ket-bloggrightSidebar">
<ul>
<li>
<a href="https://www.digitalnomad.vn/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogspot">
Thủ Thuật BLOGsPOT
</a>
</li>
<li>
<a href="https://www.digitalnomad.vn/2021/03/series-html-css-class-id-thuoc-tinhOke2o.html">
ClasS, Id & Thuộc Tính CsS
</a>
</li>
<li>
<a href="https://www.digitalnomad.vn/2021/06/tong-hop-html-css-javascript-du-kieu-chen-vao-blogspot-website-cua-banNhi687.html">
HtmL, CsS Thực DụnG
</a>
</li>
<li>
<a href="https://www.digitalnomad.vn/2021/01/code-html-css-javascript-lam-dep-bai-viet-su-dung-dang-bai-tren-trang-chu-trang-bai-viet-Blogspot-DigitalNomad.vn-Z5Q3.html">
Ký Tự Lạ - Ký Tự Đặc Biệt
</a>
</li>
<li>
<a href="https://www.digitalnomad.vn/p/website.html">
Web Hay
</a>
</li>
<li>
<a href="https://www.digitalnomad.vn/2021/02/danh-sach-template-blogger-dep-dung-viet-blog-content-marketing6o4Y.html">
Template BlogSpOt Đẹp
</a>
</li>
</ul>
</div>
</div>
<!-- End Danh Sach Link -->
<!--End html Link SideBar : lien-ket-bloggrightSidebar -->
Code Nhúng Iframe :
<iframe src="https://www.ntwood.vn/iframe-do-go-noi-thatwc343" width="100%" height="450px"></iframe>
Code hiển thị list sản phẩm nổi bật 1 :
<div style="background: rgb(255, 233, 233); border-radius: 2px; text-align: left;border: 1px solid rgb(251, 196, 196); box-sizing: border-box; color: #ff0000; float: none; font-family: Arial, sans-serif; font-size: 16px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">
<strong> #SẢN PHẨM & DỊCH VỤ NỔI BẬT</strong>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
mUa gỗ ghép
<font color="#001e6f">giá rẻ : </font><strong>
<a href="https://www.digitalnomad.vn/2021/03/van-ghep-gia-re-pho-thong-go-ghep-tieu-chuan-xuat-khau-la-giU9p3e3.html" target="_blank">
TẠI ĐÂY </a></strong>
</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Đặt sản xuất Thớt Gỗ <font color="#001e6f">theo tiêu chuẩn xuất khẩu : </font>
<strong><a href="https://www.digitalnomad.vn/2021/03/thot-go-cao-cap-tieu-chuan-thot-go-gia-reUUKlai7i1.html" target="_blank"> TẠI ĐÂY </a></strong>
</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Mua Ván Mdf, Plywood <font color="#001e6f">đặt hàng : </font>
<strong>
<a href="https://www.digitalnomad.vn/2021/06/mua-van-mdf-hdf-plywood-van-tron-phu-melamine-laminate-acrylic-veneerBf421.html" target="_blank">
TẠI ĐÂY
</a></strong>
</li>
</div>
End code list sản phẩm nổi bật.
Code hiển thị list sản phẩm nổi bật 2 :
<div style="background: #fffaca;
padding: 20px;
margin-bottom:15px;
color: #8e0a00;
border: 1px dashed #FF9800;
border-radius: 5px;
line-height: 22px; font-size:15px">
<p style="margin-top:0; font-size:14px; margin-bottom:10px">
<b style="color:red">Welcome to Digitalnomad.Vn:</b>
là một web/blog cá nhân,
chủ yếu chia sẻ kiến thức về thủ thuật blogspot, cộng tác viên bán hàng online cho doanh nghiệp B2B
</p>
<p style="margin-top:0; margin-bottom:0px;"><font color="Green">
<font size="3">ĐỪNG QUÊN <!--ĐĂNG KÝ--> TRUY CẬP
<a href="https://www.facebook.com/namtrungjsc" rel="dofollow noopener" target="_blank"><strong>FANPAGE</strong></a>
ĐỂ CẬP NHẬT THÔNG TIN, SẢN PHẨM MỚI NHẤT NHÉ!</font></font>
</p>
</div>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
/*****************************************
Shortcodes of Notification Boxes.
By:Bloggersstand.blogspot.com
******************************************/
.headlineGiaBaoBlog1 {width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#29b7ff;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.headlineGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px; padding-bottom:10px;}
.headlineGiaBaoBlog1:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.alertGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#FF8377;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.alertGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px; padding-bottom:10px}
.alertGiaBaoBlog1 a:link {color:#FFFFFF;}
.alertGiaBaoBlog1 a.visited{color:#FFFFFF;}
.alertGiaBaoBlog1:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.noticeGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#8ED2FF;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.noticeGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f18c';font-size:20px;padding-right:10px; padding-bottom:10px}
.noticeGiaBaoBlog1 a:link {color:#FFFFFF;}
.noticeGiaBaoBlog1 a.visited{color:#FFFFFF;}
.noticeGiaBaoBlog1:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.successGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#2ec23e;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.successGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px; padding-bottom:10px}
.successGiaBaoBlog1:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.warningGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#fc402c;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.warningGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px; padding-bottom:10px}
.warningGiaBaoBlog1:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.infoGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#fdce09;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.infoGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px; padding-bottom:10px}
.warningGiaBaoBlog1:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.updateGiaBaoBlog1{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#017CB9;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.updateGiaBaoBlog1::before{font-family:FontAwesome;position:relative;content:'\f0c6';font-size:20px;padding-right:10px; padding-bottom:10px}
.warningGiaBaoBlog1:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
</style>
<div class="warningGiaBaoBlog1">Warning</div>
<div class="successGiaBaoBlog1">Success</div>
<div class="headlineGiaBaoBlog1">Headline</div>
<div class="infoGiaBaoBlog1">Info</div>
<div class="alertGiaBaoBlog1">Alert</div>
<div class="noticeGiaBaoBlog1">Notice</div>
<style>
/*Alert Box By Tggyan.in*/
.infoGiaBaoBlog2, .successGiaBaoBlog2, .warningGiaBaoBlog2, .errorGiaBaoBlog2, .validationGiaBaoBlog2 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.infoGiaBaoBlog2 {
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDwYT-c952pkDPvJY6Frtc_vaHQeERr851g2y2PPo_XL1XkdnEJGAQnnERLJ-9LkP7lx6gmLOmf0Tku-OUKt2YeEDfj8XB-oLHkK6uR-1isLunr-ZTIM9t_7PISpooBNLP6XCIy755M97/s16/icons8-info-16.png');
}
.successGiaBaoBlog2 {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyCrcvuvPsLnrMyLrVJdLzg2aRBNHM87RLkD1gUNJVORcfrYR8HZs20aGTT-ECucN7V0BU3ic3D4azFnFuFY0Flq_fYoSoKQ32OkJ9vTESrRzk2fCGNxO-WHlBH5mVtZ69aogmEfCWHZ6w/s16/icons8-ok-16.png');
}
.warningGiaBaoBlog2 {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcMoE18Q1Yq2_fV3Hq6O4Eq0mgACyEMuanKq_b_Rknw4cQ6FOfQYhlFjLCkcHwAp8BlaBSXtGKqXdHl2shEa4hyphenhyphen7wzix0FDaQ4vbjcqXfR7mArbH4T5rMjJB-UnX-P9oBMGWeaJCBDFxz/s16/icons8-warning-shield-16+%25281%2529.png');
}
.errorGiaBaoBlog2 {
color: #D8000C;
background-color: #FFBABA;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePi89_z3Pma9K52R7P1poa_dXtV8WIUIOK0dsCYP5BuT64NobCUCgbgGfLlpIjQZbVv_iEsZQf4IC-PDlcB_2HVQxQeW_l8-AUe1JRiPgqCi9bdl_UGs2nGpxt34Dw5XrHYr6uVp1594T/s16/icons8-unavailable-16.png');
}
</style>
<div class="infoGiaBaoBlog2">Info message</div>
<div class="successGiaBaoBlog2">Successful message</div>
<div class="warningGiaBaoBlog2">Warning message</div>
<div class="errorGiaBaoBlog2">Error message</div>
End Css Code nổi bật 2.
<div style="border: 1px dashed black;padding-top: 10px;padding-bottom: 10px;padding-left: 10px; padding-right: 10px;"> <a href="https://www.digitalnomad.vn/p/cong-thuc-nau-ngon.html"> <b style="font-size: 13.5px;margin: 2.5px;background: white;padding: 4.5px 8px !important;border-radius: 4px;border: 1px solid #ccc;border-radius: 3px;"> <span style="font-size: 18px;"> Tiêu Đề Nổi Bật </span></b> </a> • Mô Tả </div>
<div style="border: 5px dashed #A4433A;padding-top: 10px;padding-bottom: 10px;padding-left: 10px; padding-right: 10px;"> <a href="https://www.digitalnomad.vn/p/cong-thuc-nau-ngon.html"> <b style="background: rgb(59, 122, 87) none repeat scroll 0% 0%; border-color: rgb(28, 110, 164); border-image: none; border-radius: 10px; border-style: inset; border-width: 1px; border: 1px inset rgb(28, 110, 164); color: white; line-height: 1.8; margin-bottom: 5px; margin-top: 5px; padding-left: 5px; padding-right: 5px;text-align: justify"> <span style="font-size: 18px;"> Công Thức Nấu Ăn Ngon </span></b> </a> • Sổ tay dạy nấu ăn chia sẻ kiến thức, kinh nghiệm bổ ích dành cho người nội trợ, nơi chia sẻ công thức nấu nướng làm nên những món ăn thơm ngon, bổ dưỡng cho gia đình bạn. </div>
<div style="border: 5px inset #2B0AA4;padding-top: 10px;padding-bottom: 10px;padding-left: 10px; padding-right: 10px;"> <a href="https://www.digitalnomad.vn/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogspot"> <b style="background: rgb(255, 126, 0) none repeat scroll 0% 0%; border-color: rgb(28, 110, 164); border-image: none; border-radius: 10px; border-style: inset; border-width: 1px; border: 1px inset rgb(28, 110, 164); color: white; line-height: 1.8; margin-bottom: 5px; margin-top: 5px; padding-left: 5px; padding-right: 5px;text-align: justify"> <span style="font-size: 18px;"> Thủ Thuật Blogspot </span></b> </a> • Nơi chia sẻ : kiến thức, kinh nghiệm giúp tối ưu blogger hay nhất, mới nhất </div>
Code :
<div style="background: rgb(59, 122, 87) none repeat scroll 0% 0%; border-color: rgb(28, 110, 164); border-image: none; border-radius: 10px; border-style: inset; border-width: 1px; border: 1px inset rgb(28, 110, 164); color: white; line-height: 1.8; margin-bottom: 5px; margin-top: 5px; padding-left: 5px; padding-right: 5px;"> <center> <b><span style="font-size: large;"> Mẫu Tiêu Đề Đăng bài viết nổi bật màu xanh Amazon : #3B7A57 </span></b></center> </div>
Code :
<div style="background: #FF7E00 none repeat scroll 0% 0%; border-color: rgb(28, 110, 164); border-image: none; border-radius: 10px; border-style: inset; border-width: 1px; border: 1px inset rgb(28, 110, 164); color: white; line-height: 1.8; margin-bottom: 5px; margin-top: 5px; padding-left: 5px; padding-right: 5px;"> <center> <b><span style="font-size: large;"> Mẫu Tiêu Đề Đăng bài viết nổi bật màu cam Amber (SAE/ECE) #FF7E00 </span></b></center> </div>
Code :
<div style="margin-bottom:5px;margin-top:5px;font-family: Georgia,serif;font-size: 18px;letter-spacing: 2px;word-spacing: 2px;color: #1A0D00;font-weight: normal;text-decoration: none;font-style: oblique;text-transform: none;background-color: transparent;text-align: justify"> Mẫu Đăng nội dung bài viết Background màu trong suốt : transparent </div>
<style> blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: "Comic Sans MS", cursive, sans-serif; font-size: 35px; line-height: 1.2; color: #FF7E00; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } blockquote a:hover{ color: #666; } blockquote em{ font-style: italic; } .author { display:block; text-align:right; font-size:18px; padding:4px; color:rgb(150,150,150); font-style:italic; } </style> <blockquote> <b> Thiết kế website và nội dung không có gì hấp dẫn không đem lại thu nhập và lợi ích gì từ Website thì quả thật " không có động lực để phát triển web - hay nói cách khác chẳng được cái vẹo gì ngoài đam mê " </b> <span class="author">Blogger : <a href="https://www.digitalnomad.vn/2021/07/lam-gi-o-nha-van-co-thu-nhap-kiem-tien-tai-nha-lam-viec-onlineIt1965.html"> <b>Kiếm Tiền Tại Nhà</b></a></span> </blockquote>
Xem Link bài viết mẫu : https://www.digitalnomad.vn/2021/06/danh-sach-theme-wordpress-mien-phi-dep-lung-linhGi875.html
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJQ15r5Y9s2ZMvUaVLI8CooqrjtlS1JdnjsM0ZYiD9A9mfNdTBo3uYfP0MYnZ8U1PCojztJC0iKensbQaXCU-2aKyhPdGrAq3sYXDVc5tJMnGVFSCG_cI2xTyXHov0Dj2AHw4tnjtxCQ/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeLr3xb_JSo87azph6Fm7PihgS_fZOo_11149mt4HI53JGjGIj51ICw0ct3PIbH4xBRTvBkEmWiS0g4-0fv4qXVaYfuBuMsEtsot9cn-4ENeLwAN9_HAzOIEA7PEHrmR1o6vsIO_MQYXo/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
</style>
<blockquote>
<div>
<center>
<span style="color: red;"><span style="font-size: large;"><b>Danh Sách Theme Wordpress dùng làm Blog Web Đẹp Lung Linh </b></span></span>
</center>
</div>
</blockquote>
<div style='margin-bottom:10px;margin-top:10px;font-family: Georgia,serif;font-size: 20px;letter-spacing: 2px;word-spacing: 2px;color: #1A0D00;font-weight: normal;text-decoration: none;font-style: oblique;font-variant: small-caps;text-transform: none;background-color: #FFFFE6;text-align: justify'>
Tiêu đề nội dung cần làm nổi bật
</div>
Code 2 :
Mẫu Code Tạo tiêu đề - nội dung nổi bật số 1
<b style='color: white;background: #4CAF50;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu xanh lá #4CAF50; đậm </b>
<b style='color: white;background: #B0BF1A;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu xanh Acid Green #B0BF1A; </b>
<b style='color: white;background: #4DA6FF;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu xanh da trời #4DA6FF; Nhạt </b>
<b style='color: white;background: #005FF5;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu xanh da trời #005FF5; Đậm </b>
<b style='color: white;background: #0048BA;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu xanh Absolute Zero #0048BA; </b>
<b style='color: white;background: #AF002A;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu Alabama Crimson #AF002A : Đỏ thẫm </b>
<b style='color: white;background: #FF7E00;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu Amber (SAE/ECE) #FF7E00 : Cam </b>
<b style='color: white;background: #3B7A57;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu Amazon #3B7A57 : Xanh </b>
<b style='color: white;background: #C46210;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu Alloy Orange #C46210 : Nâu </b>
<b style='color: #FFFFFF;background: #996D6D;line-height: 1.8;margin-bottom: 5px;margin-top: 5px;padding-left: 5px;padding-right: 5px; border: 1px inset #1C6EA4;border-radius: 10px 10px 10px 10px;'>
Màu nâu #996D6D; </b>
Chèn quảng cáo Random ngẫu nhiên :
<!--script Ads random menu -->
<script type='text/javascript'>
AdsmenuquotesTopIframe = new Array()
// Iframe;
AdsmenuquotesTopIframe[0] = "<iframe src='https://www.vietquangcao.xyz/ads-nen-xanh-thankyoub928' style='max-width:100%;height:550px;'></iframe>"
AdsmenuquotesTopIframe[1] = "<iframe src='https://www.vietquangcao.xyz/ads-top-iframe-an-vatg829' style='max-width:100%;height:550px;'></iframe>"
AdsmenurandomquoteTopIframe = Math.random() * (AdsmenuquotesTopIframe.length)
AdsmenurandomquoteTopIframe = Math.floor(AdsmenurandomquoteTopIframe)
document.write(AdsmenuquotesTopIframe[AdsmenurandomquoteTopIframe])
</script>
<!--End script Ads random menu -->
<div style="text-align: justify;padding:10px">
<font size="3" color="Blue" style='line-height: 1.1;'>
<b><i>
Thẻ Div :
style="text-align: justify" : Nội dung dàn đều chữ
style="text-align:center;" : Nội dung canh giữa
Đây là chữ bôi đậm, in nghiên, có kích thước= 3, màu xanh. Thuộc tính line-height giúp dãn dòng text
</i></b>
</font>
</div>
Code Chèn Hình Ảnh :
<img src="https://cf.shopee.vn/file/84e7ecbaf108d9bb1cbced0bfba26847" style="max-width:100%;height:auto;">
<img alt="Chèn hình co dãn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGW-EGCxhIfwzc0Vn228ZVJ0MNYgP_D-z8jV-FioLGZ2C0mN-x8FGjzljW7TTGl8ClhfupkR7dc_qBzhOzRctm0qM7qFgLd3OjkrjQMzSqpmEnvZat9UMaGr0D3yq8kwfmZdh4fB-MIQ/s1600/Mat-ban-ghe-hoc-sinh-ban-ghe-cafe-ban-ghe-lam-viecOsE858.png" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/>
<img src="Link hình ảnh" width="chiều rộng" height="chiều cao" alt="chèn hình cơ bản"/>
<img src="Link Hình ảnh" alt="chèn hình cơ bản" title="Nội dung tấm hình" width="n" height="n" border="n" />
Tạo link neo - di chuyển nhanh đến vị trí nội dung trên trang cụ thể :
<a href="#ten">liên kết đi đến vị trí có name = #ten </a>
Tạo neo :
<a name="Tên_gán_cho_vị_trí không có dấu #">Tạo vị trí link neo kiểu 1</a>
<p id="noi-dung"> Tạo vị trí link neo kiểu 2 </p>
Code sản phẩm tiếp thị liên kết đơn giản :
<div style="border: 5px outset #FF2904;text-align: center;padding:10px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang">
Xem nơi bán
</a>
</div>
Code Font làm Đẹp nội dung bài viết :
<div style="font-family: Georgia,serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #05020D;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: small-caps;text-transform: none;text-align: justify;padding:10px"> Kiểu Font Georgia,serif Chữ Small Caps OverLine </div>
<div font-family: "Comic Sans MS",cursive,sans-serif;font-size: 25px; style="letter-spacing: 2px;word-spacing: 2px;color: #05020D;font-weight: normal;text-decoration: overline;font-style: oblique;font-variant: small-caps;text-transform: capitalize;"> Kiểu Font Comic Sans MS Chữ Small Caps, Capitalize OverLine </div>
Code Responsive Div / Iframe / Table / LayOut /... :
Responsive Table :
<div style="overflow-x:auto;">
<table>
<tr>
<th>Tiêu đề Cột 1</th>
<th>Tiêu đề Cột 2</th>
</tr>
<tr>
<td>Nội Dung cột 1</td>
<td>Nội Dung cột 1</td>
</tr>
</table>
</div>
<style>
.ResponsiveAds-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.ResponsiveAds-wrapper iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Mẫu 1 :
<div class="ResponsiveAds-wrapper">
<iframe src="https://www.vietquangcao.xyz/iframe-ads-top-blogger-mobilepopg869" width="300" height="620px"></iframe>
</div>
Mẫu 2 :
<div class="ResponsiveAds-wrapper">
<iframe src="https://www.vietquangcao.xyz/iframe-ads-top-blogger-mobilepopg869" style="max-width:100%;height:600px;"></iframe>
</div>
Code tạo cột responsive tự động co dãn theo kích thước màn hình :
Đây là code được tạo từ trang Generator code - responsivegridsystem.com bạn có thể điều chỉnh số cột phù hợp với nhu cầu trên Website của bạn riêng Digitalnomad.vn thích 2 dạng code là 2 cột 3 cột như sau :
Code 2 cột :
<!-- Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
<style>
/* SECTIONS */
.sectionAds2Column {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colAds2Column {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.colAds2Column:first-child { margin-left: 0; }
/* GROUPING */
.groupAds2Column:before,
.groupAds2Column:after { content:""; display:table; }
.groupAds2Column:after { clear:both;}
.groupAds2Column { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2Ads2Column {
width: 100%;
}
.span_1_of_2Ads2Column {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.colAds2Column {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2Ads2Column, .span_1_of_2Ads2Column { width: 100%; }
}
</style>
<div class="sectionAds2Column groupAds2Column">
<div class="colAds2Column span_1_of_2Ads2Column">
Cột 1 - Code tạo 2 cột Responsive
</div>
<div class="colAds2Column span_1_of_2Ads2Column">
Cột 1 - Code tạo 2 cột Responsive
</div>
</div>
<!-- End Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
Code 3 cột :
<!-- Code tạo 3 cột Responsive - Generator : http://www.responsivegridsystem.com -->
<style>
/* SECTIONS */
.sectionAds3Column {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colAds3Column {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.colAds3Column:first-child { margin-left: 0; }
/* GROUPING */
.groupAds3Column:before,
.groupAds3Column:after { content:""; display:table; }
.groupAds3Column:after { clear:both;}
.groupAds3Column { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_3_of_3Ads3Column { width: 100%; }
.span_2_of_3Ads3Column { width: 66.13%; }
.span_1_of_3Ads3Column { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.colAds3Column { margin: 1% 0 1% 0%; }
.span_3_of_3Ads3Column, .span_2_of_3Ads3Column, .span_1_of_3Ads3Column { width: 100%; }
}
</style>
<div class="sectionAds3Column groupAds3Column">
<div class="colAds3Column span_1_of_3Ads3Column">
Cột 1 - Code tạo 3 cột Responsive
</div>
<div class="colAds3Column span_1_of_3Ads3Column">
Cột 2 - Code tạo 3 cột Responsive
</div>
<div class="colAds3Column span_1_of_3Ads3Column">
Cột 3 - Code tạo 3 cột Responsive
</div>
</div>
<!-- End Code tạo 3 cột Responsive - Generator : http://www.responsivegridsystem.com -->
Code được tạo thành từ https://html-css-js.com/css/generator/box-shadow/ :
Box-Shadow CSS Generator :
- <div style="-webkit-box-shadow: 5px 5px 15px 0px #000000; box-shadow: 5px 5px 15px 0px #000000;">Edit this text</div>
- <div style="-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 0px rgba(0,0,0,0);box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 0px rgba(0,0,0,0);">Edit this text</div>
Text Shadow CSS Generator
- <div style="text-shadow: 2px 2px 2px #CE5937;">Edit this text</div>
- <div style="color: #000000;background: #FFFFFF;text-shadow: 2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;color: #000000;background: #FFFFFF;">80'S</div>
Font CSS Style Generator
- <div style="font-family: Georgia,serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #000000;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: none;">Over Line</div>
- <div style="font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #000000;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: small-caps;text-transform: none;">Grumpy wizards make toxic brew for the evil Queen and Jack. </div>
Border / Outline Generator :
- <div style="border: 5px inset #A46225;">Border / Outline Generator 1 </div>
- <div style="border-left: 5px double #6D2AFF;">Border Left 1 Xanh #6D2AFF </div>
- <div style="border-left: 5px double #FF270B;">Border Left double đỏ #FF270B </div>
- <div style="border-left: 5px outset #0624FF;">Border Left outset xanh #0624FF </div>
- <div style="border-right: 5px outset #0624FF;">Border right outset xanh #0624FF </div>
Chuyển đổi code trên : https://html-online.com/editor :
Code Sản Phẩm Đơn giản :
<p style="text-align: center;">Tên Sản Phẩm</p>
<p style="text-align: center;"><img src="https://cf.shopee.vn/file/991a40aa7d217b98b9ae26112dbab678" alt="" width="248" height="248" /></p>
<p style="text-align: center;">Mô Tả Sản Phẩm</p>
<p style="text-align: center;">Tới Nơi Bán</p>
Code tạo Nút Button : https://www.bestcssbuttongenerator.com/
Code tạo Button - màu xanh Css :
<style>
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
<a href="#" class="myButton">green</a>
Code tạo button màu xanh dạng style="" :
Kiểu 1 :
<a href="#" style=" background-color:#44c767;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:16px 31px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;">green</a>
Kiểu 2 :
<button style=" background-color:#44c767;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:16px 31px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;">green</button>
Code tạo button màu đỏ - nổi dạng style="" :
Kiểu 1 :
<a href="#" style="box-shadow: 3px 4px 0px 0px #8a2a21;background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);background-color:#c62d1f;border-radius:18px;border:1px solid #d02718;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:7px 25px;text-decoration:none;text-shadow:0px 1px 0px #810e05;">Đỏ nổi mẫu 1</a>
Kiểu 2 :
<button style="box-shadow: 3px 4px 0px 0px #8a2a21;background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);background-color:#c62d1f;border-radius:18px;border:1px solid #d02718;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:7px 25px;text-decoration:none;text-shadow:0px 1px 0px #810e05;">Đỏ nổi mẫu 2</button>
Code tạo button màu cam dạng style="" :
Kiểu 1 :
<a href="#" style="box-shadow:inset 0px 1px 0px 0px #fce2c1;background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);background-color:#ffc477;border-radius:6px;border:1px solid #eeb44f;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:0px 1px 0px #cc9f52;">Cam mẫu 1</a>
Kiểu 2 :
<button style="box-shadow:inset 0px 1px 0px 0px #fce2c1;background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);background-color:#ffc477;border-radius:6px;border:1px solid #eeb44f;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:0px 1px 0px #cc9f52;">Cam mẫu 2</button>
Code Product Card https://morioh.com/p/aa60e30e7ad1 | https://w3hubs.com/responsive-ecommerce-product-cards-in-html-css | https://www.niemvuilaptrinh.com/article/Product-Card-Snippet-trong-Bootstrap-4 | ... Next
1. Code thẻ miêu tả sản phẩm - Product Card : 3 sản phẩm
<!-- End Code Thẻ miêu tả sản phẩm số 1 -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
margin: 0;
font-family:Nunito Sans;
}
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
}
.content:hover{
box-shadow: 0 0 11px rgba(33,33,33,.2);
transform: translate(0px, -8px);
transition: .6s;
}
img{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
ul{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
li{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
button{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
@media(max-width: 1000px){
.content{
width: 46%;
}
}
@media(max-width: 750px){
.content{
width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<div class="content">
<img src="https://salt.tikicdn.com/ts/tmp/d6/42/03/e1f236e034c500fa37feb313926eca95.png">
<h3>Ghẹ Xanh</h3>
<p>Đặt mua online</p>
<h6>Giá :</h6>
<ul>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1">Buy Now</button>
</div>
<div class="content">
<img src="https://cf.shopee.vn/file/991a40aa7d217b98b9ae26112dbab678">
<h3>Máy Ép Chậm</h3>
<p>Đặt mua online</p>
<h6>Giá :</h6>
<ul>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2">Buy Now</button>
</div>
<div class="content">
<img src="https://cf.shopee.vn/file/293f1eaf23c0b1dd9f60830afd921a31">
<h3>Nồi Chiên Không Dầu</h3>
<p>Đặt mua online</p>
<h6>Giá :</h6>
<ul>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3">Buy Now</button>
</div>
</div>
<!-- End Code Thẻ miêu tả sản phẩm số 1 -->
Code Kết hợp :
Kết hợp chèn sản phẩm vào ô tạo Code tạo 2 cột Responsive :
<!-- Kết hợp chèn sản phẩm vào ô tạo Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
<style>
/* SECTIONS */
.sectionAds2Column {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colAds2Column {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.colAds2Column:first-child { margin-left: 0; }
/* GROUPING */
.groupAds2Column:before,
.groupAds2Column:after { content:""; display:table; }
.groupAds2Column:after { clear:both;}
.groupAds2Column { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2Ads2Column {
width: 100%;
}
.span_1_of_2Ads2Column {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.colAds2Column {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2Ads2Column, .span_1_of_2Ads2Column { width: 100%; }
}
</style>
Kiểu hiển thị sản phẩm mẫu 1 :
<div class="sectionAds2Column groupAds2Column">
<div class="colAds2Column span_1_of_2Ads2Column">
<p style="text-align: center;">Sản phẩm Máy Ép Chậm</p>
<p style="text-align: center;"><img src="https://cf.shopee.vn/file/991a40aa7d217b98b9ae26112dbab678" alt="" width="248" height="248" /></p>
<center><button style="text-align: center;">Tới nơi Bán</button></<center>
</div>
<div class="colAds2Column span_1_of_2Ads2Column">
<p style="text-align: center;">Sản phẩm Nồi Chiên Không Dầu</p>
<p style="text-align: center;"><img src="https://cf.shopee.vn/file/293f1eaf23c0b1dd9f60830afd921a31" alt="" width="248" height="248" /></p>
<center><button style="text-align: center;">Tới nơi Bán</button></<center>
</div>
</div>
<!-- End Kết hợp chèn sản phẩm vào ô tạo Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
Kiểu hiển thị sản phẩm mẫu 2 :
<!-- Kết hợp tạo bảng sản phẩm Button Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
<div class="sectionAds2Column groupAds2Column">
<div class="colAds2Column span_1_of_2Ads2Column">
<p style="text-align: center;">Sản phẩm Máy Ép Chậm</p>
<p style="text-align: center;"><img src="https://cf.shopee.vn/file/991a40aa7d217b98b9ae26112dbab678" alt="" width="248" height="248" /></p>
<center>
<a href="#" style=" background-color:#44c767;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:2px 41px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;">Tới Nơi Bán</a>
</<center>
</div>
<div class="colAds2Column span_1_of_2Ads2Column">
<p style="text-align: center;">Sản phẩm Nồi Chiên Không Dầu</p>
<p style="text-align: center;"><img src="https://cf.shopee.vn/file/293f1eaf23c0b1dd9f60830afd921a31" alt="" width="248" height="248" /></p>
<center>
<button style=" background-color:#44c767;border-radius:28px;border:1px solid #18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:2px 41px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;">Tới nơi bán</button>
</<center>
</div>
</div>
<!-- End Kết hợp tạo bảng sản phẩm Button Code tạo 2 cột Responsive - Generator : http://www.responsivegridsystem.com -->
Xem thêm bài Viết Liên quan :
- Class & Id Css cơ bản
- Thư viện code Html, css Product Card ( thẻ miêu tả sản phẩm )
- Ký tự đặc biệt chèn vào Blogspot
- ...Next
