Social Follow Box Slider Widget For Blogger

Follow boxes are very useful to get followers on social networks but when there is a number of social profiles like Facebook, twitter, Linkedin, Google+ then it becomes a problem to show all the follow boxes n blog because of a limited space. Another problem of adding many follow boxes is they take alot of time to load and slows down blogs, therefore bloggers use to add follow buttons in blogs as they loads faster and don't take too much space on blog. But if one wish to add all boxes on his blog without loosing his blog speed and space he would need an all in one widget which has all follow boxes and takes lesser time to load and lesser space too. For the same purpose I have created an awesome widget which contains all follow boxes(Google+, Facebook, Twitter and linkedin) and takes least time to load. It is a social profile slider. It sliders each social profile equal interval of time and takes space of only one social profile box, you can take a look in above animated image. You can adjust the time of sliding in this widget. I have added only four most popular social networks in it, since I don't use Linkedin that's why I have add its CEO's profile in it.
Hope you like it. Its very easy to install this widget in blogger but we have to use a trick to add it because if we try to add this widget manually like other gadgets, it will not work so If you want to add this widget in your blog follow below steps:

Step 1: Go to blogger dashboard.

Step 2: Select template in the menu on your left hand side and click on Edit Html.

Step 3: Search for below code in the Html code by using Ctrl+F on your keyboard:

<b:section-contents id='sidebar-right-1'> 

Step 4: Just below it paste the below code:

<b:widget id='HTML20' locked='false' title='Slide follow box' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url != &quot;http://101helper.blogspot.com/&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<script src='https://rawgit.com/101Helper/docs/master/jsinstallizer.js'/>
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;height: 330px; right: 10px;'>
        
<div class='fb-wrap social-widget cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 96; opacity: 0; display: block; visibility: hidden;'>
<div class='fb-page' data-adapt-container-width='true' data-height='330px' data-hide-cover='false' data-href='https://www.facebook.com/101helperblogspot' data-show-facepile='true' data-show-posts='true' data-small-header='false' data-width='240px'><div class='fb-xfbml-parse-ignore'/></div>
    </div>

<div class='twitter-wrap social-widget cycle-slide' data-twttr-id='twttr-sandbox-0' style='position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;'><a class='twitter-timeline' data-widget-id='560163045163282433' height='341' href='https://twitter.com/101Helperblog' width='234'/>
<a class='twitter-timeline' data-dnt='true' data-widget-id='647452823882493952' href='https://twitter.com/101Helperblog'/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
        </div>

  <div class='google-wrap social-widget cycle-slide cycle-slide-active' style='position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;'>
        <div id='___page_0' style='text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 234px; height: 338px; background: transparent;'><!-- Place this tag in your head or just before your close body tag. -->
<script src='https://apis.google.com/js/platform.js'/>

<!-- Place this tag where you want the widget to render. -->
<div class='g-page' data-href='//plus.google.com/u/0/109303537659462705427' data-rel='publisher' data-width='234'/>
</div>
        
    </div><div class='linkedin-wrap cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;'>
        
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-format='inline' data-id='/in/jeffweiner08' data-related='false' type='IN/MemberProfile'/>
  
    </div>
<a class='auth-101' href='http://101helper.blogspot.com/2015/01/social-follow-box-slider-widget-for-blogger.html' rel='nofollow'>Powered By 101Helper</a>
</div>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
      </b:if>
</b:includable>
  </b:widget>

Step 5: Now search for ]]></b:skin> and paste below code above it:

/* Slider CSS by 101Helper*/ 
#slides{
    padding: 0 0 0 152px;
    position: relative;
top: 27px;
right: 97px;
    width: 221px;
}
.cycle-slideshow{
position:relative;
top: -3px;
right: 120px;
}
#slides hr{
    border:0 solid #fff;
    border-top:1px dashed #d8d9db;
}
#slides p{
    font-family: HelveticaNeue, Arial, sans-serif;
    height: 109px;
    line-height: 17px;
    width: 221px;
}

