ᑕᔕᔕ ᑕᖺᗢ ☂ᖺẻ ᗪᓮⅤ 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


Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn
Gia Bảo