ᑕᔕᔕ ᑕᖺᗢ ☂ᖺẻ ᗪᓮⅤ viết blog content marketing sáng tạo bá đạo trên từng hạt gạo

Gia Bảo
Thẻ Div :
 
Thẻ : clear: both
<div style='clear: both;'/>
 
Thuộc tính nổi bật : 
style="float: left;"
style="float: right;" 
style="text-align:center;"
style="text-align: justify;padding:10px"
 
Xem thêm :
https://www.digitalnomad.vn/2021/03/the-xml-code-html-css-javascript-template-blogspotWole153.html
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#code_lam_dep_link_lien_ket
 
 
 
CSS & Html tạo Thẻ Div nhiều màu theo ý thích 
 
<!--Tạo thẻ Div nhiều màu-->
<style>
/* Css Tạo thẻ Div nhiều màu - Material Color Box SezDrive.Com */
/* Tra cứu mã màu https://ung-dung.com/bang-mau-html-css-rgb/ */
/* Mã màu IndianRed    (205 92 92)    #CD5C5C */
/* Mã màu Sôcôla    (210 105 30)    #D2691E  */
/* Mã màu Firebrick4    (139 26 26)    #8B1A1A  */
/* Mã màu Orange1    (255 165 0)    #FFA500 */
/* Mã màu DarkOrange    (255 140 0)    #FF8C00  */
/* Mã màu LightCoral    (240 128 128)    #F08080 */
/* Mã màu OrangeRed4    (139 37 0)    #8B2500 */

