Add 'Hexagon Shape' button to your web project

I've already published some of coolest button types on Crawlist, Like CSS3 Shake button, Blinking button, 3D button etc, Here I am sharing another cool button to your web project for your web project, it's called  'Hexagon Shape' button. The interested thing is this buttons were built with single element, made with CSS3 3D perspective element. These buttons are easy to use and supports all major web browsers. Let's take a look at them, shall we:

Add 'Hexagon Shape' button to your web project

So how this button working on your site don't forget to mention :)

Read More

Add 'Building Images' Style Slider to your webpages

'Building Images' Style Slider is a new addition to modern slider technology, the best thing about this slider is this slider is entirely coded HTML5 and JavaScript, which makes this slider very lightweight and handy. It's easily configurable and adaptable to any types of sites. Here below source code of this slider given; Read on:

Add 'Building Images' Style Slider to your webpages

See the Pen slider by kShazzad (@kShazzad) on CodePen.

How to configure:

• If you want to change default Height and Weight, just change the all Height and Weight value

• Add your images here; change default images

var urls = [
            'http://i.imgur.com/OeDykaH.jpg',
            'http://i.imgur.com/lLHspCj.jpg',
            'http://i.imgur.com/tCz9GQS.jpg'
        ],

• Also change the number of images, default is 3, change 3 with your image number

for (var i = 1; i < 3; i++)

So what you think about this slider and how it working on your web project don't forget to mention :)

Read More

Add featured post slider in Blogger (homepage)

Got some worth mentioning posts in your Blogger blog, and want to represent them with style here I am presenting to you a high end very popular featured post/content slider for your Homepage. Featured post sliders are seen in many blogs because they create a very good impression about your site and also increase the beauty of landing page, as well as they reduce bounce rate. And speaking of Featured post slider I personally like Coin Slider very much and recently I integrated it to Blogger blogs. I like Coin Slider because it has many advantages like:

•     Unique transition effects

•     Valid markup

•     Flexible configuration

•     Auto slide

•     Navigation box

•     Lightweight (8kb only)

•     Linking images

•     Fully customizable using CSS

•     Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+   

•     Free to use under MIT license

•     Compatible with Android and iPhone

Let's see how it looks like and how to install it to Blogger site. The difficulty level is intermediate, Read on:

Add featured post slider in Blogger (homepage)

Live Demo: Click Here

Codes for copy:

