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.

SEO Tips to bring posts in google search results.

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.

<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>