Social Profile phong cách Ribbon UI cho Blogger

Simple and Stylish Ribbon UI Social Profile Widget For Blogger

Một Social Widget với phong cách Ribbon. Iris Tips hy vọng bạn thích nó.

Social Profile phong cách Ribbon UI cho Blogger

Bước 1: Vào Mẫu >> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và chèn vào trước nó đoạn code bên dưới.

 .mjn-social_ribbon_icons a{
    width:48px;
    height:100px;
    margin-top:10px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWGuyGdLEJB4RUMvaUTgRWaUGK4My8a36p3PZIJZYW21lH-nwUkwbtQ7uK_gyhL86AO-OrprnAdLWzinVNn-becjn0vEZz8uXvsKbdctWUo8UFecCGjFYTqpNCwnTqZOaC3Ssw_JgmjWM/h120/Twitter+R.png'); margin-bottom:10px; }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicm9M4oMCrbawnUMVEKMH6glo1hRghimlb0S41ep03MamDdRkcphppkqU13xiL9oaJPCUq9A1Uc9OgRz8_ezBFZRnIvSsItip_oqrUMY2s3_IPqP8eijbW8-55z5gfiWzMdCyn_77RdWg/h120/Facebook+R.png'); margin-bottom:10px; }
.google{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZ3FauzidaECi78oxfB2BrIWRIXD5_n2fVsqPU-CA3LpfqrAYPzizokjF3871o8Pm9JnLVvUQEo_LYXXfk9_qbtyrvMl1_c0SUVc-2GMwmAjxqCxYZv9fr_zIIJcmYIjLQtX-Vay8mKQ/h120/Google++R.png'); margin-bottom:10px; }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6MjlEJ5GsMjYjkAhCmdd00rLFJQZpwKi62BmoAhKvfZqe2-VkOj9c42lyGa4t01ygqHaMfjcpZnBkZ9hSP0iFkfjn28cJf7t_OXsVdKIF_CfetlM9ym4kLXZH_qbcR_feGYdjEFGBf8/h120/RSS+R.png'); margin-bottom:10px; }
.twitter:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box; 

}
.facebook:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box; 
}
.google:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box; 
}
.rss:hover{
border-top: 2px solid transparent;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box; 
} 

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

 <div class="mjn-social_ribbon_icons">
<a href="https://www.facebook.com/pages/Iris-Tips/914163981938548" class="facebook" title="Follow us on Facebook">Facebook</a>
<a href="https://twitter.com/Iris_Tips" class="twitter" title="Follow us on Twitter">Twitter</a> 
<a href="https://plus.google.com/u/0/b/101485071107768481012" class="google" title="Follow us on Google+">Google+</a> 
<a href="http://feeds.feedburner.com/IrisTips" class="rss" title="Subscribe Us on RSS">RSS</a>
</div> 

• DEMO

Facebook Twitter Google+ RSS

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 mjnt/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm