November 27, 2009

EntreCard Buckets –Amazing Traffic Resource!

Tomorrow is EID and on this beautiful occasion We want to gift Blogosphere with another great Blogger resource entitled “EntreCard Buckets” Which is Fun, Adventure and yet a dream come true for every Blogger!

Did you ever wish to earn 120 EntreCard Credits daily with fun and without wasting time? Did you ever dream to receive 5000 extra monthly visitors or even more than this? Did you ever wish an ever increasing Adsense Page Impressions? Did you ever wanted to become a celebrity Blogger?

If you want to know the answers to all these questions and much more then click the image below to discover this beautiful and most useful blogger resource, which is more fun than you can imagine!

The second image in red link appears on mouse hover and the second image in green link appears when mouse is moved away from the blockquote.

Create Custom Blockquote Of Your Choice!

You can use similar effect by changing the background images, font colors, border colors or background colors etc. The first part in the CSS code above i.e blockquote { bla bla } represents the effect on normal view and the second code i.e blockquote:hover { bla bla } is responsible for the hover effect. So you can easily customize the font and border types and colors along with background colors to create a cool mouse hover effect.

November 22, 2009

Blockquote CSS Examples With Auto Number List –The Notebook Diary!

I shared a tutorial yesterday on 14 amazing ways to stylize Blogger Blockquote and today I have a really interesting and exceptional blockquote for those who write tutorial based articles on their blogs and websites. I have created two blockquotes, the first one has no number list while the second one comes with automatic number list and looks like your notebook diary. The number list starts at #1 and end at #112. Both of these blockquotes can easily be customized to suit your web layout.

So let’s have a look at each one of them first.

Blockquote With Auto Number List:

Blockquote Without Number List:

Liked the difference? Now let’s learn how to add each one of them to your Blogger Blogs.

Adding Blockquote With Auto Number List To Blogger

To add this blockquote to blogger, follow the simple steps below,

Go to Blogger > Layout > Edit HTML

Backup your template

Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

Tip:-Right Click any of the blockquote images below and choose Save Link As Or Copy Link Location to get its image URL.

That’s All!

Note:- If you want to increase the number range for the blockquote with auto number list or if you want to create an image with your custom colours than I can provide you the PDF source file for it. But it will be given to subscribers only. If you haven’t subscribed yet, kindly do so to avail unlimited download resources from us to you.

14 Amazing Examples To Customize Blockquote Style In Blogger!

A block quote or block quotation is an extract in a written document, set off from the main text as a distinct. We all quote great authors but we all must present these great words in an extra ordinary way using a beautiful blockquote. We have created simple CSS codes for around 14 Blockquotes, which are outstanding in look and feel. These blockquotes will give you an idea on how to create your own customized blockquote for your blogs and web pages.

padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left

background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(PasteImage Link here)

font :-It includes font style, size and type respectively. Match the colours with the code above for reference.

color:- This refers to text colour. You can use a different font colour using our color chart

border :- This refers to border width, style and colourrespectively.

All other blockquotes can be customized in similar way.

5. After customizing finally save your template and preview it to see the interesting new change.

I have created all images with text “Copyrighted Coding” or “Scanned Copy” etc. If you want to write something else than use my images as reference size to create your own custom images.

I will publish two consecutive posts where I will share a blockquote with auto number list and a blockquote with a blinking bulb! Make sure you subscribe to be updated about latest CSS and HTML tricks related to Blogger.

November 18, 2009

You must have observed the style of headings in my posts, it’s usually surrounded by two sky blue borders and have a text colour in sky blue. Styling the Headings gives an interesting and attractive look to your blog content. Readers find it more easy to locate a certain portion of your topic with the help of properly customized Headings. Further it will increase your search engine ranking because heading tags produces a really good impression on search engine robots. This tutorial is mainly for Blogspot users but some interesting styling can surely be added to Wordpress. Lets Start!

Customizing Heading Style Using Simple CSS – For Blogspot Users