<!-- Crawlist.net Coin Slider CSS -->
<style>
.tsc_clear { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.sliderContainer { margin:0; padding:0;}
.coin-slider { zoom: 1; position: relative; width:800px;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { font-size: 22px; width: 778px; padding: 11px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }</style>

<!-- Crawlist.net Javascript Library -->
<script type="text/javascript" src="https://c7bef9b379dc0bc48bbf02631cdf78357be11070.googledrive.com/host/0B6ENtyPAfM-tY2l5ekxXcWV4cHM/"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- Crawlist.net Coin Slider JS -->
<script type="text/javascript" src="https://94e98a2008aa792477d832018a4e10511754c51e.googledrive.com/host/0B6ENtyPAfM-tUUlObzZ0MU91eVk/"></script>

<!-- Crawlist.net Coin Slider Settings -->
<script type="text/javascript">
$(function() {
    $('#coin-slider').coinslider({             
        width: 800, // width of slider panel in pixels
        height: 400, // height of slider panel in pixels
        navigation: true, // prev next and buttons
        spw: 7, // squares per width
        sph: 5, // squares per height
        delay: 3000, // delay between images in ms (3000 = 3 seconds)
        sDelay: 30, // delay beetwen squares in ms
        opacity: 0.7, // opacity of title and navigation
        titleSpeed: 500, // speed of title appereance in ms
        effect: 'random', // random, swirl, rain, straight
        hoverPause: true // pause on hover 
    });
});
</script>

  <!-- Crawlist.net Coin Slider Start -->
  <div style="width:800px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
  <div class="sliderContainer">
    <div id="coin-slider">
      
        <a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
        <a href="ipost link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
        <a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
    </div>
    <div class="tsc_clear"></div>
  </div>
  </div>
  <!-- Crawlist.net Coin Slider End -->
 

Adding this widget 

• First log into Blogger, select your blog,

• Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header

• Select ‘HTML/JavaScript’ from pop up page;

• Copy and paste given codes in content box, configure and Save

• Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;

• And look bottom of web browser and you will see a line, that contains Widget ID;

• Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;
  

• Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;

• You will see chunks of codes starts with <b:section and ends with </b:section>

Like this

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
        <b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- 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'>
    <data:content/>
  </div>

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

• Identify them and place this line (see image) Before the codes chunk
  

<b:if cond='data:blog.url == data:blog.homepageUrl'>

• and at the end of code this line

</b:if>

• And Save template.

How to configure:

• In "post link" place your links and add your post title in ‘place text’

• In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwise use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 800px width and 400px height bigger size will be scaled into this size.

• You can delete a slide content by deleting <a> to </a>

• You can add more slide by coping <a> to </a>

• You can also change the default image size by changing value of height and width in case you will have change all height width values.

How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...

Read More

Overlay style navigation menu for Blogger

In my past posts I published two different position style navigation menus, Fixed to header and static position menus, here I am publishing a new style of menu it’s calls Overlay style; full navigation will appear top-left side of your blog interface with bar/burger style trigger and hover on the trigger will show full navigation menu on a full screen overlay page. It also responsive so also works seamlessly on mobile devices; it has an extra close button in case automatic overlay closing function unable to work. Made with CSS, CSS3, HTML, Google font let’s see how it looks like and how to add it to your blogger blog.

Overlay style navigation menu for Blogger

Live Demo:

(Click here)

Codes for Copy:

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--crawlist.net widget starts-->
    <div class="nav">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Blogger</a></li>
           <li><a href="#">Wordpress</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
   </div>
   <!--crawlist.net widget ends-->
</div>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>



<style>
/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > .nav ul { top:15%; }


.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  z-index: 998; 
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background:rgba(100,200,240,.9); 
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
.nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .nav ul {
  left: 0;
}
.nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
.nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  text-align:center
}
.nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  .nav ul {font-size:.75em;}
  .nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.tabs .widget li, .tabs .widget li {float:none}
/*crawlist.net CSS ends*/
</style>

How to add:

• First log into your Blogger blog, Select your blog

• Go to ‘Layout’ tab, select ‘add a gadget’

• From popup menu select ‘Html/Javascript’

• Copy the following codes and paste into content box;

• Save template, then (follow this if you using Blogger default template)

• Go to ‘Template’ tab; ‘Edit HTML’

• And search for /* Tabs (using Ctrl+F or Cmd+F inside of code snippet)

• Then delete all Tabs CSS codes 

/* Tabs ----------------------------------------------- */ .tabs-inner .section:first-child { border-top: $(header.bottom.border.size) solid $(tabs.border.color); }  .tabs-inner .section:first-child ul { margin-top: -$(header.border.size); border-top: $(header.border.size) solid $(tabs.border.color); border-left: $(header.border.horizontalsize) solid $(tabs.border.color); border-right: $(header.border.horizontalsize) solid $(tabs.border.color); }  .tabs-inner .widget ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; border-bottom: $(tabs.border.width) solid $(tabs.border.color);  margin-top: $(tabs.margin.top); margin-left: -$(tabs.margin.side); margin-right: -$(tabs.margin.side); }  .tabs-inner .widget li a { display: inline-block;  padding: .6em 1em;  font: $(tabs.font); color: $(tabs.text.color);  border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color); }  .tabs-inner .widget li:first-child a { border-$startSide: none; }  .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none; }

• After doing all of these steps; save template.

How to configure:

• Fill <a href="#">Home</a>'s # with your label links and change the anchor words;

Now check your blog out for make sure it’s working.

FAQ and Caution:

• Tested on many template; should work perfectly on any template; if the design breaks then try to find out what breaking the design (mostly the thing disrupt the default design is, default code setting for .widget and .tabs CSS codes)

• You may change the default color of this menu just change the background color of .menu-outer and .menu-outer:hover with any rgba or hex color;

• Works fine on most latest updated web browsers.

SO what you thinking about this menu don’t forget to mention. Chill.....

Read More

Add Flat Post sharing widget below posts of Blogger

Few days ago I published a fresh post sharing widget for Blogger blogs named Stylish post sharing widget, today I am publishing another version of that sharing widget calls Flat post sharing widget. The specialty of this widget is it made with flat retina ready colors and modern Flat UI. Made with CSS, CSS3 and HTML; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:

Flat post sharing widget below posts of Blogger 

Preview:

Live Demo:  (Click here)

