Page Navigation Widget for Blogger Blog

Page Navigation hack is now also available in bloggers. As you may be viewing the numbered menu widget below the posts to visit the latest or previous posts. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers also with the help of Mohammad Rias who always come out with these hacks.

Let us see how to add this Page Navigation Menu Widget :

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Now search for </body> and place the below codes before it.

<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;

*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;

*This code determines the number of additional page navigation numbers that will be displayed on the page.

Read more »

Blogger Posts Slideshow As News Headlines

Blogger Posts Random Slideshow As News Headlines or you can say Rotating random posts blogger widget. In this widget all the blog posts of your blog are displayed randomly same way as you see the slideshow of pictures or you see in some news sites which show of there latest headlines as an slideshow of one coming after another.

Some Of Its Feautres:-

1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor
over the post title halts the rotation till mouse moves off the gadget

Visit Here For Its Demo - Blogger Widgets

How to insall the widget:-

Go To Layout > Page Element > Add A Gadget > Html/Javascript

Add the below codes and save it

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://free-blogspot-tutorial.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://free-blogspot-tutorial.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://free-blogspot-tutorial.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"><a href="http://free-blogspot-tutorial.blogspot.com/2010/08/blogger-posts-slideshow-as-news.html" target="_blank">Click Here To Grab This Widget</a>~Design By-<a href="http://www.blogdoctor.me" target="_blank">Blogdoctor</a>.</div>

Just Replace the codes written in Red above with your blog url,with Heading of your widget and your width of the widget.Please dont remove Credits If you use them.

Now after saving it , Drag this widget from sidebar to top of blog posts header , as the same way we dragged the page navigation widget below blog posts box.

If you wanna only Posts title to display in this widget Then use below codes...

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.0em;
overflow : hidden;
white-space : nowrap;
text-align : center;
margin-bottom:40px !important;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
width:600px;
height:40px;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}

#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
#feedGadget2 {
margin-top : 5px !important;
float:left;
width : 440px;

color: #9CADD0;
}
.feedGadget2 {

}
#big {
width : 440px;
font-size: 10px;
}
</style>
<noscript><a href="http://free-blogspot-tutorial.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'BLOG_TITLE',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, horizontal : true,
});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://free-blogspot-tutorial.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<div id="big">
<div id="feedGadget">Loading...</div>
<div id="feedGadget2"><a href="http://free-blogspot-tutorial.blogspot.com/2010/08/blogger-posts-slideshow-as-news.html" target="_blank">Click Here To Grab This Widget</a>~Design By-<a href="http://www.blogdoctor.me" target="_blank">Blogdoctor</a>.</div>

And rest if you wanna change some colors,fonts and all,you have to do it yourself as its impossible to do it for everybody to match your template.
Source:-Blogdoctor

Read more »

Make And Add Stripe Ads In Blogger Like Navbar

Stript add,how to make this stript to add functionality in blogger like navbar is showed at top in bloggers.You must have seen these stripe adds in many bloggers nowadays,as i when started blogging used to see that stripe add in johnchow blog and he use to sell that add for hundreds of dollars.This add will be shown at top of every page and is fixed add as we scroll it remains at same place.

Now i will tell you how to make this stripe ad to work in blogger, as it was designed as an wordpress plugin to be get used in wordpress blogs,but was based on javascipts,so it can be used by bloggers too as it we can use javascripts in bloggers becuse bloggers support javascrits.

Login into blogger with your ID

Click Layout

Click Edit HTML tab

Click Download Full Template and please back up your template first.

Copy and Paste the following css code right above ]]><b:skin>

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAnyQl5QueO-DGrWEuj8hAaXKhMpEzlVPh_tISYu32SON-R60lXYUMIWp0xU2pLZn6u9r46-FfJwJUfjeo0Grh54715hVKkmTf-bNaahyphenhyphenZmTuFTl4XSN6fzgE7v7cY2gul-5cUsJxzaY/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Find this code </head> in your template
Copy and paste the following code right above </head>

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

