Agustus 2010 ~ Top Score

Senin, 02 Agustus 2010

Page Navigation Widget for Blogger Blog

21.53

Unknown

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.

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

21.39

Unknown

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

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

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

20.39

Unknown

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.

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>

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=''' onmouseover='self.status='free-blogspot-tutorial.blogspot.com';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

20.24

Unknown

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 »

Top Score

s

Senin, 02 Agustus 2010

Page Navigation Widget for Blogger Blog

Blogger Posts Slideshow As News Headlines

Make And Add Stripe Ads In Blogger Like Navbar

Add Google News Widget To Blogger Blog

s

s

Categories

Blog Archive

Popular Post

TOTAL TAYANGAN