Codes for copy:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-flatsharo { border:2px solid #CCC; height:110px; width:600px;
background: #ffffff; margin:auto; padding-left:20px}
.ks-flatsharo h3 {font-family: 'Titillium Web', sans-serif; font-size:20px; text-align:center;
font-weight:600; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { text-decoration:none; color:#151515}
.sharo-contino a:hover { text-decoration:none; color:#fff}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{ float:left; margin-left:5px; margin-right:5px}

.tweet.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.fb-tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.googleplus.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.linkedin.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.pin-it.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.stumble.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.tweet.tips:hover {background:#00A0D1;border:2px solid #00A0D1; color:#fff;}
.fb-tips:hover {background:#3B5998;border:2px solid #3B5998; color:#fff;}
.googleplus.tips:hover {background:#DA4834;border:2px solid #DA4834; color:#fff;}
.linkedin.tips:hover {background:#0077B5;border:2px solid #0077B5; color:#fff;}
.pin-it.tips:hover {background:#CB2027;border:2px solid #CB2027; color:#fff;}
.stumble.tips:hover {background:#EB4924;border:2px solid #EB4924; color:#fff;}
/*crawlist.net CSS ends*/</style>
<div class="ks-flatsharo"><!--crawlist.net sharer starts-->
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Stumble</a></li>   
</ul><!--crawlist.net sharer ends--></div></div></b:if>

How to add:

Back up your template (Optional step)

• Log in to your blogger, select your blog,

• Select 'Template' tab option, click 'backup/restore' from upper right corner.

• Download full template and save it on your pc's Harddrive

Installing (Mandatory step)

• From 'Template' tab, select 'Edit html'

• And find (Using Ctrl+F or Cmd+F) into code snippet this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice; ignore first one after second time paste all following codes below that line; and Save template.

Caution and FAQ:

• If your template doesn’t contains <div class='post-footer-line post-footer-line-1'>

• Or contains this line one time then search for </article> instead of that; and below </article> paste following codes.

• This widget won’t appear on Homepage.

• This widget is compatible with all standard templates but unique styled templates won’t support it. That case or if the widget design breaks remove it.

Last words, How it looking on your site and if you having any trouble with this widget don't forget to mention. Check out other Blogger sharing widgets Foldable, Floating share bar with icon, Floating share bar with count, Coldblooded etc Goodluck……

Read More

Add Stylish Post sharing widget below posts of Blogger

Few months ago I published couple of fresh post sharing widget for Blogger blogs. Starting with Foldable, Floating share bar with icon, Floating share bar with count, Coldblooded, Truck icon style etc. If you already used one of them now it’s time to use the latest Crawlist sharing widget. It’s a very popular sharing widget can be seen on a lots of popular sites powered by Wordpress I duplicated and remade it for Blogger platform. Made with CSS, CSS3 and HTML no image just gradient colors; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:

Stylish Post sharing widget below posts of Blogger

Preview:

Live Demo: (here you go)

Codes for copy:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-sharo { border:1px solid #CCC; height:110px; width:600px; border-radius:10px;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 44%, #e5e5e5 84%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(44%,#ffffff), color-stop(84%,#e5e5e5));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: radial-gradient(ellipse at center, #ffffff 44%,#e5e5e5 84%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );}
.ks-sharo h3 {font-family: 'Pacifico', cursive; font-size:20px; text-align:center;
font-weight:300; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { color:#fff; text-decoration:none}
.sharo-contino a:hover { color:#fff; text-decoration:none}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{text-align:center;display:inline-block;margin:0 5px}
.tweet,.fb-tips,.googleplus,.linkedin,.pin-it,.stumble{color:#fff;border:1px hidden #CCC;font-family: 'Montserrat', sans-serif;
padding:8px 12px;
font-size:14px;
border-radius:5px;}
.tweet.tips{background:#00A0D1;border:1px solid #00A0D1}
.fb-tips{background:#3B5998;border:1px solid #3B5998}
.googleplus.tips{background:#DA4834;border:1px solid #DA4834}
.linkedin.tips{background:#0077B5;border:1px solid #0077B5}
.pin-it.tips{background:#CB2027;border:1px solid #CB2027}
.stumble.tips{background:#EB4924;border:1px solid #EB4924}
/*crawlist.net CSS ends*/</style>
<div class="ks-sharo"><!--crawlist.net sharer starts-->
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Stumble</a></li>   
</ul><!--crawlist.net sharer ends--></div></div></b:if>

How to add:

Back up your template (Optional step)

• Log in to your blogger, select your blog,

• Select 'Template' tab option, click 'backup/restore' from upper right corner.

• Download full template and save it on your pc's Harddrive

Installing (Mandatory step)

• From 'Template' tab, select 'Edit html'

• And find (Using Ctrl+F or Cmd+F) into code snippet this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice; ignore first one after second time paste all following codes below that line; and Save template.

Caution and FAQ:

• If your template doesn’t contains <div class='post-footer-line post-footer-line-1'> Or contains this line one time then search for </article> instead of that; and below </article> paste following codes.

• This widget won’t appear on Homepage.

• This widget is compatible with all standard templates but unique styled templates won’t support it. That case or if the widget design breaks remove it.

Last words, How it looking on your site and if you having any trouble with this widget don't forget to mention. New styled (Flat/minimalist designed) sharing widget under development so keep in touch on Crawlist’s fanpages. Goodluck……

Read More

Add Featured Post slider in Blogger (homepage/below post) Carousel style

Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:

• Simple: Easy to configure and customize

• Small: Don’t take much space wherever you set it

• Light weighted: Some jQuery, CSS and HTML made

• High-end: Responsive

• Awesome: Smart and neat looking carousel style

Let’s see how it looks like and how to add it in Blogger blogs.

Add featured post slider in Blogger (homepage/below post)

Preview:

Live Demo: (click here)

Codes for copy:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             $('#slider').bxSlider({
            ticker: true,
            tickerSpeed: 5000,
            tickerHover: true
          });
          });
</script>
<style>
/*crawlist.net slider CSS*/
#slider {
    list-style:none;
    padding:0px;
}

.slider-container {
    background:#fff;
    width:80%;
    height:150px;
    padding:17px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow:hidden;
margin:auto;
}

.newcon { width:80%; margin:auto; overflow:hidden}

#slider img {
    width:200px;
    height:125px;
    margin:0px;
    display:inline-block;
    border: 1px solid #f5f5f5;   
}

#slider li {
    width:210px
}
/*crawlist.net slider CSS*/
</style>

       
<div class="newcon">
<!-- crawlist.net slider starts -->
<div class="slider-container">
<ul id="slider">  
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>  
</div><!-- crawlist.net slider ends --></div>

Adding this widget on Homepage

• First log into Blogger, select your blog,

• Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header

• Select ‘HTML/JavaScript’ from pop up page;

• Copy and paste given codes in content box, configure and Save

• Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;

• And look bottom of web browser and you will see a line, that contains Widget ID;

• Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;

• Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;

• You will see chunks of codes starts with <b:section and ends with </b:section>

• Like this

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
        <b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- 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'>
    <data:content/>
  </div>

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

• Identify them and place this line (see image) Before the codes chunk

<b:if cond='data:blog.url == data:blog.homepageUrl'>

• and at the end of code this line

</b:if>

 

• And Save template.

Adding this widget below posts

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search for (using Ctrl+F or Cmd+F) into code snippet

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice so ignore the first time, second time copy paste codes and before all codes add this line

<b:if cond='data:blog.pageType == &quot;item&quot;'>

• And after all code paste this line,

</b:if>

• Configure and Save template

How to configure:

• In 'place link' place your links and add your post title in ‘place hover text’

• In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwist use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 200px width and 125px height

• You can delete a slide content by deleting <li> to </li>

• You can add more slide by coping <li> to </li>

• You can also change the default image size by changing value of height and width (red marked)

How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...

Read More

3 Responsive Navigation menus for Blogger

Recently I published high-end CSS3 made 2 different hover styled navigation menu also I published a cool multipurpose dropdown menu too. But none one of them are responsive. Those menu works fine on non-responsive template but if you using responsive template (adapts any screen size, tabs and mobile phone) also you turned off default mobile view on mobile devices then those menu using is worthless. That case we use responsive navigation bars. For your consideration here I am publishing 3 of coolest responsive navigation bars for your responsive templates. They doesn’t come up with dropdown menu but coming soon (working on that), made with CSS, HTML, CSS3 and jQuery. Let’s see how they look like and how to add them on your Blogger blog.

Black responsive navigation menu

Black oriented gradient colored; equipped with cool CSS3 transition effect, Google font.

Live demo: (Click here)

Codes:

<div id='ks-pluto'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#ks-pluto ul,
#ks-pluto li,
#ks-pluto a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#ks-pluto {
  border: 1px solid #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#ks-pluto ul {
  zoom: 1;
  background: #47474e;
  background: -moz-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #47474e), color-stop(100%, #2f2f33));
  background: -webkit-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -o-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -ms-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: linear-gradient(top, #47474e 0%, #2f2f33 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#ks-pluto ul:before {
  content: '';
  display: block;
}
#ks-pluto ul:after {
  content: '';
  display: table;
  clear: both;
}
#ks-pluto li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#ks-pluto li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
  -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
#ks-pluto li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
#ks-pluto li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
    #ks-pluto li {
  float: none;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}   
}
</style>

Black and blue responsive navigation menu

Faded black (flat) colored, equipped with cool CSS3 transition effect, Google font and blue underline appears on link hover.

Live demo: (Click here)

Codes:

<div id='ks-menu'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);

#ks-menu {background: #333;
  width: auto;
}

#ks-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  display: block;
  zoom: 1;
}
#ks-menu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#ks-menu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#ks-menu.align-right ul li {
  float: right;
}
#ks-menu.align-center ul {
  text-align: center;
}
#ks-menu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#ks-menu ul li a:hover {
  color: #fff;
}
#ks-menu ul li a:hover:before {
  width: 100%;
}
#ks-menu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#ks-menu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background:#3CF;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#ks-menu ul li.last > a:after,
#ks-menu ul li:last-child > a:after {
  display: none;
}
#ks-menu ul li.active a {
  color: #f5f5f5;
}
#ks-menu ul li.active a:before {
  width: 100%;
}
#ks-menu.align-right li.last > a:after,
#ks-menu.align-right li:last-child > a:after {
  display: block;
}
#ks-menu.align-right li:first-child a:after {
  display: none;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
  #ks-menu {  -moz-box-shadow: 2px 2px 5px #d5d5d5;
-webkit-box-shadow: 2px 2px 5px #d5d5d5;
box-shadow: 2px 2px 5px #d5d5d5;

}

  #ks-menu ul li {
    float: none;
    display: block;

  }
  #ks-menu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
          -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
  }
  #ks-menu ul li a:hover {
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    background:#4c4c4c;
  } 
  #ks-menu ul li.last > a,
  #ks-menu ul li:last-child > a {
    border: 0;
  }
  #ks-menu ul li a:after {
    display: none;
  }
  #ks-menu ul li a:before {
    display: none;
  }
}
</style>

 