I have six different Heading styles for you guys. Have a look at the video below,

Now to add one of the above Heading Style to your blogs, do the following,

Make Sure you replace URL OF Side Image with Image Link of your preferred side image. This image can be 45px by 45px in size or even smaller. I have used the following image in the video above –>

4. Now Finally save your template.

Customization and Implementation Of The CSS Code For Headings

Customization:-All the CSS codes above use simple properties which are described below,1. For Changing border width, style and colour edit codes like this one,border:1px solid#0080ffHere 1px refers to border thickness/width and solid refers to border style and the six digit number refers to border colour. You can change border style from solid to dotted or dashed. I like border style to be dotted because it gives a light appearance. You can use our CSS Colour Chart for getting the six digit number for your desired colour2. For Changing Font Size, edit codes like this one,font-size:12pt If you want the text size to increase or decrease than respectively increase or decrease this value 12pt3. To Change Font Colour, edit similar codes like this one,color:#0080ffYou can use our CSS Colour Chart for getting the six digit number for your desired colourImplementation:-Now Whenever you write a heading in your post inside blogger editor, simply add the following pieces of codes next to your heading,

<h4>Your Heading Goes Here</h4>

See a screen shot below,Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively. This can be done both in compose or HTML mode. For Heading Style Surrounded By a Box you will need to add slightly different code as shown below,

<h4><span>Your Heading Goes Here</span></h4>

We only need to add an extra span tag (i.e:- <span>) for the box to appear.That’s All!Note:-Changes Will Not Appear inside Blogger Editor or on previewing. You will only see a bolded black text inside blogger editor. The styling will take effect only when the post is published.

Customizing Heading Style Using Simple CSS – For Wordpress Users

To be honest I really hate wordpress because it has nothing interesting for new web designers like me. It uses complex php script that few understands and also has a complex CSS editing option that has never went through my throat. If you are an expert wordpress user then you can use the blogspot method above to style headings in your wordpress template but if you find it difficult to edit wordpress style sheet like me then you can adopt a simple way as described below. We can only apply three out of six Heading style methods to wordpress which are,

Heading Style with a bottom border

Heading Style with a bottom border and top border

Heading Style surrounded by borders

To apply any of the heading style above, do this in your Wordpress Editor,

In the visual mode of your Wordpress editor first write a heading

Now switch to the HTML mode and enclose your heading with the following code,

The green text is where your heading must lie and the bolded black text is the code that should surround your heading. Now once you have added the codes correctly, simply switch to the visual mode and you will see the heading style in action! See some screen shots below for heading style surrounded by borders,First enclose your heading with html codes above in the html mode,Update:
In the image below I have mistakenly written

November 16, 2009

Best Adsense Ad Locations & Ad Formats To Earn Handsome Revenue

Almost everyone is well aware that adsense really pays! But most people are still disappointed with their adsense revenue despite working hard in writing good content. I had the same feeling but as time passed I became more and more familiar at how Adsense payment mechanism works. Those who think they are smarter than the Adsense Engineers often end in frustration upon deactivation of their adsense accounts. Kindly prefer fair earning and give preference towards writing good content and attracting more and more readers. The true income lies in the number of visitors to your blog. Clicks, Page Impressions will increase once you make a good start with adsense. By good start I mean choosing smart locations on your layout to encourage Clicks and boost up your daily page Impressions.

While deciding an Ad Position Always Ask your selves these questions:-

What is the user trying to accomplish by visiting my site?

What do they do when viewing a particular page?

Where is their attention likely to be focused?

How can I integrate ads into this area without getting in the users' way?

How can I keep the page looking clean, uncluttered and inviting?

By experimenting with certain Ad positions on our blog and by studying various adsense articles we can now confidently claim the best Ad spots for Blogspot and Wordpress blogs. Observe carefully our Monetized Sample Blog Layout below,

Every Blog has four main sections i.e

The Header:- where we display blog title, description and navigation menu.

