Tuesday, March 6, 2012

Blogger Help Forum (English) is moving

The English-language Blogger Help Forum (BHF) is moving to a new Google Product Forum, based Google Groups, from 9 March 2012 (that's this Friday).

There's nothing about the change in Blogger Buzz, but they've posted a long announcement in the current BHF, and linked to a Getting Started Guide which shows the base features of Google Product Forums, and an example working GPF-based forum (the one for Google Plus).

Key facts about the change:

Posts from the current forum will not be moved into to the new forum (since most of them refer to the old Blogger interface).
You will need to join Google Groups to use it.
All user levels will reset to Level 1 (presuming not TCs though) - but if they look to make more TCs, your post-history in the old BHF will be checked.
The only way to get a picture with your profile in the new forum is to have it linked to your Google + account. (I tested with an account that's not +'d, these do basic Google profiles that don't include pictures).
The existing BHF will be archived, so the current content can still be found.
(Not sure what "archived" means - probably that write-access to it will be turned off, but read-only access will be continued).
All help-links inside Blogger will go to the new forum, once it's live.
The new forum will be at: https://groups.google.com/a/googleproductforums.com/forum/#!forum/blogger

One fantastic feature of the new forum is the keyboard shortcuts, eg "space" to move down a page. (Bringing back fond memories of the first use-net reader I ever met, back in the days of Vax VMS :-)

Add Css/Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

-> SEE DEMO <-

Let's start adding it...

1. Go To Blogger - Template - Edit HTML

....and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

</head>

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else
                        $('#nav').stop().animate({'opacity':'1'},400);
                });

                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>

4) Now search for this tag:

<body>

If you can't find it, search for this one:

<body expr:class='"loading" + data:blog.mobileClass'>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

6) Now click on the Save Template button and you're done ;)

Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.

Linha Nissan 2013

É curioso notar que a Nissan até hoje não conseguiu deslanchar em vendas no Brasil, e não se sabe o motivo. Seja pelo design que não chama atenção, falta de tradição no país, eles só vieram a vislumbrar alguma possibilidade de mudança nos últimos meses, com a incursão nos segmentos mais baratos feita por March e Versa. Uma das poucas novidades que eles trazem para a linha 2013 é uma alteração nos preços que lhes incluiu, para melhorar o custo/benefício.

O carro-chefe é o moderno March, que agora custa R$ 800 a menos na versão básica, chegando por R$ 26.990, podendo receber dois pacotes de equipamentos, Plus (R$ 27.690) e Conforto (R$ 31.490). Já a versão S sai por R$ 32.890, ainda com o 1.0 de 74 cv. Com o 1.6 16v de 111 cv temos a S por R$ 35.390, a SV por R$ 37.490 e a esportiva SR, com um bonito pacote de acessórios no exterior por R$ 39.490.

Já o sedã Versa procura aliar a extensa lista de equipamentos do March a maior espaço em cabine e porta-malas. Mas a sua novidade principal é incorporar vidros elétricos dianteiros de série desde a versão básica S; esta parte de R$ 35.990. A intermediária SV sai por R$ 40.390 e a SL, de topo, aumentou R$ 400 e chegou em R$ 43.390. Esta última traz um generoso pacote de itens de série, com ar-condicionado, direção elétrica, computador de bordo, sistema de som multimídia e trio elétrico.

Entretanto, os que buscam requinte foram os maiores agraciados com redução de preços. Por mais defasado que esteja, o hatchback Tiida perdeu R$ 3000 no preço da versão básica S, que agora sai por R$ 47.990. Já a SL começa em R$ 54.190 e é a única com opção de câmbio automático, que leva seu preço a R$ 58.190. Enquanto não há planos de chegada da nova geração, ele passou a viver do custo/benefício sem qualquer apelo relacionado a modernidade.

What is blogger and how you can create a blogger blog?

What is Blogger?

According to the Computer Desktop Encyclopedia, Blogger is:
"A Web site launched in 1999 from Pyra Labs, San Francisco, CA (www.blogger.com) that provides the tools for creating blogs (Weblogs). After users select a pre-designed template or create one with their look and feel, every posting entered on Blogger is published to the Blogger page on their Web site automatically. In early 2003, Blogger was acquired by Google. "

