Blogger Tips, Tricks, Widgets, SEO

Change Your Website Mouse Cursor

2014-12-19T05:48:00.000-08:00

;
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

2014-12-19T04:10:00.000-08:00

;
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!!!

Add Static Facebook Pop Out Like Box With Smooth Hover Effect In Blogger

2014-12-19T03:50:00.001-08:00

;
Hi guys, I was busy with some work, so I couldn't posted for so long. But, now I'm free. Today, I'm
going to tell you how to add a static Facebook like button. It has a special feature. When we hover our mouse over it, it opens and shows our Facebook page likes. Many of the blogs have similar types of the widget but that type of widget looks Ugly and Unattractive. But, this widget looks much attractive.
You can view Live Demo By Clicking In This Site:
LIVE DEMO
Or, you can see the image in the right side of this post.
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
Click On Layout
Click On Add A Gadget
Select HTML/JAVASCRIPT
Paste The Following Codes There:

<!-- bloggercruzer.blogspot.com !-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.tinyservalfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.tinyservalfbplikebox span a{color: #808080;text-decoration:none;}.tinyservalsfbplikebox span a:hover{text-decoration:underline;}#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}

.fbplbadge {background-color:#3B5998;display: block;height: 200px;top: 38%;margin-top: -85px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0ye_-IqvBddcskpf0wPlXfBP-HDHm0WUmZsh67PYrrlTDL8MKsvvz8r1RTRlny2uSavIeM_cLYN7r2j-tClBA98L8GKXfgHmcOxKhOAk4eKcfixwO6tPCI13hR2MwIS9hLhSYKSbyxyq/s1600/facebook+tiny+serval.png");background-repeat: no-repeat;overflow: hidden;}

/*]]>*/

</style>

<a href=http://www.nischalkhanal.com.np rel="dofollow" target="_blank" ><img src="http://bit.ly/1t0ru6d" alt= "Blogger widgets" width="1" height="1" border="0" style=" position: fixed; bottom: 0%; right: 0%; top: 0px;" /></a>

<script type="text/javascript">

/*<![CDATA[*/

(function(md){

md(document).ready(function(){

var $dur = "medium"; // Duration of Animation

md("#fbplikebox").css({right: -250, "top" : 100 })

md("#fbplikebox").hover(function () {

md(this).stop().animate({

right: 0

}, $dur);

}, function () {

md(this).stop().animate({

right: -250

}, $dur);

});

md("#fbplikebox").show();

});

})(jQuery);

/*]]>*/

</script>

<div class="mdfbplikebox">

<div id="fbplikebox" style="display:none;">

<div class="fbplbadge"></div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/nischalcreation&amp;width=250&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:400px;background:#ffffff;" allowtransparency="true"></iframe>

</div>

</div>
<!-- Ends !-->

Change nischalcreation with your Facebook Page's Name

Finally Save The Template
Check Your Blog

You will see a Facebook Like Box In your Blog. If you have any problems regarding this, Comment and I shall Be helping you.
Happy Blogging!!!

OS X Styled Sharing Widget For Blogger

2014-12-13T06:00:00.002-08:00

;
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. In this post, we will be discussing on Adding OS X Styled Sharing Widget For blogger. Have you ever used MAC OS X. If you have used, you may find a Desk Like Thing where all apps are placed and when we hover on it, it starts to move. The Widget is same like that.
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

<!-- bloggercruzer.blogspot.com !-->
<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEnfuNJjbtZHGqz5Fm7VvAurkb29IGwG5vhUY4_Gwm-BSpGgnvIa494-aZfcfAfi_E_zXPP1IHNMkcmXjmgSjzhzXIVg6bBeHt9BqgT_f3uAL6r42mYC8QDVHzuTA-lBjSx72HaZKMG0z/s1600/bloggertrix1.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>

<div id="sharedock">
  <div id="dock">
  <div class="dock-container">

<div class="addthis_toolbox"> 

 <div class="custom_images">

 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

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. Happy Blogging

Peeling Sticker Styled Social Media Widget For Blogger

2014-12-13T05:52:00.003-08:00

;
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 Peeling sticker styled social media widget for blogger. It 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

<!-- bloggercruzer.blogspot.com !-->
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="http://www.facebook.com/Nischalcreation" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFAj_ah9MrP15pX1O6qhj_AoH3YiTWMHeAU1svf07vwaFpl30gbDrNt1bypAKnz26n3wfermBebAtKF3Fx0xpjh27Qib8WqSxFpL76MbNx-OtV4z1A1GHzO7PN0hRr-MYzTvDheVXsK3T/s1600/bloggertrix-facebook.png" /></a>    
<a href="http://www.twitter.com/Nischalcreation" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWmYfZJ82JT8iiDB0J6EWXgzDSK0IWIohptuQrPUSo5jFfMtdNzy4yqvcccrNsCPrrZyC8J-i8GPIj8fRO3WucAiq14naZcySwYqWca_C7_9Xhb_Ws7J_9btxGKu0PwbqzVRGkuPjCANC/s1600/bloggertrix-twitter.png" /></a>    
<a href="https://www.stumbleupon.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNu1fEdl1OG4ioskZN0Q3qtuLZXR7_EFV7NApCIvB4vLtP7XvHmn3wOeJ-C-tVqzD3aLsC_E3HYx8NkrPTgn-L5lgfxKj9SKUJhHLGw6SPzbgNoSAy3qsKnUhP9IfOQa6pH7g-E4fpub65/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/Bloggercruzer/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzS7yuDpBm-B8kQw1XL8DVZ-RM4z9tSbTkACSi8k164gsqRb5JV5rm1puYwu16PkJsMsQn0pv36uVqal0b9Ck3Qqb0myncrjuv9VyAXZNfFJ6RElL_Al8dSLCKgaqpLVhr92YOh_JEJTR/s1600/bloggertrix-rss.png" /></a></p></center>

Change https://facebook.com/Nischalcreationwith your Facebook Page Name
Change https://twitter.com/nischalcreation with your Twitter Username
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. Happy Blogging!!!

Wooden Style Social Media Widget For Blogger

2014-12-13T05:24:00.002-08:00

;
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

How To Add A Search Box With Speak Now Option For Your Blogger

2014-12-13T01:01:00.001-08:00

;
Hi Guys, Today I'm Gonna Show You How To add Search Box For blogger Which Also Consists Of Speak Now Option. The Speak Now Option Looks like Google Now In Androids. It Helps visitors to Speak and search.
You can view the LIVE Demo By Clicking On this Site;
LIVE DEMO
Or You Can Watch The Picture at the right side.
Now, Follow My Steps To Add This;

Go To Blogger Dashboard
Click On Layout
Select HTML/JAVASCRIPT
Paste The Codes There

<!-- bloggercruzer.blogspot.com !-->
<form action="http://bloggercruzer.blogspot.com/search/" id="searchform" method="get"> <input id="s" name="q" placeholder="Search" type="text" value x-webkit-speech="true" /> </form>

Change bloggercruzer.blogspot.com with your blog's Name

Save The Template
View Your blog

It's Done. If you catch any problems, Comment and I shall Help You
Happy Blogging!!!

Add Smiley Emotions On Blogger Comment Form

2014-12-13T00:39:00.001-08:00

;
We might Have seen Emotions In Differnet Social Networking Sites like Facebook, Twitter,
LinkedIn And Much More. We also have seen it in Blogger Comments. It helps to Impress the author of the blog. We can share our ideas regarding the blog in animated way using those emoctions. So, in this post, we will be discussing on Adding Smiley Emotions. You Can See the LIVE DEMO By Clicking On This Website:
LIVE DEMO
Or, You Can Have A Look At This Picture;

Now, let's Add This. Follow My Steps To Get This;

Go To Blogger Dashboard
Click On Template From Dropdown Menu
Click On Edit HTML
Find This Code </head> Using CTRL+F
Now Add This Code Just Above It

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.BSemoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src=' http://bloggerspicebd.googlecode.com/files/BSEmoticons.www.bloggerspice.com.js' type='text/javascript'/>

After Pasting The Code, Find ]]></b:skin>
Paste The Cide Just Above It

