How To Add a Beautiful Social Media Buttons To Your Blog or Website

In this post, i will help you to add a Beautiful Social Media Buttons To Your Blog or Website, this buttons give your blog more beautiful and attractive let me show you a preview of this buttons :



How To Add a Beautiful Social Media Buttons To Your Blog or Website ?

Step 1: Go To Blogger.com >> Layout >> Add HTML/JavaScript - or any place you want (under posts , footer ....)
and copy paste the code bellow
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}

#widgets4free {list-style-type:none;}
#widgets4free li {
display: inline-block;
padding: 0;
}

.sicon{opacity:1;transition:all .5s;}
.sicon:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
</style>
<ul id="widgets4free"><a href="https://bloggerwidgets4free.blogspot.com" style="display:none;">Widgets4free</a>
<li class="tooltip"><a href="http://www.facebook.com/yourid" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjve5wzulEGJIemrl84PCeKRpF5OxQbWWc4QYs6MbGRZ9geqw4GvfvgAbcV8yth4MVLROuI8gKl23b8fiwERWBuIQU5tSHULZ4O5imBaaGfcPOJtKwUh47VEoNSTHX-ImfzKK53OUanCaPn/s1600/Facebook.png"/></a><span class="tooltiptext">Facebook</span></li>
<li class="tooltip"><a href="http://www.twitter.com/yourtwitter" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcPLtjjYxMKhS4jLHaWX_uVooA_gMsy_X_NpORt70fMm78xlgHL1D5yJXW6c_c07Ko_gNchD79bkcJtwDFwNmRFO4Jq4ymbQjmihTjt1Fg6u49pI3KDlosSn3jPWjeMHKJmqF9QIafE3k/s1600/Twitter.png"/></a><span class="tooltiptext">Twitter</span></li>
<li class="tooltip"><a href="https://www.youtube.com/user/youruser" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-q-jij-ZlP7pf1a_xoekVKv1ZpdwyPGCqcMF3bKJySJ13JnluWJfyfrCSlY8Rcs3rZrpdRiJUjERclDvk6NyF7s0uUQHk3vkGJFgi6EEpGz-0ZUk-vLLQ_jAeYTAnGhle8ePEKj711oe/s1600/Youtube.png"/></a><span class="tooltiptext">Youtube</span></li>
<li class="tooltip"><a href="http://feeds.feedburner.com/yourrss" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpv7bJX3MAmL_nhOZBr4WU-dtFx9FkIYzH1zb5siDO_0HV0L64SjrXk4AhUaBn4eFvaEXCSA-x21-Dc4kGUU6BtmtSti9fY_5KYjEkMDwAHZDmhsD25Zluv1tVRjj3FlL5a-x2waJIfzO/s1600/RSS.png"/></a><span class="tooltiptext">RSS</span></li>
<li class="tooltip"><a href="https://plus.google.com/yourgoogle+" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTjoh27Psd1Hw8w2dTXk3PlYvA3wnOBQHv-jUiJq9C7j3sXLWVigTChWn-ZpQDXG7CRUXoH4l6b6onul9SopwLa0-8VUCQ5POUgnqDEGAE5FEEAqv5sZZScrg2K4WZKU_0fUFO78UGVx6/s1600/Google+.png"/></a><span class="tooltiptext">Google+</span></li>
</ul>

Change The Red with your Facebook Page, The Blue with Your Twitter Page, The Green with Your Youtube Page, The Orange with Your RSS Feed URL and The Yellow with Your Google+ Page.
Step 2:Click Save
That's all,i wish that you like this buttons *_*.
Tags: