• 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

  • Ả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...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • Đam Mê Tốc Độ - Need For Speed Gifs
    Need for Speed là một sê-ri chơi được phát hành bởi Electronic Arts và được phát triển bởi một số studio thuộc công ty của Canada là EA Blac...
  • Tools Hacker
    Shell Cgi (cgi.x-zone) khi gỏ command nó sẽ mã hóa dòng lệnh ,có thể qua mặt vài server http://www.mediafire.com/?45fsa46y...
  • PhpFox 3.0.1 Cross Site Scripting
    Google Dork: Intext:"Powered By phpFox Version 3.0.1" Vendor Home : http://www.phpfox.com/  There are lots of parametrs Vulnerab...
  • Video hack shop cho newbie
    Download: http://www.mediafire.com/?i36rq4864dum4at
  • KShell 1.2 công cụ không thể thiếu khi local server window
    http://www.mediafire.com/?nlwqmnzhjzu Password: kikicoco
  • Bí Kíp Luyện Rồng How To Train Your Dragon Gifs
    Bí kíp luyện rồng là bộ phim hoạt hình 3D thể loại giả tưởng sản xuất và phát hành bởi DreamWorks Animation. Nội dung bộ phim dựa trên cuốn ...

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • Ả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...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • [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...
  • Đam Mê Tốc Độ - Need For Speed Gifs
    Đam Mê Tốc Độ - Need For Speed Gifs
    Need for Speed là một sê-ri chơi được phát hành bởi Electronic Arts và được phát triển bởi một số studio thuộc công ty của Canada là EA Blac...
  • Tools Hacker
    Shell Cgi (cgi.x-zone) khi gỏ command nó sẽ mã hóa dòng lệnh ,có thể qua mặt vài server http://www.mediafire.com/?45fsa46y...
  • PhpFox 3.0.1 Cross Site Scripting
    PhpFox 3.0.1 Cross Site Scripting
    Google Dork: Intext:"Powered By phpFox Version 3.0.1" Vendor Home : http://www.phpfox.com/  There are lots of parametrs Vulnerab...
  • Video hack shop cho newbie
    Download: http://www.mediafire.com/?i36rq4864dum4at
  • KShell 1.2 công cụ không thể thiếu khi local server window
    http://www.mediafire.com/?nlwqmnzhjzu Password: kikicoco
  • Bí Kíp Luyện Rồng How To Train Your Dragon Gifs
    Bí Kíp Luyện Rồng How To Train Your Dragon Gifs
    Bí kíp luyện rồng là bộ phim hoạt hình 3D thể loại giả tưởng sản xuất và phát hành bởi DreamWorks Animation. Nội dung bộ phim dựa trên cuốn ...
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