Blogger Tips

Happy New Year 2012 Balloons Widget

The 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

See Previous Widget:-New Year Countdown Widget For Blogger
See Also: Snow Falling Effect Widget For WordPress and Blogger Blogs

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!

Goto WordPress Dashboard > Appearance > Widget and Drop a Text Widget to Sidebar
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

By Ammar Ali 1 Comment

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

Go To Blogger > Design
Choose HTML/JavaScript widget
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 below code to your sidebar widget and you have done.

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

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>

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 Add Stylish Breadcrumbs Navigation In Blogger

By Ammar Ali 9 Comments

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.

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.

Backup You Template Before we add Breadcrumbs in Blogger

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!

Make a Blogger Blog Dofollow to get lots of Comments

By Ammar Ali 16 Comments

This post is related to my previous post about How to Remove Blogger Navbar Making a Blogger blog Dofollow is a nessecary thing if you want to get lots of comments. Peoples only comments on those blogs who are Dofollow like our’s. Because they need Backlinks for their blog which improve their Rankings. If your blog is Nofollow than these are only comments not back links so people will not comment on your blog. Making a blog Dofollow will increase SPAM in your comments so you need to check all comments before publishing. Well, To make a blogger blog Dofollow is not a difficult just follow following steps..

To Make Blogger Blog DoFollow

Just follow following simple steps

Step 1:

Go to blogger Dashboard > Edit Html > Expand Widget templates and search for

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

or just

rel='nofollow'

Step 2:

Remove

rel='nofollow'

from step 1
Step 3:

Click on SAVE TEMPLATE and that’s all. Now your blog is Dofollow and will get lots of comments with SPAM