Post Body:- where we write content

Sidebar:- where we display widgets

Footer:- where we display credits or widgets

We have numbered the best Ad Locations from #1 (best) to #4 (Least Best). The reasons for each location are explained below.

Location #1:-Displaying Adsense Advertisements Below Post Titles

This is the best position to display your ads. We have observed that our blog earning increased tremendously when we decided to display ads below post titles. In fact this is the only spot which is first sight of attraction for every reader.

You can observe that I have displayed no ads below post titles on my homepage but when you enter a specific page the Ad below post title appears. Like this,

This way we keep our layout clean and revenue green :) I will write a detailed post tomorrow on how to add adsense code below post titles, below post body and under navigation menu.

Location #2:- Displaying Advertisements Above Navigation Menu

Now this location is the second best position which is the favourite Ad spot choice for many professional bloggers. The reasons are simple. Firstly because this area is of greatest interest to visitors and secondly because Ads in this area look clean and uncluttered so it won’t annoy the readers at all!

This area will have the highest page Impressions because it appears every where from homepage to archives and individual post pages!

Tutorial on how to add adsense above navigation menu will be shared tomorrow.

Best Ad Formats:-

(728x15) Displays up to 5 linksOR

(728x15_4) Displays up to 4 links

Location #3:- Displaying Advertisements At Right Side Of Header Or On Sidebars

These two locations have their own importance and according to our experiments we have obtained equal results from both these areas. These two areas give the highest page impressions. Again for the same reason that they appear everywhere, may that be your homepage, archive pages or post pages.

Displaying a skyscraper at the sidebar can result in tremendous clicks. A skyscraper if customized well enough can appear just like a part of your blog links. The ads appearing in skyscraper are very tempting, interesting and attractive at the same time. A well displayed and clean skyscraper will always attract a visitor to find the right answer to his query.

Best Ad Formats:-

For Header Right Choose Banner (468 x 60)

For Sidebar choose Skyscraper (120x600) or Wide Skyscraper (160x600)

Location #4:- Displaying Advertisements Below Posts

We gave this area the least importance firstly because the bottom of post is only reached when a reader really enjoys reading your article. Most often readers are in a surfing mood so they would not notice the footer at all. But still we can’t underestimate this area and can expect to get good relevant clicks by displaying the correct ad format as mentioned below.

Best Ad Formats:-

Banner (468 x 60)or

(468x15) Displays up to 5 links

A word Of Advise

Flow of Income from Adsense Requires patience and immense hard work. Give at least up to 1-2 years for income to flow positively. Give more importance to your blog interface and to your content. A good blog content with unfair user interface is equal to an unsuccessful one. Write quality and unique posts. Buy a custom domain and work harder and harder. Don’t try short cuts by making fraud clicks because one can never beat the extra efficient engineers of adsense. If your adsense account is banned for some reasons, your entire blogging career will end in frustration. Think again!

Patience and hard work brings fruitful results.

I wish you have a nice blogging experience by monetizing your blog wisely and smartly. Take care :>>

November 14, 2009

Customize Bullet List Style With Image Hover Effect In Blogger

I recently shared a tutorial of customizing the look of your bullet list and number list and today we will learn how to change the bullet list using the Image Hover effect. Hover your cursor over the bullet list below to see the effect.

Isn’t the image turning blue from green?

Liked it? Now learn it!

This effect is really easy to apply. We only need to apply a simple code to your template. Lets start!

Customization

The bullet image can be aligned horizontally with the text by increasing or decreasing the value 4px. You can change the value to 7px or more or less according to your blog alignment requirement.

You can also replace the bullets above with your own. To get a bullet of your own choice download up to 231 seductive bullets by subscribing to this blog.

Note:- Subscribers have already been emailed the Download copy

Once you have selected your preferred bullet simply upload it to blogger and replace the above two links (Green and Blue) with the URLs of your own bullets. To learn how to save images in blogger, read this post –> Create a Backup For Images in Blogger