Find this code </body> in your template ( end of template code)
Copy and paste the following code right above </body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://free-blogspot-tutorial.blogspot.com/2010/08/make-and-add-stripe-ads-in-blogger-like.html' target='_blank'>How to add this srtipe add In blogger,Grab it here ?</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;free-blogspot-tutorial.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlL4mk4R44CBm-a3EOXgd7C6H3HtqsErcSUEPHu23PQtVok5LL65uIaOFkIEsyQRjdiL5YfQ-QqURcpDmiew2AG_sQb0nwDUxOQqXhtsHJpWaeWjDuD8otL5z9iZl07aSrFzgq92sIHMA/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Chnage the lines in green in above codes with yours rss feeds and url and text you want to show.

You can advertise also just by putting any add url and text to it by changing green lines in above codes.

Click Save template
Finish and see the result.

Now when you will see the result the stripe will be shown at the below of your page bottom like this in the blog.Check here for Stripe add demo hack for blogger here.

Now some people want to add this stripe at the top of the page where navbar is shown like this add stripe shown in my another blogger widgets blog.

Now if you want it to be shown above like i shown just above in demo site add below css to your blogger above ]]><b:skin> in place of the css you added to show stripe add below the page.

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

As using this css in place of above css you added as at the beginning of the tutorial not only will show the ad stripe at the top but the design is too different.

I will tell you just one css property in codes to show the stripe at the bottom or the top of the page.

In above codes you will see i have made the word top highlighted in red.Just change it to bottom to show it at bottom of page.thats it.You have done.

I hope now you would have no problem in installing this stripe ad in top and bottom of the blogger.If you have any problem leave your comments i will sort it out.
Source:-o-om.com

Read more »

Add Google News Widget To Blogger Blog

Google news widget in your blog,i am sure you will like this widget by google as you can display any news on any hot topic you want to be displayed on your blog for your readers or supporting the niche of the blog.Just the thing you have to do is select the topic for which you want the latest news or give some tags to them to show of your related news and then select the size and liitle bit cusomizations so as to make it fit in your blog.

If you want latest news to be get displayed in your blog, like i used it below.



Just visit here and customize it according to your blog wants and get the codes.

Then login to blogger go to Layout > Page Element > Add Page Element > Html/Javascript

And paste the codes there and save it.

Read more »

How to Block/Bypass and Remove CPAlead Survey Ad?

I recently saw some great sites killing their visitors by adding CPAlead survey ads. These types of ads can only be skipped after completing a survey. While most of the surveys are scams or requires money to complete, people will get highly irritated out of it. What will happen if it is a very important website? No way other than sitting for hours or spending money to complete that survey… huh?

Here, I’m with a hack to bypass cpalead survey ads using a simple code. You just need to visit the website (that contains cpalead ad) and enter the following code into your address bar. Few dialogue boxes may appear.. click OK and skip everything. after that, everything will be fine.

javascript:(function(){var%20z=["Timeout","Interval"];for(var%20i=0;i<2;i++){var%20x=window["set"+z[i]]("");for(var%20j=0;j<x;j++)window["clear"+z[i]](j);}})();document.onmousemove=function(){};var%20tls={};tls.domain="http://thelostsite.co.cc/";tls.init=(function(){var%20cb=function(){tls.loadBookmarklet("remove_fullscreen_adverts/remove_survey.js",%20function(){tls.fullScreenEnable.init();});};tls.TO=setTimeout("alert(\"It%20appears%20that%20host%20could%20not%20be%20reached%20:(\\nPlease%20try%20to%20use%20the%20bookmarklet%20again%20later!\\n\"+tls.domain);",10000);var%20a=document.createElement("script");a.type="text/javascript";a.src=tls.domain+"bookmarklets/interface/scripts/common.js";a.onload=cb;a.onreadystatechange=cb;document.documentElement.firstChild.appendChild(a);})();

*Please use Mozilla Firefox for perfect working.

Please comment your views. Let me know if you’re making use of this trick.

Read more »

Link Exchange

Hi, you all must be knowing the importance of backlinks and its impact on your blog's traffic. Here I start the link exchange programme for this blog.

If you want to display your link here, just place link to my blog and comment here with your blog rul, I'll check whether my link is place or not, and if placed , will immediately place your link here.

Read more »

Newspaper Style First Alphabet In Blogger Posts

Newspaper Style First Alphabet In Blogger Posts,Now Write in newspaper style i.e magazine style in blogger posts as with first alphabet with big font and size as you may be seeing in many blogs.As for example you daily read newspaper the article starting always have an first alphabet big,that is what your post would look like in blogger too.It make syour posts looks really good and beautiful.It has an good effect on readers.The blog posting articles on there blog should use it for sure,to get look proffesional to your readers.Hope you will like this for sure.


Now how to install it is just simple.

Go to Edit HTML and find

]]></b:skin>

Add the below codes before it

.newspaper {
float:left;
color:#000;
background:#fff;
line-height:80px;
padding-:1px 5px 0 0;
font-family:times;
font-size:100px;
}

You can adjust the font size and line height and color also i.e in red in the codes above according to the size of alphabet and color you want to use to adjust looks of your blog.

Now save your Template.

Now got to Setings > Fromatting > Post template

And add the below codes there and save it.

<span class="newspaper">First Alphabet</span>

Now When ever you will start a new post you will get the above codes in edit html tab where you can place your first letter in place of First alphabet.

Or add the above codes manually before starting every post and place your 1st letter in between

<span class="newspaper">1st Letter</span>

I hope you will love this style.Best of luck !!

Read more »

How to use Rss ?

Get an RSS Reader - The first thing you’ll want to do if you’re getting into reading sites via RSS is to hook yourself up with an RSS Feed Reader.

There are many feed readers going around with a variety of approaches and features - however a good place to start is with a couple of free and easy to use web based ones like Google Reader and bloglines. Either one will do if you’re starting out (I prefer Google’s Reader) - as I say there are many others to choose from but to get started either of these are fairly easy to use and will help you work out the basics of RSS.

Both of these feed readers work a little like email. As you subscribe to feeds you’ll see that unread entries from the sites you’re tracking will be marked as bold. As you click on them you’ll see the latest update and can read it right there in the feed reader. You are given the option to click through to the actual site or move onto the next unread item - marking the last one as ‘read’.

The best way to learn how to use either Google Reader or Bloglines is to simply subscribe to some feeds and give it a go. Both have helpful help sections to get you up and running.

Read more »

What Is NoFollow/DoFollow ?

Nofollow is an HTML attribute value used to instruct search engines that a hyperlink should not influence the link target's ranking in the search engine's index. It is intended to reduce the effectiveness of certain types of search engine spam, there by improving the quality of search engine results and preventing spamdexing from occurring.(i.e when using this attribute the hypertext (link embeded in words)on that page will not be followed by search engines to consider it as an backlink from that website.)

This attribute is written as rel="nofollow" . When we add this attribute the link would not be followed by engines as an backlink and will not affect any rankings of that link.

And in reverse when we remove this attribute or didn't use this attribute then all the links will considered as backlinks from the search engines and will affect the rankings of that link in search engine results .

Read more »

What Is Page Rank?

PageRank is a numeric value that represents how important a page is on the web. Google figures that when one page links to another page, it is effectively casting a vote for the other page. The more votes that are cast for a page, the more important the page must be. Also, the importance of the page that is casting the vote determines how important the vote itself is. Google calculates a page's importance from the votes cast for it. How important each vote is is taken into account when a page's PageRank is calculated.

PageRank is Google's way of deciding a page's importance. It matters because it is one of the factors that determines a page's ranking in the search results. It isn't the only factor that Google uses to rank pages, but it is an important one.

From here on in, we'll occasionally refer to PageRank as "PR".