/*Smiley Emotions Widget By www.bloggercruzer.blogspot.com*/
.BSemoWrap {
  background-color:#fff;
  width: Auto;
  border:2px solid#000000;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.BSemoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.BSemoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;

Now, Save Your Template
View Your Blog

If You Have Any Problems regarding this, Comment And I shall be helping you. Happy Blogging!!

Add Social Content Locker In Blogger

2014-12-12T22:12:00.002-08:00

;
Hi guys, today I am bringing you the most fantastic Widget which helps to increase our Blogs traffic
By Sharing. It Is Called Social Content Locker which helps to share our blog to unlock the content. You may have seen related to this content locker in different surveying sites where we must share the page to view hidden text, downloads and much more.
So, lets add this special widget in our blog.

Open your blog account
Go To Blogger Dashboard
Select Your Blog and click On Layout
Click On Template and select Edit HTML
Search For This Code </head>
paste the below code just below the code

<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>

Now, save your template

Now, Follow My another steps

Click On The Blog post where you want to add this
Click On Edit post
Select HTML in place Of Compose button
paste The Code There

<article id="default-usage">
<div class="to-lock" style="display: none;">
       
<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div>

<div style="text-align: justify">
Add Your Hidden Text Here
</div>

<!--Hidden Content Ends (You can Use HTML ABOVE)-->

</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/lock.js"></script>
 
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},

