WORLD Best Site for,Solve your Computer Problems, Download Free Register Software & Games. You Can Request Any Games And Software In comments. Registered Softwares latest Full Version With Serial key, patch, crack, keygen, Games Free. Registered full latest version free download with serial key, portable, games, games for computer, computer free games, computer game, computer games download, download games, online computer games, pc games, play computer games and much more.

Sunday 27 January 2013

Unique Style Social Sharing Box For Blogger



This is new version
with  updated. It have  nice  style. you  can check it
from demo Im  using  just  CSS and HTML for this
tutorial

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/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/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/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/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/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/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><a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7I337OGP_WxMDbPLMWWLvIwKZEfjHqNVwDEqDeJZ5sIL1IbwMoSoI7IomvXkXRIbUa4ATZ6oYZ-6ylnbdCDdZkXoStkRzJOXboYdsjK6qHnHYTsj1Takamy91RY6HKC9rldJCA9ReAB4/s1600/bloggertrix-facebook.png" /></a>2,563 Fans                                   
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a><br />

</li>
<li><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbS9dasUKnWFPdUk6UJrjBHxuGsAOUqJSNTA7O3qd9Xt7AlbyWzr36145b-tb9sNs_XBJiMwyseiLKnWn2gBrxWIQBRKiBXuVJlhAiEYm8rZpw-puTPYwfaSXHkhxsqXn_uSISgJVrWQ/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>
</li>
<li><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUOArp6o7yM32VGmiuOH09aPDOFhWG8_4MUM_hiBHQcexb2zkj3y5bh2vkUhMhDYj4L5yURj_VBC3oOdstZFAW9qHo_igMbap7hC2poyWdqXDUnmFXNrIQ3JRH6wuuuTy-IYLl3ie-Lk/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>
</li>
<li><a href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGkdhJ2JPvwMqy1Q0CY8p0NVrKicYsnbsFhu6_jqf4BVEdbhRa0zHQ2d30TwGf1i3fbYksuzMNGFgq0Z2u8670w9NbKflRb28WVs6ST_J-yU9XVdnjMvBrCesc0jK4WlJ36WuBbXygEYo/s1600/Google-plus-icon.png" /></a>1,151 Followers                                    
<a class="socialbox-button" href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed">Follow</a>
</li>
<li><a href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2-LyTuJ0ll0GuXF3y_i9knzt8rIJFylMASk0vC2CUYBoFBpuPg5aBFGaVYnOoRPDTzQ2CRzetJ0NFAqd0YrQ_KzfcMr4Eor3TIbZeY5wWpD-SKo7tqSg0g1NktZ63G3w3jSp9w9JQwA/s1600/Pinterest-icon.png" /></a>112 Pinterest                                   
<a class="socialbox-button" href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed">Pinterest</a>
</li>
</ul>
</div>

Replace bloggertrix with your usernames.

10. Now save your HTML/Javascript'.

    You are done...

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

If you find some links broken then tell me by commenting, I'll repair.
Please don't spam as it will be deleted.
If you like this post please share it with your friends.

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© Tech Journey
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top