Play With The Code!

If you want to try the code before applying it to blogger than use our HTML Editor by clicking the link Below,

November 13, 2009

Customize The Color Scheme Of Wordpress Mp3 Flash Player

Wordpress Audio player is a beautiful mp3 player and thanks to Mindy McAdams we can now actually make it work in blogger and can even change the entire colour scheme of this mini player! I hope you already now how to make it work with blogger if not read this post –> Flash Mp3 Player

Today I will let you know how to change the colour scheme of both versions of these useful mp3 players. Before we may begin check my customized player below,

This tutorial again consists of two parts,

Adding the JavaScript Inside Blogger

Adding The HTML Code For Mp3 Player To Appear

I have already explained both these parts in my previous post but this time we will work only on the second part i.e Adding The HTML Code For Mp3 Player To Appear

The Green part is the portion responsible for the color scheme. View the image below to understand each code,

where,

rightbghover=0x999999& and righticonhover=0xffffff& refers to the color change on mouse hover. The red part in between the green text is the hexadecimal colour code. To change the colors according to your preferences use our colour chart

Customization

This is the most important part and I want your full concentration here. You can observe that the green part is the main portion consisting of 12 options to change the color scheme of the Mp3 player. Once you have finalized all your colors using our CSS Color Chart there is only one thing required to successfully dress up this player. You observe that the green portion of the code looks like this,

I hope you like them. For Using more than one player as I have done read my previous post on Wordpress Mp3 Player

The players that you see above are the first version and if you want to use the second version then simply replace http://mybloggertricks.googlecode.com/files/player1.swf with http://mybloggertricks.googlecode.com/files/player1.swf A second version Player will look like this,

Importance Of Post Title Limit In The Eyes Of Search Engines

If the content of any blog is King then it would not be wrong to say that the Title is Queen. Post titles play vital role in search engine optimization. Each Post that you write has a title and this title is responsible for bringing Traffic to that selected Post Page. Now how do you write a keyword rich and full length title that may take you high on search engine rankings?

Google and Yahoo are indeed the two Mega Search Engines that dominate all others. But for Bloggers Google has more value then Yahoo and we usually receive more Traffic from Google than Yahoo. But We can’t even ignore Yahoo.

Both Google and Yahoo have different limits for Post titles. Google Displays only the first 66 Characters of any title while Yahoo displays the first 120 Characters.

For example,

The following title has 85 characters including spaces,

12 useful Useful Tips and Tricks To reduce The Load Time Of Your Blogger Hosted Blogs

Google Will display it like this,

12 useful Useful Tips and Tricks To reduce The Load Time Of Your……

Yahoo will display it like this,

12 useful Useful Tips and Tricks To reduce The Load Time Of Your Blogger Hosted Blogs

You can see the difference that Google has cropped the title and displays only the first 66 Characters while Yahoo displays the full title. Of course an incomplete or cropped title will not be much attractive to the visitors compared to a fully displayed title.

How Do You Write An Optimized Title That May Look Good In Both Google And Yahoo?

The best strategy is to create a long title consisting of at most 120 characters in order to make sure that the title looks good for both Google and Yahoo. The optimal title should be thought of as consisting of a primary title(for Google) and a secondary title(for Yahoo!). The primary title should consist of no more than 66 characters and your secondary title can be any length up to the point where the full title reaches 120 characters in length. Now lets see an optimized title below,

Now visitors will be able to see the red portion in Google and the Full title (Primary + Secondary) in Yahoo. You will now receive impressive flow of Traffic from both Google and Yahoo. Now that is like killing two birds with one stone!

Tip:- Use Only those Words in your titles that describe the entire content of your post. Such words are called keywords.

How DO We Count Characters in Post Titles?

Counting titles in no more a hectic job thanks to the MBT Character Count Tool. This tool will help you count the number of characters of any data that your provide. Give it a try and let me whether you liked it or not. Take care :)

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..