So, in simple terms, Blogger is a free site where you can make blogs (a kind of sites) where you can write about everything you want - from personal life to discussing about your political views, or relating your experience in a topic of interest.

How to create a blogger blog?

Go to Blogger.com homepage and click on the "Get Started" button

Enter your Gmail acount details (your gmail address and pasword) and then press "Sign in"

Enter the name you want to appear on your blog - check the "Agree to Terms and Conditions"
Click on the "New Blog" button

web hosting, forum, design, blogger blogspot

Enter your blog title and the address of your new blog, choose a template (Simple Template is more easily to customize, so i recommend you to choose this one) then click on "Create Blog!"

Now that your blog has been created, you can start blogging. That's all :)

Google adsense optimization tips

adsense, what is google adsense, earn with adsense

What is Google AdSense?

Google AdSense is a free program run by Google that allows you to display Google adverts on your blog/website and pays you everytime someone clicks on one of these ads. Just submit your blog to Google for approval and after your content has been approved, you are ready to place AdSense ads on your website. But beware, Google AdSense doesn't approve any sites! According to AdSense policy you are not allowed to do the following things:

1) Do not click on your own AdSense ads by any way.
2) Do not increase AdSense ad impressions with some automating tools.
3) Don’t ask others to click on your ads.
4) Don’t alter the AdSense code other than fonts and colors.
5) Don’t put AdSense code on adult or prohibited content.

Some basic optimization tips can double your AdSense revenue, so i've added a list of some of the best Google Adsense Tips and Tricks for making more money from the Google Adsense program.

Tips to Increase Google AdSense Earnings

1) Place the Adsense ads above the main fold that user can see your ad units without scrolling down on your site. This will increase your Ads Click Through Rate (CTR)

Because browsers and screen sizes vary, Google has created a nice tool that allows you to enter any URL, and check whether you've implemented your ads above the fold.

2) The best performing ad units for AdSense are:

250×250 Square
160×600 wide skyscraper
336×280 large rectangle
300×250 medium rectangle

Use them wisely. I suggest you to place 250 x 250 size ad units at the top of every post and align it at the right or left side of the post content. The 160×600 ad format can easily fit in the sidebar of your blogger blog.

3) You can use the following “heat map” provided by Google to analyze other top performing ad placement slots. You should concentrate on the areas with darker orange color which represents the hot spots of the ads slots. (see in the image below)

blogger blog, what is adsense, google analytics

4) Text ads are good for the first Google Ad unit. I also recommend you to place a 300×250 unit in the sidebar (or somewhere below the fold) – these generally serve CPM based ads and will help you monetize visits from places like Digg and StumbleUpon.

5) Ads placed in-between the content can also perform well. If you have small posts then put ads at the top of the page content. If you have big post then ad units placed at the bottom or middle of the post.

6) Do not use borders to your text ads or use them wisely.

7) To blend, choose the colors that match with the colors of your website: for example if your site background is black, you will put the same background for your Adsense ads. If your links are blue, then select the color blue for Adsense links. If your titles are red, then make your Adsense block titles red.

8) To complement, use colors that already exist on your site, but don't match the background and borders exactly where the ads are placed.

9) To contrast, choose colors that stand out against the background of your site. Contrasting is recommended only for sites with dark background, so we suggest using an ad style with white background, white borders, and blue titles. (google hints)

10) Use link units near the site navigation bar. The main advantages of this placement, are that they can perform well and you don't need too much Ad space on your site. This way, your site looks clean and also, your visitors will be annoyed.

11) Study your keywords and the target ads to these keywords. Usually, Google Adsense crawler searches for the first or second paragraph to target ads to that page so don't forget to add your page-targeted keywords at the beginning of your post.

12) MFA (made for AdSense) sites are websites created around AdSense keywords, and often, these are poor quality sites with little or no original content. Use Allow and block ads feature to block low paying or irrelevant ads showing on your site. And be careful when you're doing this, sometimes one ad unit can give you $0.01 in one country and $1 in other country.

