Monday, November 26, 2012

Unique Style Social Sharing Box For Blogger

In this post you can learn, how to add unique social box for your blog.Actually this social box have ncie style. you can check it from demo Im using just CSS and HTML for this tutorial
you can  get  my  earlier Social media post collection  by clicking here

Demo


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

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}
    
div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}
    
div#socialbox ul li:last-child{
border-bottom: none;}
        
div#socialbox ul li p{
padding: 19px 9px 0 9px;}
        
div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}
            
div#socialbox ul li p span{
color: #425763;
font-weight: bold;}
                
div#socialbox ul li p a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}
                
div#socialbox ul li p a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
                
div#socialbox ul li p a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<br />
<div id="socialbox">
<ul>
<li><p>
<a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwIkw1rWa90gJlPmvpQ9fGTxr8tAf9ISL3YTFWIWA8tl5eYc2xuNHitPOrGYd9WD9UNdtW6xzhtQKaZwK0ClI9SzrJGXM0uQBHwh3o6F5CB1c0wzUw_jraXjJ_Svi3wtdFxJpZL5JXBc/s1600/bloggertrix-facebook.png" /></a>2,482 Fans                                    
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a></p>
<br /></li>

<li><p><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBX2bO7cJ9q-jPathSHLSIt4yRuWqe4b_7tGmM1A4UEZOwPKW0CVfXA2nhMi9C1yER7flni5q5Lu3a5euRk2hG-QuCbbO4Ou_h8BW0Sf4o8l4sWUbOLZ7t_woq1EtL3Htboh7Mo5R6Dp0/s1600/bloggertrix-twitter.png" /></a>5,365 Followers                                    
<a class="socialbox-button" href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter">Follow</a>
<br /></p></li>

<li><p><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BsHpYhTqtPBXYLZxUUTMWT_PIAdvCo9xd4c5VgpvkkM1xni4FTCRT2EZWNn2vSFtIJ8z8Wfh1G9qils3LdPpHdsNZINa-WVGcf46ZUmiqj6y1xsHo1JRPQ49OCn2WWHzTeaYxYIYMfM/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers                                    
<a class="socialbox-button" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed">Subscribe</a>
<br /></p></li>
</ul>
</div>

Replace bloggertrix with your usernames.


10. Now save your HTML/Javascript'.

    You are done...

5 comments:

  1. This Is Really Nice Thanks For Sharing :)

    ReplyDelete
  2. This is so cool. I like this. I should add this to my two blogs. And thank you for the cod and the clear description.

    ReplyDelete
  3. your article is good and thanks for sharing. i want to put this can you help for my sites http://www.consultwebsites.com/category/established-dating-sites when i made my self i can'.

    ReplyDelete