Add Dropdown Glossy Robotic Social Media Widget

Blogger Spice already released many social media widget and trying to bring some unique one for loyal visitors. As of consequence of social media widget release I have designed another unique social media widget with dropdown option. Total interface of this widget is glossy which is very attractive. The positive site of this widget is it doesn't occupy much space. This widget is really simple and awesome and able to attract your blog visitors. I have used small robotic icon beside of social media name which made it more attractive. You would get RSS, Facebook, Twitter and Linkedin which is major social media this days. Hope you would like it. To install this social media please follow the simple steps from below.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
.BloggerSpiceGS {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* Widget by www.bloggerspice.com*/
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* www.bloggerspice.com */  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.BloggerSpiceGS:before,
.BloggerSpiceGS:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}
.BloggerSpiceGS:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}
.BloggerSpiceGS input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}
.BloggerSpiceGS label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}
.BloggerSpiceGS label:before {
  content:attr(data-default);
}
.BloggerSpiceGS label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.BloggerSpiceGS input:hover + label {
  color:white;
}
.BloggerSpiceGS input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}
.BloggerSpiceGS ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}
.BloggerSpiceGS li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}
.BloggerSpiceGS a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}
.BloggerSpiceGS a:nth-child(even) {
  border-right-width:0;
}
.BloggerSpiceGS a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}
.BloggerSpiceGS a:hover:before {
  background-position:50% 100%;
}
.BloggerSpiceGS .BSrss:before      {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_aKQS-5TWySbYyr6p5n3-2poOwQFes1wXDfuZNReZ3McCUJaLvJ3xqGIjsL9aaabsFWusYowWYkHHk-aOM_1ZGkslAkdh_Qq2KBw9F2Mo61qtcz6vqUh5HvFYV142LMKcA8BndbvnUio/s1600/BS+RSS+15+X+15.png');}
.BloggerSpiceGS .BSfacebook:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqLziCOit56xfRmanNxt4pF2m0TE3wYNQz4gelzNfyRAyXfUnTL9D3qxY5QwWCKjh8NSMuYzUfssDanXTBtu2ep5pqO1cX8ZtaBrm5vd8sZmr5HPZQbHW6caFjHRJSXvySLsA1c-OnMdH/s1600/BS++FB+15+X+15px+.png');}
.BloggerSpiceGS .BStwitter:before  {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiSU40hweRFgVb85yvrYYj38oNKxU1mM8gjy8RjrTKouV952LypKherBIQFA1KMQVihR6AL1sXwUOGY13Ij7iGmxuFiuaOvmwNNfRl2zAm0p65Ol-ddi-qaS1VP5NjowVMOSl1pLLcmlX/s1600/BS+Twitter+15+X+15.png');}
.BloggerSpiceGS .BSlinkedin:before   {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbbgI8cUybWF8_nqV4A_1NMhxx8yPAeGn4jSxvcXPSUin68jFEIXCYBS_35PyjKEvj83ee4pz7jmHm_UmDfhTYnJV-f643NJ_4joL2I2jkVeI4V8iv1deLZ7AI0BB9kKG_Xh5KNCgIoVS/s1600/BS+linkidin+15+X+15.png');}
.BloggerSpiceGS a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}
/* www.bloggerspice.com*/
.BloggerSpiceGS input:BSSocial {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}
.BloggerSpiceGS input:BSSocial:before {
  content:attr(data-focus);
}
.BloggerSpiceGS input:BSSocial:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.BloggerSpiceGS input:checked ~ ul {
  visibility:visible;
  opacity:1;
}
</style>
 <div class="BloggerSpiceGS">
    <input type="checkbox" />
    <label data-default="Unite With Our Social Profile" data-focus="Select your favorite social media service..."></label>
    <ul>
        <li><a class="BSrss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="BSfacebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="BStwitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="BSlinkedin" href="#" target="_blank">Linkedin</a></li>
    </ul>
</div>

Customization

• Replace # with your social media profile links.