Let’s get started!

Go to your account and login

Add gadget and add the following code below

<marquee onmouseover=”this.stop()”
direction=”up” width=”120″ onmouseout=”this.start()”scrollamount=”3″ loop=”true” height=”125″>You HTML Codes here</marquee></div align>

You can adjust height and width and direction.

Here is  a cool hack for blogger.

Enjoy!

Let’s get started!!

Add a Welcome Page To Your Blogger/BlogSpot Blog.

See this hack live at Disqus In BlogSpot blog

Follow the instructions given below to add a similar page to your blog:

STEP #1
Download these files:
leightbox.css
leightbox.js
prototype.js

from CodeBook
and save the files on to your computer.

STEP #2
Upload all three files to your MyDataNest account (registration required)
NOTE: Remember to edit the ‘Access permission’ properties of the folder (at MyDataNest.com) as Hidden (It should not be set as ‘Private’)

Copy the DIRECT LINKS to the files.

STEP #3
Log in to Blogger, go to “Layout” -> “Edit HTML“
and find (CTRL+F) this code in your blog template

</head>

Immediately ABOVE/BEFORE it, paste these lines of code:

<!–Welcome-UnderConstuction-Page-Starts–>
<link rel=”stylesheet” type=”text/css” href=”http://mydatanest.com/files/*****/leightbox.css”/>
<script type=”text/javascript” src=”http://mydatanest.com/files/*****/prototype.js”></script>
<script type=”text/javascript” src=”http://mydatanest.com/files/*****/leightbox.js”></script>
<!–Welcome-UnderConstuction-Page-Stops-HELP-http://bloggerstop.net–>

Replace the links highlighted in RED with the DIRECT LINKS you got in STEP #2

STEP #4
Go to “Layout” -> “Page Elements” and click on “Add a Gadget” and select it as “HTML/JavaScript“
And paste this code into it:

<!———-// POPUP (AUTOLOAD) //———->
<div id=”pop01″>

<div>

<h1>Welcome To My Blog</h1>
<p>A blog by <a href=”http://bloggerstop.net”>BloggerStop.Net</a></p></div>

<a href=”#” rel=”deactivate”>Enter The Blog</a></div>

<!———-// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //———->
<script type=”text/javascript”>
lb = new lightbox();
lb.initCallable(‘pop01′);
lb.activate();
</script>

Change the code highlighted in Purple and RED, and save the widget.

NOTE 1: Remember to place this widget somewhere in the top region of your blog (above “blog posts” widget if possible), to make sure that this widget loads before other widgets.

NOTE 2: Under Construction page is often required in all the pages, but as welcome page is required only in the “HomePage”, so use this tutorial to show the widget only in the homepage.

You can change the background overlay color and transparency by editing the leightbox.css file before uploading it.
Here’s the code you have to change in the leightbox.css file.

div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000; //color default – back
-moz-opacity: 0.8; //opacity default at 80%
opacity: 0.8; //opacity default at 80%
filter: alpha(opacity=80); //opacity default at 80% for IE
}

NOTE: To display this page as entirely different web page, set opacity and -moz-opacity at 1.0 (fully opaque)

Add an UnderConstruction Page to Your Blogger/BlogSpot blog

You may sometimes want to hide your blog partially (or make it inaccessible). Especially when editing any important part of your template, like sidebar or any widget.
So to hide your blog partially temporarily, use the same method as described above, but remove the option to enter the blog. You can do this by using this code in STEP #4

<!———-// POPUP (AUTOLOAD) //———->
<div id=”pop01″>
<div>

<h1>Welcome To My Blog</h1>

<p>A blog by <a href=”http://bloggerstop.net”>BloggerStop.Net</a></p>
<p>This Page Is Under Construction</p>
<p>Sorry For The Inconvenience</p>
<p>Come Back Within An Hour </p>
</div>

<!———-// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //———->
<script type=”text/javascript”>
lb = new lightbox();
lb.initCallable(‘pop01′);
lb.activate();
</script>

