Add Dropdown Glossy Robotic Social Media Widget

Glossy Social Media Widget

0
data:blog.title
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.



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('http://4.bp.blogspot.com/-TawZUfUm2hE/UhMvTpKdLfI/AAAAAAAAEV0/sdI5urIP3tU/s1600/BS+RSS+15+X+15.png');}
.BloggerSpiceGS .BSfacebook:before {background-image:url('http://3.bp.blogspot.com/-OCCgl6ArCeQ/UhMvTv-P_xI/AAAAAAAAEVw/zUxhc-xWKLQ/s1600/BS++FB+15+X+15px+.png');}
.BloggerSpiceGS .BStwitter:before  {background-image:url('http://4.bp.blogspot.com/-TFr7rcqW7mE/UhMvTj2ShZI/AAAAAAAAEV4/H6w9W03xd3E/s1600/BS+Twitter+15+X+15.png');}
.BloggerSpiceGS .BSlinkedin:before   {background-image:url('http://1.bp.blogspot.com/-9GYFEDZFwKI/UhMvUdP8bfI/AAAAAAAAEWI/p9kjFMO4jTM/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.
Add Dropdown Glossy Robotic Social Media Widget
4 Stars stars - "Add Dropdown Glossy Robotic Social Media Widget " Blogger Spice already released many social media widget and trying to bring some unique one f...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *