navigator page for bloggers 2

Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17DJvI4W_HUrjow0Bkw-IMY7hnk3a6nOi8zGJfYSKFvdokZ2JZM6VTrMVGH3kN2iq2IBd49v1ieZRGFe6i0HXTloHviS1qIHRrTfh6uXP5AI7Ezt82AaHfTvBUCtdgQC2qE5eSzchauE/s400/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17DJvI4W_HUrjow0Bkw-IMY7hnk3a6nOi8zGJfYSKFvdokZ2JZM6VTrMVGH3kN2iq2IBd49v1ieZRGFe6i0HXTloHviS1qIHRrTfh6uXP5AI7Ezt82AaHfTvBUCtdgQC2qE5eSzchauE/s400/wp2.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17DJvI4W_HUrjow0Bkw-IMY7hnk3a6nOi8zGJfYSKFvdokZ2JZM6VTrMVGH3kN2iq2IBd49v1ieZRGFe6i0HXTloHviS1qIHRrTfh6uXP5AI7Ezt82AaHfTvBUCtdgQC2qE5eSzchauE/s400/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}

.,

STEP #3

Now find (CTRL+F) this code in the template:

</body>
And immediately before it, paste this code:

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'></script>

.,

Edit the number 7  on the code below to follow the number of posts on the front page of your blog.

Now click Save Template

UPDATE:  I updated some of my posts, this post I update click this link........

How Add META TAGS to Blogger(blogspot) blogs

Meta search tags may not be as popular as they once were, but they are still important. Especially if you are running a website or blog and want to make sure that search engines can easily find your site and give it a good indexing. Though it's true that meta search tags are not the only factor in high search engine optimization, they still play a vital role. However, many people who utilize a Blogger blog find it difficult to add meta search tags. Here's how to add them to your Blogger blog.


1.Sign in to your blogger dashboard-->click the 'Layout' button[see the screenshot below]



2.Click on the 'Edit html' tab



3.Find this code:

<b:include data='blog' name='all-head-content'/>

4.Now add below code just after the above code.Look at below:

<meta content='DESCRIPTION HERE' name='description'/>

<meta content='KEYWORDS HERE' name='keywords'/>

<meta content='AUTHOR NAME HERE' name='author'/>

Replace,

DESCRIPTION HERE:Write your blog description
KEYWORDS:Write the keywords of your blog
AUTHOR NAME:Write the author's name(Your name)

Now click Save Template

UPDATE:  I updated some of my posts, this post I update click this link........

New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:

UPDATE:  I updated some of my posts, this post I update Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar........

STEP 1


Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.
Then download the present template as a backup.
Now find [CTRL+F] this code:

</head>



Then immediately ABOVE / BEFORE it, paste this code:


<!--NEW-MUTITABBED-STARTS--><link href='http://dsai.588.googlepages.com/tabcontent.css' rel='stylesheet' type='text/css'/>
<script src='http://dsai.588.googlepages.com/tabcontent.js' type='text/javascript'>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->


Now click Save Template, and

Click on "Page Elements" tab.


Then click on "Add a Gadget", and select it as "HTML/JavaScript" type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

Code Here:


<h3>Demo #1- Basic implementation</h3>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>


Code Here:


<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

With Auto-scrolling tabs...


Code Here:


<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>




Now click Save

Loading Time Indicator

Hey blogger! This is another cool blogger gadget to your blog. " Loading Time Indicator" is a small and clear blogger gadget. It's indicate your blogger loading time. i'll have a many loading time indicators. but here you can get good loading time indicator gadget! so it's very easy to add your blog. please follow below steps. congrates!


1.Login to your blogger Dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<!-- INSTALL LOADING TIME INDICATOR By www.bdlab.blogspot.com:------>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */

var startTime=new Date();

function currentTime(){
  var a=Math.floor((new Date()-startTime)/100)/10;
  if (a%1==0) a+=".0";
  document.getElementById("endTime").innerHTML=a;
}

window.onload=function(){
  clearTimeout(loopTime);
}

// End -->
</script>
<script type="text/javascript">
<!-- Begin
  document.write('This page took <span id="endTime">0.0</span> seconds to load.');
  var loopTime=setInterval("currentTime()",100);
// End -->
</script>

<!-- Code End www.bdlab.blogspot.com ------>

4. Now Click On Save 'JavaScript' You are done....

Blogger New Feature: Share Button !!

Share buttons is an essential tool to promote and after a long time Blogger has launched share buttons for blogger in draft. It seems Blogger is slowly implementing some essential features to help bloggers to blog better and its good for many who are not good at coding. So no more coding needed and lets welcome a world of simplicity.

Now, here is a sample way to showing the Share Button into your Blog Post Title. Lets go to see...
1. Login to your Blogger account.

2. Now go to the Design>Page Elements.

3. Click the Edit from the Blog Post Below. Look The Picture below....

4. Checked the Show Share Buttons

6. Then click the  Save  button



7. Now, Refreshing your Blog & see the result.


Here is a Problem, if the Share Button was not appearing below the post title, and then here running a different process of showing the button. This is below...

1. Go to Design>Edit Template.

