Change Your Website Mouse Cursor

;
Hi guys, It's me again and today, I'm going to show how to change your blogger mouse cursor. The
default cursor of blogger looks unattractive as it is the default cursor of your OS. but, after you customize the blogger cursor, it looks amazing.
Now, let's add it in our blog
First of all, you must get a cursor. I recommend you to go to this site to get cursor. Now, let's add it in our blog:

• Go To Blogger Dashboard
• Click On Template
• Select Edit HTML
• Search For This Code: ]]></b:skin>
• Paste The Following Codes There

body, a, a:hover ,a:visited { cursor: url(Cursor Url), progress; }

• Change Cursor URL with the selected cursor URL
• Save The Template
• Check Your Blog

Now,your blog has a new cursor. If you have any problems, feel free to ask me.
Happy Blogging!!!

Change Selected Text Color To Red In Blogger

;
Hi guys, in this post, we will be knowing how to change the selected text color into red in blogger.
The default Selected Text Color of blogger is blue and Most of the blogs do not have customized color selected text. So, if we add this in our blog, our Blog looks unique. So, let's add this in our blog.
Now, follow my steps to add this in your blog:

• Go To Blogger Dashboard
• Click On Template
• Select Edit HTML
• Search For This Code : </head> using CTRL+ F
• Paste The Below Code Just Below </head> 

<!-- bloggercruzer.blogspot.com !-->
<style type="text/css"> ::selection {background:#cc0000;color:#ffffff;} ::-moz-selection{background:#cc0000;color:#ffffff;} code::selection {background: #333333;color:#ffffff;} code::-moz-selection {background: #333333;color:#ffffff;} pre::selection {background: #44ceff;color:#ffffff;} pre::-moz-selection {background: #44ceff;color:#ffffff;} </style>
<!-- Color Code Ends !-->

• Save The Template
• Check Your Blog

Now, your blog has a new selected text color. If you have any problems regarding this, Comment and I shall be helping you.
Happy Blogging!!!

Wooden Style Social Media Widget For Blogger

;
We have seen different social media widgets in most of the blogs. A blog without social media is an incomplete blog. For making a blog complete and more advanced, social media is highly required. So, in this post, we will be discussing on adding social media widget for blogger. We will be adding Wooden Styled social media widget. This looks much attractive.
For Live Demo, you can click below Link:
LIVE DEMO
Or you can watch the picture on the right side.
Now Let's Add This. Follow My Steps To Add This:

• Go To Blogger Dashboard
• Click On Layout
• Click On Add A Gadget
• Select HTML/JAVASCRIPT
• Copy and paste the given codes there

<style>
/* bloggercruzer.blogspot.com*/

a.social-icons {
 margin-right: 5px; 
height:45px;
width:45px;
}

a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); 
}   height:45px;
width:45px;
</style>

<a class="social-icons" href="https://facebook.com/Nischalcreation"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpbsBu9qVFs5DEOR37bTd5vsjteTKJniqC-Py1JzE1SQ5A4WlrKV843xZU9abxqtkeTLIHjmT7Q0WmloLTzyUCYdUmIhkdik6O9ftGEhlLNoJUmu5zsJ40vIPC3SKn123mgUGEXFDdwk/s1600/btrix_facebook-icon.png" /></a>
<a class="social-icons" href="https://twitter.com/Nischalcreation"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ob2hBQlmYiKZtOqldK_jxO36mULW16LQAgQB7ORQhQyY5nAXh14UD5N2ffMX2ECYCxVXX9rO4ZsEKF43ae30-TuSU-iWqyV5mAbE5L7UtgtMHn0EGzrG0RhnI3GrleYuiUSKezA70zE/s1600/btrix_twitter-icon.png" /></a>
<a class="social-icons" href="https://digg.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbJE9_ERZuE2kv6tHizlzgOUPpyrxO7gw0_mTUsgTtN7f365LxTkmujbHLx6M1_KErQBg_qqEcixq-54CJLZxKVwF8STuKP0e-S1pY6GUD26xJ-fL6z8GMHXNvSLb3GNVwVIK8nDTN8M/s1600/btrix_digg-icon.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/Bloggercruzer"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijM4uO3NMDyoxj3KeSeID2DsQuu9aEsj9LyAMhknUe-UWVPMyeuDxhyphenhyphenqlE1QMpel914QJtl-YpsEKSOcMmTeuH8MUvA2tQF9W9KHdaF1fBcD52fcVYTuLNcs4NKVseC-On3fqL6m2EFxM/s1600/btrix_rss-icon.png" /></a>
<a class="social-icons" href="http://stumbleupon.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7m1lsetddlrPsw3m6u_WL4JsieOjc16KFmqJvd3fR-phZ1Mb_DmIKpj_XAunxwsM_XGUwj3cCVq2LLuaK1o2kwncu2B18F-Ds7_bPZRr0sZMmOx1GWQt2jlnEUFoUuR8Fa5OK6Fq7s9E/s1600/btrix_stumble-icon.png" /></a>

