3D Transaction Social Widget với hiệu ứng hover đẹp mắt cho Blogger

Awasome 3D Transaction Social Widget on Mosue Hover

Chào các bạn, hôm nay Iris Tips sẽ chia sẻ cho các bạn 1 social widget với hiệu ứng hover tuyệt đẹp bằng CSS3. Các bạn theo dõi bài viết dưới đây nhé.

3D Transaction Social Widget với hiệu ứng hover đẹp mắt cho Blogger/Blogspot

Bước 1: Vào Bố cục >> Thêm tiện ích HTML/Javascript và copy đoạn code bên dưới vào

 <link href='https://sites.google.com/site/iristipsblogger/file/3D-social-widget.css' rel='stylesheet' type='text/css'/>
<div class="maincont">
<div class="container">        
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1"> 
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-backfb">
<h3>Facebook</h3>
<a href="https://www.facebook.com/pages/Iris-Tips/914163981938548">Like Our Facebook Page</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info"> 
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-backgp">                           
<h3>Google+</h3>                               
<a href="https://plus.google.com/b/101485071107768481012">Add us on Google+</a>                           
</div>                               
</div>                           
</div>                       
</div>                   
</li>                   
<li>                       
<div class="ch-item ch-img-3">                           
<div class="ch-info-wrap">                               
<div class="ch-info">                                   
<div class="ch-info-front ch-img-3"></div>                                   
<div class="ch-info-backtw">                                       
<h3>Twitter</h3>
<a href="https://twitter.com/Iris_Tips">Follow on Twitter</a>
</div>                               
</div>                           
</div>                       
</div>                   
</li>               
</ul>               
</div>
</div> 

Bước 2: Chỉnh sửa link Facebook, Twitter, Google+ cho phù hợp với trang của bạn.

• DEMO

See the Pen eNjMVZ by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mjn/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm