Awesome Capsule Type PureCSS3 Menu Widget

Click to Enlarge

How this Menu Works ?

This menu works with Css3. This menu requires Modern browsers for Its Background Support, Because those radial gradients works only with prefixes in some browsers, Though i've added prefixes but still this fails to work, then let me know about them.

Live Demo [ Yellow Only ]

Watch Live Demo of Yellow Menu.

Let's Start

# How to add this to your blog ?
# First open blogger dashboard,
# Navigate to template,
# Click on edit Html,
# find ]]></b:skin>
# If doesn't work Read Adding External CSS Code to Blogger Blog
# Now just above that code Paste Below written CSS code,

.cbtnav
{
width:965px;
margin:0px auto;
padding:10px;
}
.cbtnav li{
  display:inline-block;
}
.cbtnav a
{
  height:30px;
  width:130px;
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  text-decoration: none;
  color: rgb(143, 0, 0);
  text-transform: uppercase;
  display: inline-block;
  text-shadow: -1px 1px 0 rgba(255, 0, 0, 0.14);
  text-align:center;
  font-weight: bold;
  text-align:center;
  border:none;
  border-radius:35px;
  margin: 2px;padding-top:9px;
  -webkit-transition: all 0.12s linear;
  -moz-transition: all 0.12s linear;
  -o-transition: all 0.12s linear;
  transition: all 0.12s linear;
  -webkit-transform: translate3d(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow:0 6px 3px rgba(0,0,0,.3);
}
.red a{
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
color:yellow;
}
.black a{
  background:-webkit-radial-gradient(top center, black, #B3B3B3);
  background:radial-gradient(top center, black, #B3B3B3);
  background:-moz-radial-gradient(top center, black, #B3B3B3);
  background:-ms-radial-gradient(top center, black, #B3B3B3);
  color:white;
}
.minimal a{
  background:-webkit-radial-gradient(top center, white, #C2C2C2);
  background:radial-gradient(top center, white, #C2C2C2);
  background:-moz-radial-gradient(top center, white, #C2C2C2);
  background:-ms-radial-gradient(top center, white, #C2C2C2);
  color:black;
}
.blue a{
  background:-webkit-radial-gradient(top center, #0047FF, #00E0FF);
  background:radial-gradient(top center, #0047FF, #00E0FF);
  background:-moz-radial-gradient(top center, #0047FF, #00E0FF);
  background:-ms-radial-gradient(top center, #0047FF, #00E0FF);
  color:white;
}
.yellow a{
  background:-webkit-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-moz-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-ms-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
}
.cbtnav a:hover
{
opacity:0.8;
}
.cbtnav a:active
{
box-shadow:none;
  -webkit-transform: translate3d(0px, 7px, 0);
  -moz-transform: translate3d(0px, 7px, 0);
   transform: translate3d(0px, 7px, 0);
  -ms-transform: translate3d(0px, 7px, 0);
  -o-transform: translate3d(0px, 7px, 0);
}

# Now save template.

Menu Styles

# This menu has 5 ready styles to use within., Just follow the steps.
# After saving template, navigate to layout, Click add widget, Select html/javascript
# Now copy the below html code with instructions given below.

<ul class="cbtnav yellow">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
</ul>

Now Modify These Things

-+- Change all Yellow background texts with Link location,
-+- Change all red background texts with Link names Respectively.
-+- Change Black background text with Color styles you want in menu [Only Blue,Red, Black, Minimal,Yellow] will be available.

Welldone! You've Made it!

You're done adding the menu, If any problem is there then sure to inform me in comments below.

More about → Awesome Capsule Type PureCSS3 Menu Widget

Awesome Social Sharing Widget For Blog

Click to Zoom

Live Demo

Live Demo is in this blog at post footer, you may find and share within few clicks!

How it Works ?

 This widget working with Pure CSS, And not containing any Javascript or jQuery code.

How to add ?

1. Open Blogger Dashboard
2. Navigate to Template
3. Click on Edit Html
4. Tick Expand Widget Templates
5. Search For ]]></b:skin> And just Above it paste below Code.

.scial a
{
  text-decoration:none;
  color:rgba(0,0,0,.5);
}
.scial
{
display:inline-block;
  transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
cursor:pointer;
margin:10px 0px;
width:50px;
padding:0px;
height:50px;
font-size:22px;
color:rgba(0,0,0,.5);
text-shadow: 1px 0 0 rgba(0,0,0,.2);
}
.scial:hover
{
padding-right:160px;
}
.scial > span
{
font-weight:900;
display:inline-block;
text-decoration:none;
color:rgba(0,0,0,.5);
margin:5px 7px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
}

.scial:hover > span
{
transform:scale(1);
transition:0.5s linear;
-webkit-transform:scale(1);
-webkit-transition:0.5s linear;
-moz-transform:scale(1);
-moz-transition:0.5s linear;
-o-transform:scale(1);
-o-transition:0.5s linear;
-ms-transform:scale(1);
-ms-transition:0.5s linear;
}
.fbs
{
background:#5A5AFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwL1ODoKkgkZHJwGzDgXw1vckubzbqINZl4I3AuNwg2kUlGz6X6cO9x_moD_V2a8Vd7qrzrF0L6IeUPs_9SeYlr67U56yRPpoly6oLPVltrdQSsU7XlMV4lwv-j2vchAIFN89uczy3WM/s1600/facebook.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.fbs:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #5A5Aff;
border:1px dashed rgba(0,0,0,1);
}
.gp
{
background:#FF4949 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Yk0nwjhVYkWnJcPp83Jvdq5J7Ne2R2zStbez8Yj3MIdAOULbIFK_Qm54dgzmZcpfSl1qaYvCb8EjIzuzmUXzIwgThtHWCinlfZ5w2726Ahv8O_l3YQszimpmcARb0arqmjNVvXfCW9s/s1600/gplus.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.gp:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FF4949;
border:1px dashed rgba(0,0,0,1);
}
.tw
{
background:#00EBFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYo1FUMKJA7A46wRisOBYohK8nKZqAFLCKkXueNgDM97-UCXQFHsGFbxlftJyhgIx0dcq5aTCo3xXZkanNtLphieGWoT69T-g8Fjn2dtGn1uGVdpX4qnY8rlON75Jp2NqryriojnVLoNY/s1600/twitter.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.tw:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #00EBFF;
border:1px dashed rgba(0,0,0,1);
}

.st
{
background:#FFB6B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-NVP7RQOVwSKmQurANcZzi9yTUkjuX-S1_TpeBd1reGKlpWQTGSDnhkl3GvHr6nduc8oeC020FPTTDR1DGPROO0e6MByvEg1LKsHL-0lq5EwkAK8A033XJPMdLpXcRsjhEGKxJO7CFI/s1600/stumbleupon.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.st:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FFB6B3;
border:1px dashed rgba(0,0,0,1);
}

6. Now Search for <div class='post-footer'> And paste the below code just below it.

<em>Share This Post, If You Find This Awesome</em><span><a href="http://creative-blogging-tips.blogspot.in/2013/03/awesome-social-sharing-widget-for-blog.html" style="float: right;">Powered By CBT</a></span><hr/><div class='scial fbs'><span><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'>Facebook</a></span></div>
<div class='scial tw'><span><a expr:href='&quot;http://twitter.com/home/?status=Check this out: &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'>Twitter</a></span></div>
<div class='scial gp'><span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + &quot;en&amp;url=&quot; + data:post.url' target='_blank' title='Share On Google Plus !'>Google+</a></span></div>
<div class='scial st'><span><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Stumbleupon</a>
</span></div>

7. You're Almost Done Adding this widget, but if you want to add this to starting of the blog posts, then add last code above <data:post.body/>.
8. If still any problem persists then Ask in comment.

More Widgets
Responsive Footer for Blogger
Setting Up Linkwithin On Your Blog(Direct Install)
Recent Comment Widget

More about → Awesome Social Sharing Widget For Blog

Responsive Footer for Blogger

Footer For Website

Blogger giving us many features like Widgets, Footer, Comments etc.
But if we put a footer different then other, It'll look awesome and different .
You can see how it'll look in image.
It's only by Purecss and html not javascript, jquery or etc.
So now going to learn how to put footer in blog or website.

1. Go to your blog Layout Tab .
2. Then press on Add a gadget . 
3. Select HTML/JavaScript .
4. Give title which you want and click on content and paste below code.

CODE

<center>
<div class="d1">
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZtPCoOdJrCTSist-jU8Kw2zHYqDNSenzWup_PPwzLgkjDb0yUMTIJ7ATvNc7FSqjmDBdIgJvUQuwhdIKkRfaBNCRl7lcj7atmwfh0tGRkiw81NarvMuNyuGMNESlLkFvPOYu4QbnAes/s1600/about_button.png" class="img1" />
</a>
<br />
About
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2hNVK2WtcqwaHqoqcoO1UOjqfF6jE2n0iZbMhsAywAHHIvxJGznEaTjobnqYnIt1PN4BRdSUex7WeUAmpMPtfQyA7An63RBRZuoUJkILh5z2EpxHCK4V3kx3hhL2j4v78bxsDfxR2uk/s1600/Write-For-Us.png" class="img1" />
</a>
<br />
Write for us
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEaC7QTaqVFbqdYJdxSK6qgDUa4DEc4Zqd2JhcNjHcJAu4atR6UEgZD7IlWaF-M70KvM6FuzcbJ_DdCp_2BTxq-iACmG4ehuDPqTgG6YJ7X1HcUONbk7b2bnNakVUTuKZHiemVjEC-9Y/s1600/Newsletter.png" class="img1" />
</a>
<br />
Newsletter
</div>
<div class="foot1">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-pb4vxjsK7BNA2oim22fddE7Ta5Na8ylwrXPsSGbIkTXVY-oOC74eOAT8WKwzhUg8WyaRUfBrIY1DvFCs7NnRwjRFoqYB5SpbUcoLiGrLqBDoghu9hjMItB0wKuIUW37ERtevGtlxVpY/s1600/Our_blog.png" class="img1" />
</a>
<br />
Our blog
</div>
<div class="foot2">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7AqzYRRiczIoIHTUpxDjX2sb9f9-NQ3AHbdbYMOHLhhGtb30Vn3kINr7h0jea1peSo0OX6Hgn8Xx4CBbc2T7LYQILdrUeQNXKJ2E0e5R8JPsb3vFd3AXMe55qU0i29NlOj5X7trZ5eo/s1600/Advertise.png" class="img1" />
</a>
<br />
Advertise
</div>
</div>
</center>

5. Then save it and then Go to your blog Template Tab .
6. First Back up your template.
7. Then click on Edit HTML and Find (CTRL + F) for ]]></b:skin> .
8. Paste this code before (above) ]]></b:skin> .

.d1
{
  margin: 10px;
  background: #fff;
  display: inline-block;
  border: 5px double #00d; 
  padding: 5px;
}
.foot1
{
  display: inline-block;
  border-right: 3px double #666;
}
.foot2
{
  display: inline-block;
}
.img1
{
  height: 150px;
  margin: 10px;
  opacity: .5;
  transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
}
.img1:hover
{
  opacity: 1;
}

9. And don't forget to put this gadget in last means go to Layout tab and drag this gadget to bottom , above attribution gadget.(As shown in image)

Click to Enlarge

10.  You can modify link location as per your needs (highlighted with yellow color in html code).

So now you've done this and if any queries or any suggestion please comment or send us at wishbox.

More about → Responsive Footer for Blogger

Must have widgets for your blogger blog

Blogger have many widgets its own but some are also from third party, But here is an list of some widgets from blogger and non-blogger owned widgets that should be on your blog for spicing up your blog, Many blogs have widgets that are toOoOoO lazy to load..., visitors hate that type of widgets,

So let's start with some essential widgets...,

Search Box

Search box widget is really essential to let everyone find some on your blog what they're looking for...,
Google custom search provides search result in your blog, so you can put google custom search box in your blogger blog as a widget, or inside a menu(Right Float Search Bar).

Social Information Box

Are you on facebook ?, Are you on Google ?, Are you on twitter ? then why shy to say infront of visitors, Go and link your social account in your blog, Make your blog available on social media(If You're Opting Out..),Like Box,twitter tweets are available to easily embed in your blog.

Popular Post Widget

Popular Post widget is a widget available by blogger to use within your blog directly with thumbnails,links and etc.., It is really cool widget that displays your popular post based on views of the post in selected timeframe in widget.

You Might Also Like Widget (Related /Featured Post)

Related post widget is really nice widget to show related post with every post footer, this widget may increase visitors visiting post related to each post currently read by visitor. This widget is really nice and easy to install it on blogger,Related Post Widget.

Menu / Navigation

What does your blog have, show off in your menu, categories, labels and pages(About page And Contact Page),This menu will be helpful for visitors to find what they're looking for...

Followers Gadget

Followers gadget is being less popular as blogger blogs are being connected to google+, but still its really cool feature known as GFC(Google Friend Connect). This widget make your blog feed available for readers who join your blog.

Subscribe By Email

Make your post feed available for email subscription for visitors, It may increase your reader and visitors.

Missing ?

If you find this post has missing some widgets then Drop your review in WishBox.

More about → Must have widgets for your blogger blog

Create Simple Recent Comment Widget

This is how it Looks

You can create Recent Comment Widget with easy simple steps,

How does it look like ?
To make this,
Follow these Steps,

First,
go to,
Blogger Dashboard >> Layout,

Then Click on add a widget And Add feed Widget (Look in Image below)

Now in box , widget will ask to enter feed url,

Now add this url into that

http://YOURBLOG.blogspot.com/feeds/comments/default

Replace highlited text with your blog url

Now Click Continue,

You can choose,

Name, Comments you want to show and Modification (Show date, Comment Author etc...)

Now SAVE the widget,
You're Done,
take that widget on layout where you want to show widget,
And save template,
Ask us in comment, if problem persists!!!!!!!!!!

More about → Create Simple Recent Comment Widget