Change https://facebook.com/Nischalcreationwith your Facebook Page Name
Change https://twitter.com/nischalcreation with your Twitter Username
Change https://digg.com/userId with your Digg User Id
Change http://stumbleupon.com/username with your Stumbleupon Username

• Save The Gadget
• Save The Template
• Check Your Blog

All Done. If you have any problems regarding this, Comment and I Shall be Helping You

Customize Blogger Subheadings, Minor Headings

;

Hello Guys, you have seen different websites where you can see a subheadings which actually looks
different to the headings than other blogs. Most of us want such headings, subheadings in our blog. 

So, in this post, we will be discussing on Changing our blogger Subheadings, Minor headings
If you want to Look Live Demo, Click On Live Demo Below:
LIVE DEMO

Now, Let's add it in our blog. Follow my Simple steps to get it in your blog;

• Go To Blogger Dashboard
• Select Your Blog and Click On Template
• Select Edit HTML
• Now, Search For This Code ]]></b:skin> using CTRL+F 
• Paste The Code Just Above It.

Code For Blogger Sub-Headings

/**Subheading by www.bloggercruzer.blogspot.com**/
.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigEj8AULjRVaIE1T6WyPmnTViUYR9aV1Y4oeL_looiD8ZYAVm2fDr0V9hJ73fiHsQb3T7XqGGGoNZZI1hcO72ICY1VgXngtXILiAOuVt9YvD4uhK5swFXzR2xgFa1Enf5_uQFqji6W6sQ/s400/BS%252BPostTitle%252B1.png") no-repeat scroll 4px center transparent;
font-size: 20px;
font-family: "Trebuchet MS",sans-serif;
text-align: left;
font-weight: bold;
width: 570px;
padding: 3px 10px 3px 30px;
color: rgb(165, 165, 3);
border: 3px solid rgb(200, 200, 0);
text-shadow: 0px 1px 0px rgb(204, 204, 204);
border-radius: 60px 60px 60px 60px;
box-shadow: 0px 1px 3px rgb(198, 198, 198), 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1;
}

And This Code For Blogger Minor Headings

/**Minor Heading by www.bloggercruzer.blogspot.com**/
.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEvMzcuAjtCPyjLujWBLY_C5vGdgz3zlvUODs1VylpM7myRi8KPYnOAdGpjI9VxzU5eJNX4NnfQv4X4LEIeQTiwusL-rx3SxiTy1fNpE1ekXjQkIEKoKPWCHaHNGtybkGJljXzXYy798/s400/BS%252BPostTitle%252B2.png") no-repeat scroll 5px center transparent;
clear: both;
color: rgb(102, 45, 45);
font-family: "Trebuchet MS",sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin: 10px 5px;
padding: 6px 10px 2px 40px;
text-transform: none;
text-shadow: 0px 1px 0px rgb(204, 204, 204);
}

• Now, Save The Template
• Enjoy!!

The New Sub-Heading Of your blog must look like this;

THIS IS SUB HEADING 

And The Minor Heading Must Look Like This;

This Is Minor Heading

All Done. If You have any problems, feel free to ask Us.
Happy Blogging!!!!

Add A CSS Badge For Your Blog

;

Hi Guys, today I'm Bringing you a new widget Called CSS Badge Which You Can Use In Your Blog. It Looks Attractive and show Your word while you hover your mouse over it. Today I Am Gonna Show You How To Add Badge For Your Your Blog With Hover Effect Its Very Awesome And won't Decrease Your Blog Speed. Now without delay, let's start this topic. If you want to look at Live Demo, look at our blogger sidebar, we have used the same widget there.

