Happy New Year 2012 Balloons Widget

Happy New Year 2012 Ballons WidgetThe year of 2011 will be over soon, and We countdown to welcome the year of 2012, to say a Happy New Year 2012 with a new spirit, the new breakthrough for everything to be better, yes we hope so. I now comes with Happy New Year 2012 Balloons Widget. It is just like we have posted for Christmas Snow Falling Effect in earlier post.

Live Demo

How To Add Happy New Year 2012 Balloons Widget To Blogger

1. Login to Blogger
2. Dashboard > Design > Page Elements. Then you click “Add A Gadget”
3. Now you choose “HTML/Java Script”
4. Now copy and paste the code below to widget box

<img src="https://allbloggingtips.com/wp-content/uploads/2011/12/Widget2-Happy-New-year-20121.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://allbloggingtips.com/wp-content/uploads/2011/12/Widget1-Happy-New-year-20121.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

5. Now “Save” the widget, enjoy!

How To Add Happy New Year 2012 Balloons Widget To WordPress

  1. Goto WordPress Dashboard > Appearance > Widget and Drop a Text Widget to Sidebar
  2. Copy And Paste The Below Code Into The Text Widget:
<img src="https://allbloggingtips.com/wp-content/uploads/2011/12/Widget2-Happy-New-year-20121.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://allbloggingtips.com/wp-content/uploads/2011/12/Widget1-Happy-New-year-20121.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
 3.Click on Save Button and check your blog to see

That’s All. See the Happy New Year 2012 Balloons Widget on your blog. Hope you will enjoyed the post.. :)

New Year Countdown Widget For Blogger And WordPress

First of all I would like to wishes you Happy New Year 2012. I now comes with a cool New Year CountDown Widget For Blogger And WordPress Blogs for all Muslims, Christian and others. The countdown widget counts down to 31 December 2011 and in military time format by counting days, hours, minutes and seconds left for the coming New Year 2012  event. It also alerts and wishes New Year 2012 by generating a pop-up once the count down ends.

LIVE DEMO

See Previous Blogger Tutorial >> How Add Animated Favicons To Blogger

Add CountDown Gadget To Blogspot

  1. Go To Blogger > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it,

<style style=”text/css”>

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;

border:5px solid #333333;

border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}

</style>

<script type=”text/javascript”>

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this
var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit==”hours”){ //if base unit is hours, set “hourfield” to be topmost level
hourfield=dayfield*24+hourfield
dayfield=”n/a”
}
else if (this.baseunit==”minutes”){ //if base unit is minutes, set “minutefield” to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield=”n/a”
}
else if (this.baseunit==”seconds”){ //if base unit is seconds, set “secondfield” to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield=”n/a”
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access “Days” left
//Use arguments[1] to access “Hours” left
//Use arguments[2] to access “Minutes” left
//Use arguments[3] to access “Seconds” left

//The values of these arguments may change depending on the “baseunit” parameter of cdtime.displaycountdown()
//For example, if “baseunit” is set to “hours”, arguments[0] becomes meaningless and contains “n/a”
//For example, if “baseunit” is set to “minutes”, arguments[0] and arguments[1] become meaningless etc
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+” days “+arguments[1]+” hours “+arguments[2]+” minutes “+arguments[3]+” seconds left until December 25, 2011 18:25:00″
}
else{ //else if target date/time met
var displaystring=””
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring=”<span class=’lcdstyle’>”+arguments[0]+” <sup>days</sup> “+arguments[1]+” <sup>hours</sup> “+arguments[2]+” <sup>minutes</sup> “+arguments[3]+” <sup>seconds</sup></span> ”
}
else{ //else if target date/time met
var displaystring=”” //Don’t display any text
alert(“HAPPY NEW YEAR EVERYBODY!“) //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr>
<td>
<img style=”float:left; ” src=”http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.png” width=”125px”/>
<h1 style=”color:#289728; padding-top:40px;”>Counting Till 2012 »»</h1><br/>
</td></tr>

<tr><td>
<div id=”countdowncontainer”></div>
<br />
<div id=”countdowncontainer2″></div>

<script type=”text/javascript”>

var futuredate=new cdtime(“countdowncontainer”, “March 23, 2009 18:25:00”)
futuredate.displaycountdown(“days”, formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas’ year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime(“countdowncontainer2”, “December 31, “+thischristmasyear+” 0:0:00″)
christmas.displaycountdown(“days”, formatresults2)

</script>

</td></tr>
</tbody></table>

 

 

Add CountDown Widget to WordPress

Add below code to your sidebar widget and you have done.

<style style=”text/css”>

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;

border:5px solid #333333;

border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;

}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}

</style>

<script type=”text/javascript”>

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this

