Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot

Share:
Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot

Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot

Hồng Hải đã đăng Thứ Năm, 7 tháng 6, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • Đến hẹn lại lên hôm nay mình xin chia sẻ ae một widget nho nhỏ giúp làm đẹp blog của bạn.
    Cách Thực Hiện
    Rất đơn giản ta chỉ cần chèn code bên dưới vào Widget HTML/Javascript, chỉnh sửa sao cho phù hợp rồi lưu lại
    <div class="widget-title"><span class="ti-border"></span></div>
    <script type="text/javascript">
    //<![CDATA[
    function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
    //]]>
    </script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=totalComments"></script>
    <style>
    .lightsosmed-img{position:relative;max-height:202px;overflow:hidden}
    .lightsosmed-img img {max-width:100%;width:500px;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:20%;bottom:35%;left:22.5%;z-index:3}
    .aboutfloat-imgs{width:55%;position:absolute;top:40%;bottom:35%;left:22.5%;z-index:3}
    .lightsosmed-float{text-align:center;display:table;width:100%;height:35px}
    .lightsosmed-float a{  font-weight: 600;
        background: #ffffff;
        color: #424242;
        padding: 4px 8px;
        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-imgs {
        position: relative;
        max-height: 202px;
        overflow: hidden;
    }
    .lightsosmed-fed {
        text-align: center;
        display: table;
        width: 100%;
        height: 35px;
    }
    .lightsosmed-fed a {
        font-weight: 600;
        background: #ffffff;
        color: #424242;
        padding: 4px 8px;
        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-fed:hover a{background:#ffffff;color:#395796;border-color:transparent;}
    .lightsosmed-float:hover a{background:#ffffff;color:#ff5722;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;}



    .aboutfloat-imgsd{width:55%;position:absolute;top:60%;bottom:35%;left:22.5%;z-index:3}
    .lightsosmed-imgsd {
        position: relative;
        max-height: 202px;
        overflow: hidden;
    }
    .lightsosmed-feds {
        text-align: center;
        display: table;
        width: 100%;
        height: 35px;
    }
    .lightsosmed-feds a {
        font-weight: 600;
        background: #ffffff;
        color: #424242;
        padding: 4px 8px;
        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-feds:hover a{background:#ffffff;color:#52537d;border-color:transparent;}
    </style>
    <div class="sidebar_about_author">
    <div class="inner_wrapper">
    <div class="lightsosmed-img">
    <img alt="tu-hoc-seo-online" class="img-responsive" height="180" src="https://i.imgur.com/93PJaxx.png" title="Tự học seo online" width="400" />
    <div class="aboutfloat-img"><span class="lightsosmed-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=7734893201852337172" rel="nofollow" target="_blank" title="Theo dõi Blogger"><i class="fa fa-rss"></i> Theo dõi Blogger</a></span></div>
    <div class="aboutfloat-imgs"><span class="lightsosmed-fed"><a href="https://www.facebook.com/HongHai.H.T.H" rel="nofollow" target="_blank" title="Theo dõi Facebook"><i class="fab fa-facebook-f"></i> Theo dõi Facebook</a></span></div>
    <div class="aboutfloat-imgsd"><span class="lightsosmed-feds"><a href="https://www.facebook.com/HongHai.H.T.H" rel="nofollow" title="Get Design"><i class="fas fa-laptop"></i> Get Design</a></span></div>
    </div>
    </div>
    </div>
     Chúc các bạn thành công!!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    33 nhận xét:

    1. WOW, Thumbnail đẹp lắm đó Hải, Widget cũng chất nữa. 1 like <3

      Trả lờiXóa
    2. Thumbnail xấu và widget cũng vậy :/ :v

      Trả lờiXóa
    3. Bài hay, thumbnail thì khỏi nói :3 quá đầu tư.

      Trả lờiXóa
    4. Thumnbail quá chất >< khỏi phải chê điểm nào

      Trả lờiXóa
    5. fb sập mẹ rồi à m -.- "Không thể tìm thấy địa chỉ IP của máy chủ www.facebook.com"

      Trả lờiXóa
    6. cũng đẹp đó ad

      Trả lờiXóa
      Trả lời
      1. nghe nói Nam hacker cải tà quy chánh ? có thật không ạ ?

        Xóa
    7. khá đẹp nhưng cái icon trước chữ Design là máy tính thì sang mình lại thành hình vuông vô giá ạ :v

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!