Saturday, March 16, 2013

Wooden Style Social Media Widget For Blogger

In  this post im gonna explain how to add Wooden style social     sharing    buttons  for  your  blog.   This is just widget. you can  add  it to your blog easily. I just using Css  with  HTML.  Check   below demo  link. You can get social media post with similar widgets.

Wooden+Style+Social+Media+Widge

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.
<style>
/* Social Icons 
----------------------------------------------- */

a.social-icons {
 margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}

a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>

<a class="social-icons" href="https://facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijqADwG1L92kImXTyebSAKwSatf8xRvkH_EW0WXdwsWaHVA8X-5IFOl0vbTPlFEvzDDpClPfMZ6idvB-Kz2_kiBNA1FHpD7f4Y8ZSKdKHPgREN9iXKpxbKtAKqM_DqvTraQerQ0E06s5A/s1600/btrix_facebook-icon.png" /></a>
<a class="social-icons" href="https://twitter.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04yTGugmPCubS3T_56AB3vgnGyZDeYBTNaUQXAIL3uLiQ6KalntMDVD_CTrYftBSBTUYt9JE58cjotUlrtlymf4MHnM1rUPCYzeElz-UZiIAZZ8NGghhe92YcvUngZj1n9HPa1IomlEs/s1600/btrix_twitter-icon.png" /></a>
<a class="social-icons" href="https://digg.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5mHj7Apu4bvUJA6EmIVfnUvtPEv-mhcF_oUs_VBglk5wfno7BdIINP4xOw6bvErnrAoZ_9cZkWj9RRv-2OGRUcSXuBaCScLi6RkdhQN2ycpuWbfSgM-P0NJtuOym8wV8UokZU9ktUcN0/s1600/btrix_digg-icon.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8Cu6qZKXNQF9gxGFjcsxbjxx348F8fpbljeoHZq-NLanT6uxDLrcaGYa_VjBKPT34b41cMgIGkVmhZEbOo-WnKXf7lSZiTJdVp-RUyFKanTCVd06CJBoEAmJ8KxvW36KguQ_xQW6sl0/s1600/btrix_rss-icon.png" /></a>
<a class="social-icons" href="http://stumbleupon.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSoLeP_Zd89fg9uZkzdEvs6IHOq8dsow9Wr9heI5LcKJ8gN3r0lAio-ksgXhmEuj572fV4NlobIdhv2IabW_PB9V3FlMZywkuW-byq7mWZbc3VtoTWBOy8la8w-br25lIGHy9YTkTrn38/s1600/btrix_stumble-icon.png" /></a>

After paste above code
*Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace UserId with Digg
*Replace bloggertrix with feedburner username
*Replace username wit Stumbleupon username

5. Now save your HTML/Javascript'.

    You are done...

1 comment: