Step#1
- Open Blogger Dashboard → Layout → Add Gadget → Html/Javascript Editor
- Now copy paste the below code to Html editor and save the gadget.
<style>
.social { width: 100%; margin:0;float:none }
.social ul { border: 1px solid #CCCCCC; margin: 0 0 0 0; padding: 0; display:table }
.social ul li { list-style:none; padding: 0 0 0 0 !important;margin:0 0 0 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; width:100% }
.social ul li:first-child { border-top: 0 none; }
.social ul li:last-child { border-bottom: 0 none; }
.social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.social ul li a:hover { background-color: #fafafa !important; }
.social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwYWBCPVSy_unbggQIvm_8x_dMphJSPFLpu0a3NAYMJdapB01Ezf3eIQnlGh3gOvHvPd7PhNww5BRQFiYgG4muO1LBcte-DnEx81zX70kFXwZjhOmGoj3YCmpHgPXxgMEHngdYPNd9g/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQDZiwUJ81wnlSlRa6izaqsrGzOMrpKAVD9OY0uIQRNYJA8dNlFT3_qPAWlNMI0Q8GM0Y-FdN8d4sbby0U7NFntcqAuM2DE6uEE0Y2ps7CddoapOsfjjjRqsrEMNWQty6SW6jloki4Q/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgquPe8Jl3KMrCZxFOIaOrgQH3_isj1fnAl2VLEckOBCTKJM0uxYym9dq-L8pXQhLiNRgxutw76w-zHyPG_IpgkrisaRSrVzF8KO7nQT0No1p3QtlfOMkDkmrOFdJnLjl5jRr5xII4dEQ/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePEnm1AFUYkID9T-rlresntfL7ZHTKlkfPnfSjHXn4i39eIKGzL4liqy6jm0MhTUOoDS865Nh1xr83BrmE7ezZSy6gJJINVnD1mlsZokdMOGQQ5q2sPSP9sc2uMOtbTJs4MzvMExPKQ/s1600/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.social ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdWtaefuzJ3QKl_4U5M5lVYeBXSq5-PBPR2ATD3blSgUVPIMjgUB-57EHWDSnkCWH59Z9V1MEEYBeiIP9V3i-BbrTqa9GtXCTm9c7RfXgJ2_m1_Pk_QkCpGD6ru1TxUZJEuXQh88p3w/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjEaru_mNa0SMu8sIIRkMmIfguLbMypkfXUpWu-P2mSkFS7nE3ylU-H7-ZYo2NU6ZMHMQ869IdA1JqhEz1CuIHcvkkQQTpKRe4JHWIp8HUIi-JrzEAbgw2nTzkOR3DmHtGfDdfyl71A/s1600/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }
</style>
<div class="social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/trackmyblog">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/trackmyblog">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/trackmyblog">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/100090854666031755159" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/trackmyblog">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/trackmyblog">Watch me on YouTube</a></li>
</ul>
</div>
Step#2
- There are little modifications are to be done before adding this widget to your blog.
- Replace trackmyblog with your site's / blog's username.
- After you have replaced the username with yours save the widget now it's all yours
0 التعليقات: