hi xin chào các bạn nhé , trắc hẳn nhiều anh em cũng biết là một blogs có thể liên kết với nhiều blogs khác nhau. Từ đó chúng ta có thể trao đổi các bài viết với nhau, và hợp tác với nhau, tạo độ uy tín cho nhau hơn.
 |
| Share code tạo trang liên kết bạn bè cho blogger |
 |
| share code tạo trang liên kết bạn bè cho blogger |
Hôm nay thì mình xin chia sẽ cho anh em code này, giúp chúng ta tạo một trang liên kết bạn bè với các blogs khác. Đây là bản K2 trong tương lai thì mình sẽ ra thêm nhiều bản mới và đẹp hơn cho mọi người nhé.
okiii thì bây giờ chúng ta bắt đầu làm thui nha.
Bước 1: vào trang quản trị blogger --> trang --> tạo một trang mới
Bước 2: chuyển sang chỉnh sửa HTML và dán toàn bộ code bên dưới vào bên trong.
<!--Partner Blog-->
<div class="Partner-masdhika">
<!-- add new friend bằng code bên dưới -->
<!--<div class="box-partner fifth">
<div class="box-partner-img">
<div class="post-authorsIcon">
<svg class="line" viewBox="0 0 106 106"><path d="M99.74,67.75a49,49,0,0,1-93.48,0m93.48-29.5a49,49,0,0,0-93.48,0"></path></svg>
</div>
<img alt="kimidev" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" title="aingribet" width="60" lazied="">
</div>
<div class="box-partner-text">
<h3><a href="https://www.kimidev.site" rel="noopener noreffer" target="_blank" title="aingribet">kimidev</a></h3>
<div class="description">
<a title="Deskripsi Blog"><span>title </span>Situs yang memberikan banyak informasi mengenai game,aplikasi, android , komputer, gadget dan artikel menarik.</a>
<div class="category"><a title="Kategori Blog"><b>thể loại :</b> Android, Komputer, Gadgets</a></div>
</div>
</div>
</div>-->
<div class="box-partner fifth">
<div class="box-partner-img">
<div class="post-authorsIcon">
<svg class="line" viewBox="0 0 106 106"><path d="M99.74,67.75a49,49,0,0,1-93.48,0m93.48-29.5a49,49,0,0,0-93.48,0"></path></svg>
</div>
<img alt="kimidev" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" title="aingribet" width="60" lazied="">
</div>
<div class="box-partner-text">
<h3><a href="https://www.kimidev.site" rel="noopener noreffer" target="_blank" title="aingribet">kimidev</a></h3>
<div class="description">
<a title="Deskripsi Blog"><span>title </span>Situs yang memberikan banyak informasi mengenai game,aplikasi, android , komputer, gadget dan artikel menarik.</a>
<div class="category"><a title="Kategori Blog"><b>thể loại :</b> Android, Komputer, Gadgets</a></div>
</div>
</div>
</div>
<!--NEW-->
</div>
<!--friend new You-->
<br>
<br>
<div class="box-partner contoh second">
<div class="box-partner-img">
<div class="post-authorsIcon">
<svg class="line" viewBox="0 0 106 106"><path d="M99.74,67.75a49,49,0,0,1-93.48,0m93.48-29.5a49,49,0,0,0-93.48,0"></path></svg>
</div>
<img alt="kimidev" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGl1zwYIpSqwa9Oud_rKNB4CA-dmqiLZ8NY59-7zDYXt6Zhgyd8snUd1GdZXKjyzfozXPf6-R-V1HJ7TgWf07IAsnf9tRnMDwSPC3Wr_D7Tmo7osp0B92F3Jr2Wg8eNSzmiFML6wZXJs/s0/Partner-blog-no-image.png" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGl1zwYIpSqwa9Oud_rKNB4CA-dmqiLZ8NY59-7zDYXt6Zhgyd8snUd1GdZXKjyzfozXPf6-R-V1HJ7TgWf07IAsnf9tRnMDwSPC3Wr_D7Tmo7osp0B92F3Jr2Wg8eNSzmiFML6wZXJs/s0/Partner-blog-no-image.png" title="Andhika Nanda" width="60" lazied="">
</div>
<div class="box-partner-text">
<h3><a href="#" rel="noopener noreffer" target="_blank" title="kimidev">kimidev</a></h3>
<div class="description">
<a title="Deskripsi Blog"><span>Owner Blog </span>Disini adalah <b>deskripsi blog kamu</b>, ini contoh jika kamu <b>tidak</b> menambahkan <b>foto blog.</b> Kamu bisa menambahkan <b>kategori</b> lebih dari <b>1</b> <br> Terimakasih :)</a>
<div class="category"><a title="kimidev Blog"><b>Kategori :</b> Blogger, Tutorial, Masakan, dll</a></div>
</div>
</div>
</div>
<style>
/* Partner Blog Kimidev.site */
.Partner-masdhika{display:flex;flex-direction:column}
.box-partner{font-size:13px;line-height:1.5em;padding:10px 15px;margin-top:15px;border-radius:12px;background-color:#fefefe;box-shadow:0 10px 25px -3px rgb(0 0 0 / 10%);display:flex}
.Partner-masdhika .box-partner.masdhika{order:0}.box-partner.first{order:1}.box-partner.second{order:2}.box-partner.third{order:3}.box-partner.fourth{order:4}.box-partner.fifth{order:5}
.box-partner.contoh{border:1px solid #665df5}
.box-partner-img{flex-shrink:0;position:relative;padding:4px;width:60px;height:60px;margin:auto 20px auto 0}
.box-partner-img img{border-radius:50%!important;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:4px}
.box-partner-text{flex-grow:1}
.box-partner-text h3{margin:0!important}
.box-partner-text h3 a{font-size:16px;color:#161617;display:block;margin:0 0 12px}
.box-partner-text .description a{color:#505050}
.box-partner-text .description a span{display:inline-block;color:#767676;font-size:11px}
.box-partner-text .description a span:after{content:'\00b7';margin:0 8px 0 5px}
.box-partner-text .description .category{margin-top:10px}
.box-partner-text .description .category a{font-size:12px}
.box-partner-img .post-authorsIcon{width:64px;z-index:2;position:absolute;left:-2px;bottom:-7px}
.box-partner-img .post-authorsIcon svg{width:100%;height:50%;stroke:#665df5}
/* Img and Ad */
.pS img{display:inline-block;border-radius:3px;height:auto!important}
.pS img.full{display:block!important;margin-bottom:10px;position:relative;width:100%;max-width:none}
.pS .widget,.ps .pAd >*{margin:40px 0}
/* Standar CSS [fix] */
::selection{color:#fff;background:var(--link)} *, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box} h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)} h1{font-size:1.9rem} h2{font-size:1.7rem} h4{font-size:1.4rem} h5{font-size:1.3rem} h6{font-size:1.2rem} a{color:var(--link);text-decoration:none} a:hover{opacity:.9;transition:opacity .1s} table{border-spacing:0} iframe{max-width:100%;border:0;margin-left:auto;margin-right:auto} input, button, select, textarea{font:inherit;font-size:100%;color:inherit;line-height:normal} input::placeholder{color:var(--inputC)} img{display:block;position:relative;max-width:100%;height:auto} svg{width:22px;height:22px;fill:var(--iconC)} svg.line, svg .line{fill:none!important;stroke:var(--iconC);stroke-linecap:round;stroke-linejoin:round; stroke-width:1} svg.c-1{fill:var(--iconC)} svg.c-2{fill:var(--iconCs); opacity:.4} .hidden{display:none !important} .invisible{visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .fCls{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;transition:var(--trans-1);background:transparent;opacity:0;visibility:hidden} .Free::after, .New::after{display:inline-block;content:'Free!';color:var(--link);font-size:12px;font-weight:400;margin:0 5px} .New::after{content:'New!'}em{font-style:normal}.onItm .langEn{display:none}.lang-en .langIn{display:none!important}.lang-en .langEn{display:block}svg .m-0{fill:#fefefe}svg .m-1{fill:#ebeef2}svg .m-2{fill:#dcdfe2}svg .m-3{fill:#4fbe9f}svg .m-4{fill:#075f50}
</style>
Bước 3: chỉnh sửa và thêm bạn bè để thêm một bạn bè mới thì các bạn cần thêm đoạn code bên dưới vào phía trên của thẻ <!--NEW-->
<div class="box-partner fifth">
<div class="box-partner-img">
<div class="post-authorsIcon">
<svg class="line" viewBox="0 0 106 106"><path d="M99.74,67.75a49,49,0,0,1-93.48,0m93.48-29.5a49,49,0,0,0-93.48,0"></path></svg>
</div>
<img alt="kimidev" class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiFj6Z147Ih9fDLrI76XFLAtVg5AmqqRRDgVJ-pzlpcNJzZM4JaXDp3QtO7sJL6J3UAke43fDcCQ5q0J8yU7wOcNgOeR7R-f9fw9S_8EXAtLoOh77johN17dBptvMA2D6Vnxki77sdTw/s1000/LogoPartner.png" title="aingribet" width="60" lazied="">
</div>
<div class="box-partner-text">
<h3><a href="https://www.kimidev.site" rel="noopener noreffer" target="_blank" title="aingribet">kimidev</a></h3>
<div class="description">
<a title="Deskripsi Blog"><span>title </span>Situs yang memberikan banyak informasi mengenai game,aplikasi, android , komputer, gadget dan artikel menarik.</a>
<div class="category"><a title="Kategori Blog"><b>thể loại :</b> Android, Komputer, Gadgets</a></div>
</div>
</div>
</div>
các bạn hãy nhớ là thay link hình hình ảnh và name đi nhá. okiii thì mình vừa chia sẽ cho các bạn code để chúng ta có thể tạo một trang liên kết bạn bè bản k2 chúc các bạn thành công nhe.
