Widget Tác Giả Blogger Với CSS3

Tài liệu
Widget Tác Giả Blogger Với CSS3
Chuyên mục
Người đăng
Đăng vào
Widget Tác giả Blogger với CSS3 - trong hướng dẫn này, tôi đã chia sẻ một tiện ích tác giả cho blogger. Vâng! Một hướng dẫn tuyệt vời cho tất cả các quản trị viên blog. Đặc biệt hướng dẫn này hữu ích cho những người chạy blog cá nhân. Một widget đẹp chỉ dành cho bạn. Phẳng, sạch sẽ và đáp ứng.

Tiện ích Tác giả Blogger với CSS3

Bạn nên thêm 4 biểu tượng xã hội với các liên kết của bạn. Biểu tượng Twitter, Facebook, Dribble và Google Plus. Tiện ích này sẽ làm việc với hiệu ứng chuyển tiếp CSS3 . Khi bạn di chuột lên tiện ích này, sau đó mở phần khác. Các biểu tượng xã hội của nó một phần. Nếu bạn muốn xem bản giới thiệu , hãy xem tiện ích con đầu tiên của chúng tôi. 

Bây giờ hãy bắt đầu. Chuyển đến Trang tổng quan của Blogger > Mẫu > Chỉnh sửa HTML > và qua bên dưới CSS trước </ style>

12345678910111213141516171819202122232425@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {font-family: &#39;entypo&#39;, sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none; transition: all .4s; }
.container { margin: 0 auto; }
.container:hover .author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; }
.author2:before { content: &quot;&quot;; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://i.imgur.com/rppvYgh.jpg") no-repeat; background-size: 80px; border-radius: 100%; }
.author2  h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
.author-body a:hover { background: #515761; }
.author-body a:last-child { border-right: none; }
.foot { /*height: 100px;*/ }
[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background: #14b9d6;    color: white!important;}
.footItem1:hover { background: #5bcee2; }
.footItem2 { background: #f27935;    color: white!important; }
.footItem2:hover { background: #f6a172; }
.footItem3 { background: #1fbba6;     color: white!important;}
.footItem3:hover { background: #63d0c1; }
.widget-content {    box-shadow: 0 0 0 1px #D3D3D3;}
.section:first-child .widget:first-child {margin-bottom:15px}

Lưu ý: Thay đổi liên kết hình ảnh được đánh dấu với liên kết hình ảnh của hồ sơ hồ sơ. Bây giờ Save Template. Sau khi lưu khuôn mẫu, hãy chuyển đến Bố cục > Thêm tiện ích > HTML / Javascript và ở bên dưới mã.

123456789101112<div class="container">
<div class="author2">
        <h1>Muhammad Subel</h1>
        The Designer
    </div>
    <div class="author-body">
      <a href="#Twitter-LINK"><span class="entypo-twitter"></span></a><a href="#Facebook-LINK"><span class="entypo-facebook"></span></a><a href="#Dribble-LINK"><span class="entypo-dribbble"></span></a><a href="#GooglePlus-LINK><span class="entypo-gplus"></span></a>
    </div>
  <div class="foot">
    <a href="#" class="footItem1"><span class="entypo-heart"></span>102</a><a href="#" class="footItem2"><span class="entypo-user"></span>4,587</a><a href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a>
  </div>
</div>



Lưu ý: Thay đổi tên và liên kết xã hội của bạn. 

Hiện có bình luận