style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},

// twitter options
twitter: {
url: "http://www.twitter.com/nischalcreation",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/nischalcreation",
appId: "408184442589211"
},

google: {
url: "NischalKhanal123"
}
});
});;;;
       
</script>

Now, Change The Following Highlighted Lines

Change Add_Hidden_Image_Here with Your Hidden Image
Change Add Your Hidden Text Here with your hidden Text
Change nischalcreation with your Twitter Username
Change nischalcreation with your Facebook page Link
Change NischalKhanal123 with Your Google plus Username

publish The post

If You Have any problems, Comment and I shall Help You. Happy Blogging!!!

Customize Blogger Subheadings, Minor Headings

2014-12-12T21:46:00.001-08:00

;

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

2014-11-29T00:31:00.001-08:00

;

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

Change Scroll Bar Of Blogger

2014-11-29T00:08:00.001-08:00

;
Hi guys, Today i'm bringing the best tutorial. In this tutorial, we will be discussing on how to change our blogger scroll bar. As we know that the default scroll bar of blogger looks ugly and unattractive. So, we will change the unattractive scrollbar to attractive and advanced scrollbar. You can see the live demo in our blog. We have used the same scrollbar. So, let's add it in our blog.
Follow My Steps:

Go To Blogger Dashboard
Click On Template
Click On Edit HTML
Search The Code ]]></b:skin> using CTRL + F
Paste The Following Codes Just Above It

<!-- bloggercruzer.blogspot.com !-->
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);

Save Your Template
View Your Blog

You can find the amazing scrollbar in your blog. If you have any problems, comment and I shall help you. Happy Blogging!!!

Add A 360° Rotating Effect On Your Blog

2014-11-28T23:17:00.001-08:00

;

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!!!

Add A Light Lantern On Your Blogger Header

2014-11-28T22:53:00.003-08:00

;

After Posting Many Blogging related tricks, let's post something new. In my this post, we will be adding a Light Lantern in our blogger header. This Widget is very attractive and it is easy to paste also. It moves here and there in oscillatory motion and visitor's first eyes catches this. So, as mentioned earlier in this post, we must make our header attractive.

You Can Watch live Demo By Clicking Here:
LIVE DEMO
Now, let's add this cool widget in our blog
Follow My steps to get this on your blog:

Go To Blogger Dashboard
Click on Template and Click On Edit HTML
Type CTRL + F and Search For </body>
Just Above </body> add This Code

<!--  Header Light Lantern By bloggercruzer.blogspot.com -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="0">
<div style="float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144"><param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/><param name="quality" value="High"/><param name="wmode" value="transparent"/><embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed></object>
   </div>
  </td>
 </tr>
 </table>
</div>

After Adding the Code, Click On Save The Template
View Your Blog

After Viewing Your blog, you can find a moving and hanging lantern in your blogger header. If you have any problems regarding this, comment. I shall help you
Happy Blogging!!!

