Charismatic Social Media Drop Down Menu Widget For Blogger

Charismatic Social Media Drop Down Menu bar Widget For Blogger. Very attractive with animation effects for blogs.

view demo



Charismatic Social Media Drop Down Menu Widget For Blogger
Charismatic Social Media Drop Down Menu Widget For Blogger

We have shared many navigation menu bar widget for blogger but this time we have developed socila media glossy navigational menu for blogger blog. It is very easy to use. Designed in html and css. Installation of this blogger widget is very easy. Copy the entire code and paste it into gadget. Almost every blogger is familiar with gadget. And you are done. You can also add this in your navigation menu. We will come up with this widget in our next post.

Social media like Facebook, Twitter and Google plus plays an very important role in bringing your post in google search results. Even hash tags that you use can bring your post in google search results. Such seo tips are very important for a blogger. I have a written a post about such sites where hash tags hat you use when submitting your new posts can bring it into search results because those sites are indexed by google very frequently because their index is rate is tooo high compared to other websites.


Here is the article that can bring magical seach traffic to your blog.


We have also shared many social media sharing widget for blogger that may be beneficial for you if you pace them at right place. But what are those places from where your posts can get maximum sharing.

Do not worry we have already done this job for you. Check it out.

Horizontal Focus Social sharing widget for blogger

Window effect social media sharing widget for blogger

Professional Google plus followers widget for blogger with Hover effect

Google plus add to circle widget for blogger below post title

Facebook like and google plus box Below post title widget for blogger

Call to action social media sharing widget for blogger


Let's come to the topiuc. How to add this glossy chartismatic social media sharing widget to blogger.

Widget Installation


  • Login to blogger .
  • Go to layout.
  • Click on add a gadget.
  • Choose HTML/JAVASCRIPT.
  • Copy the below code.
  • Save it and you are done.


Complete Code.



<style type="text/css">
.avdhoot-box {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
/* CSS3 Browser */
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%);
/* IE only */
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);
}
.avdhoot-box:before,
.avdhoot-box: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;
}
.avdhoot-box:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.avdhoot-box input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.avdhoot-box 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;
}
.avdhoot-box label:before {
content:attr(data-default);
}
.avdhoot-box 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);
}
.avdhoot-box input:hover + label {
color:white;
}
.avdhoot-box input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.avdhoot-box 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;
}
.avdhoot-box li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.avdhoot-box 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;
}
.avdhoot-box a:nth-child(even) {
border-right-width:0;
}
.avdhoot-box 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;
}
.avdhoot-box a:hover:before {
background-position:50% 100%;
}
.avdhoot-box .social-rss:before {background-image:url('img/social_rss.png');}
.avdhoot-box .social-facebook:before {background-image:url('img/social_facebook.png');}
.avdhoot-box .social-twitter:before {background-image:url('img/social_twitter.png');}
.avdhoot-box .social-google:before {background-image:url('img/social_google.png');}
.avdhoot-box a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.avdhoot-box input:checked + label {
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;
}
.avdhoot-box input:checked + label:before {
content:attr(data-focus);
}
.avdhoot-box input:checked + label: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);
}
.avdhoot-box input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>
<div class="avdhoot-box">
<input type="checkbox">
<label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
<ul>
<li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
<li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="social-google" href="#" target="_blank">Google+</a></li>
</ul>
</div>



So this is done. Did you enjoy reading this article about how to add socila media drop down menu bar widget to blogger that is charismatic. Than please share it and give your suggestions in form of comments.
Next Post Previous Post