Hướng dẫn Thêm Social Network Follow Cho Blogger [ Blogspot]

BloggerGuide

Monday, November 16, 2015

0 comments

Social Network Follow Cho Blogger [ Blogspot] là tiện ích khá đơn giản chỉ với CSS và không có Javscript để nó không cản trở tốc độ trang blog của bạn. Widget này rất tuyệt vời cho các độc giả để theo dõi blog của bạn. Nó có hiệu ứng hover chuột nhiều màu sắc và mở rộng các icon hấp dẫn.

1 Thêm Đoạn Code HTML này vào blog trên sidebar

<ul id="social-Network">
    <li><a href="http://www.facebook.com/#yourID" class="icon fb" target="_blank">Like us on Facebook</a><span>Like us on Facebook</span> </li>
    <li><a href="https://twitter.com/#yourID" class="icon twit" target="_blank">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
    <li><a href="https://plus.google.com/#yourID" class="icon google" target="_blank">Follow us on Google+</a><span>Follow us on Google+</span> </li>
    <li><a href="http://feeds.feedburner.com/#yourID" class="icon rss" target="_blank">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>

    <div style='clear: both;'></div>

2 Code Css làm đẹp cho nó

#social-Network {
width: 300px;
margin: 25px 0;
}

#social-Network li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
padding: 0;
margin: 10px 0;
}

#social-Network .icon {
background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb4jL1JgFs1qzVFLnTGSeFtglijcd9YCuFlLxi06CBoY0iSISdwSEM_QA_X3g6wQZr8-YZRFs7kB1vUfYP438P0g05FijQn7rchCAmtD_nOeAWYkA9DLdih5CfT84J_yicA5U4D6cb0EQ/s1600/NBL-Social_Button.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #333;
width: 48px;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 72px;
white-space: nowrap;
font-size:18px;
z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}

#social-Network span:hover {
visibility: hidden;
}

#social-Network span {
display: block;
position: absolute;
top:15px;
left: 72px;
font-size:18px;
font-family:Arial
}

#social-Network .icon {
color: #fafafa;
overflow: hidden;
}

#social-Network .fb {
background-color: rgba(45, 118, 185, .42);
background-position: 0 2px;

}

#social-Network .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -46px;
}

#social-Network .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -94px;
}

#social-Network .rss {
background-color: rgba(255, 109, 0, .42);
background-position: 0 -334px;
}

#social-Network li:hover .icon {
width: 300px;
}

#social-Network li:hover .icon {
background-color: #d91e76;
}

#social-Network li:hover .fb {
background-color: #2d76b9;
background-position: 0 -382px;
}

#social-Network li:hover .twit {
background-color: #00A1DF;
background-position: 0 -430px;
}

#social-Network li:hover .google {
background-color: #A70000;
background-position: 0 -478px;
}

#social-Network li:hover .rss {
background-color: #EC5601;
background-position: 0 -718px;
}

#social-Network .icon:active {
bottom: -2px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}

Thay #yourID thành ID hoặc username của bạn nhé. Chúc các bạn thành công!

Tag : Blog Design, Blog Tips