Add Beautiful Social Media Buttons To Your Blog [Pure CSS]
![Add Beautiful Social Media Buttons To Your Blog [Pure CSS]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cYQIG4ZIn-yNoH-XVPeNAtnAg49r_L-jvZbz6E6ipjbtwQpH9ShtoSpHdwQSCP-jOWyVZ2r-x6wS2YDGlk17HW7D0tajGNW52ckDKwrT7lorFMqZrIyuF6amnnq0PM4TV44D6nEAVoU/s1600/Add+Beautiful+Social+Media+Icons+with+hover+effect.png "Add Beautiful Social Media Buttons To Your Blog [Pure CSS]") |
| Add Beautiful Social Media Buttons To Your Blog [Pure CSS] |
Add Beautiful Social Media Buttons To Your Blog [Pure CSS]
Hello Bloggers, today I'm going to present beautiful and stylish social media buttons for the blog with really cool hover effects. Primarily these social media buttons are coded as follow buttons however you can redesign them for multiple purposes like share widgets, floating widgets and so on. Another plus point: You can add this beautiful widget to both platforms Blogger And WordPress.
Features of Stylish Social Media Buttons
- Aren't the buttons amazing? Don't you love the hover effect? Check more features of this widget:
- 100% Professional Look.
- 7 Social Medias Added including Instagram and dribble.
- Clean coding of the widget.
- Easy Customization.
- Coded with CSS Sprites. [ Subscribe to learn more on CSS Sprites]
- Highly optimized code.
- Can be added on sidebars as well as posts.
- Purely CSS Coded. No JavaScript !!
How To Add Social Media Buttons to Blogger [Pure CSS]?
- Login to the Blogger homepage.
- Go to Layout → Add a Gadget → HTML/JavaScript.
- Copy and paste the code provided below.
- Click on Save and refresh your page to see the effect.
Note: I've only shown how to add via layout. You can add it to respective places by playing with template codes.
How to Add Social Media Buttons to WordPress [Pure CSS]?
- Log in to the Admin Wordpress panel.
- Go to Blog Panel → Appearance → Widget → Add a text Widget.
- Copy and paste the code provided below.
- Click on Save and refresh your page to see the live effect.
<style>
.tbsocialLinks{text-align:center;margin:50px 0 0}
.tbsocialLinks a{background-image:url(https://lh3.googleusercontent.com/pQNkWcBzVLFaKTukC1kTzfmky7cml9jTETTMR6m2l2WqlZev1mRmM4-tYH6sg1Xv5Fqs_5CYa7hp1d3gjzonQGVB6nzJfCDkhjHfTzqKirxseJUuRSh-hfMsFLcdVD5CBVJ9X4vFRw=w2400);display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #199ccc}
.tbsocialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.tbsocialLinks span{display:none}.fTwitter{background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}
</style>
<div class="tbsocialLinks">
<a href="https://www.facebook.com/invictusaman" class="fFacebook transition" target="_blank"><span>Facebook</span></a>
<a href="https://www.twitter.com/softsyard" class="fTwitter transition" target="_blank"><span>Twitter</span></a>
<a href="https://www.instagram.com/amaninvictus" class="fInstagram transition" target="_blank"><span>Instagram</span></a>
<a href="https://www.pinterest.com/invictushaxor" class="fPintrest transition" target="_blank"><span>Pinterest</span></a>
<a href="http://www.linkedin.com/in/amanbhattarai" class="fLinkedIn transition" target="_blank"><span>LinkedIn</span></a>
<a href="https://www.dribbble.com/softsyard" class="fDribbble transition" target="_blank"><span>Dribbble</span></a>
<a href="https://plus.google.com/+invictushaxor" class="fGoogle transition" target="_blank"><span>G+</span></a>
</div>
Editing Section,
➤ The red highlighted section <div style='text-align: right;'> is optional. If you love my work and want to help me grow, leave it as it is. If not, you can remove it.
➤ Modify the yellow highlighted sections with your respective social links.
➤ To change the default buttons border size and colour, modify border:2px solid #199ccc
➤ You can host the image on your own server by modifying the background-image:url();
THÔNG TIN THANH TOÁN & DỊCH VỤ:
- Tên tài khoản: Nguyễn Anh Tuấn
- Số tài khoản: 0501000058467
- Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
- Hỗ trợ cài đặt: fb.com/kequaduongvodanh
- Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form
