• 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

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • 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...
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • Damane PenTester
    Hi All, Damane PenTester A Little Tool Help You To Find Admin Panel And Zip files and shells in sitewebs Just Put The Traget And Choose One ...
  • Share Bộ Ảnh Bìa Ghost Chất - By: Trần Thanh Bình
    Bộ Ảnh Bìa Ghost Chất - Coppy Nhớ Ghi Nguồn Nhé 
  • [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...
  • Share CMND Tuyệt Đẹp
    Demo :  http://link4ad.net/bY9A8ZRf Download :  http://link4ad.net/tZNQeKqC Độc quyền share tại Minh Haku IT
  • Blog Minh Haku IT Hoạt Động Trở Lại !
    Thông Tin Mới ! Blog Minh Haku IT  đã hoạt động trở lại bình thường ! Mong các bạn tham gia ủng hộ ! Share rất nhiều thủ thuật ! Tuyển cộng ...

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • 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...
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • Damane PenTester
    Hi All, Damane PenTester A Little Tool Help You To Find Admin Panel And Zip files and shells in sitewebs Just Put The Traget And Choose One ...
  • Share Bộ Ảnh Bìa Ghost Chất - By: Trần Thanh Bình
    Share Bộ Ảnh Bìa Ghost Chất - By: Trần Thanh Bình
    Bộ Ảnh Bìa Ghost Chất - Coppy Nhớ Ghi Nguồn Nhé 
  • [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...
  • Share CMND Tuyệt Đẹp
    Share CMND Tuyệt Đẹp
    Demo :  http://link4ad.net/bY9A8ZRf Download :  http://link4ad.net/tZNQeKqC Độc quyền share tại Minh Haku IT
  • Blog Minh Haku IT Hoạt Động Trở Lại !
    Blog Minh Haku IT Hoạt Động Trở Lại !
    Thông Tin Mới ! Blog Minh Haku IT  đã hoạt động trở lại bình thường ! Mong các bạn tham gia ủng hộ ! Share rất nhiều thủ thuật ! Tuyển cộng ...
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