New CSS3 Navigation menu for Blogger (5 color style)

Few days ago I published a post where I paged Flat style superb navigation menu for your Blogger blog. Here in this post I am publishing another cool style CSS3 navigation menu what enhanced with more cool hover style. These adaptive designed menus are dedicated to make your blog stylish with a new level and perspective with a new trendy web designs. Let’s see how they looks like and how to add it in your Blogger blog.

New CSS3 navigation menu for Blogger

Live Demo- (Click Here)

How to install:

• Log in to your Blogger, select your blog.

• Go to ‘Layout’, and select ‘add a gadget’ from the space below ‘header’

• Select ‘HTML/JavaScript’ from popup menu

• Copy and paste following codes of your style and configure with your label name on default label, # place your label links; additionally add more label by coping <a class="ks-link" href="#">label</a> and delete unnecessary label by deleting <a class="ks-link" href="#">label</a>line, that’s it

• Save gadget, Save template and check your blog out for live preview

Blue CSS3 navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #52B3D9;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#52B3D9; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #52B3D9;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Turquoise CSS3 navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #36D7B7;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#36D7B7; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #36D7B7;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Purple CSS3 navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BE90D4;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#BE90D4; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #BE90D4;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Orange CSS3 navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #EEA200;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#EEA200; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Silver CSS3 navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BDC3C7;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#BDC3C7; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #BDC3C7;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Compatibility

• This navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.

• This menu is compatible with any updated Web browser.

So what your feedback about these flat Cool CSS3 navigation menu don’t forget to drop a comment and Goodluck……

Read More

Superb CSS3 Navigation menu for Blogger (5 color style)

As you already know that Blogger’s default templates doesn’t comes up with navigation menu. And without navigation menu a site doesn’t look that much good and also it becomes routeless roads to your site visitors. There is a way to add a menu using list gadget, otherwise you can use custom made menu to create navigation menu to your blogsite; here a custom menu I published couple of days ago features fixed to header, dropdown menu and social icons; that menu was a multipurpose menu, so I decided to create and publish a normal looking menu without lots option and adaptive design. Neat and simple looking flat designed, cool CSS3 transition effects, modern and stylish UI that will make sure your Blogger site is running on the treading stuff and increase your reputation. Let’s see how it looks like and how to add it in your Blogger blog.

Superb CSS3 navigation menu for Blogger

Live Demo- (here you go)

How to install:

• Log in to your Blogger, select your blog.

• Go to ‘Layout’, and select ‘add a gadget’ from the space below ‘header’

• Select ‘HTML/JavaScript’ from popup menu

• Copy and paste following codes of your style and configure with your label name on default label, # place your label links; additionally add more label by coping <a class="ks-link" href="#">label</a> and delete unnecessary label by deleting <a class="ks-link" href="#">label</a>line, that’s it

• Save gadget, Save template and check your blog out for live preview

Flat Blue navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #52B3D9;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #52B3D9; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #52B3D9;
  border-bottom: 4px solid #52B3D9;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Turquoise navigation menu 

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #36D7B7;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #36D7B7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #36D7B7;
  border-bottom: 4px solid #36D7B7;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Purple navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BE90D4;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #BE90D4; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BE90D4;
  border-bottom: 4px solid #BE90D4;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Orange navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #F89406;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #F89406; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #F89406;
  border-bottom: 4px solid #F89406;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Silver navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BDC3C7;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #BDC3C7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BDC3C7;
  border-bottom: 4px solid #BDC3C7;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Compatibility

• This navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.

• This menu is compatible with any updated Web browser.

So what your feedback about this flat CSS3 navigation menu don’t forget to mention by comment and Goodluck……

Read More

Cool CSS3 & jQuery Image Slider for Blogger

Few days ago I published a CSS3 enhanced image gallery for your Blogger blogpost, and today I am publishing another CSS3 oriented Image slider, this slider’s main feature is its lightweight, easy configurable, cool looking simple and handy. Build with HTML, CSS, CSS3, little amount of script and Google webfont. It has Next and Previous button, mouse hover image caption, unlimited image slideshows and height width changeable with little value changing. Let’s see how it looks like, how to install it on Blogger and how to configure; read on-

Cool CSS3 & jQuery Image Slider for Blogger

Live Demo: 

The Island

The Green Field

The Paradise

The Rainy weather

How to install:

Optional Step: Back up your template first!

• 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

Mandatory Step:

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

• And find (using Ctrl+F or Cmd+F) this tag </head>

• Above </head> copy and paste these lines

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/58151114515/ks.js"></script>

• Now again search for ]]><

• Above ]]>< copy and paste these lines

