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

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ình ảnh minh họa Blog Card - Code làm đẹp giao diện bằng html và Css

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ồ :

Mẫu 2 - Quảng Cáo 3 sản phẩm Máy Massage :

Code :

Mẫu 3 Code Bán cây thông noel :

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 :

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

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

💥 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 :

<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://lh3.googleusercontent.com/pw/AM-JKLVn_Guyr3umTA5agThdSW-6ZNxamJ2FYFJg9zel4zAIB_3RKy-1CvcAd5t2GV4jKDhpWD0eWkSepagbg1lLNc8AXcz41yN9iTMCQCzQIUpwR-dNjhpP7yGCTvrvti4EJ1eVhtIySIduDdNdzSbvGP1N=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>

💥 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í,...

<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

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