• 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 - Người & Ta
    DOWNLOAD PSD
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • The List of Function dangerous in PHP development
    apache_child_terminate, apache_setenv, define_syslog_variables, escapeshellarg, escapeshellcmd, eval, exec, fp, fput, ftp_connect, ftp_exec,...
  • Gmail Hacking by Raj Chandel
    Click To Download
  • [SHARE] 5 TUT R.I.P MỚI 2016 - Zoy Thủ Thuật #Zoy
    1. TUT RIP DAME ACC FACEBOOK .  _________________________________________________________________________________ Fake Ip Us+ NN US vào wal...
  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog B1 : Fake IP Th ổ Nhĩ Kì B2 : Vô Link RIP:  http://ouo.io/G9AbfU - Ch ọ n 9 năm - C...
  • Bộ ảnh troll rồng Hải Phòng dịp tết cực chất
    Bộ ảnh troll rồng Hải Phòng dịp tết cực chất 👆 Nghe đến " Rồng Hải Phòng " thì chắc hẳn đã 1 lần nghe qua. Đó là 1 chú rồng mang ...

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • PSD - Người & Ta
    PSD - Người & Ta
    DOWNLOAD PSD
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • The List of Function dangerous in PHP development
    apache_child_terminate, apache_setenv, define_syslog_variables, escapeshellarg, escapeshellcmd, eval, exec, fp, fput, ftp_connect, ftp_exec,...
  • Gmail Hacking by Raj Chandel
    Gmail Hacking by Raj Chandel
    Click To Download
  • [SHARE] 5 TUT R.I.P MỚI 2016 - Zoy Thủ Thuật #Zoy
    [SHARE] 5 TUT R.I.P MỚI 2016 - Zoy Thủ Thuật #Zoy
    1. TUT RIP DAME ACC FACEBOOK .  _________________________________________________________________________________ Fake Ip Us+ NN US vào wal...
  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog B1 : Fake IP Th ổ Nhĩ Kì B2 : Vô Link RIP:  http://ouo.io/G9AbfU - Ch ọ n 9 năm - C...
  • Bộ ảnh troll rồng Hải Phòng dịp tết cực chất
    Bộ ảnh troll rồng Hải Phòng dịp tết cực chất
    Bộ ảnh troll rồng Hải Phòng dịp tết cực chất 👆 Nghe đến " Rồng Hải Phòng " thì chắc hẳn đã 1 lần nghe qua. Đó là 1 chú rồng mang ...
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