/*www.crawlist.net CSS starts*/
#ks-gallery-wrapper{  
width:500px;
height:375px;
margin:20px auto;}
#gallery{
width:500px;
height:375px;
position:relative;}
#gallery img{
width:500px;
height:375px;}
#gallery .image {
width:500px;
height:375px;
position:absolute;
display:none;}
#gallery .image.active{
display:block;}
#gallery .image.inactive{
display:none;}
#ks-nav {width:100%;}
#previous {
float:left;
cursor:pointer;
width:32px;
position:relative;
top:-200px;}
#previous img{width:32px;}
#next {
float:right;
cursor:pointer;
width:32px;
position:relative;
top:-200px;}
#next img{width:32px;}
.ks-under {
border: 2px solid #fff;
cursor: pointer;
height: 375px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 500px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-under img {
position: absolute;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-under .captio {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;}
.ks-under .kscaption{
height:50px;
width: 500px;
display: block;
bottom: -53px;
text-align: center;
font-family: 'Droid Serif', serif;
font-size:16px;
line-height:50px;}
.ks-under:hover .kscaption{
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);}
/*www.crawlist.net CSS ends*/

• Save Template

How to apply:

• Go to ‘New post’ or select a post to ‘edit’

• Switch ‘HTML’ mode of text editor (upper left corner of text editor this option you can find Compose or HTML)

• Now copy and paste these lines in post;

<div id="ks-gallery-wrapper"><div id="gallery"><div class="ks-under">

<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>
<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>
<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>
<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>

</div></div>
<!--www.crawlist.net slideshow starts--><div id="ks-nav">
<div id="previous"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmB74aMkABmuVO1rMZv5BsmhxZJZovghQx4hjJ-Dl4Jk7BF2_FR26zdHCC5Y9qoBxZ0K7WaEqr8euu900OKfZojCj9hrKaDHMNVZbze5GuoShp61iaAGzEb-HToSw1HY7QoCHd3bnxVQT6/s1600/il.png"></div>
<div id="next"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CYFcWDHaYlbjJMV5fxRD4q0jj33ylYqPZath_CRe-0HPhDh0sqPJYfmlRqXIKP6AWtV5bJPXoHQjKnKxLZCwaOlW16nzUlxkvbUpr_HLFyJ51kQzrdsdrLRPiKNtqlJl93zqY_576ISV/s1600/ir.png"></div>
</div></div><!--www.crawlist.net slideshow ends-->

• and configure:

• The pictures you want to display first upload them on Tinypic, and collect the raw image links, paste the links on ‘Pic Link’;

• And in ‘Pic Detail’ type your one line of details;

• If you don’t want all of image slot just delete full line

<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>

• And if you want to put more image on slideshow just copy this line, that much time you want

<div class="image"><img src="Pic Link"/><span class="captio kscaption"><p>Pic Detail</p></span></div>

• After configuration, Switch back to ‘Compose’ part, Publish post, and see your slideshow in live action.

More configurations: Optional
The default image size allows Height of 135px and Width of 500px, Any resolution picture will be scaled into these default value, if you having problem with this default resolution, just change the value as your requirement, the sizes can be found in CSS part, red colored.

Compatibility:

• This image slider tested on several templates, worked fine on every template, if some template doesn’t shows it right try to fix the px values.

• Supported on all major web browsers

So how your images slider working on your blog and any problem facing with it don’t forget to mention by comment, Chill….

Read More

Bottle Caps style: Social sharing widget below posts in Blogger

I always try to publish Cool, Stylish and Trendy widget for your Blogger blogs. To continue that job here today I am going to publish a Post sharing widget (appears below every posts of Blogger). This widget called Bottle caps social sharing and bookmarking widget. Comes up with Glossy Icons, 10 service (Facebook, Twitter, Google plus, LinkedIn, Stumble upon, Pinterest, Delicious, Reddit, Blogger, Digg), CSS3 animation. Looks great on fashionable, personal and kids blogs. Easy to add and no configuration necessary, let’s see how it looks like and how to add it in Blogger blogs; read on-

Bottle Caps style: Social sharing widget below posts in Blogger

Preview-

Live Demo- (here you go)

How to add-

Optional Step: Back up your template first!

• 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

Mandatory Step:

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

• And find (using Ctrl+F or Cmd+F) this line-

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

• You may find this code phrase twice, ignore first phrase, after second phrase paste these codes;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*www.crawlist.net CSS starts*/
p#ks-socialicons img { margin-top:20px; float:left; display:inline-block;
-webkit-transition:all ease 0.5s;
 -moz-transition:all ease 0.5s;
  -o-transition:all ease 0.5s;
   -ms-transition:all ease 0.5s;
    transition:all ease 0.5s; border-radius:50%; margin-left:5px; height:50px; width:50px;}