Follow my steps to add it:

• Go To Blogger Dashboard
• Click on Layout
• Select HTML/JAVASCRIPT
• Copy The Code Given Below

<!-- Bloggercruzer.blogspot.com !-->
<style> .BlogTariffCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:translateZ(0);margin:0 auto} .BlogTariffCSSBadge h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out} .BlogTariffCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none} .BlogTariffCSSBadge:before,.BlogTariffCSSBadge:after{border-radius:10%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s} .BlogTariffCSSBadge:after{transform:rotate(45deg)} .BlogTariffCSSBadge:hover:before,.BlogTariffCSSBadge:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)} .BlogTariffCSSBadge:hover > h1 a,.BlogTariffCSSBadge:hover > h1{color:rgba(8,172,233,1)}
</style> <div class="BlogTariffCSSBadge"> <h1><a href="http://www.bloggercruzer.blogspot.com">B.Cruzer</a></h1> </div>

• Change http://www.bloggercruzer.blogspot.com with your blog's name
• Change B.Cruzer  with Your Badge  Name After Hovering
• Paste The Code and Save The Template
• Check Your Blog

You Will find CSS Badge in your blog. If you have any problems, comment and I shall Help You
Happy Blogging

Add A 360° Rotating Effect On Your Blog

;

Hi Guys, It's me Again And Today, I'm Presenting you A Nice Topic That Will make your blog cool and fantastic. It is called 360° rotating effect and it will make your blog rotate upto 360° while reloading or loading. By reading, we are thinking that it may be cool but we all have a choice. At first Look The Live Demo Of the cool widget that we are going to add it in our blog:

LIVE DEMO

After Watching DEMO if you want to add this, follow my steps otherwise ignore this. Let's add it in our blog.

Follow My Steps To Add It In Blog:

• Go To Blogger Dashboard
• Click On Layout
• Click On Add A Gadget
• Select HTML/JAVASCRIPT
• Now, add the code inside the box

<!-- bloggercruzer.blogspot.com !-->
// Bloggercruzer.blogspot.com 
<style> @-BoB-keyframes roll { 100% { -BoB-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ -BoB-animation-name: roll; -BoB-animation-duration: 4s; -BoB-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; } </style>

• After Pasting The Code, Save It
• Save The Layout
• Open Your Blog

Now, while opening your blog, you will notice a rotating effect in your blog. If you have any problems regarding this, comment and I shall be helping You.
Happy Blogging!!!

Change Your Comment Style In Blogger

;

As We Know That comments are the base of the blog. We Can find our solutions, ask queries, talk with admin and do many things with comment. But, as we know that the default comment style provided by blogger is not nice. It Looks ugly.

So, today i'm posting you how to Change comment style in your blogger blog. You Can see the Live demo In our blog or watch the picture below. The Comment box looks like this;

Now, let's add this in Our Blog. Follow My Simple steps to add it in our blog:

• Log in to your blogger account
• Select Template and click Edit HTML (Click on Proceed)
• Find ]]></b:skin> [USING CTRL+F] Or use Alternate Way Of Pasting CSS
• Copy the Code below

comments .comment-block {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6kj_Wy0YvG7jLSfj2oruahmTL4W6B1tPL1RH8pgbpK2Jd786454rEZLQI0jFrOpzT2O2RYtDi7dLeGKjEAePi4AMh1yQLhglqD4MuRCJq7GMArFZ9P03t-uh5me04e_bKKB1umQxx2g/s1600/bg.png") repeat scroll 0 0 transparent;
border: 4px solid #EAEAEA;
border-radius: 3px 3px 3px 3px;
box-shadow: 3px 3px 0 #D6D6D6;
margin-left: 48px;
padding: 3px 10px;
position: relative;
}
#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
.comment-header {
border-bottom: 2px solid #F1F1F1;
}
.comment-block:hover > .comment-header {
-moz-transition: border-color 0.5s ease 0s;
border-bottom: 2px solid #000000;
}
.comments .comment .comment-actions a {
background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
border: 2px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 4px 11px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}

• After Pasting It, Save the template

Now Your blog's Comment Style Looks More Amazing and attractive than before. This Is an easy tutorial. If you have any problems regarding this, comment and I shall be helping you.
Happy Blogging!!!

Add CSS Codes in Your Blogger Blog Easily