Change Your Comment Style In Blogger

2014-11-27T07:15:00.001-08:00

;

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 Translator Widget With Flags In Your Blogger Blog

2014-11-27T07:01:00.001-08:00

;

Widgets are the things which Helps to customize the blog and make our blog look more attractive than Before. They Helps To Make Our make Our Blog More Popular.

So, guys today i am bringing you a new post Which Discusses About: Adding Translator Widgets With Flags. This Widget helps To Translate The Blog's Language Into the Selected language. It Is The Best Template Of all time.

You can see the Live Demo in Our blogger Sidebar.

Or Watch This Picture Below;

Now, let's add this cool widget in our blog. Follow my Simple steps to add this in your blog:

Login To Your Blogger Dashboard
Go To Layout
Click On Add A Gadget And Select HTML/JAVASCRIPT
Then Copy The Code

<!-- Translate flag BEGIN --> 
<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator--><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/></form><!--Google Flag Translator--></div><span float="right"></span>

<!-- Translate flag end -->
<!-- bloggercruzer.blogspot.com –>

Then Save the File
Save the Template

Now, You can see a translator widget in your blogger sidebar. If you have some problems regarding this or any posts, comment and I shall help You.
Happy Blogging!!!

Add CSS Codes in Your Blogger Blog Easily

2014-11-27T04:19:00.001-08:00

;
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

2014-11-27T03:59:00.001-08:00

;

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:

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!!

Remove Subscribe To Posts (Atom) From Your Blog

2014-11-27T03:38:00.001-08:00

;

While looking our blog in a detailed way, we will find a text below every Page; Subscribe to Posts: (Atom). This text was first used for subscribing like RSS. But, after the advancement of RSS, there is no use of it. This text now only hampers the beauty of our blog. So, in this post, we will be discussing on how to remove it.
Let's Begin. Now, Follow My Steps:

As usual, Go To Your Blogger Dashboard
Click On Template
Then Click On Edit HTML
There Search this Code:

<b:include name='feedLinks'/>

After You find this code, delete it
Save Your Template

Now, your blog shouldn't show this text as in the picture;

If you have any problems, comment and I shall be helping you.

Happy Blogging!!!

Remove Posts With Label in Blogger

2014-11-26T06:59:00.006-08:00

;

Blogger is not only a website of this world, it is a world itself. It helps to connect unknown peoples

of different parts of the world. So, the blogger users are increasing rapidly. Many of the users are beginners and don't know much about blogging. The big problem that most of the blogger users are facing is that when they clicked on a post of label, it shows "Showing Posts With Label ....". You can also see the picture below;

So, in this post, we will be discussing on removing this ugly sentence from our blog. Now, follow my steps to remove it:

Go To Blogger Dashboard
Click on Template and Then Edit HTML
Click Anywhere inside template and search for the following code using CTRL+F

<b:includable id="status-message"></b:includable>

You Can Find That Code. Then After That Click On Arrow On The Right Side Of The Code As Shown In the picture below;

After that you can Find The Following codes inside it;

      <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

Remove All The Codes
Now, add the new codes there

Code:

 <b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Now, Save The Template

After clicking on any labels, you can't find the ugly box. If you have any problems regarding it, comment.
Happy Blogging!!

Where To Find Blogger Backgrounds and Textures For Free

2014-11-25T05:56:00.003-08:00

;

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!!!

Some Best Sites To Find Blogger Templates

2014-11-19T08:43:00.003-08:00

;

Hello guys, in my previous posts, I had mentioned you about the meaning of templates and the way to change blogger template. Now, in this post, I'm writing about the best sites where we can find best

blogger templates. As mentioned earlier, we can find millions of free blogger templates over the internet but we are discussing the best among the best blogger templates website. Some of the websites are:

You Can Find Other templates also. These websites are the best websites from where you can find the best blogger templates. For installing these templates read my this post.

If you want our blog template, contact us via Contact form.

Happy Blogging

Change Your Blogger Template

2014-11-16T08:32:00.001-08:00

;

