Thảo Luận

×Close

Tạo widget About giống Facebook cho Blogger, Blogspot

Xin chào tất cả các bạn. Hôm nay mình sẽ chia sẻ cho các bạn widget 'Giới thiệu thông tin' giống Facebook. Mình nghĩ nó sẽ giúp cho Blog của các bạn trở nên sinh động hơn. Bắt đầu thôi!

Tạo widget About giống Facebook cho Blogger, Blogspot
Hình Minh Họa
Các bước thực hiện
Bước 1: Chèn đoạn CSS sau vào vị trí bất kì hoặc trước thẻ đóng </style>
<style>
.about-facebook>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px; font-family: Roboto}
.about-facebook h3{font-size: 16px;color:#525252;padding:10px; font-family: Roboto}
.about-facebook h3 span{width:30px;height:30px;background:#d8d8d8;line-height:31.5px;text-align:center;border-radius:50%;display:inline-block;margin-right:5px;font-size:20px}
.main-about-facebook ul{margin:0;padding:0;list-style:none; font-family: Roboto}
.main-about-facebook ul li{margin-bottom:15px}
.main-about-facebook ul li p{color:#333;font-size:14px}
.main-about-facebook ul li a{color:#365899}
.main-about-facebook ul li p .fa{width:20px;color:#868686}
.webtt{width:120px;border:1px solid #dddfe2;border-radius:4px;margin:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:8px;padding-right:8px;padding-bottom:4px;padding-top:4px}
.webtt:hover{border:1px solid #90949c}
</style>
Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị
<div class="about-facebook" style="width: 300px;">
<h3>
<i class="fa fa-globe"></i> Thông tin</h3>
<div class="main-about-facebook" style="font-family: Roboto; font-size: 14.5px;">
Một blogger thực thụ - Thích chia sẻ. Thích học hỏi, tham gia cộng đồng blogger để học hỏi nhiều hơn <i class="fa fa-smile-o"></i> <br /><br />
<ul>
<li><i class="fa fa-briefcase"></i> Đã làm việc tại <a href="https://www.blogger.com/null">Huế</a></li>
<li><i class="fa fa-home"></i> Sống tại <a href="https://www.blogger.com/null">Huế</a></li>
<li><i class="fa fa-heart"></i> Đang hẹn hò với <a href="https://www.blogger.com/null">Star Cường IT</a></li>
<li><i class="fa fa-map-marker"></i> Đến từ <a href="https://www.blogger.com/null">Nghệ An</a></li>
<li><i class="fa fa-rss"></i>Có <a href="https://www.blogger.com/null">15.976.078 </a>theo dõi</li>
<center>
<div class="webtt">
<img alt="" class="website" height="16" src="https://i.imgur.com/GbiOtSq.png" style="margin-right: 4px; margin-top: -1px; vertical-align: middle;" width="16" /><a class="web_site" href="https://facebook.com/" style="color: #90949c;">facebook.com</a></div>
</center>
</ul>
</div>
</div>
<style>
a{text-decoration:none}
</style>
Bước 3: Lưu Template

Lời kết

Vậy là xong! Mình hi vọng với các bước đơn giản này sẽ làm trang trí thêm cho Blog của bạn. Đừng ngần ngại Comments phía dưới khi có trở ngại hoặc yêu cầu bài viết mới nhé !

Chúc các bạn thành công!

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

17 nhận xét
Hiển thị
  1. Hay nhỉ, mà sẵn tiện cho em xin code phần Xem Demo với nha <3
    Mail: tinhgetter@gmail.com
    Cảm ơn anh trước !

    Trả lờiXóa
    Trả lời
    1. Cái code phần Xem Demo là có CSS nữa nhé, còn chỉ có code thì không xài được đâu.

      Xóa
    2. http://notepad.linkthuthuat.com/2017/10/button-demo-starcuongit.html
      đây bạn

      Xóa
  2. Lâu rồi mới thấy Khanh post bài.

    Trả lờiXóa
  3. e post lưu nháp lâu r ý chứ

    Trả lờiXóa
  4. kkk :)) đang hẹn hò với star cường it :v

    Trả lờiXóa
    Trả lời
    1. Em tưởng anh bị Gay =)))

      Xóa
    2. Men chính hiệu nhé -.-, đừng nói vậy mà Cường tủi thân.

      Xóa
    3. Bác Khanh hài vãi ra :)) Chơi ác sao mà để hẹn hò với Star Cường IT =))

      Xóa
    4. xã hội chấp nhận mak :v

      Xóa
  5. Khanh ơi cho em xin mail anh ib với anh tý nha :D

    Trả lờiXóa
Mới hơn Cũ hơn

Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK

Quảng cáo giúp StarCuongIT.Com duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.

Bạn vui lòng tắt Adblock hoặc cho QuangNinhBay.Com vào danh sách trắng trong công cụ chặn quảng cáo của bạn. Cảm ơn!

×