social media widget version 3

In this post I will present a post about social media widget version 3. Hopefully with social media news widget version 3 will add to your knowledge

widget Social Media Round Style

Wsocial media widgets round style with attractive appearance, how to make social media widget style round is almost the same with social media widgets in general, it's just that the system CSSnya change the display style of social media widgets round more interesting and unique style of social widgets in general. Mania for the bloggers who want to install the widget style round this social media on his blog page please see explanation below, just to the scene.

Install Program CSS

    - Login to your dashboard
    - Go to the "Template" and click "Edit HTML"
    - Search code]]> </ b: skin>
    - Copy Code CSS script below, paste the above code]]> </ b: skin> before or when you use the blog template </ style> CSSnya please paste the code right above </ style> your template.

/*****************************************
Name : Widget social media round style
By : Arieadie | Blog Design

my blog : lagudjawaasli.blogspot.com
Update : kamis, 08 oktober 2013
******************************************/
.social-ballbdrs {
padding: 5;
margin-left:-30px;
}
.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {
float: left;
margin-right: 10px;
background-color: #CCCCCC;
display: inline;
border-radius:50%;
border:solid #999999 1px;
box-shadow:0 0 5px 2px #999 inset;
}
.social-ballbdrs li a {
-moz-transition: all 0.3s ease 0s;
display: block;
float: left;
height: 100%;
width: 40px;
height: 40px;
text-indent: -9999px;
}
.social-ballbdrs li.facebookball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3Ielx48gwv1dUJDt4rw4lXFK0_ahrcvMVm6lgc-Yf6ceT5bjMu5zi-UPbAIWlLkMg3mNCuqFMjgEInnnE2GWIVF2Aoj-AKP3oLSvl_8qzXIgkBjoyu4EIKli1JMS4kYWWVpTPBo6Kq4/s1600/FACEBOOK.png') no-repeat 0 0;
}
.social-ballbdrs li.facebookball a:hover {
background-color: #3b5998;
}
.social-ballbdrs li.googleplusball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FagW6CHbBLJol9erGtJz3k5mRnEc6dCse2htX8mamBona6UcVWztjm9bm5hkrhN84rX1djH5aKX6bSWHsO0wNbVYNlTwugLCgmF3pwbrfSldGhH3fdVMVMTQDLksW8NBImxivaGYZQ8/s1600/googleplus.png') no-repeat 0 0;
}
.social-ballbdrs li.googleplusball a:hover {
background-color: #d94a39;
}
.social-ballbdrs li.rssball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliDsjEf4VAY0Eo5eJHXRD1dw6EoogZEZvY5ND1irp7z7_8cfcgX53zztlQoUrkCN4GRk7waCapTzYBRstglvOoSIohZ8gLJPRpkohyphenhyphenBKVcxKaxqXYzU2xFOQIgkSQMDaCWwiLLuuppjM/s1600/rssbd.png') no-repeat 0 0;
}
.social-ballbdrs li.rssball a:hover {
background-color: #fe9900;
}
.social-ballbdrs li.twitterball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IZBk2TQ-SzOD5jQNCO9ZBBwiWYOkSH9STs2xhnAK8K0xJjAOw7E1YoQiDpSdiWjQ2_tx5rP0Rof_psNaH5VLjb06_EyMLjY_83URncdG74ORb_pYTNyEM9EIjqr1srPAsPF_ZsglEsM/s1600/TWITTER.png') no-repeat 0 0;
}
.social-ballbdrs li.twitterball a:hover {
background-color: #48c4d2;
}
.social-ballbdrs li.youtubeball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Q0rs_TZi5lu6si57z8gxwoLhMvWVTLA48egL1hVHPG5effTWZxAKAbl7-hzDYNsYPO9v63OrU55zGbAeSS2_UGcQs51crwZA9I3gMWDEy3Bp3wTElwweLsrrtCyzerJwUbNF7Goz4zs/s1600/youtube.png') no-repeat 0 0;
}
.social-ballbdrs li.youtubeball a:hover {
background-color: #f45750;
}
.social-ballbdrs li a:hover {
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
border-radius:50%;
}
.social-ballbdrs li a:visited,.social-ballbdrs li a:active{
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
border-radius:50%;
}/*code CSS end */

Install Program HTML tags

To call a social media widget to appear round the style of your favorite blog page, please refer to the explanation below.

     Once you've put CSSnya time you install htmlnya code.
     To install htmlnya code you can put it anywhere. For this tutorial I put it in a sidebar widget blog page.
     Please select "Layout" on the dashboard of your blog.
     Click "Add a gadget" (Add gadgets)
     After appearing gadget page please select "HTML / JavaScript".
     Copy the code in the spoiler below then paste it in your gadget.
     Edit html, save and see the results, may be useful ...

<!-- BDRS widget social media round style code start -->
<div class="social-ballbdrs">
<ul><li class="twitterball"><a target="_blank" href="LINK TWITTER ANDA" rel="nofollow" title="twitter">twitter</a></li>
<li class="googleplusball"><a target="_blank" href="LINK GPLUS ANDA" rel="nofollow" title="gplus">googleplus</a></li>
<li class="facebookball"><a target="_blank" href="LINK FACEBOOK ANDA" rel="nofollow" title="facebook">facebook</a></li>
<li class="rssball"><a target="_blank" href="LINK RSS FEED ANDA" rel="nofollow" title="rss">rss</a></li>
<li class="youtubeball"><a target="_blank" href="LINK YOUTUBE ANDA" rel="nofollow" title="youtube">youtube</a></li></ul>
</div>
<!-- BDRS widget social media round style code end -->

Caption  

Code RED color change with your social media links. Please feel free to edit CSS social media widgets round this style to match the look of your page.