2. Then Click Expand Widget Templates

3. Add this line anywhere you want the widget to appear

<b:include data='post' name='shareButtons'/>

Normally, in most templates, you can add it after this line..


<p class='post-footer-line post-footer-line-1'>

If you don't find that above line in your template....
Find this one.


<p><data:post.body/></p>

and add this code after that line..

<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>





Note: If you are using a Magazine style Blogger template, you can find the <p><data:post.body/></p> line TWO TIMES. Just try in both placesand find out which one is working then remove the other one.

Now click Save Template

If you still do not see the Share Buttons on your blog, make sure you activated the feature by going to Blogger Dashboard --> Design --> Click the „Edit“ button of the Blog Post section.

4.     Finally,Save Template& refreshing your blog.

     Happy Blogging...

Free Automatic Backlink for Blog and Website

Free Automatic Backlink for Blog and Website
This is a free, fast, and simple immediate automatic backlinks for optimizing your web page on search engines result.Everyone knows how important backlinks are to getting a good rank . Here we offer a backlink free and fast for your sites.free auto backlinks this website offer free auto backlinks service for blogger or web owner who want to get instant backlink for their blog or websites. We know how important is SEO to increase traffic, pagerank, and alexa rank.

build your blog empire and automate your backlink with www.24work.blogspot.com

How Free Automatic Backlink for Blog and Website works :

1. Copy the html code below AS IS (no change needed).
2. Paste to your sidebar, single post, header or footer.
3. To start build and generate backlink, just click the button banneranywhere in your new post or old post.
4. You can build backlink as many as you want, no limitation and restriction, but no spam ! Goodluck

Free Automatic Backlink for Blog and Website


If our Tutorials have helped you a little, then kindly spread our voice using the badge below:-

Copy this html code to your website >>


<!-- Dont edit this code or it will not work --><a target="_blank" href="http://24work.blogspot.com/" title="blogger widgets"><img border="0" alt="blogger widgets" src="http://safir85.ucoz.com/24work-blogspot/com-backlink/24work.gif" /></a><!-- End http://24work.blogspot.com-->




<!-- Dont edit this code or it will not work --><a target="_blank" href="http://24work.blogspot.com/" title="blogger widgets"><img border="0" alt="blogger widgets" src="http://safir85.ucoz.com/24work-blogspot/com-backlink/24work.gif" /></a><!-- End http://24work.blogspot.com-->




Optionally use this Widget installer to add this link to your blogger blog.

<!-- Dont edit this code or it will not work --><a target="_blank" href="http://24work.blogspot.com/" title="blogger widgets"><img border="0" alt="blogger widgets" src="http://safir85.ucoz.com/24work-blogspot/com-backlink/24work.gif" /></a><!-- End http://24work.blogspot.com-->

Download youtube videos now in MP4 format !

Hi friends`Youtube is a very popular video site in world. youtube handled by google. so today i'm gonna give you cool youtube video downloader to website/blog site. you cannot download youtube Videos directly, so we want a 3rd party website to download this videos, but today you can use this gadget to download youtube videos easially, please read the following steps.Thank you.


1.Login to your dashboard--> Design- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.


<script src="https://sites.google.com/site/bdlab12/javascript123/ytdwid.txt" type="text/javascript"></script><br /> <a href="http://bdlab.blogspot.com/2010/06/free-automatic-backlink-for-blog-and.html"><img border="0" alt="Download youtube Video" width="5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioC-d-WGfVvC5w6TNuqA7ddWjdIcGwLMKCQYlh9-wH3_SoeCo62DUIXb1prt1JtUKJTuYVy0YqswMl3_CRD1vMhzQE6wsL1cqJz2TEKjhggB-nHBgxQhegJYl-GtIWDwkSuQaP4CcNNV0D/s1600/blank.gif" height="5" /><br /> </a>



200 pixel Mini Version


This size is perfect to embed on the sidebar.








To install this 200 Pixel "Download Youtube Video" Widget on your blog/website just copy and paste the below code:-


<script src="https://sites.google.com/site/bdlab12/javascript123/ytdwid.txt" type="text/javascript"></script><br /> <a href="http://bdlab.blogspot.com/2010/06/free-automatic-backlink-for-blog-and.html"><img border="0" alt="Download youtube Video" width="5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioC-d-WGfVvC5w6TNuqA7ddWjdIcGwLMKCQYlh9-wH3_SoeCo62DUIXb1prt1JtUKJTuYVy0YqswMl3_CRD1vMhzQE6wsL1cqJz2TEKjhggB-nHBgxQhegJYl-GtIWDwkSuQaP4CcNNV0D/s1600/blank.gif" height="5" /><br /> </a>


After the Download ?
Update: Once downloaded rename the file with extension .flv (eg somename.flv)
Updated: You can download also in mp4 format, most devices such as ipod, mobile phone support mp4 format !

To view the FLV files You need a FLV player, there are tons of free flv player available such as

http://applian.com/flvplayer/index_martijn.php
http://www.download.com/FLV-Player/3000-2139_4-10505954.html?tag=lst-0-1

You can even use VLC player !