social media widget version 1

Social drift Widget widget sliding left sliding OR FOR blogspot social, social widget slide husband rely only css, social sliding husband widget NOT FOR script wearing the system, so it has a code so light. Sliding display interesting social widget Husband And look elegan.Untuk Seeing how the widget view of social sliding Husband See Figure Below please see the widget Andari social sliding husband with the title "WIDGET SLIDE SOCIAL MEDIA STYLE" hold your cursor Andari And see the results. FOR THE page layout How to install blogs please Andari SIMAK explanation below, Direct Only towards 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> last or when you use the blog template </ style> please paste the code CSSnya just above </ style> your template.

/*****************************************
Name : Widget Social Slide
By : Arieadie | Blog Design
Update : Kamis, 07 November 2013
******************************************/
#socialbdrssliding a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
overflow: hidden;
}#socialbdrssliding a:hover{
width: 100px;
overflow: hidden;
}#socialbdrssliding {
float: right;
position: relative;
height: 40px;
}#socialbdrssliding ul { margin: 0; }
#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-thumb,
#socialbdrssliding li .bdrs-title {
display: block;
position: relative;
width: 40px;
height: 40px;
}#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-title {
float: left;
width: auto;
overflow: hidden;
}#socialbdrssliding li a {
width: 40px;
line-height: 40px;
color: #E9E9E9;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 2px 2px #000;
text-decoration: none;
}#socialbdrssliding li .bdrs-thumb { float: left; }
#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }
#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3Ielx48gwv1dUJDt4rw4lXFK0_ahrcvMVm6lgc-Yf6ceT5bjMu5zi-UPbAIWlLkMg3mNCuqFMjgEInnnE2GWIVF2Aoj-AKP3oLSvl_8qzXIgkBjoyu4EIKli1JMS4kYWWVpTPBo6Kq4/s1600/FACEBOOK.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FagW6CHbBLJol9erGtJz3k5mRnEc6dCse2htX8mamBona6UcVWztjm9bm5hkrhN84rX1djH5aKX6bSWHsO0wNbVYNlTwugLCgmF3pwbrfSldGhH3fdVMVMTQDLksW8NBImxivaGYZQ8/s1600/googleplus.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IZBk2TQ-SzOD5jQNCO9ZBBwiWYOkSH9STs2xhnAK8K0xJjAOw7E1YoQiDpSdiWjQ2_tx5rP0Rof_psNaH5VLjb06_EyMLjY_83URncdG74ORb_pYTNyEM9EIjqr1srPAsPF_ZsglEsM/s1600/TWITTER.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliDsjEf4VAY0Eo5eJHXRD1dw6EoogZEZvY5ND1irp7z7_8cfcgX53zztlQoUrkCN4GRk7waCapTzYBRstglvOoSIohZ8gLJPRpkohyphenhyphenBKVcxKaxqXYzU2xFOQIgkSQMDaCWwiLLuuppjM/s1600/rssbd.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }
#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Q0rs_TZi5lu6si57z8gxwoLhMvWVTLA48egL1hVHPG5effTWZxAKAbl7-hzDYNsYPO9v63OrU55zGbAeSS2_UGcQs51crwZA9I3gMWDEy3Bp3wTElwweLsrrtCyzerJwUbNF7Goz4zs/s1600/youtube.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}
/*code CSS end */

Install Program HTML Tag

To call the slide social widget to appear on your favorite blog page please see explanation below.

     After you have installed CSSnya htmlnya time you install the code.
     To install htmlnya code you can put it anywhere. For this tutorial I put it in the widget sidebar blog page.
     Please select "Layout" on the dashboard of your blog.
     click "Add gadgets" (Add gadgets)
     Once the page appears gadget simply choose "HTML / JavaScript".
     Copy the code in the spoiler below and then paste it in your gadget.
     Html edit, save and view the results, may be useful ...

<!-- BDRS widget social slide code start -->
<div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="LINK GPlus" target="_blank" rel="nofollow" title="gplus"><div class="bdrs-thumb"></div><div class="bdrs-title">Gplus</div></a></li>
<li class="bdrs-facebook"><a href="LINK FACEBOOK" target="_blank" rel="nofollow" title="facebook"><div class="bdrs-thumb"></div><div class="bdrs-title">Facebook</div></a></li>
<li class="bdrs-twitter"><a href="LINK TWITTER" target="_blank" rel="nofollow" title="twitter"><div class="bdrs-thumb"></div><div class="bdrs-title">Twitter</div></a></li>
<li class="bdrs-rss"><a href="LINK RSS" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
<li class="bdrs-youtube"><a href="LINK YOUTUBE" target="_blank" rel="nofollow" title="youtube"><div class="bdrs-thumb"></div><div class="bdrs-title">YouTube</div></a></li></ul></div>
<!-- BDRS widget social slide code end -->

Caption Code RED color change with your social media links. Please edit return code CSSnya to adjust zoom according to your template.