13) Use Google Adsense ad preview tool to view what ads are showing on your site.

14) Many times you can earn you more AdSense revenue from Image search engines than with the regular web traffic. Upload good quality images and use text captions with alt tags to make sure that blog images rank good in Image Search results.

15) Add a search box at the top left region of your blog and use the word "search" in the submit button otherwise visitors might be confused and might not notice it. If you use a second search box, put it at the bottom of your pages.

If you have any other suggestions, write a comment below.
Good luck!

Monday, March 5, 2012

Adding a gadget to your blog, using Blogger's WYSIWYG interface

This article shows how to use Blogger's add-a-gadget tool. It also looks at how you can move a gadget around in your blog, and describes what you can do with some of Blogger's most-popular gadgets.

Gadgets and types of Blogger template

Previously, I've explained what gadgets (ie widget) are, and the advantages and disadvantages of each method of adding one to your blog, and how to add a gadget to a blog with a dynamic-view template.

This artile looks at the details of using Blogger's own add-a-gadget tool, how exactly to use it, and how to change the placement of gadgets in your blog.

This is more in-depth than the dynamic templates article, and applies mainly to blogs with layout and designer templates. The same general approach is used for dynamic template blogs, but they do have some features that aren't discussed here (eg a limited range of gadgets that actually work).

In-post, and HTML-code gadget:

The tool described here lets you put a gadget in any of the "gadget areas" in your blog. The options are a little different if you want to put a gadget right inside a blog-post.

Also, there are reasons why you might prefer to get the HTML-code for a gadget, and install it like you install any other code to your blog. Read more about the reasons for using HTML-gadgets and places to get code that's equivalent to Blogger's official gadgets.

How to use Blogger's Add-a-gadget feature

In post-Sept-2011-Blogger (ie the new UI): go to the Layout tab
OR
In pre-Sept-2011-Blogger (ie the old UI): go to the Design > Page elements tab

The Add a Gadget links on the screen shows you all the places that you can currently add a gadget. Choose which place to add one to to.
(You can make it possible to add gadgets to other places see How to add a gadget above your header, or Adding a new footer section to your template for ideas on how to do this.)

Click the Add a gadget link at the top of the area you choose.

The format of the Choose-a-gadget that opens is being updated to the look like new interface.

I suspect it's not quite finished yet, so the it may look a little different to what's shown in this picture.

But the main contents should be the same.

Choose a gadget from the list, or one of the tabs:

You may need to scroll down the list to find the one you need.

Do not use the search tool in the list to find the gadget that you want - it sometimes doesn't work correctly and only shows gadget from 3rd parties and not the official ones from Blogger.

Every gadget in the list has a source: some are from Blogger.com. Some are from other recognised companies (eg Amazon.com), But some are from individuals, just like you and me. The danger with using a 3rd party gadget from this list is that you have no way of looking at the code behind it, so you cannot decide if it's safe or not.

I recommend only choosing gadgets from Blogger.com, or other well known companies.

Select the gadget by clicking the small blue plus sign

beside the name.

This opens the gadget configuration screen, where you enter the details of how you want the gadget to work.

Every gadget needs different details.

For example, in the Popular Posts gadget, you must choose

to list popular posts since statistics started, or the last 7 or 30 days
whether to show the image thumbnail
whether to show the post snippet
how many posts to show

When you have entered the parameters, click Save.

This takes you back to the blog-layout screen. The new gadget is at the top of the list of gadgets in the area where you put it. If you gave it a title, then this will show up. But if you left the title blank, the screen just shows the gadget type.

Use the Preview button to see what the front page of your blog will look like with the gadget added.

Change the position of the gadget if you want to (see the next section if you need help with this).

Once you are happy with the gadget and its position, click Save to apply it to your blog.

How to change the position of a gadget:

You can move a gadget (new or existing) into any place in your blog-layout that you can add a gadget to. In the Layout (Design > Page elements) screen:

