Customize Navigation Scroll-Bar With CSS3

Have you been searching for any thing which can change the design of navigation scroll-bar of your site. You might be wondering that how is it done? You should smile then, because finally you've arrived at the right place.

Changing the look and design of navigation scroll bar is not a hard task now. It's not hard because it can be customized very easily using CSS3 codes and another reason is I've already prepared a small stylesheet that will customize the look of navigation scroll bar whenever you site is opened.

So Here's the code

CSS

::-webkit-scrollbar-thumb:horizontal{height:10px;background-color:#eab92e;}

::-webkit-scrollbar-thumb:vertical{
width:10px;
background-color:#eab92e;/*box-shadow*/
-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.16);  
-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.16);       
box-shadow:1px 1px 4px rgba(0,0,0,0.16);
}
::-webkit-scrollbar{
width:15px;
height:15px;
background:#EBEBEB;/*box-shadow*/
-webkit-box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);  
-moz-box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);       
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);
}

Customize the Color

Replace the codes in yellow color with the any other color codes you want to be displayed in scroll-bar.

Playground For Advanced Learners

Yeah! got it right this is the playground for you by, where you can learn some more advanced things. So what are you waiting for start playing and start learning.

Final Words

Do not forget to show your gratitude by leaving your comments below. And yep this is very small post but I am confident that it has very great content including a mini-playground also for our beginner developers. So play with the codes and start learning the Css thing with me :-)

Continue Reading(...)

by Unknown 1/01/2014 14 comments

CSS Push Buttons Like Css-Tricks

Css-tricks, every css-lover is familiar with this site and also with the owner of this site, that is Chris Coyer. Chris coyer discuss about web-designing and about Css properties in his site, and frankly I admit it that I've learnt lot of new things in his site.

Among them one is the Css 3D push buttons. This buttons are purely powered by Css and they make 3D push effect when clicked on it. But my question is why all the good things happen on other sites only which are not hosted on blogger platform. And while finding the answer to this question incidently I redesigned it specifically for blogspot users. So here we go through the article, we will now add this into your blogger sites.

Enjoy the posts by taking your time and see the fun in this tutorial.

For The Beginner Bloggers

Before diving into deep of the tutorial, first of all you must learn how to imply this button effect in your blogger.

Step#1

Open Blogger dashboard → Template → Html editor 

Now search ]]></b:skin>  and paste the css code of button just before it.

Step#2

In this step you will have to add Html element with class="button", it can be elements such as div, span, button, abbr. To clear your confusion see the below given example and remember the points mentioned.

Example:
<span>Demo</span>
<button>Demo</button>

Remember:
If you want to achieve button effect then you will have to add class='button' to the element which you want to work as push-button.

See The live Demo Working Here

Yeah! I have embedded live demo in my posts, so that you can learn some basics of this push buttons. Remember that without playing with codes you are not going to learn so here is the small playground specifically for you.

 

4 Different Push Buttons

1. Css for Light Blue Button

