Share Code Dùng Viết bài Blogspot Cực Đẹp, Soucre Nguồn Quảng Cáo Header & Ads Sản Phẩm Dạng Inline Vào Giữa Bài Viết Blogspot
🔥 Hot Topics :
Bạn là một blogger viết lách online, bạn muốn sở hữu và tự tay thiết web mang phong cách riêng, bạn muốn đổi mới làm đẹp nội dung trang bài viết tạo ấn tượng và sự mới lạ cho người xem. Và nếu bạn muốn thiết kế blogspot viết content kiếm tiền bằng cách sáng tạo nội dung trên blog của mình, bộ 3 javascript, css và html đẹp mĩ mãn là công cụ không thể thiếu giúp bạn thuyết phục và giữ chân độc giả.
Hôm nay Gia Bảo bật mí một số thủ thuật blogspot nho nhỏ đó là share Code Dùng Viết bài Blogspot Cực Đẹp, Soucre Nguồn Quảng Cáo Header & Ads Sản Phẩm Dạng Inline Vào Giữa Bài Viết dành cho các Blogger chuyên nghiệp.
Có 2 cách chèn code html làm nổi bật nội dung, giúp quảng bá sản phẩm thương hiệu cho nhà tài trợ vào trang bài viết, trang chủ, trang tĩnh, trang nhãn và các trang web khác đó là :
- Sử dụng nền tảng hỗ trợ tạo banner / Ads tự động chèn vào bài viết :
- Code tay, code Css, javascript, html thủ công.
Cách 1 bạn chỉ cần chọn ra nhà cung cấp công cụ hỗ trợ tạo code online sau đó chỉ cần chèn code theo hướng dẫn, đối với cách làm này có 2 web điển hình đó là, bạn có thể truy cập và làm theo hướng dẫn theo đường dẫn web được chia sẻ bên dưới.
- Convertful.com
- Pushengage.com
Cách 2 Code tay, code Css, javascript, html thủ công tạo sự linh động trong thiết kế blogspot của bạn biến chúng thành trang web có giao diện đẹp, mới lạ và độc đáo, hấp dẫn người xem.
Sau đây là bộ code mà Gia Bảo sưu tập và sử dụng nó trên trang blogspot cá nhân của mình, bạn có thể dùng chèn quảng cáo giúp kiếm tiền online, hoặc làm mới trang bài viết thu hút thêm nhiều độc giả và khách hàng tiềm năng.
Trong bài viết kỳ trước Gia Bảo chia sẻ cách giúp bạn cách thiết kế blogspot từ giao diện html miễn phí, trong phần này, tác giả tiếp tục chia sẻ code, có thể xem như một loại tiện ích blogspot , là những đoạn code ngắn là một thành phần trong cấu tạo tổng thể của trang web viết bằng ngôn ngữ html, css và javascript chuyên dùng tạo trang tĩnh, trang đích, landing page và trong nội dung bài viết này chúng giúp bạn tạo trang giao diện bài viết và giúp bạn thiết kế quảng cáo trên trang blog của mình.
Hot code chèn quảng cáo dạng ProDuct card cực đẹp :
Mẫu 1 - Quảng Cáo Đồng Hồ :
<style>
.a-box-Blog-Gia-Bao {
display: inline-block;
width: 240px;
text-align: center;
}
.img-container-Blog-Gia-Bao {
height: 230px;
width: 200px;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
display: inline-block;
}
.img-container-Blog-Gia-Bao img {
transform: skew(0deg, -13deg);
height: 250px;
margin: -35px 0px 0px -70px;
}
.inner-skew-Blog-Gia-Bao {
display: inline-block;
border-radius: 20px;
overflow: hidden;
padding: 0px;
transform: skew(0deg, 13deg);
font-size: 0px;
margin: 30px 0px 0px 0px;
background: #c8c2c2;
height: 250px;
width: 200px;
}
.text-container-Blog-Gia-Bao {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
padding: 120px 20px 20px 20px;
border-radius: 20px;
background: #fff;
margin: -120px 0px 0px 0px;
line-height: 19px;
font-size: 14px;
}
.text-container-Blog-Gia-Bao h3 {
margin: 20px 0px 10px 0px;
color: #04bcff;
font-size: 18px;
}
</style>
<center>
<div class="a-box-Blog-Gia-Bao">
<div class="img-container-Blog-Gia-Bao">
<div class="img-inner">
<div class="inner-skew-Blog-Gia-Bao">
<img src="https://cf.shopee.vn/file/1216cbaf70f4c0e6fb1f30b8aa54c612">
</div>
</div>
</div>
<div class="text-container-Blog-Gia-Bao">
<div>
Đồng hồ nam chính hãng cao cấp SKMEI dây da xịn, mặt chữ nhật sang trọng, hiển thị số giờ điện tử và kiểu truyền thống thiết kế đáo
</div>
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/%C4%90%E1%BB%93ng-h%E1%BB%93-nam-ch%C3%ADnh-h%C3%A3ng-cao-c%E1%BA%A5p-SKMEI-d%C3%A2y-da-x%E1%BB%8Bn-m%E1%BA%B7t-ch%E1%BB%AF-nh%E1%BA%ADt-sang-tr%E1%BB%8Dng-s%E1%BB%91-gi%E1%BB%9D-%C4%91i%E1%BB%87n-t%E1%BB%AD-v%C3%A0-truy%E1%BB%81n-th%E1%BB%91ng-%C4%91%C3%B4c-%C4%91%C3%A1o-SKCN01-i.68362839.7807313130">
<h3>Xem Giá Bán</h3>
</a>
</div>
</center>
Mẫu 2 - Quảng Cáo 3 sản phẩm Máy Massage :
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f7f8fc;
font-family: "Roboto", sans-serif;
color: #10182f;
}
.container-blog-gia-bao {
display: flex;
width: 700px;
justify-content: space-evenly;
flex-wrap: wrap;
}
.card-blog-gia-bao {
margin: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 300px;
}
.card-blog-gia-bao-header img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-blog-gia-bao-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;
min-height: 250px;
}
.tag-blog-gia-bao {
background: #cccccc;
border-radius: 50px;
font-size: 12px;
margin: 0;
color: #fff;
padding: 2px 10px;
text-transform: uppercase;
cursor: pointer;
}
.tag-blog-gia-bao-teal {
background-color: #47bcd4;
}
.tag-blog-gia-bao-purple {
background-color: #5e76bf;
}
.tag-blog-gia-bao-pink {
background-color: #cd5b9f;
}
.card-blog-gia-bao-body p {
font-size: 13px;
margin: 0 0 40px;
}
.user-blog-gia-bao {
display: flex;
margin-top: auto;
}
.user-blog-gia-bao img {
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 10px;
}
.user-blog-gia-bao-info h5 {
margin: 0;
}
.user-blog-gia-bao-info small {
color: #545d7a;
}
</style>
<div class="container-blog-gia-bao">
<div class="card-blog-gia-bao">
<div class="card-blog-gia-bao-header">
<img src="https://cf.shopee.vn/file/046221364a7131ec16cce44d45c16994" alt="rover" />
</div>
<div class="card-blog-gia-bao-body">
<h4>
Đệm Massage Toàn Thân RULAX Đa Điểm Rung, Đệm Massage Kèm Gối Massage
</h4>
<!-- <p>
An exploration into the truck's polarising design
</p>
-->
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/%C4%90%E1%BB%87m-Massage-To%C3%A0n-Th%C3%A2n-RULAX-%C4%90a-%C4%90i%E1%BB%83m-Rung-%C4%90%E1%BB%87m-Massage-K%C3%A8m-G%E1%BB%91i-Massage-(b%E1%BA%A3o-h%C3%A0nh-1-n%C4%83m)-ph%C3%AAn-b%E1%BA%A3n-2021-i.170368671.2700628036">
<span class="tag-blog-gia-bao tag-blog-gia-bao-teal">Xem Giá Bán</span>
</a>
<!--
<div class="user-blog-gia-bao">
<img src="https://cf.shopee.vn/file/956a43b1a5761caa66351a0835a34902" alt="user-blog-gia-bao" />
<div class="user-blog-gia-bao-info">
<h5>July Dec</h5>
<small>2h ago</small>
</div>
</div>
-->
</div>
</div>
<div class="card-blog-gia-bao">
<div class="card-blog-gia-bao-header">
<img src="https://cf.shopee.vn/file/956a43b1a5761caa66351a0835a34902" alt="ballons" />
</div>
<div class="card-blog-gia-bao-body">
<h4>
MASSAGE MẮT THÔNG MINH 4D AZAKI E191 PLUS GHI TRẮNG
</h4>
<!--
<p>
The future can be scary, but there are ways to
deal with that fear.
</p>
-->
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/MASSAGE-M%E1%BA%AET-TH%C3%94NG-MINH-4D-AZAKI-E191-PLUS-GHI-TR%E1%BA%AENG-i.479575321.9477298815">
<span class="tag-blog-gia-bao tag-blog-gia-bao-purple">Xem Giá Bán</span>
</a>
<!--
<div class="user-blog-gia-bao">
<img src="https://lh3.googleuser-blog-gia-baocontent.com/ogw/ADGmqu8sn9zF15pW59JIYiLgx3PQ3EyZLFp5Zqao906l=s32-c-mo" alt="user-blog-gia-bao" />
<div class="user-blog-gia-bao-info">
<h5>Eyup Ucmaz</h5>
<small>Yesterday</small>
</div>
</div>
-->
</div>
</div>
<div class="card-blog-gia-bao">
<div class="card-blog-gia-bao-header">
<img src="https://cf.shopee.vn/file/fab9f3bec61cbd568983103fc52a29d0" alt="city" />
</div>
<div class="card-blog-gia-bao-body">
<h4>
Gối Massage Vai Gáy 8 Bi Hồng Ngoại Công Nghệ Nhật Bản Cao Cấp
</h4>
<!--
<p>
Dashboard Design Guidelines
</p>
-->
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/G%E1%BB%91i-Massage-Vai-G%C3%A1y-8-Bi-H%E1%BB%93ng-Ngo%E1%BA%A1i-C%C3%B4ng-Ngh%E1%BB%87-Nh%E1%BA%ADt-B%E1%BA%A3n-Cao-C%E1%BA%A5p-i.136581711.4755190590">
<span class="tag-blog-gia-bao tag-blog-gia-bao-pink">
Xem Giá Bán
</span>
</a>
<!--
<div class="user-blog-gia-bao">
<img src="https://studyinbaltics.ee/wp-content/uploads/2020/03/3799Ffxy.jpg" alt="user-blog-gia-bao" />
<div class="user-blog-gia-bao-info">
<h5>Carrie Brewer</h5>
<small>1w ago</small>
</div>
</div>
-->
</div>
</div>
Mẫu 3 Code Bán cây thông noel :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bree+Serif&family=EB+Garamond:ital,wght@0,500;1,800&display=swap');
body {
background: #DFC2F2;
background-image: linear-gradient( to right, #ffffb3,#ffe6e6);
background-attachment: fixed;
background-size: cover;
}
#container-blog-gia-bao{
box-shadow: 0 15px 30px 1px grey;
background: rgba(255, 255, 255, 0.90);
text-align: center;
border-radius: 5px;
overflow: hidden;
margin: 5em auto;
height: 350px;
width: 700px;
}
.product-details-blog-gia-bao {
position: relative;
text-align: left;
overflow: hidden;
padding: 30px;
height: 100%;
float: left;
width: 40%;
}
#container-blog-gia-bao .product-details-blog-gia-bao h1{
font-family: 'Bebas Neue', cursive;
display: inline-block;
position: relative;
font-size: 30px;
color: #344055;
margin: 0;
}
#container-blog-gia-bao .product-details-blog-gia-bao h1:before{
position: absolute;
content: '';
right: 0%;
top: 0%;
transform: translate(25px, -15px);
font-family: 'Bree Serif', serif;
display: inline-block;
background: #ffe6e6;
border-radius: 5px;
font-size: 14px;
padding: 5px;
color: white;
margin: 0;
animation: chan-sh 6s ease infinite;
}
.hint-star-blog-gia-bao {
display: inline-block;
margin-left: 0.5em;
color: gold;
width: 50%;
}
#container-blog-gia-bao .product-details-blog-gia-bao > p {
font-family: 'EB Garamond', serif;
text-align: center;
font-size: 18px;
color: #7d7d7d;
}
.control-blog-gia-bao{
position: absolute;
bottom: 20%;
left: 22.8%;
}
.btn-blog-gia-bao {
transform: translateY(0px);
transition: 0.3s linear;
background: #809fff;
border-radius: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
outline: none;
border: none;
color: #eee;
padding: 0;
margin: 0;
}
.btn-blog-gia-bao:hover{transform: translateY(-6px);
background: #1a66ff;}
.btn-blog-gia-bao span {
font-family: 'Farsan', cursive;
transition: transform 0.3s;
display: inline-block;
padding: 10px 20px;
font-size: 1.2em;
margin:0;
}
.btn-blog-gia-bao .price-blog-gia-bao, .shopping-cart{
background: #333;
border: 0;
margin: 0;
}
.btn-blog-gia-bao .price-blog-gia-bao {
transform: translateX(-10%); padding-right: 15px;
}
.btn-blog-gia-bao .shopping-cart {
transform: translateX(-100%);
position: absolute;
background: #333;
z-index: 1;
left: 0;
top: 0;
}
.btn-blog-gia-bao .buy {z-index: 3; font-weight: bolder;}
.btn-blog-gia-bao:hover .price-blog-gia-bao {transform: translateX(-110%);}
.btn-blog-gia-bao:hover .shopping-cart {transform: translateX(0%);}
.product-image-blog-gia-bao {
transition: all 0.3s ease-out;
display: inline-block;
position: relative;
overflow: hidden;
height: 100%;
float: right;
width: 45%;
display: inline-block;
}
#container-blog-gia-bao img {width: 100%;height: 100%;}
.info-image-blog-gia-bao {
background: rgba(27, 26, 26, 0.9);
font-family: 'Bree Serif', serif;
transition: all 0.3s ease-out;
transform: translateX(-100%);
position: absolute;
line-height: 1.8;
text-align: left;
font-size: 105%;
cursor: no-drop;
color: #FFF;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.info-image-blog-gia-bao h2 {text-align: center}
.product-image-blog-gia-bao:hover .info-image-blog-gia-bao{transform: translateX(0);}
.info-image-blog-gia-bao ul li{transition: 0.3s ease;}
.info-image-blog-gia-bao ul li:hover{transform: translateX(50px) scale(1.3);}
.product-image-blog-gia-bao:hover img {transition: all 0.3s ease-out;}
.product-image-blog-gia-bao:hover img {transform: scale(1.2, 1.2);}
</style>
<div id="container-blog-gia-bao">
<div class="product-details-blog-gia-bao">
<h1>
Cây_thông_noel_1.5m
Kèm 112 phụ kiện
</h1>
<span class="hint-star-blog-gia-bao star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
<p class="info-image-blog-gia-baormation">
Hãy lan tỏa niềm vui, đây là Giáng sinh,
ngày được chờ đợi nhất trong năm.
Cây Giáng sinh là thứ người ta cần nhất.
</p>
<div class="control-blog-gia-bao">
<button class="btn-blog-gia-bao">
<span class="price-blog-gia-bao">>>></span>
<span class="shopping-cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</span>
<span class="buy">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/C%C3%A2y_th%C3%B4ng_noel_1.5m-112-ph%E1%BB%A5-ki%E1%BB%87n-i.105558979.1667208068">
Mua Ngay
</a>
</span>
</button>
</div>
</div>
<div class="product-image-blog-gia-bao">
<img src="https://cf.shopee.vn/file/52f4e701ffd1bf9b2dbd6d8cc4123046" alt="">
<div class="info-image-blog-gia-bao">
<h2> Mô tả</h2>
<ul>
<li><strong>Cây thông 1m50 được đặt sản xuất riêng theo tiêu chuẩn cao, dáng cây dày , tán rộng, màu xanh thật </strong> </li>
<li><strong>Com bo phụ kiện được xếp phù hợp, dày đồ và lựa chọn những phụ kiện cao cấp, cần thiết cho cây.</strong></li>
<!--
<li><strong>Height : </strong>5 Ft </li>
<li><strong>Shade : </strong>Olive green</li>
<li><strong>Decoration: </strong>balls and bells</li>
<li><strong>Material: </strong>Eco-Friendly</li>
-->
</ul>
</div>
</div>
</div>
Link tham khảo code Product Card / Blog Card / Product card slider { Key word : product card html only css } :
- https://freefrontend.com/css-cards
- https://boldman.vn/ux-patterns/simple-product-card-ui-design-using-html-css-e-commerce-card-design-tutorial
- https://freefrontend.com/bootstrap-product-cards/
- https://hocwebgiare.com/blog-detail/Bootstrap/post266/Huong-dan-cach-tao-Responsive-Carousel-bang-Bootstrap.html
- https://bbbootstrap.com/snippets/bootstrap-4-ecommerce-products-list-range-filters-89673127
- https://codepen.io/ChynoDeluxe/pen/bdXeqQ
- https://www.niemvuilaptrinh.com/article/Nhung-Blog-Card-Dep-Cho-Trang-Web2020
- https://freefrontend.com/css-forms
- https://designmodo.com/create-product-page
- https://xuanthulab.net/su-dung-card-tao-box-chua-noi-dung-trong-bootstrap.html
- https://redstapler.co/rpg-style-card-design-with-hover-effect-html-css-tutorial/
- https://www.niemvuilaptrinh.com/article/Cach-Tao-Team-Card-Cho-Trang-Web-2020
- https://devsnap.me/css-card-layouts
- https://www.crowdyworld.com/2021/09/project-design-food-order-card-with-the-help-of-html-and-css.html
- https://www.codingnepalweb.com/product-cards-with-fly-to-cart-effect-jquery
- https://www.ordinarycoders.com/blog/article/17-tailwindcss-cards/
- https://codes4education.com/responsive-product-card-slider-using-slick-slider/
Phần 1 code dạng Blog card cực đẹp :
💥 Mẫu Product Card - quảng cáo nồi chiên không dầu :
<!-- Ads -->
<link href='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Content-Product-Card-Harvest-Vase.css?v=1636245735' rel='stylesheet'/>
<div class="wrapper">
<div class="product-img">
<img src="https://cf.shopee.vn/file/46b1bc605044dd5a3ad5ec90d89d2745" height="350" width="327">
</div>
<div class="product-info">
<div class="product-text">
<h2 style="font-size: 19.5px;text-align: justify;padding-right:30px;">
NỒI CHIÊN KHÔNG DẦU LOCK&LOCK
ĐIỆN TỬ 5,2l EJF351BLK
</h2>
<!--<h2>ĐIỆN TỬ 5,2l EJF351BLK </h2>-->
<p style="padding-top:15px;padding-left:10px;padding-right:30px;text-align: justify;">
Sở hữu kiểu dáng hiện đại, màu sắc phối kết hợp tinh tế, phù hợp sử dụng trong mọi không gian nội thất nhà bếp. <br/>
Công nghệ mới cho phép bạn rán, nướng bánh, nướng và quay thực phẩm nhanh chóng, ít chất béo hơn so với nồi chiên thông thường
</p>
<div class="product-price-btn">
<button>
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://shopee.vn/p-i.9049159.1109404247"> Xem Ngay </a>
</button>
</div>
</div>
</div>
</div>
<!-- End Ads -->
💥 Mẫu Blog Card dành cho blogger sáng tạo nội dung, viết blog ẩm thực - mẫu hướng dẫn làm món bánh canh thập cẩm trên blog Gia Bảo :
<!--Ads -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Content-Am-thuc-banh-canh-thap-cam.css?v=1636246472' rel='stylesheet'/>
<div class='recipe-card'>
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GWozD1kOgKmDNSPNzttmbBaROXf16xz_G7eBd3NlZmO5CYlmfduRsvmvTqcLjiG75ThGcT9TOSXgZBbtcf-aYNqk6-E0llHPuXdiZAgw-zwGFWjUTSehboRR_DLRVclAvG6Ocg3DIXc/s500-no/) no-repeat 50% 50%; background-size:cover; height: 600px"></div>
<div class="recipe-card__body">
<h2 class="recipe-card__heading">Bánh canh thập cẩm</h2>
<h2 class="recipe-card__subhead">
Mô tả bài viết
</h2>
<ul class="recipe-card__nav">
<li>
<h3 class="active">Nguyên Liệu</h3>
</li>
</ul>
<ul class="recipe-card__ingredients">
<li> Nguyên liệu 1
</li>
<li> Nguyên liệu 2
</li>
<li> Nguyên liệu 3
</li>
<li> Nguyên liệu 4
</li>
<li> Nguyên liệu 5
</li>
<li> Nguyên liệu 6
</li>
</ul>
<ul class="recipe-card__nav">
<li>
<h3 class="active">Cách Nấu Bánh canh thập cẩm</h3>
</li>
</ul>
<p style="font-size: 14.5px;text-align: justify;">
Hướng dẫn cách nấu
</p>
</div>
</div>
<!--End Post -->
💥 Mẫu Blog Card dành cho trang blog viết bài chia sẻ mẫu giao diện template html đẹp, blogspot miễn phí,...
<div class="card-tintuc" style="max-width: 900px;">
<div class="header">
<div class="icon">
<a href="#"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="text" style="max-width: 900px; padding-left: 10px; padding-right: 10px; text-align: justify;">
<h2 class="food">
Tiêu đề nội dung
</h2>
<a href="https://www.digitalnomad.vn/p/view.html?url=https://foxify-templateify.blogspot.com/">
<i class="fa fa-clock-o"> Xem Mẫu </i>
</a>
<a href="#">
<i class="fa fa-users"> Tải Về</i>
</a><div class="stars"><a href="https://gooyaabitemplates.com/download/Foxify-Free-Version-1.0.zip">
</a><li><a href="#">
</a><a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-star-o"></i></a>
</li>
</div>
<p class="info">
Nội dung
</p>
</div>
<a class="btn-tintuc" href="#">
Xem chi tiết ...</a>
</div><br />
<link href='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Card-UI-Recipe.css?v=1636355489' rel='stylesheet' type='text/css'/>
<!--Hình-->
<style>
.card-tintuc .header {
background: url("https://gooyaabitemplates.com/download/FlashNews-Blogger-Template.jpg") no-repeat center;
</style>
💥 Mẫu Blog Card dùng post bài viết ẩm thực.
<div class="container-am-thuc">
<div class="card-am-thuc" style="text-align: justify;">
<center>
<img src="Link Hình Ảnh" alt="" style="width:60%;margin-top:-50px">
</center>
<div class="data-am-thuc" style="margin-top:-50px">
<h2 class="title-am-thuc">
Tiêu đề chính
</h2>
<p class="description-am-thuc">
Mô tả ngắn
</p>
<span class="price-am-thuc" style="padding-top:10px">
tiêu đề phụ 1
</span>
<p class="description-am-thuc">
Nội dung 1
</p>
<span class="price-am-thuc" style="padding-top:10px">
tiêu đề phụ 2
</span>
<p class="description-am-thuc">
Nội dung 2
</p>
<span class="fa fa-star checked-am-thuc"></span>
<span class="fa fa-star checked-am-thuc"></span>
<span class="fa fa-star checked-am-thuc"></span>
<span class="fa fa-star checked-am-thuc"></span>
<span class="fa fa-star"></span>
<a href="#" class="review-am-thuc" target="_blank"><small>3,025 review</small></a>
<div>
<center>
<a href="#" class="button-am-thuc" target="_blank">
text liên kết
</a>
</center>
</div>
</div>
</div>
</div>
<p style="margin-bottom:100px"></p>
<link href='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-card-Food-order-crowdyworld.css?v=1636362479' rel='stylesheet'/>
💥 Mẫu Blog Card dùng tạo tiêu đề & mô tả nội dung bài viết
<link href='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-card-Layout-practice-using-grid.css?v=1636367790' rel='stylesheet'/>
<section>
<h2>Tiêu đề Seo
</h2>
<div class="content" style="text-align: justify;">
<p>
Mô tả, giới thiệu sơ lược về nội dung Seo lên top Google
</p><a href="#">Learn more</a>
</div>
<div class="img"><img src="https://cdn.shopify.com/s/files/1/2027/2569/files/marketing-online-kiem-tien-1-about-img.png?v=1634945602"/>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://unsplash.com/@andersjilden?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Anders Jildén"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Anders Jildén</span></a></div>
</section>
<a class="attribution" href="#">
Text Liên Kết Chuyển Hướng
</a>
Đang tiếp tục được cập nhật code đăng bài viết .....
Phần 2 code dạng slider, carousel, code quảng cáo sản phẩm cực đẹp :
Đang tiếp tục được cập nhật code quảng cáo .....