var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit==”hours”){ //if base unit is hours, set “hourfield” to be topmost level
hourfield=dayfield*24+hourfield
dayfield=”n/a”
}
else if (this.baseunit==”minutes”){ //if base unit is minutes, set “minutefield” to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield=”n/a”
}
else if (this.baseunit==”seconds”){ //if base unit is seconds, set “secondfield” to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield=”n/a”
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access “Days” left
//Use arguments[1] to access “Hours” left
//Use arguments[2] to access “Minutes” left
//Use arguments[3] to access “Seconds” left

//The values of these arguments may change depending on the “baseunit” parameter of cdtime.displaycountdown()
//For example, if “baseunit” is set to “hours”, arguments[0] becomes meaningless and contains “n/a”
//For example, if “baseunit” is set to “minutes”, arguments[0] and arguments[1] become meaningless etc

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+” days “+arguments[1]+” hours “+arguments[2]+” minutes “+arguments[3]+” seconds left until December 25, 2011 18:25:00″
}
else{ //else if target date/time met
var displaystring=””
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring=”<span class=’lcdstyle’>”+arguments[0]+” <sup>days</sup> “+arguments[1]+” <sup>hours</sup> “+arguments[2]+” <sup>minutes</sup> “+arguments[3]+” <sup>seconds</sup></span> ”
}
else{ //else if target date/time met
var displaystring=”” //Don’t display any text
alert(“HAPPY NEW YEAR EVERYBODY!”) //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr> <td>
<img style=”float:left; ” src=”http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.png” width=”125px”/>
<h1 style=”color:#289728; padding-top:40px;”>
Counting Till 2012 »»</h1>

</td></tr>
<tr><td>
<div id=”countdowncontainer”>
</div>

<div id=”countdowncontainer2″>
</div>

<script type=”text/javascript”>

var futuredate=new cdtime(“countdowncontainer”, “March 23, 2009 18:25:00”)
futuredate.displaycountdown(“days”, formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas’ year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime(“countdowncontainer2”, “December 31, “+thischristmasyear+” 0:0:00″)
christmas.displaycountdown(“days”, formatresults2)

</script>

</td></tr>
</tbody></table>

Make these changes to its colors and font if you wish:

  • To change font color of the clock edit color:#289728;
  • To change border color edit border:5px solid #333333;
  • To change the text color edit color:#289728 4. Save your widget and drag it just above your blog posts body.
  • The purple texts can be easily edited to any message you wish to write.

How To Easily Create Animated Favicons And Add It To Blogger

Favicon Demo

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many services which only provide you facility to add image to favicons only. But now you can Create Animated Favicons which will allow you to add image with animating text. I will show you How To Easily Create Animated Favicons And Add It To Blogger.

Steps To Easily Create Animated Favicons?

  • Goto FaviconGenerator
  • And Just goto Bottom of the page. Upload your image which you want to use for favicon and type desire text which you want to make animating You will find all the help at favicongenerator

Favicon Generator Screenshot

  • Hit the Generate Favicon Button and you will be taken to this page,

download animated favicon

Here you will see many images just right click the animated one and save it to your computer.

How To Add Animated Favicons In Blogger

    • Go To Blogger > Design > Edit HTML
    • And Search For <b:skin>and just above it paste the code below,
<link href='ADD YOUR FAVICON LINK HERE' rel='icon" type='image/gif'/>
  • Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
  • Save your template and you are done!

View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed here:>>

Snow Falling Effect With Bells Widget For Your Blog

In this post I have a very cool Snow Falling Effect With Bells widget. You can use to super charge your blog over the Christmas. With just a small piece of code you have Snow Flakes gently falling down your blog. Adding Snow Falling Effect With Bells is very simple and I’m sure it won’t disrupt the readers. Before you add the Snow to your blog you can check out the demo.

LIVE DEMO

Adding Snow Falling Effect With Bells Widget

Adding To Blogger

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

Adding To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

If below code is not working,  please download this code

<script type="text/javascript">

            //Configure below to change URL path to the snow image
      var snowsrc="http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png"
      // Configure below to change number of snow to render
      var no = 15;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";

    ///////////Stop Config//////////////////////////////////

      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;

      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }

      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "   http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png" : snowsrc
      for (i = 0; i < no;    i) { 
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02   Math.random()/10; // set step variables
        sty[i] = 0.7   Math.random();     // set step variables
            if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"  i  "\" style=\"POSITION: absolute; Z-INDEX: "  i  "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" snowsrc "' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"  i  "\" style=\"POSITION: absolute; Z-INDEX: "  i  "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" snowsrc "' border=\"0\"><\/div>");
          }
        }
      }

      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no;    i) {  // iterate for every dot
          yp[i]  = sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02   Math.random()/10;
            sty[i] = 0.7   Math.random();
          }
          dx[i]  = stx[i];
          document.getElementById("dot" i).style.top=yp[i] "px";
          document.getElementById("dot" i).style.left=xp[i]   am[i]*Math.sin(dx[i]) "px"; 
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }

        function hidesnow(){
            if (window.snowtimer) clearTimeout(snowtimer)
            for (i=0; i<no; i  ) document.getElementById("dot" i).style.visibility="hidden"
        }

    if (ie4up||ns6up){
        snowIE_NS6();
            if (hidesnowtime>0)
            setTimeout("hidesnow()", hidesnowtime*1000)
            }

    </script>