/* Light Blue Button */
.button {display:inline-block;border: 0;border-radius: 0;outline: 0;font-size: 18px;background: rgb(0, 159, 209);box-shadow: 0px 0px 1px #003F63,0px 1px 1px #0092C0,2px 1px 1px #003F63,1px 2px 1px #0092C0,3px 2px 1px #003F63,2px 3px 1px #0092C0,4px 3px 1px #003F63,3px 4px 1px #0092C0,5px 4px 1px #003F63,4px 5px 1px #0092C0,6px 5px 1px #003F63;color: white;white-space: nowrap;padding: 9px 16px;margin: 0 10px;color:white;position: relative;}
.button:active {box-shadow: 1px 0px 1px #003F63,0px 1px 1px rgb(0, 146, 192),2px 1px 1px #003F63,1px 2px 1px rgb(0, 146, 192),3px 2px 1px #003F63;top:0px;right:-3px;bottom:-3px;}
.button:hover{background: rgb(2, 181, 238);}
.button a, .button a:hover{color:white}
.button:active:after{top:3px;left:3px}

2. Css for Dark Blue Button

.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #4e68c7;box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;
position: relative;display:inline-block;}
.button:hover {background: #3d57b4;}
.button:active {box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;top: 0px;right: -3px;bottom: -3px}
.button a,.button a:hover{color:white}
.button:active:after {top: 3px;left: 3px;}

3. Css For Orange Button

.button{border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #FF6124;box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px #AF3F14,2px 3px 1px #C94921,4px 3px 1px #AF3F14,3px 4px 1px #C94921,5px 4px 1px #AF3F14,4px 5px 1px #C94921,6px 5px 1px #AF3F14;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #FF4700;}
.button:active {box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px;top: 0px;right: -3px;bottom: -3px;}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

4. Css For Yellow Button

/* CSS Button - Yellow */
.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #E6CA00;box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525,2px 3px 1px #D1B832,4px 3px 1px #B19525,3px 4px 1px #D1B832,5px 4px 1px #B19525,4px 5px 1px #D1B832,6px 5px 1px #B19525;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #F3D605;}
.button:active {box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525;top: 0px;right: -3px;bottom: -3px}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

Final Words

There are lots of peoples who might have already written on this topic, but one thing in common among them was they just copied the whole thing from chris coyer and pasted it in their sites, making only little changes to the stylesheet.

But think out of box, like you are the user and have no knowledge of codes and all then what? Even if you don't like the color of the button then also you'll have to use that color, as you have no choice. And that's why I have provided this push buttons in 4 different colors so that our users can choose their respective colors.

Note: yeah in the end I want to tel you that if you need a push button for you with some other color then freely tell me by leaving your comments below, I'll be delighted to help you.

Continue Reading(...)

by Unknown 12/03/2013 Leave a Comment

Numbering Blogger Comments Using Counter-increment Property

Css property counter increment is very handy property, because you can do magic with it like auto numbering sections, divs, list etc. Counter increment is used along with counter reset property. Today we will see some interesting use of it in your blogspot sites.

Beginning the tutorial, let us see how can we use counter increment property to number the comments in your blog. I will detail how to use this property and finally achieve result like this one displayed below.

Screenshot

Step#1

Setting up the counter.

First of all you need to reset the counter at it's base value or I must say you will have to set in the parent element inside which those elements are present which are to be numbered. And this can be done by counter-reset property.

Here we are going to add counters to comments, after seeing the html structure of blogger comments, I found that parent element to which counter-reset property is to be added is ol, means comment are present in the form of lists.

So I added following code given below first in Html editor of my template. You can name the counter-reset with any name, for a case here I've used trackit, you can use any another name also but remember it must be same in counter-increment property also

CSS

.comments ol {
counter-reset: trackit;
}

Step#2

Now incrementing the counter

Now you will have to need to increment the counter. You have this property in the element where counter is be achieved. Like we want to achieve counters in all comments so I have incremented counter in lists in this step see the css code below

CSS

.comments ol li {
counter-increment: trackit;
}

Step#3 : Final Step 

In this step we will call the counters using pseudo-property :before, observe the code carefully below

CSS

.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}

Overall

Overall the whole code looks like this

CSS

.comments ol {
counter-reset: trackit;
}
.comments ol li {
counter-increment: trackit;
}
.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}

Beginners Copy Paste The Code

Beginners must simply copy paste the final code given just above by following the instructions mentioned below.

Open Blogger dashboard → Template → Html Editor

and search ]]></b:skin> (by pressing Ctrl+F)

Now paste the copied code just before it and save your template and then view your blogs comments.

Continue Reading(...)

by Unknown 11/30/2013 2 comments

Labnol Social Media Widget Cloned For Bloggers

Labnol.org was found by Amit Agrawal who is the pioneer for every Indian blogger. He was the person to start a Blogging craze in India and still he rules the heart of every Indian Blogger by his humble and simple nature.