p#ks-socialicons img:hover {margin-top:10px; box-shadow:5px 5px 3px 3px rgba(0,0,0,0.3); opacity:.8; border-radius:50%}
/*www.crawlist.net CSS ends*/
</style>
<center><p id='ks-socialicons'><!--www.crawlist.net sharer starts-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/r36x6u" title='Share on Facebook'/></a>
<a expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank'><img src="http://goo.gl/wkkgPE" title='Share on Twitter'/></a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/CgvClq" title='Share on Googleplus'/></a>
<a 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;'><img src="http://goo.gl/5F6TMU" title='Share on LinkedIn'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/ANRgzd" title='Share on Stumbleupon' /></a>
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/rZijqM" title='Share on Pinterest'/></a>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/tBBeYc" title='Bookmark it on Delicious'/></a>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/gANStz" title='Share on Reddit'/></a>
<a expr:href='&quot;http://www.blogger.com/blog_this.pyra?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/Evpc8r" title='Blog about this'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="http://goo.gl/egH04s" title='Bookmark it on Digg'/></a>
<!--www.crawlist.net sharer ends--></p></center></b:if>

• Hit ‘Save Template’, and preview your blog for live action.

• [If your template doesn’t contains <div class='post-footer-line post-footer-line-1'> or using HTML5 template] try this way; Search for </article> into template and above </article> paste given codes.

P.S: This widget requires at least 600px width of your Post Footer Area, So you need to increase the width of Post Footer Area, otherwise icons will not appear in one row;

• From ‘Template’ tab, select ‘Edit HTML’

• Search for .post-footer, and within .post-footer’s bracket add width:600px;

like this;

.post-footer { default codes
Width:600px; }

• Save Template

Template Compatibility
This Bottle Caps style social sharing and bookmarking button widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this. Will not appear on homepage.

Last words, How it looking in your Blogger blogsite and if you having any trouble with this widget don't forget to mention. And don’t forget to check out previously published sharing widget you gonna love them too Truck Style, Silver button, Coldblooded etc. Happy sharing :) and stay connected…

Read More

2 Pop Blockquote/Syntax Highlighter for Blogger blog

You maybe already familiar with Blockquotes, in post we often use this option for highlighting text, quote, poem, codes (syntax highlighting) etc. If you are using Blogger’s default themes than you already knew how ridicules default Blockquote looks like. So removing this boringness of this simple quoting option I developed and published a cool CSS3 blockquote few days ago. And here I developed more two, their design inspiration comes from very popular blogsites around web, and these two designs are very fashionable and trendy for any Blogger blogs. Created with CSS, HTML and CSS3, no JavaScript and image used that’s why they are fast loading and do not create any extra request on HTTP requests. They have adaptive design, retina ready and responsive. Let’s see how they look like, how to install ‘em in your Blogger blogs.

2 Popular Blockquote/Syntax Highlighter for Blogger blog

Number 1: Cool minimalistic design, On mouse hover left side of quote change color (Green to Red)
 
Preview:

Live demo: Click Here

Codes for copy:

/*crawlist.net bq starts*/
.post-body blockquote {
        background-color: #151515; 
        color: #fff;
        width:80%;
        padding: 10px 15px 10px;
        border-left:5px solid #0C0;
        font-size:15px;
        font-family:Courier;
        line-height:1.5;
        margin:auto;
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
        -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
          box-shadow: 0px 0px 5px rgba(0,0,0,.50);
        }
.post-body blockquote:hover {
        border-left:5px solid #F33;
        }
/*crawlist.net bq ends*/

Number 2: Super smart designed with curved border, retina ready designed.

Preview:

Live demo: Click Here

Codes for copy:

/*crawlist.net bq starts*/
.post-body blockquote {
        background-color:#333; 
        color: #fff;
        width:80%;
        padding: 10px 15px 10px;
        font-size:15px;
        font-family:Courier;
        line-height:1.5;
        margin:auto;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;}
/*crawlist.net bq ends*/

How to install in Blogger-
All you need to do is embedding these given code into your template, Read on-

• First log into your Blogger, Select your Blog,

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

• Find (Using Ctrl+F or Cmd+F) in to code snippet

.post-body blockquote

• If you found .post-body blockquote delete .post-body blockquote’s all default CSS code (within {bracket to bracket all code}) and replace your desired code into .post-body blockquote’s bracket

• Unfortunately, if your template doesn’t already have .post-body blockquote than search for ]]><

• Above ]]>< copy paste this line with desired codes;

.post-body blockquote {your desired blockquote’s code}

• Than 'Save Template'. And write a post using Blockquote, and check out blockquote in live action.