Notes:
Not all links are counted by Google. For instance, they filter out links from known link farms. Some links can cause a site to be penalized by Google. They rightly figure that webmasters cannot control which sites link to their sites, but they can control which sites they link out to. For this reason, links into a site cannot harm the site, but links from a site can be harmful if they link to penalized sites. So be careful which sites you link to. If a site has PR 0, it is usually a penalty, and it would be unwise to link to it.

Read more »

What is Rss Feeds?

RSS Feeds are the syndicated information that are sent through RSS technology from websites to Internet users. Users can subscribe to feeds from a variety of websites, and then new information from those websites is sent directly to them through an RSS reader. It is similar to receiving e-mail. An RSS reader acts like an “inbox” for RSS feeds. Instead of having to check multiple websites for updates, the new information is located in one convenient place. The use of RSS feeds has increased as blogging has become more popular.

Read more »

What is Rss?

RSS is the format used for syndicating web content. The acronym stands for Really Simple Syndications, Real-time Simple Syndication or Rich Site Summary. RSS is a technology that allows websites to distribute new content to Internet users, without the user having the revisit the website. In essence, it is equivalent to a daily or weekly newspaper.

In Simple Words:-

RSS is a technology that is being used by millions of web users around the world to keep track of their favorite websites.

In the ‘old days’ of the web to keep track of updates on a website you had to ‘bookmark’ websites in your browser and manually return to them on a regular basis to see what had been added.

The problems with bookmarking

• You as the web surfer had to do all the work
• It can get complicated when you are trying to track many websites at once
• You miss information when you forget to check your bookmarks
• You end up seeing the same information over and over again on sites that don’t update very often

RSS Changes Everything

What if you could tell a website to let you know every time that they update? In a sense, this is what RSS does for you.

RSS flips things around a little and is a technology that provides you with a method of getting relevant and up to date information sent to you for you to read in your own time. It saves you time and helps you to get the information you want quickly after it was published.

RSS stands for ‘Really Simple Syndication’. Many people describe it as a ‘news feed’ that you subscribe to.

I find the ’subscription’ description helpful. It’s like subscribing to a magazine that is delivered to you periodically but instead of it coming in your physical mail box each month when the magazine is published it is delivered to your ‘RSS Reader’ every time your favorite website updates.

Read more »

What are Bloggers?

Someone who keeps a blog is a “blogger.”

A person who posts entries in blog is called a “blogger”

Bloggers- Bloggers is the blanket term for anyone that uses a blog to post information on topics that are of interest to them. Becoming a blogger is actually simpler than it might seem. As blogging has grown in popularity, many website offer platforms to quickly and easily create a blog.

Some of the most popular blogging software platforms are Blogger, Livejournal, Typepad, Wordpress and Xanga. These websites will host your blog, generally for free, and provide you with the tools to create blog posts without having to know a lot about software.

Read more »

What is Blogging?

Authoring a blog, maintaining a blog or adding an article to an existing blog is called “blogging”.

Blogging is a way of collecting links to webpages and sharing thoughts and ideas with people online.

Individual articles on a blog are called “blog posts,” “posts” or “entries”Blogs are typically updated daily using software that allows people with little or no technical background to update and maintain the blog.

Read more »

What is Blog?

A blog is basically a journal that is available on the web.A blog is a website in which items are posted on a regular basis and displayed in reverse chronological order. The term blog is a shortened form of weblog or web log.

To put it as simply as possible - a blog is a type of website that is usually arranged in chronological order from the most recent ‘post’ (or entry) at the top of the main page to the older entries towards the bottom.

Blogs are usually (but not always) written by one person and are updated pretty regularly. Blogs are often (but not always) written on a particular topic - there are blogs on virtually any topic you can think of. From photography, to spirituality, to recipes, to personal diaries to hobbies - blogging has as many applications and varieties as you can imagine. Whole blog communities have sprung up around some of these topics putting people into contact with each other in relationships where they can learn, share ideas, make friends with and even do business with people with similar interests from around the world.

Blogger.com says:

"A blog is a personal diary. A daily pulpit. A collaborative space. A political soapbox. A breaking-news outlet. A collection of links. Your own private thoughts. Memos to the world."

Read more »