Chia sẻ code tạo trang đối tác trong Blogger

Mở đầu

Hôm nay Xuan Trung Pro chia sẻ cách tạo trang Đối Tác trong Blogger. Là một trang hữu ích để hiển thị danh sách các blog đã cộng tác với blog của các bạn.

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.

Related Posts
Rate this post

XTT

Subscribe to my Youtube channel