Compatibility
These custom CSS3 Blockquotes is compatible with all web browsers latest version (except-IE)

So what you think about these blockquote design, how it working on your blog don’t forget to mention. New tricks and widgets will be release soon stay tuned. Goodluck.....

Read More

Add Shareaholic Share button & bar to Blogger/below posts

Shareaholic is one of the most used all in one content sharing platform (like Addthis, Sharethis). The difference with other sharing platform of Shareaholic is;

• Shareaholic has much cooler icons (Eye catchy, trendy and stylish)

• Got all the basic sharing services

• 4 different style of icon appearance (Normal, Flat, Circle and Pop out)

• Shows share counts

• Very customizable (Position, Icon size, Layout, Align, Headline)

• Analytic, Fast loading, Responsive, and optional monetization option

Adding Shareaholic Sharing widgets in Blogger blog is easy, for your consideration setup process of adding
Shareaholic widgets into Blogger blogs written below, read on-

Add Shareaholic Share button & bar to Blogger blog/below posts

 

• Go to Shareaholic, open an account

• Verify and login to your account

• Hit (Add Website) from Website Tools Dashboard page

• Insert your BlogSpot Domain name and site name

• Select platform ‘Blogger’, Content category, site Language, Hit continue

• Next page you’ll see ‘Apps’ option, Turn on ‘Floating Share Buttons’, Click on ‘Setting’ icon

• Now in ‘Layout’ fix Size, Counter, Align, Vertical offset, and services,

• Additionally click on ‘Display rules’, Hit Save Settings

• Now you’ll return to the Dashboard page, Get your mouse over ‘Location’ option

• Select ‘Share Buttons’, In share button page, in Location input type ‘Below post’

• Select your Theme, Headline, Position, Layout, Counter, Align and services

• After all configurations complete, select ‘Save settings’,

• You’ll redirect to Dashboard page, now click on ‘Get setup code’ and

• Log into your Blogger blog on the other tab, select your blog

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

• Search for </head> (using CTRL+F or CMD+F) into code snippet

• Before </head> tag, paste ‘Get setup code’s codes

• Again, Get back to Shareaholic tab, from location configuration, click on ‘</> icon’

• And copy all codes from pop-up page

• And from Blogger’s tab (into code snippet) search for,

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

• You may find this code phrase twice, ignore first phrase, after second phrase paste those codes,

• You may add these codes too, with default codes cause default codes widget will appear on homepage too, re-edit the default code with this codes, like this-

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='your id'></div>
</b:if>

• If you can’t find <div class='post-footer-line post-footer-line-1'> than search for </article>, and paste codes below </article>

Save Template finally, And check your blog out for live preview

Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..

Read More

Simple CSS3 Images Gallery for Blogger

Sometime into Blogger posts, we require to show some images in row. After a mass Image upload, all images shows together without any order and visual effects. That’s why an image gallery widget we should use in those posts. These widgets present images cleanly alongside with effects and increase beauty of posts too. Here such kind of image gallery I presenting to you created with HTML and CSS enhanced with CSS3 animation "transform" property (adds a smooth hover effect to images whereby the image enlarges) and shadow appears. Light weighted, high-end designed and presents images in a stylish way. Let’s see how it looks like, how to add and configure on your Blogger blog.

CSS3 Images Gallery for Blogger

 

Preview-

How to install & apply:
This gallery set up has few steps, read on-

Step 1: CSS Embedding

• Log into your Blogger, select your blog

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

• Search for ]]>< into code snippet (using CTRL+F or CMD+F)

• Before ]]>< paste below codes

/*crawlist.net gallery CSS starts*/
.ks-galleri {height:auto; width:100%; margin:auto; padding:20px 20px;}
.ks-galleri img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
height:150px; width:200px;
}
.ks-galleri img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
/*crawlist.net gallery CSS ends*/

Configuration:
In .ks-galleri img CSS class you will find default gallery images Height and Width, Change the value with your suitable Height and Width, Small resolution will be better; And ‘Save template’

Step 2: Gallery set up

• Go open a “New post” or an existing post,

• Upload some images what you intend to put into gallery

• After upload is done, Switch ‘HTML’ view from post editor (Compose/HTML)

• You will see all uploaded images source codes,

• Locate the very first uploaded image’s code and paste this line,
  

<div class="ks-galleri">

• And locate the very last uploaded image’s code and paste this word,
  

</div>

Configuration:
You may delete Blogger system’s default image HTML rules, Shown in image below, if you don’t remove these code, default configuration of gallery won’t work nicely.

Get back to ‘Compose’ part, and publish the post

So how your images gallery working on your blog and any problem facing with gallery don’t forget to mention, new tutorials and widget will be release soon stay subscribed, Goodluck

Read More