Mở đầu

Bạn có thể xem demo dưới đây để tham khảo nha

Hướng dẫn

Bước 1: Đăng nhập vào Blogger

Bước 2: Ấn vào Trang ➤ vào tạo trang mới

Bước 3: Các bạn hãy copy đoạn code dưới đây, rồi dán toàn bộ vào phần html

<ol id="stm-widget">
<li class="partner-sites-contact"><h3 class="partner-sites-name">Xuan Trung Blog</h3>
<div class="partner-sites-description">
<center>Thủ Thuật Hay - Công Nghệ Mới - Tool Ưu Việt</center>
<a class="partner-sites-links" href="https://www.xuantrungblog.xyz/" rel="dofollow">Xuan Trung Blog</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">Code Pro</h3>
<div class="partner-sites-description">
<center>Chia sẻ kiến thức - Tư duy, sáng tạo!</center>
<a class="partner-sites-links" href="https://www.code.pro.vn/" rel="dofollow">Code Pro</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">HoangLam Blog</h3>
<div class="partner-sites-description">
<center>Blog Description Here</center>
<a class="partner-sites-links" href="https://www.hoanglam.xyz/" rel="dofollow">HoangLam Blog</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">Your Site Name</h3>
<div class="partner-sites-description">
<center>Blog Description Here</center>
<a class="partner-sites-links" href="#" rel="dofollow">Your Site URL</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">Your Site Name</h3>
<div class="partner-sites-description">
<center>Blog Description Here</center>
<a class="partner-sites-links" href="#" rel="dofollow">Your Site URL</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">Your Site Name</h3>
<div class="partner-sites-description">
<center>Blog Description Here</center>
<a class="partner-sites-links" href="#" rel="dofollow">Your Site URL</a></div>
</li>
<li class="partner-sites-contact"><h3 class="partner-sites-name">Your Site Name</h3>
<div class="partner-sites-description">
<center>Blog Description Here</center>
<a class="partner-sites-links" href="#" rel="dofollow">Your Site URL</a></div>
</li>
</ol>

<style type="text/css">
/* New Premium Partner Sites Widget By Www.SmartTechMukesh.Online */
#stm-widget{margin:0;list-style:none;counter-reset:num;display:block;overflow:hidden}
#stm-widget .partner-sites-contact{background:#FFF;width:calc(100% - 35px);border:3px solid #03a9f4;border-radius:10px;margin-bottom:35px;padding:5px 10px;position:relative;float:left;list-style:none;margin:0 0 15px;counter-increment:num}
#stm-widget .partner-sites-contact:before{content:counter(num)!important;font-size:25px;line-height:26px;text-align:center;background:#03a9f4;color:white;border-radius:0 10px 0 10px;font-weight:bold;font-style:italic;display:block;position:absolute;top:-1px;width:30px;height:30px;right:-1px}
#stm-widget .partner-sites-contact:nth-child(even){background:#FFF;width:calc(100% - 35px);border:3px solid #03a9f4;border-radius:10px;margin-bottom:35px;padding:5px 10px;position:relative;float:right;list-style:none;margin:0 0 15px;counter-increment:num}
#stm-widget .partner-sites-contact:nth-child(even):before{border-radius:10px 0 10px 0;top:-1px;left:-1px}
#stm-widget .partner-sites-contact .partner-sites-name{text-align:center}
#stm-widget .partner-sites-contact .partner-sites-description{font-size:16px;margin: 0px 0px 20px 0;}
#stm-widget .partner-sites-contact .partner-sites-links{position:absolute;right:-1px;bottom:0;background:#03a9f4;color:#FFF;padding:0 10px;border-radius:5px 0 0 0;font-size:14px}
#stm-widget .partner-sites-contact:nth-child(even) .partner-sites-links{left:-1px;right:unset;border-radius:0 5px 0 0}

/* Dark Mode Css . Change This Class Name According To You Your Template. */
.darkMode #stm-widget .partner-sites-contact{background:#18191a}
</style>

Các bạn thay lại các đối tác theo ý mình muốn nha!

Lời kết

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.