Home
Blogger

Add Dropdown Glossy Robotic Social Media Widget

Glossy Social Media Widget
Socialize

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/AVvXsEiTtxm6ZvXHuIX3JYy8Vv2MGY_2saD9KiM-1934L6UtwMnzSkl5B3ScVCpzzhpE8k5HpV7EW4KvhgXupCMwSv_n8JqIinLkVR2EnYFzqaNnw2adO5cpOQfZFI3fIPHc9uHCyPLJQO109I5q/s1600/BS+RSS+15+X+15.png');}
.BloggerSpiceGS .BSfacebook:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCpU3rSF0z28cqXEKeoqmIJ2MZ_gmDmOkoi-Ng1EzJ4LXa19aEz4XILj3_KhXKgVeVMdNcYeuYjbdtVSXdxDLLjcgsq797a7TGJgc3JkfcbPbTDB0-zTm2JpwELNYq9qwkeMGkrlCO6DJ/s1600/BS++FB+15+X+15px+.png');}
.BloggerSpiceGS .BStwitter:before  {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_wINGNCbfFYLGqvRiaXurk7OrfiMyFqOvPz8kFZn4SJ1XkwMAvw4zq_c9reoia2K2EgMBvtwNrQnpKyvbZcQxsR1srHlA8sdNXRCenrZcKQToruJ_Covz1cfBTx_lmwMafKrhwRcmQJL2/s1600/BS+Twitter+15+X+15.png');}
.BloggerSpiceGS .BSlinkedin:before   {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZDVZd-f3an9Gcni6anz0MjT6jAYkMHKUH1r43-nUQInzwAVJqFaDUGsP7YBhC9GWdGInm9q_IvALCGEgSNT5eDT9ebGluFLu4vOIwqhRXRK0UH_44HL_jJU8AbWuvehifTPbNfnQ8k2TM/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.

11 comments

  1. Ola', gostei do artigo, aguardo mais dicas como esta.
  2. Thanks a lot for sharing this with all folks you actually realize what you are speaking about!

    Bookmarked. Please also consult with my website =). We could have a
    hyperlink trade contract among us

    my blog post ... lasertest
  3. A person necessarily lend a hand to make seriously articles I might state.
    That is the very first time I frequented
    your web page and to this point? I amazed with the analysis you made to
    make this particular put up incredible. Magnificent job!
  4. Magnificent beat ! I would like to apprentice while you amend your web site, how
    could i subscribe for a blog website? The account helped me
    a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear concept
  5. Hi there, just became aware of your blog through Google, and found that it's truly informative.
    I'm going to watch out for brussels. I will appreciate if you continue this
    in future. Lots of people will be benefited from your writing.
    Cheers!
  6. I do not even know how I ended up here, but I thought this
    post was great. I do not know who you are but certainly you are going to a famous blogger if you aren't
    already ;) Cheers!
  7. Existe categorias destinado a todos os jogadores.
  8. Hi to every body, it's my first visit of this website; this weblog consists of
    amazing and really good data for readers.
  9. Fibras e tambem carboidratos: torradas com trigo inteiro, tendo como
    exemplo, por outra forma cereais, melhor se eles bom lado adicional.
    Banha com frutas, constantemente amplo. Proteina do leite ou iogurte, por outra forma queijo.
  10. Assim mesmo em razão de você agradecimento ainda ICMS.
    • :-bd
Go Up