And this quality of his personality reflects well in his blog too. The design of the Labnol.org is very simple albeit it's very attractive. So today we are going to install one very simple but pretty cool CSS3 powered widget in our blogger sites which is inspired from Labnol.org.

Screenshot of Widget

Live Demo

RSS Twitter Facebook YouTube Google+

Step#1

• Open Blogger Dashboard → Template →Html Editor → Add a Gadget
• Scroll Down and open Html/Javascript Editor
• Now paste the below given code in it.

<style>
.SlidingSocial a{float:left;display:inline;margin-right:8px}
.SlidingSocial a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.SlidingSocial  a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1SXHj8mG18oY38eO2ghqwDUsva4nyhgaf_GWOX5v-BDnexLSHGNAnFM_M_6vsK_ieKZKh73E4a5mWETM6HjHM5ssTTkT9orWnMtO5_LZTItSOPAg2HMbqLrRJ9DvhfC8DBx26Pm26VA/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<a href="http://feeds.feedburner.com/trackmyblog" id="iconRSS" target="_blank" title="RSS Feed">RSS</a>
<a href="http://twitter.com/trackmyblog" id="iconTwitter" target="_blank" title="Twitter">Twitter</a>
<a href="http://www.facebook.com/trackmyblog" id="iconFacebook" target="_blank" title="Facebook Page">Facebook</a>
<a href="http://www.youtube.com/" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a>
<a href="https://plus.google.com/+Trackmyblog" id="iconGooglePlus" target="_blank" title="Google Plus">Google+</a>
</div>

Step#2

Now replace trackmyblog with your user id name and you are done.

Final Words

This widget uses sprite images ( Click here to know what is sprite images and how to use it? ). This widget is created by Master Amit Agrawal, so full credit goes to him only. It's the simplest widget ever. We hope you liked this tutorial. Socialize us if you like us

Continue Reading(...)

by Unknown 11/01/2013 Leave a Comment

Social Media Sharing Widget V2 for Blogger

Hey Friends you have seen social media share widget I have been using just below the posts title of my post. So now it's time for you to use this widget in your blog's posts. Well I have not done so much of customization here. I just had used very simple CSS properties to give it a minimal and elegant look. Let's proceed to our tutorial now

Step#1

• Open Blogger Dashboard → Template → Html Editor
• Search for below code in your template.

Html

<div class='entry-header'>

Or

<div class='post-footer'>

• Now add below given code just after the above code.

Html

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

<div id='share-this'>
<h3 class='share_it'>Socialize Us</h3>
<div class='stumble-button' style='float:left;padding:3px 0% 5px 0;margin:0 2% 0 0;'>
<su:badge layout='1'/></div> 
<div class='fb_button' style='float:left;padding:3px 2% 5px 0;'>
<fb:like font='' href='' layout='button_count' send='false' show_faces='false'/></div>
<div class='gplus_share' style='float:left;padding: 3px 1.5% 5px 0;margin: 0 0% 0 0%;'>
<span class='g-plus' data-action='share' data-annotation='bubble'/>
</div>
<div class='gplus_this' style='float:left;padding:3px 5px 5px 0;width:13%'>
<div class='g-plusone' data-size='medium'/>
</div>
<div class='twit_button' style='float:left;padding:3px 0% 0px 0;width:15.5%'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='trackmyblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
</div>
</b:if>

• Now search for </head> and add below code just before it.

Javascript

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;
    li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

• After you have done by adding script code add the following CSS code in your templates skin. i.e. before ]]></b:skin>

Css

#share-this {
background: transparent;
float: left;
width: 94%;
margin: 2% 2% 5% 2%;
padding: 10px 0 3px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;

}

.share_it{
float: left;
padding: 0% 5% 0 1%;
color:#414141;
text-shadow: 1px 1px 0px rgba(241, 241, 241, .5);
}

Continue Reading(...)

by Unknown 10/22/2013 Leave a Comment