Responsive Design

Flexible Coding

Cross Browser

Seo Friendly

Wednesday, April 16, 2014




Step#1

  • Open Blogger DashboardLayoutAdd 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/AVvXsEjCV3ENNIoW3rLz2rMdlTo3Xw8vtzX2aSqy3bY0bK7oNyTAudPWRgtCfySjsA2cPGh6PNkZdNnuqLXUF7bIJebkiJNw7ijkuQ2uBHB-mt5BhhWnHepvEjRz-91ErI8KVHSH2czeKx56fQ/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/AVvXsEh2Fvs6s63BWgmNRsT9FjIa3WKe0SpAzqX7dSzq08M3c2KU1sdrpqIQbt_-3zxMj0-zjNlwSMHRshompYnMkt9j_SGZ9lc39htwxWLjViwr-OvJNYItHres69yZbLmjkdBMr1QAfXA6-A/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/AVvXsEgPCK7GSKKeOt83vB5SB9RGARcqArufoQSDqifrQpe1Eh4jzKiT086Ooiy8xcTmTUXW62N8Buxtejd50auHlUTuMbUQxw4Uj-lIqxiToR-oB39JcVGAdCIulVQs8ymiFqxnG7oJyEDj7w/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/AVvXsEgkBUG0R1r5Hco-CAxs7OL_7uAWyHbTGDksStTK-KqNkNWxEax08t1_QMQFAPpYZGyfYUGqvKVrIODNAnsvduJECHQQgRmjmBn6Qocnkv93Ovs1jh8qu9bmSTa2Jzt8NeJ6FLP0zjupCQ/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/AVvXsEjeVTMGr8Ko-Yb-3T5PebG330xTqOnkIs-7vxaqYPupUPGiCQloJe3o6bTE4I3Ixk-aLBloY0WSI5Ul9OXMC-TBEQG-PPdS4h9h7gzkKfSVTDTowThVvCXfubVL-zXR4gvGLpjJjVWLZw/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/AVvXsEhQpuZR2_CYlETM15R-BbBJ-zE2qL6vqoJuYEYcM4kRbex2xg5fjng2k23aZt9SonRXP9AtW6I6oQoGhSMnki7F8lksB4V9Uqpp85HxB8FP-12aR8nTm_6BCApRyJjTONE5XdSFeODAEg/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 comments

 
 
Templatable

Aliquet Pid Massa Porttitor Dictumst Ac Aenean A Dolor