Let’s get started.

Although this hack can be used to change all the css elements of your blog (Header, Background image, links colors, font size and style etc.) but to keep this post short and easy to understand I will only focus on Header and Background images.
In any blogger templates, you will see codes similar to these, to change background images and header.

For Background Image:

body {
color: #fff;
background: url(‘http://ANY_WEBSITE.com/DzSPJQXgCBw/BackGround_Image.png’) repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
…
…
…
…
}

And for Header Image:

#header h1 {
background-image:url(http://i38.tinypic.com/HEADER_IMAGE.jpg);
color: #fff;
font: Trebuchet MS;
text-align: left;
}

But generally these elements (“body” and “header h1″) are used only once. So you do not have an option to switch between different background and header images.

But in this hack, we will add more than one background or header elements to the template, although at any moment of time only one background image and/or header image will be shown (of course).
To add different elements, separate .css files will be used.

Now follow these instructions to add similar multiple background and header images to your blog:

STEP #1:
Download these CSS Files:
style_1.css (for background 1)
style_2.css (for background 2)
style_3.css (for background 3)

style_4.css (for header 1)
style_5.css (for header 2)

serversideSwitch.html

As a Zipped File (from Ziddu)

And download StylesheetToggle.js from KelvinLuck.com (Right click and “save target as”)

STEP #2:
Edit the css files, to add your own images.
You may use as many CSS files as you want. To create more css files, simply create new text files, and save them as .css instead of .txt

In stylesheets 1-3, change the image url, like this:

body {

background: url(http://DIRECT_LINK_TO_ANY_IMAGE.jpg) repeat;

color: #333;
}

More instructions to change background image here.
And download more background images from here.

In stylesheets 4-5, change the image url and corresponding height and width, like this:

#header-wrapper {

width:800px;

height: 200px;

background: url(http://i38.tinypic.com/ivyhdc.jpg) no-repeat;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

Edit the code lines highlighted in RED. Save the file.

NOTE: It is NOT necessary to use different files for header and background images. You can make combinatinos of those files too. So in stylesheets 1-3 along with background images you can simultaneously use 3 different header images too. Similarly in stylesheets 4-5 along with header images, you can insert code for background images too.

STEP #3:
Upload all the files to your MyDataNest/HotLinkFiles account (registration required).
Copy the DIRECT LINKS to these files.

NOTE: In MyDataNest, make sure that the folder where you have uploaded these files is selected as “hidden” and NOT as “private”.

STEP #4:
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this code:

</head>

and immediately ABOVE/BEFORE it, paste this code:

<link href=’http://mydatanest.com/files/…………../Style_1.css’ media=’screen’ rel=’alternate stylesheet’ title=’styles1′ type=’text/css’/>
<link href=’http://mydatanest.com/files/…………../Style_2.css’ media=’screen’ rel=’alternate stylesheet’ title=’styles2′ type=’text/css’/>
<link href=’http://mydatanest.com/files/…………../Style_3.css’ media=’screen’ rel=’alternate stylesheet’ title=’styles3′ type=’text/css’/>
<link href=’http://mydatanest.com/files/…………../Style_4.css’ media=’screen’ rel=’alternate stylesheet’ title=’styles4′ type=’text/css’/>
<link href=’http://mydatanest.com/files/…………../Style_5.css’ media=’screen’ rel=’alternate stylesheet’ title=’styles5′ type=’text/css’/>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js’ type=’text/javascript’/>
<script src=’http://mydatanest.com/files/…………../stylesheetToggle.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();

// This code loops through the stylesheets when you click the link with
// an ID of &quot;toggler&quot; below.
$(‘#toggler’).bind(
‘click’,
function(e)
{
$.stylesheetToggle();
return false;
}
);

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$(‘.styleswitch’).bind(
‘click’,
function(e)
{
$.stylesheetSwitch(this.getAttribute(‘rel’));
return false;
}
);
}
);
</script>

Replace links in RED above, with the DIRECT LINKS you got in STEP #3.

Once again, you need not use exactly 5 css files, delete or add code to the above code in STEP #4 according to the number of your css files.

Save the template.

STEP #5:
Go to Layout -> Page Elements and click on “Add A Gadget” and select it as “HTML/JavaScript” type.

And paste this in to it:

<h3>Try Changing HEADER of this blog!</h3>
<center>
<a href=”http://mydatanest.com/files/……………./serversideSwitch.html?style=style_4″ rel=”styles4″><img width=”200″ src=”http://i34.tinypic.com/24vmrv8.jpg”/></a>
<br/>
<a href=”http://mydatanest.com/files/……………./serversideSwitch.html?style=style_5″ rel=”styles5″><img width=”200″ src=”http://i38.tinypic.com/ivyhdc.jpg”/></a>
</center>
<h3>Choose a different Background:</h3>
<center>
<a href=”http://mydatanest.com/files/……………./serversideSwitch.html?style=style_1″ rel=”styles1″><img width=”100″ src=”http://i34.tinypic.com/28vsgef.jpg”/></a>
<br/>
<a href=”http://mydatanest.com/files/……………./serversideSwitch.html?style=style_2″ rel=”styles2″><img width=”100″ src=”http://i33.tinypic.com/282j7ts.jpg”/></a>
<br/>
<a href=”http://mydatanest.com/files/……………./serversideSwitch.html?style=style_3″ rel=”styles3″><img width=”100″ src=”http://i35.tinypic.com/2d12u08.jpg”/></a>
</center>

Change the link highlighted in RED with the DIRECT LINK to the file (serversideSwitch.html).
And use the same “rel” tags in the code above as the “title” tags used in STEP #4.

Add this code:-

Adjust HEIGHT And Width

<div style=”border:1px solid ; overflow:auto; height: 125px; width: 125px; colour: black; background-colour: white;”>&lt;a href=”YOUR LINK HERE”&gt; &lt;img src=”YOUR IMAGE URL” border=”0″ alt=”TITLE”&gt;&lt;/a&gt;</div>

PREVIEW:-

To get started, first you need to backup your Blogger template: Click on ‘Layout’ > ‘Edit HTML’ and then click on ‘download full template’ to save it on your computer. Now perform following steps to a change favicon in your Blogger blog:

1. Click on ‘Layout’ > ‘Edit HTML’

2. Then add following code after <head>

<link href=’Your image link here/favicon.ico’ rel=’shortcut icon’/>

<link href=’Your image link here/favicon.ico’ rel=’icon’/>

3. Just copy and paste this code..


<script language="JavaScript">

imgr = new Array();

imgr[0] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[1] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[2] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[3] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[4] = “http://i43.tinypic.com/orpg0m.jpg”;
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = “#ffffff”;

bgTD = “#000000″;

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = “#666″;

aBold = true;

icon = ” “;

text = “comments”;

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = “#666″;

icon2 = ” “;

numposts = 5;

home_page = “http://schemar-mag.blogspot.com/“;

</script>

<script src=”http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js” type=”text/javascript”></script>

Explanation:

(Edit the values to fit your blog)

boxwidth – Width of the widget
cellspacing – Space between cells (default one is good)
borderColor – Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight – Width and Height of the thumbnail (default are good)
fntsize – Font size of the title
acolor – Color of the title
aBold - you want bold titles? (true or false)
numposts – How many posts you want to show?
home_page : http://schemar-mag.blogspot.com/ (change this to your blog url)

This script is currently hosted in my server ( http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js ).
But, it is STRONGLY Recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

4. Last but not the least.. Save the Changes.

That’s it guys!

Note : Make sure you selected YES in Settings » Site Feed » Full » Allow Blog Feeds

Now i am going to show you how to Hide Label count on blogger

lets see how to hide or remove the Label count in your blogger blog(s)…

1. Sign into Blogger dashboard » Layout » Edit html

Tick the expand widget templates and remove this line from the template..


<span dir='ltr'>(<data:label.count/>)</span>


2. Save the Changes and done!