Tạo thanh bạn bè giống Facebook 99% cho Blogspot
/ lúc / 38 bình luận
Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với Star Dũng Blog.
Bài này mình lại viết về thủ thuật blog, bí quá không có gì để đăng thì chỉ đang thủ thuật blog thôi. Mình sẽ đăng các thủ thuật khác nữa trong Tương lai gần nhé. Nếu muốn góp ý tưởng thì Inbox mình nhé (Facebook). Bắt đầu nhé.

Ảnh minh họa

Các bước thực hiện

Bước 1: Truy cập chỉnh sửa HTML.
Bước 2: Chèn CSS này trước ]]></b:skin>
/* Thanh bạn bè giống fb */
#HTML6{display:none}
label .hamburger{position:absolute;top:125px;left:0;width:30px;height:2px;background:white;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}
label .hamburger:after,label .hamburger:before{-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;content:&quot;&quot;;position:absolute;display:block;width:100%;height:100%;background:#fff}
label .hamburger:before{top:-8px}
label .hamburger:after{bottom:-8px}
label input{display:none}
label input:checked + .menu{}
label input:checked + .menu .hamburger{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
label input:checked + .menu .hamburger:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}
label input:checked + .menu .hamburger:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}
label .menu{position:fixed;right:0;bottom:0;z-index:100;border-radius:0;transition:.5s ease-in-out;box-shadow:none;cursor:pointer;background:#fff;padding:5px 10px;width:200px;font:500 14px Roboto;color:#666}
label ul:hover::-webkit-scrollbar-thumb{background:#ccc}
label ul::-webkit-scrollbar{width:6px}
label ul{z-index:999;background:#fff;max-width:100%;width:222px;height:100vh;position:fixed;overflow:auto;top:0;right:-250px;opacity:0;visibility:hidden;-webkit-transition:.5s;margin:0;padding:0;box-shadow:5px 10px 15px 5px rgba(0,0,0,.05);border-left:1px solid #eee}
label .menu i{font-size:8px;color:rgb(66,183,42);position:absolute;top:50%;transform:translate(0,-50%)}
label ul li img{top:50%;margin:0;width:28px;height:28px;border-radius:100%;position:absolute;left:5%;transform:translate(0,-50%)}
label .menu span{margin:0 0 0 15px}
label ul li span{position:absolute;top:50%;transform:translate(0,-50%);left:50px;font-size:15px}
label ul li{list-style:none;display:block;position:relative}
label ul li i{float:right;font-size:6px!important;color:rgb(66,183,42);top:50%;position:absolute;transform:translate(0,-50%);right:6%}
label a{padding:0 15px;margin:0 0 8px;display:block;height:40px;color:#666;font:400 15px Roboto;text-transform:capitalize;text-decoration:none;text-align:left;transition:1s ease-out}
label a:hover,label a:focus{background:#eee;color:#666;text-decoration:none}
label input:checked + .menu + ul{opacity:1;visibility:visible;right:0}
Bước 3: Chèn HTML vào trước thẻ kết </body>
<label>
<input type='checkbox'><span class='menu'><i aria-hidden='true' class='fa fa-circle'/><span>Bạn bè (6)</span></span></input><ul>
  <li><a class='lkbb' href='http://www.stardungblog.xyz/p/lien-ket.html' target='blank' title='Đặt Liên Kết'><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Đặt Liên Kết</span></a></li>
<li><a class='lkbb' href='http://www.stardungblog.xyz/' target='blank' title=''><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Star Dũng Blog</span></a></li>
<li><a class='lkbb' href='http://www.stardungblog.xyz/' target='blank'><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Star Dũng Blog</span></a></li>
<li><a class='lkbb' href='http://www.stardungblog.xyz/' target='blank' title=''><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Star Dũng Blog</span></a></li>
<li><a class='lkbb' href='http://www.stardungblog.xyz/' target='blank' title=''><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Ngô Anh Dũng</span></a></li>
<li><a class='lkbb' href='http://www.blogger.com/' target='blank' title=''><img src='https://i.imgur.com/Xqo330X.jpg'/><i aria-hidden='true' class='fa fa-circle'/><span>Blogger</span></a></li>
</ul>
</label>
Sửa một số link theo ý mình.
Bước 4: Lưu mẫu... thưởng thức kết quả.

Lời kết

OK vậy làm xong rồi đấy.
Cảm ơn các bạn đã xem. Chúc các bạn thành công.
Code by: Bác Sĩ Windows

HIỆN ĐANG CÓ 38 BÌNH LUẬN

avatar
Huỳnh Hoài Bảo

Hay lắm :)

TRẢ LỜI

Cảm ơn bác :)

TRẢ LỜI
avatar
Star Nguyễn IT

Hay lắm :V

TRẢ LỜI

Cái này chắc rip temp fb BSW hả Dũng?

TRẢ LỜI

Không bác :v cái này view-source:Bác sĩ windows nhé :)

TRẢ LỜI

Cảm ơn bác nhiều :)

TRẢ LỜI

hay :v
đang cần :D

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

<3

TRẢ LỜI

Cảm ơn bác :)

TRẢ LỜI

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif
TEST

TRẢ LỜI

đặt lk
www.ngoctinhit.tk
đã đặt

TRẢ LỜI

Cảm ơn bác

TRẢ LỜI
avatar
OFFICIAL STAR KHÁNH

very good (y)

TRẢ LỜI

Cảm ơn bác :)

TRẢ LỜI

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

TRẢ LỜI

Đã đặt cho bác :)

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

.

TRẢ LỜI

https://media.tenor.co/images/dbfb5bb6de3bfcbc4ef327f00097480e/tenor.gif

TRẢ LỜI

Ok TTT nha bác :)

TRẢ LỜI

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

TRẢ LỜI

Ngon thì ăn thôi anh :)

TRẢ LỜI

Dạ, cảm ơn anh ạ ^>^

TRẢ LỜI

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

TRẢ LỜI
avatar
Star Cường IT ­

Vẫn chưa ra bài mới à :v

TRẢ LỜI

Dạ chưa anh mấy hôm nay em bạn với lại bí ý tưởng quá -_-

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

.

TRẢ LỜI

Chấm !!

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

sửa lại link liên kết hộ em cái man

TRẢ LỜI

Đổi rồi bạn, bạn thay thành https đi. :v

TRẢ LỜI

đã làm theo các bước s nó ko hiện ra z

TRẢ LỜI

Cảm ơn bạn :)

TRẢ LỜI

Inbox đi
Link:fb.com/SDBHD

TRẢ LỜI

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.