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

Web tạo Code hay
  • 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
 
Dành cho các bạn thiết kế & đăng bài viết trên BlogSpot Xem thêm bài viết :
Làm việc với ngôn ngữ lập trình (XML, HTML, CSS, Javascript,...) & ứng dụng dùng thiết kế web bằng blogspot. 
➠ Xây dựng Blog Content + UX + Internal link dùng làm nơi chia sẻ & viết quảng cáo Top 10 Google & cách viết Slogan Top Of Mind
Next
Tham khảo thêm về thuật ngữ thiết kế - design giao diện Blog / Web :
➠ Góc Thiết kế Ui trải nghiệm người dùng : https://uxvietnam.com  

Kiếm tiền online có khó không

#CHIA SẺ - SƯU TẦM CODE HTML, CSS, JAVASCRIPT THỰC CHIẾN
  • Dễ dàng tiện dụng Copy & Paste
  • Tương thích với hầu hết mọi thể loại Website chuẩn Ui / Ux
  • Hỗ trợ làm đẹp nội dung Web Ui/Ux
  • Sau đây là một số code được sử dụng trên trang Digitalnomad.Vn :

    #iFrame Xịn Sò
    Code Iframe :

    <div style="width: 1000px; height: 100%;" align="left" scrolling="no">
    <div id="frameContainer" style="overflow:hidden;">
    <center>
    <iframe src="https://start.me/p/GE5RLK/noi-chien-khong-dau" scrolling="no" style="width: 950px; height: 1000px; margin-top: -50px; margin-bottom: -50px; margin-left: 0px; margin-right: 0px;" frameborder="0"></iframe>
    </center>
    </div>
    </div> 

    Ghi Chú : 
    1. margin-top: -50px;  { Ẩn phần đầu trang web chèn 50px }
    2. margin-bottom: -50px;  { Ẩn phần cuối trang web chèn 50px }
    3. margin-left: 0px; { Nếu bạn thay 0px; = -300px  ẩn phần bên trái trang web chèn 300px }
    4. margin-right: 0px; { Nếu bạn thay 0px; = -300px  ẩn phần bên phải trang web chèn 300px }
    Thực Tế Hiển Thị Code Iframe :
     
    #CSS Link Bám Lề Trái Phải Trên Dưới ( Feed Back, ConTact )
     
    Code Link Bám Lề bên Phải :
     
    <style>   
    .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>

    Thay đổi các  thông số :
    Bám lề bên phải :
      top: 50%;
      right: 0;

      transform-origin: top right;
      transform: rotate(-90deg) translate(50%, -100%);
     
    Bám lề chân trang :
      bottom: 0;
      right: 50%;

      transform-origin: top right;
      transform: rotate(360deg) translate(50%, -100%);
     
    Bám lề đầu trang :
      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%);

    Hiển Thị Thực Tế Link bám lề :

     
    Link Bám Lề Bên Phải
    #Code List ul li

    <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: '🎯 &amp;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

    #Code Tối Giản

    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="font-size: 13.5px;margin: 2.5px;background: white;padding: 4.5px 8px !important;border-radius: 4px;border: 1px solid #ccc;border-radius: 3px;text-align: justify;">
    Code Khung màu trắng - Dùng đóng Khung Link liên kết
    </div>
     
    Lưu Ý :  
    Mẫu Màu solid :  Màu trắng : solid #ccc; | Màu Đen : solid #000000;
     
    Css & Html chia sẻ  Link : 
     
    <!-- CSS link SideBar : lien-ket-bloggrightSidebar  --> 
    <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 Html, Css trên trang sử dụng được lấy từ các trang Generator tự động tạo code từ các trang cung cấp ứng dụng " Tool Code Web " online :

    Code Nhúng Iframe :

    <iframe src="https://www.ntwood.vn/iframe-do-go-noi-thatwc343" width="100%" height="450px"></iframe> 

    #Code notification, notice, message, information ,warning, alert, thông báo, Ads Text List Sản Phẩm nổi bật, code làm đẹp, nổi bật tiêu đề, BÀI VIẾT LIÊN QUAN, thu hút thị giác, điểm nhìn của độc giả

    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 &amp; 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.

     

    Các Kiểu Thông Báo shorcode Nổi Bật
    Code 1 :
    <!--shorcodeGiaBaoBlog--> <style> .shorcodeBlogGiaBao{display:block;overflow:hidden;padding:5px 10px 5px 5px;background:#f8f8f8;border:1px solid #f89406;border-radius:8px;margin:15px auto;max-width:450px;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,.1);position:relative} .shorcodeBlogGiaBao:after{content:"";width:5px;height:5px;border-top:1px solid #f89406;border-right:1px solid #f89406;transform:rotate(45deg);position:absolute;right:10px;bottom:50%} .shorcodeBlogGiaBao a{display:block;overflow:hidden}.detail-content .shorcodeBlogGiaBao .img{float:left;width:100px;border-radius:8px;margin:0 30px 0 0}.detail-content .shorcodeBlogGiaBao img{width:100%;height:auto;border-radius:10px}.shorcodeBlogGiaBao .inforBlogGiaBao{display:block;overflow:hidden} .shorcodeBlogGiaBao .inforBlogGiaBao strong{display:block;overflow:hidden;font-size:16px;color:#333;line-height:155%}.shorcodeBlogGiaBao .inforBlogGiaBao span{display:block;overflow:hidden;font-size:12px;color:#666;padding:5px 0}.shorcodeBlogGiaBao .inforBlogGiaBao span.publisherBlogGiaBao{padding:2px 0}.shorcodeBlogGiaBao .inforBlogGiaBao span.publisherBlogGiaBao b{color:#288ad6}.shorcodeBlogGiaBao .inforBlogGiaBao span.hasfeeBlogGiaBao{color:#fff;background:#07a358;border-radius:4px;padding:1px 5px;font-size:13px;margin-right:6px;display:inline-block;vertical-align:middle}.shorcodeBlogGiaBao .inforBlogGiaBao span.hasfeeBlogGiaBao.fee{background:#eb5757}.shorcodeBlogGiaBao .inforBlogGiaBao span.catenameBlogGiaBao{display:inline-block;vertical-align:middle;font-size:13px;line-height:155%}.shorcodeBlogGiaBao .inforBlogGiaBao span.commentcount,.shorcodeBlogGiaBao .inforBlogGiaBao span.viewcountBlogGiaBao{display:inline-block;vertical-align:middle;margin-right:15px;padding:0}.shorcodeBlogGiaBao .inforBlogGiaBao span.commentcount i{display:inline-block;vertical-align:middle;margin:0 3px -1px 0}.shorcodeBlogGiaBao .inforBlogGiaBao span.viewcountBlogGiaBao i{display:inline-block;vertical-align:middle;margin:0 3px 3px 0}.shorcodeBlogGiaBao .ratingresult{display:inline-block;vertical-align:middle;margin-right:15px}.shorcodeBlogGiaBao .ratingresult p{display:inline-block;vertical-align:middle;font-size:12px;color:#666;padding:0;width:unset;margin-right:5px;margin-top:3px}.shorcodeBlogGiaBao .ratingresult span{display:inline-block;vertical-align:middle;margin-right:3px}.shorcodeBlogGiaBao .ratingresult span:last-child{margin-right:3px;padding:0;margin-top:2px}.shorcodeBlogGiaBao .ratingresult span i{display:block}.shorcodeBlogGiaBao .ratingresult span.star .icontgdd-star{background-position:-295px -30px}.shorcodeBlogGiaBao .ratingresult a{display:inline-block;vertical-align:middle;font-size:12px;color:#666;padding:0}.detail-content .shorcodeBlogGiaBao .ratingresult .img{display:inline-block;vertical-align:middle;width:15px !important;height:15px;float:unset;margin:0 3px 0 0} .detail-content .shorcodeBlogGiaBao .ratingresult .img img{border-radius:unset} </style> <div class="shorcodeBlogGiaBao"> <a href="#" target="_blank" rel="dofollow"> <div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQxq6ww6IKziBofqYGB0ohiYzmSOiecyq7ftSkZKKXUypYBpLNZylCxwnj62Z_uGPPDMRvD3RGk7HMZTrkcZV56ka6bH8YEcI6HnGPGy_S_3yfEgpiHYs2jFaLqtA2dJrJjgHTwZpCE8/s1600/Logo-Blog-Gia-Bao300.png" style="float:left;width:110px;margin:0 10px"> </div> <div class="inforBlogGiaBao"> <strong class="titleBlogGiaBao"> Gia Bảo Blog </strong> <span class="hasfeeBlogGiaBao"> Đối Tác </span> <span class="catenameBlogGiaBao"> Doanh nghiệp </span> <span class="publisherBlogGiaBao">Hợp Tác : <b> Marketing </b> </span> <span class="viewcountBlogGiaBao"> <i class=icongameapp-countviewBlogGiaBao> </i>50,961 lượt xem </span> </div> </a> </div> <!--End shorcodeGiaBaoBlog-->
    Hiển Thị 1 :
    Các Kiểu Đóng Khung Nội Dung Share Link Nổi Bật
    Code mẫu 1 Đen & Trắng :
    <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> &nbsp; • Mô Tả </div>
    Hiển thị thực tế mẫu 1 - Tối giản :
    Code mẫu 2 :
    <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> &nbsp; • 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>
    Hiển thị thực tế mẫu 2 :
    Công Thức Nấu Ăn Ngon   • 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.

    Code mẫu 3 :
    <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> &nbsp; • 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>
    Hiển thị thực tế mẫu 3 :
    Thủ Thuật Blogspot   • Nơi chia sẻ : kiến thức, kinh nghiệm giúp tối ưu blogger hay nhất, mới nhất

    3 mẫu code tiêu đề - đăng nội dung bài viết hay dùng trên Blog Marketing Gia Bảo
    Mẫu Tiêu Đề Đăng bài viết nổi bật màu xanh Amazon : #3B7A57
    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>
    Mẫu Tiêu Đề Đăng bài viết nổi bật màu cam Amber (SAE/ECE) #FF7E00
    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>
    Mẫu Đăng nội dung bài viết Background màu trong suốt : transparent
    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>
    Code Tạo blockquote - Chú Thích nổi bật Số 1
    <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ê "&nbsp; </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> Blogger : Kiếm Tiền Tại Nhà
    Code Tạo blockquote - Chú Thích nổi bật Số 2

    <style> blockquote1 { margin: 10px auto; padding: 15px; border: 1px solid red; border-left: 25px solid; border-radius: 20px; color: red;font-size: 25px; box-shadow: 2px 2px 2px #222; } </style> <blockquote1> <b> Tạo khung chú thích Blockquote màu đỏ, #FFE000 – Yellow,#FFCC09 – Golden,#B5F0AA – Light Green,#FFA300 – Orange,#00D6FF – Aqua,#B800FF – Violet,#EB00FF – Magenta </b> </blockquote1>

    Code Tạo blockquote - Chú Thích nổi bật Số 3

    <style> #code1 { color: #333; padding: 270px 30px 30px 90px; /*The Image URL. You should replace it with your own */ background: #fafafa url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxOunRgaXxY0IVckBEjex9gyOt4tNI0y0-mZp1b3IE02sTs_C7ySAk6YCg9fK-HACoUh4g8mFsW_2bjVBHc0QEkHQbar-55qjZMNSjkcsWWjS7dD4uKo5_S9_Chxk1myKK3Wp_LQpZ48/w640-h278/kiem-tien-online-khong-kho-nhung-phai-biet-cachY5s6.png') no-repeat top center; font-size: 20px; } </style> <div id="code1"> <!--Noi dung--> Mỗi ngày có hàng trăm, hàng ngàn website được khởi tạo, theo thống kê gần đây nhất số lượng website toàn cầu đã vượt qua ngưỡng 1.8 tỷ một con số thật là đáng nể. Dĩ nhiên, không phải toàn bộ các trang web được lập ra đều nhằm mục đích kiếm tiền, nhưng dùng website làm phương tiện để tìm kiếm nguồn thu nhập lại là xu thế chung của đa số trang web. <!--Noi dung--> <span class="author">Blogger : <a href="https://www.digitalnomad.vn/2021/03/mmo-kiem-tien-online-tu-website-khong-kho-nhung-phai-biet-cachVoi297.html"> <b>Cách Kiếm Tiền Online</b></a></span> </div> Blogger : Cách Kiếm Tiền Online
    Code Tạo blockquote - Chú Thích nổi bật Số 4

    <style> #code2 { background:#fff; margin: 0px 50px 0px 50px; padding: 30px 30px 30px 50px; border-left:5px dashed #ddd; font-size: 20px; } #code2 :first-letter { float: left; margin: 5px 3px 1px 0; font-family: Georgia; font-size: 60px; font-weight: bold; } </style> <div id="code2"> <!--Noi dung--> Khung chú thích đường viền đứt nét <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 5

    <style> #code3 { overflow:auto;width:250px;height:260px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#ffffff; margin : 15px 35px 15px 15px; padding : 5px 8px 15px 165px; clear : both; list-style-type : none; word-wrap:break-word; background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6U9d6N1LHX9kc_ohLrTmRvAW9uipWdgreixwAwsfH1Y0brMuQBqAVHu-9Ek1df7PtTrSYDMSPqpdWIKPH4Ljk8Pv_kqXLmhZH2x2DtU6FOZfCefquYdJ_RBxmi_fDnjT17yqCT9DQSxM/s1600/teacher.png'); background-repeat: no-repeat; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out; } #code3:hover{ background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLh3ydL7v1DgK2f2IBjy4RU_IsM-l9CqftOPv2EQFapYYWSpZNGoMw3PaXjT8jXcCzBXEx_OXBt4h-Kd6zItnOCxAaytz5FSLE7vlBcMc4R7UeVqGlFjcCyNFewHItxtmyma_iDHZwc6de/s1600/hover+html+teacher.png'); background-repeat: no-repeat; color:#F1F1F1; } </style> <div id="code3"> <!--Noi dung--> Chú thích blockquote giáo viên chớp mắt <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 6

    <style> #code4 { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #FC8E42; border-radius: 240px 240px 240px 240px; color: #333333; margin: 1em 140px 80px; padding: 70px 70px; position: relative; text-align: center; font: 1.5em/1.4 Cambria,Georgia,sans-serif; font-weight: bold; } #code4:before { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #FFBD54; border-radius: 50px 50px 50px 50px; bottom: -40px; content: ""; display: block; height: 50px; position: absolute; right: 100px; width: 50px; z-index: 10; } #code4:after { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #5A8F00; border-radius: 25px 25px 25px 25px; bottom: -60px; content: ""; display: block; height: 25px; position: absolute; right: 50px; width: 25px; z-index: 10; } </style> <div id="code4"> <!--Noi dung--> Chú thích độc đáo <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 7

    <style> #code5{ display:block; background: #fff; margin: 0px 50px 0px 50px; padding: 30px 30px 30px 50px; position: relative; font-family: Georgia, serif; font-size: 20px; line-height: 1.2; color: #666; text-align: justify; border-left: 15px solid #c76c0c; border-right: 5px solid #c76c0c; -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } #code5::before{ content: "\201C"; /*Unicode for Left Double Quote*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top:5px; } #code5::after{ content: ""; } #code5 a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } #code5 a:hover{ color: #666; } #code5 em{ font-style: italic; } </style> <div id="code5"> <!--Noi dung--> Khung chú thích đường viền to - nhỏ bất đối xứng 2 bên <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 8

    <style> #code6 { background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 10px 10px 10px 10px; color: #FFFFFF; margin: 30px 15px 5px; padding: 15px 30px; position: relative; font: 1.6em/1.4 Cambria,Georgia,sans-serif; font-weight: bold; } #code6:after { border-color: rgba(0, 0, 0, 0) #B5D928; border-style: solid; border-width: 50px 0px 0px 20px; top: -30px; content: ""; display: block; left: 50px; position: absolute; width: 0; } </style> <div id="code6"> <!--Noi dung--> Chú thích độc đáo mẫu số 2 <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 9

    <style> #code7 { background-color: #f8f8f8; overflow: auto; width: 450px; padding: 0px 25px 25px 25px; color: black; border: 2px solid #ca2129; border-top-right-radius: 100px; -moz-border-radius-topright: 100px; -webkit-border-top-right-radius: 100px; border-bottom-left-radius: 100px; -moz-border-radius-bottomleft: 100px; -webkit-border-bottom-left-radius: 100px; box-shadow: 1px 1px 4px #ca2129; -moz-box-box-shadow: 1px 1px 4px green -web-kit-box-shadow:1px 1px 4px green; -goog-ms-box-shadow: 1px 1px 4px green; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-size: 20px; } </style> <div id="code7"> <!--Noi dung--> Code chút thích kiểu dễ thương <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 10

    <style> #code8 { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #a5a4a4; font-style: italic; margin: 30px; padding: 30px; text-align: center; } </style> <div id="code8"> <!--Noi dung--> Chú thích đơn giản gạch ngang - trên dưới <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 11

    <style> #code9 { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXB5I0qgy-3_NVWcmJJVR9B5ccA1Qcd_YaPV548nAHyS88bqaBbyxZ9V8YAdxViDf_KAPdU6L796MstOiovP_gDBu_RMfuVq0p7yPclSXv-PwSol9oOkdVSTYCrrZ7tIjGTbM8DqNjm4/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } #code9 p { margin: 0; padding-top:10px; } </style> <div id="code9"> <!--Noi dung--> Code chú thích hình trên dưới <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 12

    <style> #code10 { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffhCd_Q8GduJgdo9_cLE3HYo6b2dEwjLUD1-1qUCpd0D6SNM3ReSykaxsBJEILb2OqGLPprDUNS9RlggfV66vLDOggtxsYgfbsC-1MGPCgjiMMxGEJo4H5nwCHtZG4XkDPAbpFzRFSac/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } #code10 b { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiva3Mzmm5i7mQRJFM6_sdSXkgbqhFqkN1ag0yX9O03bF-YDcvoNGoGqxibFv45muEOo3rAbcfSk15d-NqzoRPy-yIlvRHcJsFoJKcmn8D2m1GgGiQoiLUpDLa7kY6IZYlGiDuhq4-pVw/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } #code10 p { margin: 0; padding-top:10px; } </style> <div id="code10"> <!--Noi dung--> <b>Code blockquote 2 bàn tay ngộ nghĩnh</b> <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 13

    <style> #code11 { margin : 0 250px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTk_hwvByRxYrkvcPMI8Uf4wzsTznb_p_AnPLsrCsd3PnMo-x-S2Cz4pp4XMf2ThRKjzxNCMt31Vmj0CqKBLy-awhat3CCn-XpEuPxw8YQlM5NnVXBhXH92l5h_B-463Ru18THIlWjnA/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } #code11 p { margin: 0; padding-top:10px; } </style> <div id="code11"> <!--Noi dung--> Chú thích đóng khung kiểu mới <!--Noi dung--> </div>
    Code Tạo blockquote - Chú Thích nổi bật Số 14
    Nguồn : https://khanh98.blogspot.com/2014/09/13-kieu-blockquote-ep-cho-blogger.html 
    Xem Link bài viết mẫu : https://www.digitalnomad.vn/2021/06/danh-sach-theme-wordpress-mien-phi-dep-lung-linhGi875.html

    Hình ảnh minh họa Blockquote - chú Khỉ
     
    Code chú thích - chú khỉ tinh nghịch :
    <style>  
    .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>

    Code Tạo tiêu đề - nội dung nổi bật

    Code 1 :
    <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

    Tiêu đề nội dung cần làm nổi bật
    Nền background kết hợp chữ màu trắng :

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

     Hình ảnh minh họa Code Nền BackGround - font chữ màu trắng

    Code cơ bản Font / Image / Text-align / Tạo link neo / Responsive

    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>

    Responsive Iframe  :

    <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>
     
     Minh họa Mẫu hiển thị code Font Chữ 



    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&aacute;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&aacute;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 :

    1. Class & Id  Css cơ bản
    2. Thư viện code Html, css Product Card ( thẻ miêu tả sản phẩm )
    3. Ký tự đặc biệt chèn vào Blogspot
    4. ...Next
    KeyWord : html code editor | generator html css