<br /> <img src="http://2.bp.blogspot.com/_u4gySN2ZgqE/TQ-G1GVAD3I/AAAAAAAABtw/doqIyU32ngs/s1600/christmas-bells-icon.png" style="position:fixed; top: 0px;left:0px;border:none;"/><img class="aneesh" src="http://3.bp.blogspot.com/_u4gySN2ZgqE/TQ-SkcTSrTI/AAAAAAAABt4/Qqpj5MR3tU8/s1600/christmas-bells-icon-right.png" style="position:fixed; top: 0px;right:0px;border:none;"/><br />

<script> if (typeof bp_onload_queue == 'undefined') var bp_onload_queue = [];      if (typeof bp_dom_loaded == 'boolean') bp_dom_loaded = false;     else var bp_dom_loaded = false;      if (typeof bp_async_loader != 'function') {         function bp_async_loader(src, callback, id) {              var script = document.createElement('script');             script.type = "text/javascript";             script.async = true;             script.src = src;             script.id = id;             /*Check if script previously loaded.*/             var previous_script = document.getElementById(id);             if (previous_script) if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") {                 callback();                 return;             } else {                  script = previous_script;             }             if (script.onload != null) previous_callback = script.onload;             script.onload = script.onreadystatechange = function() {                 var newcallback;                 if (previous_script && previous_callback) newcallback = function() {                     previous_callback();                     callback();                 };                 else newcallback = callback;                 if (bp_dom_loaded) {                     newcallback();                 } else bp_onload_queue.push(newcallback);                 /* clean up for IE and Opera*/                 script.onload = null;                 script.onreadystatechange = null;             };             var head = document.getElementsByTagName('head')[0];             if (!previous_script) head.appendChild(script);          }     }      if (typeof bp_domLoaded != 'function') function bp_domLoaded(callback) {         bp_dom_loaded = true;         var len = bp_onload_queue.length;         for (var i = 0; i < len; i  ) {             bp_onload_queue[i]();         }     }     /*JS gets loaded here */      bp_domLoaded();      /*Loading jQuery Asynchronously */     bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() {          bp_async_loader("http://blogergadgets.googlecode.com/svn/trunk/snowfall.min.jquery.js", function() {}, "bp-snow");      }, "jQueryjs"); </script> <a href="https://allbloggingtips.com/2011/12/22/snow-falling-effect-with-bells-widget-for-your-blog/" target="_blank"><img src="https://lh5.googleusercontent.com/-yPvmBp_p424/TuYsnjeIzaI/AAAAAAAACNY/KrkMl02fzh0/I/snowfall-widget-for-blogger.png" alt="Snowfall Widget for Blogger" /></a>

 

Hope you will like this widget. DO comment if you want to get in touch with me or facing problem with this Snow Falling Effect With Bells!

How To Add Stylish Breadcrumbs Navigation In Blogger

Breadcrumbs or breadcrumb is a navigation used in user interface, typically it appear horizontally across the top of a web page , after navigation, usually below title bars or headers in blog area. You can also find example of breadcrumbs in my blog after navigation. See a screenshot to know what actually are a breadcrumbs.

How To Add Stylish Breadcrumbs Navigation In Blogger

I suggest every Bloggers who are using Blogspot Platform to add breadcrumbs. This help people to easily know about your post and also it helps you in SEO purpose.

Typical breadcrumbs look like this:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

After backing up blogger template Follow below given simple steps on How To Add Stylish Breadcrumbs Navigation In Blogger

Steps to Add Breadcrumbs in Blogger

  • Login to Blogger Dashboard > Design > Edit Html
  • Find Below code

<b:include data='top' name='status-message'/>

and replace it wit this code:

<b:include data=’top’ name=’status-message’/>

<b:include data='posts' name='breadcrumb'/>

#Step 3. Now Find this code:

<b:includable id='main' var='top'>e

 

  • and replace it with below code
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Making It Cool with CSS

To add cool effect to Breadcrumbs follow below steps.

  • Find this code
]]></b:skin>

and replace it with

/* Breadcrumbs Css info @ https://allbloggingtips.com */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;}
]]></b:skin>
To add Hover Effect
  • Insert below code after adding code in above step
.breadcrumbs :hover{
border-bottom:2px dashed #e6e4e3;
background:#f1f1f1;
}
If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.

That’s All. If you are using WordPress Theme than i will publish a article on How to Add Breadcrumbs in WordPress themes. Till keep visiting. Got any problem feel free to comment!