Ocean blue responsive navigation menu

Blue oriented gradient colored; equipped with foldable jQuery featured touch menu on mobile, Google font. 

Live demo: (Click here)

Codes:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#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;
  -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;
  border-radius: 4px;
  border: 1px solid #2698e9;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1;
  background: #6bb9f0;
  background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
  background: linear-gradient(to top, #54aeee, #82c4f2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;
 
}
#cssmenu > ul > li {
  float: left;
}
#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: 20px 25px 21px 25px;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
  content: '';
  position: absolute;
  top: 18px;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .15;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
  right: auto;
  left: -1px;
}
#cssmenu > ul > li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
  right: auto;
  left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
  display: none;
}
#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 > a {
  padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px 19px 25px;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 20px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fcfefb;
  border-bottom: 2px solid #fcfefb;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 25px;
  top: 30px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}/*crawlist.net CSS ends*/
</style>
   
<div id='cssmenu'>
<ul><!--crawlist.net menu starts-->
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Customization</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul><!--crawlist.net menu ends-->
</div>

<script>
(function($) {

  $.fn.menumaker = function(options) {
     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
});

});
})(jQuery);
</script>

How to add:

• Log into your Blogger blog; select your blog

• Go to 'Layout' tab; click 'add a gadget’, see image

• Select 'html/javascript' from Pop-up menu,

• Copy following codes and configure

How to configure:

• Change # with your label link and title word with your label name

• Save template; and check your blog out for live preview.

Compatibility

• These navigation menus are compatible with any default and standard designed template. If its design breaks on any template remove it.

• These menus are compatible with any updated Web browser.

Caution

• Make sure your template has this line in <head> area

<meta name="viewport" content="width=device-width, initial-scale=1">

• If your template already has this line, don’t copy twice (For Third number menu) 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

So what your feedback about these menu don’t forget to mention, Goodluck……

Read More