• About
  • Policy
  • Contact

Phan Anh Buổi Sáng

  • Home
  • Kiến thức IT
    • PSD
    • Blogger
  • Translate
Google
Custom Search
Trang chủ » Thủ Thuật Blogger » Tiện ích theo dõi với hiệu ứng đẹp cho Blogspot

Tiện ích theo dõi với hiệu ứng đẹp cho Blogspot

Unknown Labels: Thủ Thuật Blogger Leave A Comment 00:44
Hôm nay mình có ghé thăm một vài trang web Blog khác để tìm những thủ thuật hay về cho Blog mình. Và vô tình thấy một tiện ích khá hay và đẹp đó là khung theo dõi, nên mình đã làm theo và hôm nay sẽ share cho các bạn.


Tiện ích theo dõi với hiệu ứng đẹp cho Blogspot - Văn Thắng Blog


Chúng ta cùng bắt đầu ngay nhé :v



Vào bố cục -> thêm tiện ích ( nơi bạn muốn hiễn thị ) và copy toàn bộ HTML dưới vào:






tu-hoc-seo-online



Theo dõi






Sau khi copy xong các bạn tiếp tục vào Mẫu -> Chỉnh sửa HTML để thêm CSS

- Ctrl + F  tìm đoạn ]]><  và thêm toàn bộ copy dưới vào trên thẻ vừa tìm:


.lightsosmed-img{position:relative;max-height:140px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:100%;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}
.lightsosmed-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:100%}
.lightsosmed-float a{background:#8bc34a;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border-radius:3px;box-shadow:3px 3px 3px rgba(0,0,0,0.05);transition:all .3s}
.lightsosmed-float:hover a{background:#7cb342;color:#fff;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}
.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.lightsosmed-info h4:before {margin-left:-50%;text-align:right;}

Sau đó các bạn lưu mẫu và thêm thành quả.
Chỉnh sửa tùy chọn:

  • Các bạn thay ID thành ID blog của bạn  "https://www.blogger.com/follow-blog.g?blogID=id blog của bạn"
  • Các bạn có thể thay đổi link ảnh nhé.
  • Chúc các bạn có một tiện ích đẹp cho trang.

Bài viết liên quan

← Bài đăng mới hơn Bài đăng cũ hơn → Trang chủ
Powered by Blogger.

Các Bình Luận Gần Đây

Bài đăng phổ biến

  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • PSD - Người & Ta
    DOWNLOAD PSD
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Bandicam Full Crack - Duy Ripper
     
  • Invision IP.Board <= 3.3.4 unserialize() PHP Code Execution
    ## # This file is part of the Metasploit Framework and may be subject to # redistribution and commercial restrictions. Please see the Metasp...
  • Bài Đăng Mới Nhất Trên Blog Minh Haku
    Link Blog : MinhhakuIT.blogspot.com
  • TUT Rename Tên Facebook Siêu Dài - Zoy Thủ Thuật
    Thực ra thì nó cũng đơn giản thôi, các bạn làm theo 2 bước như sau: Bước 1:  Fake IP Tây Ban Nha (Bước này các bạn tự tìm hiểu nhé). Bước 2:...
  • [PSD] Làm Người Yêu Anh Nhé Baby ( Edit Đặng Khắc Đức ) - Zoy Thủ Thuật #Zoy
    Ảnh bìa Làm Người Yêu Anh Nhé Baby "Người yêu ơi... yêu mình anh được không? từ giờ và sau này.  Xua lạnh hơi đêm mùa đông.  Là ngày ta...
  • Tản mạn phần 3: J2TeaM có còn tồn tại hay không?
    Nhìn lại J2TeaM sau 4 năm (2012-2016) J2TeaM được tạo ra trong một lần trò chuyện trên Yahoo với James với lý do đơn giản là vì 2 đứa có nic...
  • [PSD] File Chờ Anh Nhé - Star Dũ Blog
                                                             

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • PSD - Người & Ta
    PSD - Người & Ta
    DOWNLOAD PSD
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Bandicam Full Crack - Duy Ripper
    Bandicam Full Crack - Duy Ripper
     
  • Invision IP.Board <= 3.3.4 unserialize() PHP Code Execution
    ## # This file is part of the Metasploit Framework and may be subject to # redistribution and commercial restrictions. Please see the Metasp...
  • Bài Đăng Mới Nhất Trên Blog Minh Haku
    Bài Đăng Mới Nhất Trên Blog Minh Haku
    Link Blog : MinhhakuIT.blogspot.com
  • TUT Rename Tên Facebook Siêu Dài - Zoy Thủ Thuật
    TUT Rename Tên Facebook Siêu Dài - Zoy Thủ Thuật
    Thực ra thì nó cũng đơn giản thôi, các bạn làm theo 2 bước như sau: Bước 1:  Fake IP Tây Ban Nha (Bước này các bạn tự tìm hiểu nhé). Bước 2:...
  • [PSD] Làm Người Yêu Anh Nhé Baby ( Edit Đặng Khắc Đức ) - Zoy Thủ Thuật #Zoy
    [PSD] Làm Người Yêu Anh Nhé Baby ( Edit Đặng Khắc Đức ) - Zoy Thủ Thuật #Zoy
    Ảnh bìa Làm Người Yêu Anh Nhé Baby "Người yêu ơi... yêu mình anh được không? từ giờ và sau này.  Xua lạnh hơi đêm mùa đông.  Là ngày ta...
  • Tản mạn phần 3: J2TeaM có còn tồn tại hay không?
    Tản mạn phần 3: J2TeaM có còn tồn tại hay không?
    Nhìn lại J2TeaM sau 4 năm (2012-2016) J2TeaM được tạo ra trong một lần trò chuyện trên Yahoo với James với lý do đơn giản là vì 2 đứa có nic...
  • [PSD] File Chờ Anh Nhé - Star Dũ Blog
    [PSD] File Chờ Anh Nhé - Star Dũ Blog
                                                             
Google
Custom Search
Support: Facebook | Twitter | Google+ | Giới thiệu
Copyright © 2015 • Phan Anh Buổi Sáng • All Right Reserved. Template by Template Việt