.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}
.colorbox.IndianRed{background:#CD5C5C}
.colorbox.Socola{background:#D2691E}
.colorbox.Firebrick4{background:#8B1A1A}
.colorbox.Orange1{background:#FFA500}
.colorbox.DarkOrange{background:#FF8C00}
.colorbox.LightCoral{background:#F08080}
.colorbox.OrangeRed4{background:#8B2500}
.colorbox.tenmau{background:mã-màu}
</style>
<div class="colorbox purple"> Màu - tím </div>
<div class="colorbox blue"> Màu Xanh Biển </div>
<div class="colorbox green"> Màu Xanh Chuối </div>
<div class="colorbox red"> Màu Đỏ </div>
<div class="colorbox orange"> Màu Da Cam </div>

<div class="colorbox IndianRed"> Màu IndianRed </div>
<div class="colorbox Socola"> Màu Socola </div>
<div class="colorbox Firebrick4"> Màu Firebrick4 </div>
<div class="colorbox Orange1"> Màu Orange1 </div>

<div class="colorbox DarkOrange"> Màu DarkOrange </div>
<div class="colorbox LightCoral"> Màu LightCoral </div>
<div class="colorbox OrangeRed4"> Màu OrangeRed4 </div>

<div class="colorbox tenmau"> Màu abc </div>
<!--End Tạo thẻ Div nhiều màu-->
Bạn có thể tự tạo thêm cho mình bộ Css thẻ Div nhiều màu sắc bằng cách tra mã màu yêu thích. Thêm  vào Css trên theo cầu trúc :
.colorbox.tenmau{background:mã-màu}
Sau đó tạo Html thẻ div hiển thị mã màu vừa thêm theo cầu trúc
<div class="colorbox tenmau"> Màu abc </div>  


CSS thẻ Div tạo bảng Danh Sách Link liên kết đẹp free-course 
 
<!--Tạo thẻ Div danh sách link liên kết đẹp free-course -->   
<style>
div.free-course>.title{background:green;text-transform:uppercase;color:#fff;margin:0;padding:8px;font-weight:700;font-size:1.2em}
div.free-course>ul{border:solid 4px green;padding:10px;margin-top:0}
div.free-course>ul li::before{content:"☞";margin:0 10px 0 0}
div.free-course>ul>li{font-size:1em;padding-top:10px;list-style:none}
div.free-course>ul>li>a{text-decoration:none;color:inherit}
</style>  
<!-- Thay "☞" bằng icon bạn muốn hiển thị  -->
<div class="free-course">
<div class="title" style="text-align:center;">Khóa học miễn phí</div>
<ul style="text-align: justify;padding:10px">
<li><a href="#" itle="Cấu trúc dữ liệu">Cấu trúc dữ liệu - Cấu trúc dữ liệu - Cấu trúc dữ liệu - Cấu trúc dữ liệu - Cấu trúc dữ liệu - Cấu trúc dữ liệu </a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#" class="series-508" title="Học C Không Khó">Học C Không Khó</a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#">Khóa học lập trình C++</a></li>
<li><a href="#">Kho bài tập C/C++</a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#" class="series-510" title="Hướng đối tượng C++">Hướng đối tượng C++</a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#" class="series-507" title="Python Không Khó">Python Không Khó</a></li>
<li><a href="#" class="series-132" title="Python Quick Tutorial">Python Quick Tutorial</a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#" class="series-358" title="Selenium không khó">Selenium không khó</a></li><li><a href="https://nguyenvanhieu.vn/series/thu-vien-flask/" class="series-131" title="Thư viện Flask">Thư viện Flask</a></li>
<li><a href="#" class="series-307" title="Thực hành SQL">Thực hành SQL</a></li>
<li><a href="#" class="series-126" title="Tự học lập trình Java">Tự học lập trình Java</a><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" class=" ls-is-cached lazyloaded"><noscript><img style="width: 20px; height: 20px;" src="https://nguyenvanhieu.vn/wp-content/uploads/2020/07/hot-icon.gif" data-eio="l"></noscript></li>
<li><a href="#" class="series-127" title="Tự học lập trình Javascript">Tự học Javascript</a></li>
</ul>
</div>  
<!--End Tạo thẻ Div danh sách link liên kết đẹp-->   
 
CSS thẻ Div tạo bảng Danh Sách Link liên kết đẹp cateNews 
 
<!--Tạo thẻ Div danh sách link liên kết đẹp cateNews-->  
<style>
 /*------------------------------ News ----------------------------------*/
 /*------------------------------ https://optech.vn/public/css/news.css ----------------------------------*/
.cateNews{
    margin: 10px 0px 10px;
}
.cateNews .title{
    background-color: #AD342A;
    border-bottom: 5px solid #9e1d13;
    line-height: 38px;
    color: #FFF;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    padding-left: 15px;
}
.cateNews .title a{
    line-height: 38px;
    color: #FFF;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}
.cateNews ul{
    list-style: none;
    background-color: #f5f5f5;
    margin: 0px;
    padding: 0px;
}
.cateNews ul li{
    padding: 7px 10px;
    border-bottom: 1px solid #ddd;
}
.cateNews ul li a{
    color: #333;
    position: relative;
    padding-left: 15px;
}
.cateNews ul li a::after{
    content: '';
    position: absolute;
    top: 5px;
    left: 0px;
    width: 10px;
    height: 10px;
    display: table;
    background-color: #AD342A;
    border-radius: 100%;
}
.cateNews ul li a:hover{
    color: #AD342A;
}
.fanpage{
    margin: 10px 0px;
}
.fanpage .title{
    background-color: #AD342A;
    border-bottom: 5px solid #9e1d13;
    line-height: 40px;
    padding: 0px 0px 0px 15px;
    color: #FFF;
}
  </style> 
 
<div class="cateNews">
<div class="title"><a href="#" title="Tin tức">Tin tức</a></div>
<div class="clear"></div>
<ul>
<li><a href="#" title="Website &amp; Google"><i class="fas fa-arrow-right"></i> Website</a></li>
<li><a href="#" title="Kiến thức SEO"><i class="fas fa-arrow-right"></i> Seo</a></li>
<li><a href="#" title="Adword"><i class="fas fa-arrow-right"></i> Adword</a></li>
<li><a href="#" title="Design"><i class="fas fa-arrow-right"></i> Design</a></li>
<li><a href="#" title="Digital Marketing"><i class="fas fa-arrow-right"></i> Digital Marketing</a></li>
<li><a href="#" title="Kiến thức Hosting - domain"><i class="fas fa-arrow-right"></i> Kiến thức Hosting - domain</a></li>
<li><a href="#" title="App mobile"><i class="fas fa-arrow-right"></i> App mobile</a></li>
</ul>
</div>
<!--End Tạo thẻ Div danh sách link liên kết đẹp cateNews-->   
 

CSS thẻ Div tạo bảng Danh Sách Link liên kết đẹp titletopvn 
 
<!--Tạo thẻ Div danh sách link liên kết đẹp titletopvn-->   
<style>
.titletopvn {text-align: left;font-family: 'Roboto', sans-serif;font-size: 15px;line-height: 1.5;margin-top: 0;border-bottom: 2px solid #02AB0B;font-weight: bold;margin-bottom: 10px;color: #F5921E;text-transform: uppercase;}
.titletopvn span {padding: 5px;background: #02AB0B;border-radius: 3px;color: #fff;min-height: 30px;}
.ok ul li {padding-left: 1px;list-style-image: url(/wp-content/uploads/2019/11/ok.png); margin: 0 0 5px 35px;}
</style> 
 
<div class="titletopvn"><img class="alignleft" src="https://suamaytinhits.com/wp-content/uploads/2019/11/mayin.png"> Máy In</div> 
<div class="ok">
<ul>
<li style="text-align: left;"><a href="https://suamaytinhits.com/may-in/">Nạp mực máy in</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/thu-thuat-may-in/">Thủ thuật máy in</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/driver-may-in/">Driver máy in</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/tin-moi/">Tin Công Nghệ Mới</a></li>
</ul>
</div>
<div class="titletopvn"><img class="alignleft" src="https://suamaytinhits.com/wp-content/uploads/2019/11/lcd.png"> Máy Tính</div>
<div class="ok">
<ul>
<li style="text-align: left;"><a href="https://suamaytinhits.com/windows/">Windows</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/phan-mem/">Phần mềm</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/thu-thuat-laptop/">Thủ thuật laptop</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/pc/">PC</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/thu-thuat-may-tinh/">Thủ thuật máy tính</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/dich-vu-sua-may-tinh-hcm/">Dịch vụ sửa máy tính hcm</a></li>
</ul>
</div>
<div class="titletopvn"><img class="alignleft" src="https://suamaytinhits.com/wp-content/uploads/2019/11/wifi.png"> Internet</div>
<div class="ok">
<ul>
<li style="text-align: left;"><a href="https://suamaytinhits.com/sua-wifi/">Wifi</a></li>
<li style="text-align: left;"><a href="https://suamaytinhits.com/thu-thuat-internet/">Thủ thuật internet</a></li>
</ul>
</div>
<!--End Tạo thẻ Div danh sách link liên kết đẹp titletopvn-->   

 
 
Background Image thẻ Div
 
<div style="background-image: url('https://1.bp.blogspot.com/-iSAYV-F8vrc/YCEEx6WRsuI/AAAAAAAACmk/6ENgeYRrcNk45XEi9_J-9ddtC4I-OmetgCLcBGAsYHQ/s728/BackGround-Ads-Blog-content-marketing.jpg');">
๑۞๑【ＴＨỚＴ　ＧỖ】๑۞๑ <br/>
ᗯᗴᕊ : 【ｇｏｇｈｅｐｔｈａｎｈ．ｃｏｍ】<br/>
【E】【m】【a】【i】【l】<br/>
〇○°.:Support@ntwood.vn:.°○〇
</div> 
 Minh họa Background thẻ Div :
๑۞๑【ＴＨỚＴ　ＧỖ】๑۞๑
ᗯᗴᕊ : 【ｇｏｇｈｅｐｔｈａｎｈ．ｃｏｍ】
【E】【m】【a】【i】【l】
〇○°.:Support@ntwood.vn:.°○〇
  
Thẻ Div canh giữa đối tượng trong bài viết blogspot :
<div style="background: white none repeat scroll 0% 0%; height: 50%; margin: auto; width: 50%;">
<center> <button class="nut-ngang-hotline">
Link Web mẫu sử dụng template Mirror Elegant : https://digitalnomadplus.blogspot.com
</button>
</center>
</div>

<div style="clear: both;"></div>
Mẫu minh họa :
 
CSS tô màu border-left thẻ div :   
<div style="border-left:10px solid #2ece81;margin-left:1em;text-align: justify;padding:10px ;line-height: 1.5;">
Chèn nội dung vào đây
</div>
 
Mẫu màu khác :
Màu #00FF00
──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▌
───▄▄██▌█ ░🅲🆂🆂 🅲🅷🅾 🆃🅷ẻ 🅳🅸🆅
___████▌█ ░🆅🅸ế🆃 🅱🅻🅾🅶 🅲🅾🅽🆃🅴🅽🆃 🅼🅰🆁🅺🅴🆃🅸🅽🅶
___██████ ░🆂á🅽🅶 🆃ạ🅾 🅱á đạ🅾 🆃🆁ê🅽 🆃ừ🅽🅶 🅷ạ🆃 🅶ạ🅾
▄▄▄▌▐██▌█ ░░░░░░ ░░░░░░░░░ ░░░░░░░▐\.
███████▌█▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▌ \.
▀❍▀▀▀▀▀▀▀❍❍▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀❍❍ ▀▀.

Tham khảo Danh sách liên kết trang website có giao diện  - code thiết kế nội dung đẹp  : 

  • https://codfe.com/danh-sach-website-mau
  • https://suamaytinhits.com
  • https://www.web3giay.com 
  • https://www.design5s.net
  • https://www.giaodienblog.com
  • https://www.giaodienblog.net
  • https://www.congnghewebblog.com/
  • https://hotrowordpress.com/tron-bo-font-awesome-pro-moi-nhat/
  • https://nguyenvanhieu.vn/danh-sach-lien-ket-don/
  • https://optech.vn/
  • https://freetuts.net/
  • https://webcoban.vn/html/tai-lieu-hoc-html
  • https://www.azatemplate.com/2017/06/thu-thuat-blogger-blogspot.html
  • https://www.giupbankinhdoanh.com/2020/09/10-template-blogspot-mien-phi-nam-2020.html


Best Seller
Catalog Gỗ Nguyên Liệu Và Mộc Thành Phẩm
Gia Bảo