Blogger Users are increasing day by day. Since, it is a free web hosting site, many peoples including us are using it frequently. Blogger has grown more popular than other web free hosing Wordpress, Webs and others. There are different reasons and features that makes blogger stand out of competition. One of them is template.
like
There are many templates available in different websites in internet. Just Google search it and you can find millions of templates. If you want to create one, you can also view our upcoming posts. But, now in this post, let's continue our topic. The templates that are different from blogger default templates are called Third-Party Templates. You need to Google search the templates and choose the best template you like to download. Now let's change our blogger template.

Get A Template

As mentioned earlier, you can get millions of templates on different websites. Just Google Search "Free Templates For Blogger" without quotes. Then click on a website, choose your preffered template and download it. Then you can get a .rar file after downloading. You must extract it. Look at the below picture to extract .rar file:

Upload A Template

Now it's Time for uploading a template. Follow my simple steps for Uploading A Template:

Go to Blogger Dashboard

Select Your Blog

Click On Template

Then Select Backup/ Restore as in the photo below:

Then Click on Choose File as given picture:

Choose The File inside the extracted folder, and Upload It
Enjoy!!

If You Have Any Problems, Comment And I Shall Help You

Change Your Blogger Favicon

2014-11-16T07:45:00.001-08:00

;
Blogger is famous due to it's many features that makes it more attractive than other free hosting
websites. One of the features of blogger is it's Favicon.
We simply understand Blogger Favicon as the Logo of the Blog shown in Tab Of Browser. We are not wrong but let's see how Wikipedia Defines it.

According To Wikipedia:

A Favicon also known as a shortcut icon, Web site icon, tab icon, Irina or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.

You Can See the Picture of blogger favicon inside the black highlighted box below:

Now I will teach you step wise on changing Blogger Favicon. Just follow my instructions below:

Create A Favicon

Before you upload Favicon, you must create it. If You have already an image that you want to upload as Favicon then skip this step and try on looking the below step, But if you haven't created favicon, you need to create one. There are Many Websites that can create logos and icons. I Recommend you to use these websites:

2. Generate Favicon

You need to generate the Favicon into 16*16 Pixels. If You have already created then you can leave this step. But, if you haven't generated the favicon, then you must read this step. Now, let's generate it. There are many online websites that provides favicon generating facilities. But, I recommend you to use these sites:

3. Uploading Favicon
Now, let's upload Favicon And Put it in our Blog. It's very easy. Follow My Steps:

Go To Blogger Dashboard
Select Your blog and Click On Layout
Click On Edit In Favicon Option In Header of Layout as the below picture:
Then Upload You Favicon
At Last Click On "Save"
Enjoy!!

NOTE: It May take Some Time To Show Your Blogger Favicon. So, keep patience and after few moments it will arrive.

If You have some problems, then comment. Happy Blogging

Add RSS Button In Blogger

2014-11-14T23:21:00.002-08:00

;
In My Previous Post, I Had Mentioned About RSS. So, I'm not going to Describe More About It Anymore. I had also mentioned that I will tell you to add RSS. So, I'm writing this post.
Today, in this post we are going to discuss on adding RSS Button In Blogger Blog.
There are easy steps to add RSS Button. Just Follow These Steps :

Get The RSS Button

You can get millions of RSS button in Search Engines like the followings:

Google

Yahoo

Bing

Or, you can paste the photo below as your RSS Button;

Uploading The Button

After you have downloaded the button, it's time for uploading. You can upload directly from blogger or use other image Hosting Sites Like: Facebook, Picasa, Flickr, etc. Upload the image there and copy the Image's URL.

Adding RSS Button Code

The below Is HTML Code Of RSS Button. Just Copy it:

<a href="http://Yourblog.blogspot.com/atom.xml" title="Subscribe For Free">
<img src="Rss icon URL" style="border:0"/>Subscribe to our blog</a>

Replace the following codes in Red Colour:

Change yourblog to your blog's First URL
Change Rss icon URL into Your Image's URL.

If You have your Own Feed In Google Feed Burner Then Change yourblog URL with your Google Feedburner''s URL.

Adding It In Our Blog:

Go to Blogger Dashboard
Click On Dashboard
Click On Add A Gadget
Click On HTML/JAVASCRIPT
Paste The Code There
Save
Enjoy!!

Happy Blogging!!