Single-click on the gadget and hold the mouse button down. Keep holding it down.
Dragging the mouse moves the gadget to other places, including further down the list of gadgets currently in that space, or into a totally different part of the blog.
Once the gadget is in the place where you want it to be, let go of the mouse-button.

Once you are happy with the position of all the gadget, click Save (in the old Blogger) or Save arrangement (new Blogger) to apply the new places to your blog.

There are other things that you can do with gadget, too, including only show them on the Home-page, and making a gadget that looks like a post.

What can Blogger's gadgets be used for

Some of the most popular gadgets provided by Blogger are:

Labels	Lets your readers pick a category and see a list of posts from your blog with that category.
Popular posts	Shows the most-frequently read posts from your blog
Pages	Similar to Labels and the linked-list gadget, this one can show a list of either Pages from your blog or external sources, and it can also be used to make a menu bar for your blog
Blogroll	Highlights other blogs that you follow
Picture	Shows a picture, of your choice, which can link to somewhere as well.
RSS	Displays the last few posts from an RSS feed - this can be any feed that you choose - not just your own one.
HTML/Javascript	Lets you add code that came from a 3rd party, or that you wrote yourself, without having to edit your template.
Link List	A general-purpose gadget for adding a list of web-sites and blog pages, either inside or outside your blog.

Showing a gadget on the home page only

How to edit your blog's template

Options for adding gadgets to your blog

Adding a gadget above your header

Adding a new footer section to your template

Sunday, March 4, 2012

Add Social Bookmarking Buttons near Adsense Ads

The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive.

Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg.

How to add this widget:

1. Firstly, login to your Blogger Dashboard and go to Template and then click on the Edit HTML button
(don't forget to make a backup of your template)

2. Search (CTRL + F) for the following tag:

]]></b:skin>

3. Paste the following CSS code just above it:

.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK9B_vSVhioCPkoQ2md0XASNYo7s3rjZrzoky7v5Nqp-hGQhWz77Ty1w455Z_3zYrHVl9qz0tux7knvYyjkCyNcUTHw0nd07iNExQyRra-iAkI6lLWlJ25k6MdGSp5mQDKi1C5IgSKtqjk/s1600/technorati.gif) no-repeat;}
.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNbSIXTFmqUDhUhD5SgYiCFpmIshRZRSKwuhXdlDUBivua_KFnkEzaQTRlcrSB2i0P6e4iRkaim5xsV3QCXqVP4dRVLoKaRzKrZrvckClkGkoly_KkN7FgvkWplAKOLIoweUq4DL3PUPE/s1600/facebook.gif) no-repeat;}
.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOLYe8VHVM3WINUqWM70U6BrwC1p1Ok_8ngQW9xaRfV8I4Tv3gSzHshdEx-2nknMsSLlEej13pKKMU7En8yWweQZFhncu2UJMnfDs1ow1xNf0DmJ4RUM_J_79j6ohd6WVFe4tyz2rx-srO/s1600/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrjp3xmU0CSkauzr9zUyWSa6kv3heolMfSsRHI59zg3fOqhMhP0XbPqvoCTCxI4Nt-spit0jv0-gAQEWt1hbXDQVRdLxLxU2NA_25NMFezz0T2T0uKZ8komilDy5I3Ws082PY9XiXdFRkQ/s1600/delicious.jpg) no-repeat;}
.mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDvtYKKRwUEBKesQOsYdHg10jBYQhiY5GKPsHQHv6XoRMpFXCU33okKTWCt_fQuFNoQu1G5ymomPuU-uoJgiI1hF35tJAoy5zpTzgmBQHekYqnspCh7xQcEKkC7oi0lVBBwMlqBHtGGkj/s1600/stumbleupon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIf-p7CXhux_M1TqVnCnxZ5pmnusJeS6sNDVovM1YtT9jFzJIGORl5OONOXFwup5ImSBeCO0PJfFVc8meQTKQT9nUtG2EcMtkYKAT3eFBeYYcAD8B1SfM_rOI7HVnK_b4lWyuav_2ifTIr/s1600/Digg.png) no-repeat;}

4) Now search - using "CTRL+F" - for the following line:

<div class='post-body entry-content'>