Responsive Social Media Footer For Blogger Like A Pro

Responsive Social Media Footer For Blogger Like A Pro. BlogOkay.com I want to share about tutorial How To Make Responsive Social Media Footer For Blogger. I found many of professional website add social media footer in that website. Exactly, it will appear above copyright of your blog or you can also add in which part interesting for you. I decide to make beautiful one for blogger. I hope you interested about that Responsive Social Media Footer. Many advantages will be hiring for this one. Beside this one can make your blog more awesome you can also improve follower by promoting it in footer. First, adding CSS below above ]]></b:skin> or </style>.

.social {
  width: 200px;
  text-align:center;
  margin:20px auto;
  padding: 0.6em 0 0 0; }
.social-icon {
  background:#333;
  width: 32px;
  display:inline-block;
  margin: 4px 2px 1%;
  box-shadow:0px 0 6px rgba(0,0,0,0.3);
}
.social-icon a {
  overflow: hidden;
  display: block;
  padding: 0;
  text-indent: 1000px;
  width: 32px;
  height: 32px; }

  .youtube-icon a {
    background: url("http://djave.co.uk/media/social-icons/images/sprite-sheet.png") no-repeat 0 -48px; }

  .stumble-icon a {
    background: url("http://djave.co.uk/media/social-icons/images/sprite-sheet.png") no-repeat -33px -48px; }

  .facebook-icon a {
    background: url("http://djave.co.uk/media/social-icons/images/sprite-sheet.png") no-repeat 0 -81px; }

  .twitter-icon a {
    background: url("http://djave.co.uk/media/social-icons/images/sprite-sheet.png") no-repeat -33px -81px; }

.twitter ul {
  padding-left: 0;
  padding: 0; }
  .twitter ul li {
    font-size: 0.8em; }
/* All done : ) */
html{height:100%;}
body{
  height:100%;
  background:#1e1e1e;
  border-top:20px solid #303030;
}
p{
  font-family:Verdana;
  width:350px;
  margin:0 auto 10px auto;
  font-size:0.7em;
  color:#eaeaea;
  text-align:center;
}
a{
  color:#9999ee;
}

After adding the CSS above, you should add script below to finish this tutorial. Script (HTML) can be added at your header, sidebar and footer. It depend on you, but for this tutorial I just focus on footer part. You looking for </footer> then put the script above or below it.

<div style='text-align: center;'>
 <ul class="social" id="social-icons">
<li class="social-icon youtube-icon" data-color="#c4302b"><a href="#youtube">#</a></li>
<li class="social-icon facebook-icon" data-color="#3B5998"><a href="#facebook">#</a></li>
<li class="social-icon twitter-icon" data-color="#00acee"><a href="#twitter">#</a></li>
<li class="social-icon stumble-icon" data-color="#f74425"><a href="#stumble">#</a></li>
</ul>

<p>I'm an author of BlogOkay.Com</p>
</div>

Exactly, you can put the script above "Copyright" your blog. Now, you can see the result. Thanks for applying this tutorial. If you interested about this article please share and subscribe.

Advertisement