;
In my previous post, I had mentioned about CSS in Detail. So, i'm not gonna describe it anymore. In this post, we will be discussing on adding CSS codes In your blogger blog. Mainly, there are two steps of adding CSS codes in your blog. One is easy method and another is hard method. I will teach you both methods to add CSS codes. So, Follow my steps;
Easy Method:

• Go To Blogger Dashboard
• Click On Template
• Click On Customize
• Then Click On Advanced And Add CSS as shown in the picture below;

•  Place the CSS codes in the Text area.
• Save by click on Apply to Blog
• Enjoy

Hard Method:

• Go To Blogger Dashboard
• Click On Template
• Click On Edit HTML
• Then Search For ]]></b:skin>
• Paste The CSS Codes Just Above ]]></b:skin>
• Save The Template

Note: If this method isn't properly used, it can make your template crash. So, be careful while doing it.

These Are The Steps for Adding CSS Codes in your blog. I Recommend you to use easy method to add CSS because, it won't harm your template in any ways. If you have any problems regarding this, comment and I shall help You.

Happy Blogging!!!

Know About CSS

;

You might have seen different posts related to CSS in different Blogs and Search Engines. But, what it really is? We might get confused knowing the real meaning of CSS. But at first Let's Know how Wikipedia Defines the term CSS.
According To Wikipedia:

1. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

CSS Stands for Cascading Style Sheet. Basically, it is a language that helps to design and manage the templates and presentations of the website. CSS is a plain text file format used for formatting content on web pages. With the help of CSS, we can enable different functions that the default websites can't do. We can add diffferent gadgets in our websites, edit fonts and appearance of our website and much more.
If you want to know how to add CSS codes in blogger, read my next post. Till then, bye!!

Where To Find Blogger Backgrounds and Textures For Free

;

Blogger is a vast world for amateures and professionals who have their passions for writing posts in

their own style. It offers us different facilities which helps us to make our blog look attractive. Unlike other free web hsoting like Wordpress, where we must completely design our site before posting, blogger enables us to write and customize our blog and post anytime.

In this post, we will be discussing about changing our blogger backgrounds. The backgrounds offered by blogger looks ugly and it is not attractive too. So, i;m going to present you some websites where we can find blogger backgrounds and textures absolutely free. So, here are some websites:

• Shabby Blogs

Shabby Blogs offers us some unique blogger backgrounds and textures absolutely free. Just choose your desired background and click on "Install Background". It will also  teach how to paste the blogger background.

• Dotty Dot Dot

Dotty Dot Dot is a blog where we can get geometrical type of blogger backgrounds like squares, dots, circles and so on. You must copy the background code of your desired background to add it on your blog.

• CgTextures

CgTextures provides us the real backgrounds of different food items, fire, textures and much more. Their site is full of photos and textures that could be added as a background image with a reduced transparency.

Now let's add these backgrounds on blogger:
Adding Background Image using Blogger Template Designer

If you have default Blogger Template, then Follow these Steps. But If you are using a custom template, skip this steps and read next steps.

• Go To Your Blogger Dashboard
• Click on Dropdown menu and click Template
• Click On Customize
• Once you have clicked on customize, you can see below image. Click on Background.

• Click On The Box Below Background Image and Then Click on "Upload"
• Upload Your Image And Click On Done.
• Clock On Apply To Blog In the top of the blog
• Enjoy.

Adding Background Image on Custom Blogger Template

• Go To Your Blogger Dashboard
• Click on Dropdown menu and click Template
• Click On Edit HTML
• Press CTRL + F Keys To Open Search Blog
• Search For This Code: ]]></b:skin>
• Immediately Before ]]></b:skin> , add The Following Code:

 body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: no-repeat;
background-position: center top; 
background-attachment: fixed;
background-size: 100%; 
}

Change The (IMAGE-URL.png) with your Blogger Background Image URL. Note: the no-repeat value prevents the image from repeating either vertically or horizontally. If you want to repeat the image vertically or horizontally, use background-repeat: repeat-y and background-repeat: repeat-x. If you want to change the background size, change the 100% value to your desired value.
If you are wanting to change the pattern, paste the same code inside CSS codes box.

• Finally, save the Template
• Enjoy..

Now, you have changed your blogger backgrounds. If you have any problems regarding this, comment. Happy Blogging!!!