Tùy biến giao diện trang chủ giống trang DigitalNomad.vn

1. Bước 1 : tìm đến widget có id='Blog1' và chỉnh sửa lại code như sau :

 <b:if cond='data:blog.url == data:blog.homepageUrl'>

Phần nội dung tùy chỉnh trang chủ web DigitalNomad.vn - Digital Nomad Lifestyle & Travel - Sống &amp; du lịch như những du mục kỹ thuật số  ( bạn có thể thêm nội dung tùy chỉnh của bạn vào khu vực này. )

<b:else/>

<div class='bwrapsite-main' id='mainbwrap' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

<b:section class='mainblogsec' id='mainblogsec' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='1'>...</b:widget>

</b:section>
</div>
</b:if>

2. Bước 2 : thêm CSS, Script mở rộng trên </head> :  

<!--Phan Css - script mo rong-->
<style> 
.ml{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%;float:left;margin-right:10px;} 
.tml{text-align:center;color:#0000cd;font-size:16px;font-weight:bold;} .ml ul li{margin-left:30px;list-style-image:url(../hoanghung/5/images/Banner/icondep/checkmauxanh.png);} 
.lk{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%;float:right;margin-left:30px;} 
.tlk{text-align:center;color:#0000cd;font-size:16px;font-weight:bold;} 
.lk ul li{margin-right:2px;list-style-image:url(../hoanghung/5/images/Banner/icondep/checkmauxanh.png);margin-left:27px;} 
.ok ol li{margin-left:30px;list-style-image:url(../hoanghung/5/images/Banner/icondep/icon.png);} .ok ul li{margin-left:45px;list-style-image:url(../hoanghung/5/images/Banner/icondep/ok.png);} .ct{background:#F8F5E5 url(../hoanghung/5/images/Banner/icondep/info.png) no-repeat 15px 5px;font-style:italic;border:1px dashed#aaa;padding:10px 30px 10px 100px;;width:auto;display:table;font-size:95%;min-height:80px;} .like ul li{margin-left:45px;list-style-image:url(../hoanghung/5/images/Banner/icondep/like.png);} 
.body-detail-news h4, .body-detail-news h3,.body-detail-news h2,.body-detail-news h5,.body-detail-news h6{font-size:16px;color:#ff6702;font-weight:600;border-bottom:1px dashed #508706;} .body-detail-news iframe{width:auto !important;max-width:100%;} 
</style>
<style>
.box-title-new {position:relative;margin:20px 0;text-align:center;}
.box-title-new
.box-title-name-new {font-size:18px;font-weight:900;text-transform:uppercase;color:#fff;background:#00AA46;display:inline-block;vertical-align:top;position:relative;z-index:1;padding:10px 20px;marrgin-bottom:20px;border-radius:15px;}
.box-title-new
.box-title-name-new:before {content:"";position:absolute;border-top:10px solid #00aa46;border-left:15px solid transparent;border-bottom:7px solid transparent;border-right:15px solid transparent;left:calc(50% - 40px);bottom:-25px;width:50px;}
.box-title-new
.box-title-name-new:after {content:"";position:absolute;z-index:2;bottom:-18px;height:9px;width:200px;left:calc(50% - 100px);border-top: 2px solid #00aa46;}
</style>
<!--Hết Phan Css - script mo rong-->

3. Bước 3 : Chèn mẫu tiêu đề mẫu số 1 :

Code :

<div class="box-title-new">
<div class="box-title-name-new"><span class="null">
  Du lịch, Kiếm tiền - Cuộc Sống của dân Du Mục Kỹ Thuật Số 

  </span>
</div>
</div>

Kết quả hiển thị :

  Du lịch, Kiếm tiền - Cuộc Sống của dân Du Mục Kỹ Thuật Số 

  

4. Bước 4 : Chèn mẫu cẫu trúc viết bài trang trí theo thiết kế có sẵn :

Code :

<div class="body-detail-news">
<h2 style="text-align: center;">
<font size="4"> 
Du mục kỹ thuật số nội địa 
    </font>
</h2>
<div class="ml">
<!--1-->  
<div class="tml">
<div class="tml">
<a name="mucluc"></a>Mục Lục :
</div>
</div>
<!--end 1-->
<!--2-->    
<div>
  
<div style="text-align: justify;padding:10px">
<font size="3">
<ul>
<li><a href="#link1">Link 1 </a></li>
<li><a href="#link2">Link 2 </a></li>
<li><a href="#link3">Link 3 </a></li>
</ul>
</font>
</div>

</div>
<!--End 2-->  
</div>
<div style="text-align: justify;padding:10px">
<font size="3" color="black">  
Cuộc cách mạng công nghệ 4.0, thời đại của công nghệ số,  internet phát triển &amp; bùng nổ, góp phần hình thành đội ngũ những người biết ứng dụng công nghệ thành công cụ giúp họ có thể làm việc ở bất cứ đâu, khoảng cách địa lý, biên giới không còn là rào cản. Thuật ngữ Du mục kỹ thuật số "Digital nomad" dùng để chỉ những người thích làm việc tự do nhờ biết sử dụng thành thạo các công cụ số, điều hành công việc từ xa nhờ kết nối internet. 
</font>
</div>

Kết quả hiển thị :

 
Du mục kỹ thuật số nội địa 
    




  


Mục Lục :




    




Link 1 
Link 2 
Link 3 




  


    


  
Cuộc cách mạng công nghệ 4.0, thời đại của công nghệ số,  internet phát triển & bùng nổ, góp phần hình thành đội ngũ những người biết ứng dụng công nghệ thành công cụ giúp họ có thể làm việc ở bất cứ đâu, khoảng cách địa lý, biên giới không còn là rào cản. Thuật ngữ Du mục kỹ thuật số "Digital nomad" dùng để chỉ những người thích làm việc tự do nhờ biết sử dụng thành thạo các công cụ số, điều hành công việc từ xa nhờ kết nối internet.