.social{
    padding:32px 0 0 145px;
    margin-bottom: 30px;
    position: relative;
top: 27px;
right: 97px;
    overflow: hidden; }

.social li{
    float: left;
    margin-right: 10px;
    position: relative;
}

.social a{
    display: block;
    height: 48px;
    width: 46px;
}

/* active state */

.social-widget {
    border: 5px solid #A5CBE2;
    border-radius: 6px 6px 6px 6px;
position: relative;
top: 27px;
right: 97px;
}

.fb-wrap{
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.google-wrap {
    height: 338px;
    margin-left: 130px;
    width: 234px;
}
    /* fix flashing widget */
    .google-wrap iframe { visibility: hidden !important; }
    .google-wrap.cycle-slide-active iframe { visibility: visible !important; }

.twitter-wrap {
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.linkedin-wrap {
    margin-top: -5px;
    margin-left: 80px;
} 
.auth-101{
    position: relative;
    left: 180px;
    font-weight: bold;
    font-size: 13px;
}
.IN-widget {
    height: 341px;
    background-color: #fff;
}
/* Slider CSS by 101Helper*/ 

Step 6: Now search for <head> and paste below code below it:

<script src='https://rawgit.com/fahimraza/FK/master/boxslider.js' type='text/javascript'/>
<script src='https://rawgit.com/fahimraza/FK/master/boxslider2.js' type='text/javascript'/> 

Step 7: Click on save template and move to next step.

Step 8: Now go to layout and edit the newly added gadget having title Slide follow box.

Step 9: Copy the below code and paste it into it:

<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;'></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 10: Click on save and you are done.

Open your blog to see the sliding follow box.

Customization: 

First of all you have to replace your social profile ID's with mine so replace all the black text with your social profile ID's in the code used above in step 4. 

If you have any question ask me in comments.

I have designed this gadget to fix at normal gadget position but if it has irregular position on your blog you can change its position by adjusting the numbers highlighted in code used in step 5 

Further you can customize its sliding speed by changing the number(10000) used in code in step 4 and step 9 highlighted with yellow color. If you want to change the sliding speed you have to change number 10000 two times one in the code used in step 4 and one in the code used in step 9. The default number is 10000 which means 10 seconds so every follow box will appear after 10 seconds, if you wish to slide it in 5 seconds replace 10000 with 5000 similarly for 4 seconds 4000, for 8 seconds 8000 and so on, but make sure to change number in code used in both step 4 and step 9. If you further have any question ask me in comments or contact me. 

Thanks for visiting 101Helper, follow and subscribe on Homepage to get latest updates about unique blogger gadgets. Share this post with others and help 101Helper grow. Vote this post up by below star ratings.

Search tags: Social follow box slider widget for blogger, sliding follow box widget for blogger, follow box for blogger with stylish design, all in one follow box for blogger, Facebook follow box, Twitter follow box, Google+ follow box and Linkedin follow box for blogger, blogger gadgets, unique gadgets for blogger, 101Helper blogger gadgets.

How To Schedule A Post For Auto Publish In Blogger

Do you want your posts to publish on a specific time?  or you are busy, going for some work or going on a trip and can't publish posts? if yes then forget it and don't worry because blogger has a great feature that you can schedule a post for auto publish so now if you are busy your blog will publish posts automatically. Its very easy, all you have to do is to follow below simple steps, you don't need any code to make your blog auto publish. But before scheduling a post you must write it properly, your blog will only publish it, it won't write it for you.
So after writing a post follow below steps to schedule it for auto publish:

Step 1: Go to blogger and log-in to your account.

Step 2: Open your post which you want to schedule for auto publish.

Step 3: Click on schedule in the menu on left side and select set date and time.

Step 4: Set date and time at which you want to publish post as shown in below image, make sure to set time at pacific standard time.

  
Step 5: Click on done and publish your post, don't worry it will be published on date and time which you have set. It will show up in scheduled posts tab.

I hope you like this post and it was helpful to you, follow and subscribe for latest blogger tips. Share this posts with others. If you have any problem ask me in comments.

Search tags: How to schedule a post for auto publish in blogger, how to publish posts automatically in blogger, publish posts automatically in blogger, Schedule posts for auto-publish in blogger.

How To Add Links In Blog Footer In Blogger

Hi there, once again I am back with a new trick that is how to add links at the bottom of blog. You might have seen in many blogs that there are different links at the bottom like privacy policy, contact, about, terms and conditions, disclaimer, feedback etc, normally these links are in professional websites but now a days bloggers are also adding these links at the bottom of their blogs to make their blogs look like professional websites. I have also added these links in my blog but as a beginner nobody can add these links as its not so easy.
Its same like adding links to text in post, but we have to do it in template, so lets start! follow below steps to add links at the bottom of your blog:

Note: Remove attribution widget before adding links below your blog.

Step 1: Go to blogger and sign-in to your blogger account.

Step 2: Choose the blog in which you wish to add links.

Step 3: Open the blog and select template in the menu on left side.

Step 4: Click on Edit Html and search for below code by using Ctrl+F in your keyboard.

<macro:param default='false' name='includeBottom'/>

Step 5: Just below it find  </macro:include>.

Step 6: Copy below code and paste it below  </macro:include>:

<style>
.sitelinks {
text-align:center
}
</style><div class='page-footer'>
<div class='sitelinks'>
<p id='policy-pages'><a href='http://101helper.blogspot.com/p/privacy-policy.html'>Privacy Policy</a> | <a href='http://101helper.blogspot.com/p/disclaimer.html'>Disclaimer</a> | <a href='http://101helper.blogspot.com/p/terms-and-conditions.html'>Terms and conditions</a> | <a href='http://101helper.blogspot.com/p/contact-me.html'>Contact</a> | <a href='http://101helper.blogspot.com/p/contact-me.html'>Feedback</a> | <a href='http://101helper.blogspot.com/p/join-this-blog.html'>Join this blog</a> | <a href='http://101helper.blogspot.com/p/menusitemap.html'>Sitemap</a> | © Copyright 101Helper All Rights Reserved | Powered by <a href='http://blogger.com'>Blogger</a></p>
</div>
</div>

Step 7: Click on save template and you are done.

Replace links with your links.

Customization:

Above code contains different links like Privacy Policy, dsiclaimer, contact, feedback, terms and conditions, sitemap, join this blog and some text(Copyright 101Helper All Rights Reserved | Powered by blogger) if you wish to remove any of them simply remove its link and text for example if you wish to remove contact text and link now you have to remove <a href='http://101helper.blogspot.com/p/contact-me.html'>Contact</a> from code. There are vertical bars between each link to make difference between links. If you wish to remove © Copyright remove its text part along with <a href='http://blogger.com'>Blogger</a>. If you wish to add another link use <a href='http://www.yourlinkhere.com'>New link</a>. Replace New link and http://www.yourlinkhere.com with your own links. Don't forget to add vertical bar(|) before adding new link otherwise there will be no difference between new link and other links.

I hope you like this post and you are understanding how to add or remove a link but if you have still any problem you can ask me in comments. Give me your feedback about this post and other posts too. Follow and subscribe to get latest updates about blogger tips and tricks. Share this post with others and help 101Helper grow. Thanks for reading this post have a good day :).

Search tags: Sitelinks in blogger, how to show sitelinks in blogger, how to add links in blogger bottom, How to add links below blog in blogger, attribution links for blogger, 101Helper blogger tricks.

3 Metro Style Follow Buttons For Blogger

Follow buttons is main source of getting followers on social networks. Since blogger doesn't provide follow buttons so you have to add it in your blog from other blogs and websites. There are many content amplification sites that provides follow and share buttons, but these buttons are not stylish and responsive and sometimes they are responsive(addthis buttons). Addthis provides responsive follow buttons but these are very small in size and also takes time to load. Previously I have created some posts in which I have shared stylish responsive follow buttons and follow buttons for header and in this post I am going to share some new kind of widget which is metro style follow buttons.
These buttons are stylish and responsive, may be you have seen metro style buttons in some blogs. These buttons are designed like windows 8, you can take a look below:

This is the commonly used metro style follow buttons widget, In this I will share metro style follow buttons in 3 different styles. Choose a style and follow below steps to add that style in your blog:

Step 1: Go to blogger dashboard.

Step 2: Select layout in menu on left side.

Step 3: Click on add a gadget and scroll down to Html/javascript.

Step 4: Click on Html/javascript, copy the code of desired follow buttons from below and paste it into Html/javascript window:

Tip: To copy a code first select it by left click and then use Ctrl+C on your keyboard to copy it!

Style 1:

<div class='metro-style'>
<li><a class="facebook" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
<li><a class="twitter" href="http://twitter.com/accountname" rel="nofollow" target="_blank"></a></li>
<li><a class="Googleplus" href="https://plus.google.com/googleplus" rel="nofollow" target="_blank"></a></li>
<li><a class="pinterest" href="http://pinterestnterest.com/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="yt" href="http://www.youtube.com/channel" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/101helper" rel="nofollow" target="_blank"></a></li>
</div>
<style>
.metro-style{width:285px}
.metro-style li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-style .facebook,.twitter,.Googleplus,.pinterest,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-style .facebook{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-style .twitter{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-style .Googleplus{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-style .pinterest{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-style .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-style .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-style .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-style li:hover .facebook{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-style li:hover .twitter{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-style li:hover .Googleplus{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-style li:hover .pinterest{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-style li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-style li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-style li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Replace links with your social pages links.

Style 2:

See demo!

<div class="metro-social">

<br />

<br />

<li><a class="fb" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>

<li><a class="tw" href="https://twitter.com/101Helperblog" rel="nofollow" target="_blank"></a></span></li>

<li><a class="gp" href="https://plus.google.com/+101helperBlogspot" rel=" nofollow=" target="_blank"></a></span></li>

<li><a class="fd" href="http://feeds.feedburner.com/101Helper" rel="nofollow" target="_blank"></a></span></li>

</div>

<style>

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:135px;height:141px; position: relative; top: -3px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:135px;height:141px;position: absolute;

left: 143px;top: -3px;}

.metro-social .gp{position:absolute;left:284px;top: -3px;width:135px;height:141px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}

.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:135px;height:141px;position: absolute;

left: 426px;top: -3px;}

.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}

.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}

</style>

Replace links with your social pages links.

Style 3:

<style type="text/css">

#metro-style{ width:500px;}

ul.metro-style{

margin:0;

padding:3px;

list-style:none;

-webkit-perspective: 10000px; 

-moz-perspective: 10000px;

-o-perspective: 10000px;

perspective: 10000px;

position:absolute;

}

ul.metro-style li{

display: inline-block;

width: 55px; 

height: 50px;

margin-right: 10px; 

background: white;

font: bold 36px Arial; 

text-transform: uppercase;

text-align: center;

cursor: pointer;

}

ul.metro-style li a{

display:block;

width: 100%;

height: 100%;

color: black;

text-decoration: none;

outline: none;

-webkit-transition:all 300ms ease-out 0.1s; 

-moz-transition:all 300ms ease-out 0.1s;

-o-transition:all 300ms ease-out 0.1s;

transition:all 300ms ease-out 0.1s;

}

ul.metro-style li a span{

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

padding-top: 5px; 

display:block;

width: 100%;

height: 100%;

-webkit-transition:all 300ms ease-out 0.1s;

-moz-transition:all 300ms ease-out 0.1s;

-o-transition:all 300ms ease-out 0.1s;

transition:all 300ms ease-out 0.1s;

}

ul.metro-style li a img{

border-width: 0;

}

ul.metro-style li:hover a{

  -webkit-transform:scale(1.10); /* Safari and Chrome */

    -moz-transform:scale(1.10); /* Firefox */

    -ms-transform:scale(1.10); /* IE 9 */

    -o-transform:scale(1.10); /* Opera */

     transform:scale(1.10);

}

ul.metro-style li:hover a span{

background-color:black;

-moz-transform: rotateY(90deg); 

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

width:50px;

height:10px;

}

#title{

font-size:20px;

font-weight:bold;

font-family:Trebuchet ms;

color:#fff;

background-color:#444;

width:288px;

text-align:center;

}

</style>

<div id="title">Follow us on:<div>

<div id="metro-style">

<ul class="metro-style">

<li><a href="http://www.facebook.com/101helper"><img src="http://s2.postimg.org/c9z5wq7xh/image.png" title="" /></a></li>

<li><a href="https://plus.google.com/101helperblogspot"><img src="http://s27.postimg.org/lj8oy6wgv/image.png" title="" /></a></li>

<li><a href="http://www.twitter/101helperblog"><img src="http://s30.postimg.org/v33bx5ggd/image.png" title="" /></a></li>

<li><a href="http://feeds2.feedburner.com/101helper"><img src="http://s29.postimg.org/g1imfb8w3/rss.png" title="" /></a></li>

</ul>

</div>

Replace links with your social network links.

If you wish to remove "Follow us on" from above(style 3) social icons gadget then simply remove highlighted piece of code.

Step 5: Click on save and you are done!

Do you like this post and this widget is working properly in your blog? send me your feedback in comments. If you have any problem feel free to ask me. Follow and subscribe to get latest updates in your inbox. Share this post with others.

Search tags: 3 Metro style follow buttons for blogger, metro style blogger follow icons, follow icons for blogger, Responsive follow icons for blogger, 101Helper blogger widgets.

3D CSS Menu For Blogger Blog

In my recent post I have shared floating vertical menu for blogger and before that I have shared many type of menus which are stylish, useful, responsive and easy to use. All blogger menus are shared to help those blogger who don't know how to add a menu in blogger as blogger doesn't provide any option to add a menu directly so blogger have to add menu from other sites, so here almost any kind of can be found and added to blog by following step by step tutorial. After sharing different menus I am going to share a new, unique, responsive and neat menu.
Its a 3D menu. It have cool effect that is when a tab/button is hovered with mouse it spins and shows the other dimension. It is a unique menu and I am quite sure that you haven't seen it before, you can see a demo below:

In above demo you can see its 3D design, it is a pure css menu. Javascript isn't used to make 3D effect in it. You might have noticed the text color in white but on hover it becomes dull, you can change its text hover color and also menu color. I will show you how to customize this menu at the end of this post. After sharing horizontal 3D menu I will also share a vertical 3D menu, so lets start! follow below steps to add this menu to your blog:

Adding Horizontal 3D menu in blogger:

Step 1: Go to blogger dashboard.

Step 2: Select layout in menu on left side.

Step 3: Click on add a gadget and scroll down to Html/javascript.

Step 4: Copy below code and paste it into Html/javascript window:

<div id="cssmenu" class="dropdown">
<ul>
   <li class="active"><a href="#" data-title="Home">Home</a></li>
   <li><a href="#" data-title="Product 1">Product 1</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
   <li><a href="#" data-title="Company">Company</a></li>
   <li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family:Trebuchet Ms;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #3db2e1;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #3db2e1;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}
</style>

Step 5: Click on save and you are done!

Make sure to add  gadget just below title of your blog otherwise it will show up in vertical form. 

Customization:

You can customize everything in this menu if you have knowledge about CSS, I will show you only some common customization in this menu such as color of text before and after hovering with mouse and also buttons color before and after hovering with mouse. All you have to do is to replace the codes with desired color code. You can get code of a color by reading this post. I have highlighted different pieces in the code above to make difference between hover and active mode. To customize this menu read below, if you wish to customize something else you can ask me in comments or contact me.

This(  background: #3db2e1;) represents the active color of the buttons, active color is that color which is displayed before hovering with mouse you can change it by replacing #3db2e1 with desired color code.

 background: #3db2e1; represents hover color, it is the color which is shown when a tab/button is hovered with mouse.

  color: #ffffff; is the color of text before hovering with mouse and  color: #dff2fa; shows the color of text shown when a tab is hovered by mouse. 

Adding or remove a button/tab:

I have shown only how to change color of text or button in the menu but another thing which makes confusion is adding or removing a tab. Because of being 3D menu this menu requires to add a name of menu 2 times the first one is shown before hovering and the other is shown when a tab/button is hovered with mouse. So here I want to make it clear that in 3D menu you have to add name of a tab/button 2 times otherwise it will not show text in the other dimension. So read below to learn how to add or remove a button from 3D menu:

To add a new button/tab in menu paste the below code below the button code where you want to show the button. For example if you want to add a button having title new button after Home now you have to add below code after Home button code:

<li><a href="#" data-title="new button">new button</a></li>   

The overall code should look like below code:

<div id="cssmenu" class="dropdown">
<ul>
   <li class="active"><a href="#" data-title="Home">Home</a></li>
   <li><a href="#" data-title="new button">new button</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
   <li><a href="#" data-title="Company">Company</a></li>
   <li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>

Similarly to remove a button remove its code. For example to remove new button you have to remove <li><a href="#" data-title="new button">new button</a></li>  from above code.

Always remember to type name of the tab 2 time otherwise it will not show name of button when it is hovered by mouse. Example is shown above.

Adding links:

To add a link to any button replace #(hash) with link. 

Adding Vertical 3D menu in blogger:

Like horizontal 3D menu now I will show you how to add vertical 3D menu in blogger so if someone likes vertical 3D menu he can add it, this menu is similar to horizontal 3D menu except color and design. It also works on CSS. You can see a demo of vertical 3D menu below. At the end of t  his post I will show you how can you change color of this menu. Follow below steps to add this menu in your blog:

Step 1: Go to blogger dashboard and click on layout in the menu on left side.

Step 2: Click on add a gadget and scroll down to Html/javascript.

Step 3: Copy the below cod eand paste it in Html/javascript window:

<nav class="mainNav">
    <ul>
        <li><a href="#" data-title="Home">Home</a></li>
        <li><a href="#" data-title="About">About</a></li>
        <li><a href="#" data-title="Clients">Clients</a></li>
        <li><a href="#" data-title="Contact Us">Contact</a></li>
      <li><a href="#" data-title="Sitemap">Sitemap</a></li>
      <li><a href="#" data-title="Feedback">Feedback</a></li>
    </ul>
</nav>
<style>
.mainNav {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
}
.mainNav li{
padding:0px;
}
.mainNav ul {
 list-style: none;
 padding: 0px;
}
.mainNav a {
   background-color: #fafafa;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
    backface-visibility: hidden;
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
                inset 0 0 1.5em hsla(0,0%,0%,.25);
    color: #322;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    transition: .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 6em;
}
.mainNav a:after {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
                      linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
                inset 0 0 1.5em hsla(0,0%,0%,.4);
    bottom: 0;
    color: #fff;
    content: attr(data-title);
    left: 100%;
    line-height: 3;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    width: 100%;
}
.mainNav a:before {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
                      linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
    bottom: 0;
    content: '';
    height: 9em;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
    transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
    transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
    z-index: 10;
}​
</style>

Step 4: Click on save and you are done:

Customization:

Follow the horizontal menu customization to add link to tabs, new tab or remove an existing tab/button. To change color of menu replace code of color in above piece of code which is highlighted with yellow color( background-color: #fafafa;).

If you have any question ask me in comments or contact me. Follow and subscribe to get latest updates. Share this post with others and help 101Helper grow.

Search tags: 101Helper blogger menus, how to add 3D menu in blogger, Unique blogger menus, Menus for blogger, 3D vertical menu for blogger, 3D vertical menu for blogger, 101Helper blogger menus tutorials.