Blogging Ethics

MBT Tube

November 27, 2009

EntreCard Buckets –Amazing Traffic Resource!

4 Comments so far

Entrecard-Buckets 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!

 

Hurry Get In A EntreCard Bucket!

November 24, 2009

How To Customize “Block quotes” In Blogger With Mouse Hover Effect – The Blinking Bulb!

22 Comments so far

blinking bulb This tutorial will really enable you to create stunning and attractive blockquote for your blogger posts or websites. This blockquote will change color when mouse cursor is hovered over it. I have already shared two tutorials namely 14 Amazing Ways To Customize Block quotes Style In Blogger and Blockquote Style with Auto Number List But this blockquote effect is exceptional! Just have a look of an example blockquote below.

Hover your mouse cursor on the blockquote below.

 
Interesting, isn’t it? Now let’s learn how to add similar effects like the blinking bulb effect above.
 

Add The Blinking Bulb Blockquote To Blogger

This blockquote can be added in the similar way as explained in my earliar posts. If you are new then read this part of my previous post –> Add and Customize Blockquote In Blogger

The CSS code to be inserted just above ]]></b:skin> is this,

blockquote {
background: #000 url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwrLJYGc77I/AAAAAAAACUE/-dlubJwo7Ts/s1600/bulb-off.gif) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url(http://4.bp.blogspot.com/_7wsQzULWIwo/SwrLJkLtM5I/AAAAAAAACUM/eYRiZpE_860/s1600/bulb-on.gif) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}

 

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.

I have shared some examples below which uses no image at all,




 

Let me know if any thing is left unclear. For customization guide read this post –> Customize Blockquote In Blogger

November 22, 2009

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

20 Comments so far

According-To-MR-MBT 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:

notebook-with-numbers

Blockquote Without Number List:

notebook-without-numbers

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,

    1. Go to Blogger > Layout > Edit HTML
    2. Backup your template
    3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,
      .post-body blockquote { line-height:1.3em; }
      OR
      .post blockquote{ bla bla bla}
      If you couldn’t find such code then it is OK.
    4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code below,

blockquote {
background: #fff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5kiMw3zI/AAAAAAAACQM/amZu50-o8aE/s1600/notebook-with-numbers.gif) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}

Customization:-

You can also change the Number list background by replacing the bolded image link in the code above with the image URLs of one of these blockquotes.

Tip:- Right Click the links below each blockquote and choose Save Link As Or Copy Link Location to its image URL.

notebook-brown Blockquote with Yellowish Number List & Dark Brown Background

notebook-green Blockquote with Greenish Number List & Dark Background

notebook-grey Blockquote with a soft touch

font :- It includes font style, size and type respectively. Match the colours with the code above for reference. Font style can be bold, normal , italic or bold italic

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

Adding Blockquote With No Number List To Blogger

To add this blockquote simply follow the same steps as shared for the blockquote with auto number list. But for step#4 paste the code below instead,

blockquote {
background: #fff url(http://2.bp.blogspot.com/_7wsQzULWIwo/Swb6iqg3IvI/AAAAAAAACRM/gNG2TrShbWs/s400/notebook.gif) repeat-y ;
margin: 0 20px;
padding: 20px 20px 20px 55px;
color:#7A7A7A;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 155%
}
blockquote p {
margin: 0;
}

 

You can replace the Background Image link with one of these.

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

notebook-withoutnavy

notebook-withoutpink 

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.

Let me know how was this new discovery :>>

14 Amazing Examples To Customize Blockquote Style In Blogger!

137 Comments so far

Blockquotes with different styles 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.

Have a Look at each one of them. Details of adding the blockquote to your blogs and websites are given in the implementation and customization section.

Blockquote With a Fancy Border and Owl Image

owl

 Blockquote Code:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With a Purple Corner Label and Border At Bottom

Purple-Scanned-Copy

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Jigsaw Blockquote With An Image At Right Corner

jigsaw

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquotes With Classic Left Borders

left-sided-brownish

 Blockquote Code:

.post blockquote {
background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

 

left-sided-green-black

 Blockquote Code:

blockquote {
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

 

Blockquote With A Brown Corner Label

Brown-Scanned-copy

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquotes With Inverted Commas

 commas-navy-blue Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

commas-orange

  Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

commas-hands

 Blockquote Code:

.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s400/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

commas-green  Blockquote Code:

.post blockquote {
  font: italic 1em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquote With Well Aligned Image At Top

 

Copyrighted-red

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquote With Canopy Style Image At Top and Bottom

 

at-top-and-bottom

 Blockquote Code:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}

.post blockquote div{
background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Box Style Blockquote Surrounded By Borders

Copyrighted-orange

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 

The Monkey Man Blockquote!!!

Once you get an idea on how to use these blockquotes then you can create artistic and some funny blockquotes like the one below,monkey-man

 Blockquote Code:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}

.post blockquote div{
background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding: 20px;
}

 

Implementation and Customization:-

Implementaion:-

Now To add One of these amazing and unique blockquotes to your blogs, do the following,

  1. Go to Blogger > Layout > Edit HTML
  2. Backup your template
  3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,
    .post-body blockquote { line-height:1.3em; }
    OR
    .post blockquote{ bla bla bla}
    If you couldn’t find such code then it is OK.
  4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code for one of your favourite blockquotes. I am giving a sample code below

.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;

}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Customization:-

Important areas to be customized are bolded. Where,

  • 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(Paste Image 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 colour respectively.
  • 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.

Note:- For Blockquotes with inverted commas, canopy style and the Monkey Man, there is a little more coding required. Read below

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,

Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,

<blockquote><div>Your Quote Will Be Here</div></blockquote>

 

Play With Each Blockquote Code!

To get more used to the codes above you need to play with some CSS using our HTML Editor.

Inside MBT HTML Editor paste the any of the blockquote codes above between <style> and </style>  and just below </style> paste this code,

<blockquote>Write Anything Here As a Text</blockquote>

For example for the Owl Blockquote paste the codes in this pattern,

<style>

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(file:///c:/Documents%20and%20Settings/mustafa.MYBLOGGERTRICKS/Desktop/blockquote/owl-icon-48.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

</style>

<blockquote>Write Anything Here As a Text</blockquote>

 

Start Playing! :- MBT HTML EDITOR

 

That’s All!

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.

Do not forget to tell us how useful or unique this post was for you.

November 18, 2009

6 Easy Ways To Customize Heading Style In Blogger & Wordpress – Customize Heading Tags

15 Comments so far

Change-heading-style 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,
  1. Go To Blogger > Layout > Edit HTML
  2. Search For ]]></b:skin>                  (Tip:- Press Ctrl + F )
  3. Just above ]]></b:skin> paste one of the codes below,
  • For Heading Style with a bottom border, use this code,
.post h3{
color:#0080ff;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:2px;
}
  • For Heading Style with a border at top and bottom, use this code,
.post h3{
color:#0080ff;
border-top:1px solid #289728;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:3px;
}
  • For Heading Style surrounded by borders, use this code,
.post h3{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}
  • For Heading Style with Hover Effect, use this code,
.post h3{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
}

.post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}
  • For Heading Style surrounded by a Box, use this code,
.post h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}
  • For Heading Style with a side Image & Hover Effect, use this code,
.post h3 {
background: #fff url(URL OF Side Image) top left repeat-y;
font-size: 12pt; 
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}
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 –> tnt
      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 #0080ff
Here 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 colour
2.    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 12pt
3.    To Change Font Colour, edit similar codes like this one,
color:#0080ff
You can use our CSS Colour Chart for getting the six digit number for your desired colour
Implementation:-
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. 

example-image-for-heading-style
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,
  1. Heading Style with a bottom border
  2. Heading Style with a bottom border and top border
  3. Heading Style surrounded by borders
To apply any of the heading style above, do this in your Wordpress Editor,
  1. In the visual mode of your Wordpress editor first write a heading
  2. Now switch to the HTML mode and enclose your heading with the following code,
  • For Heading style with a bottom border, use this code,
<h3><div style="color:#0080ff; border-bottom:1px solid #289728;
font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>
  • For Heading style with a bottom border and top, use this code,
<h3><div style="color:#0080ff; border-top:1px solid #289728;
border-bottom:1px solid #289728; font-size: 12pt; padding:3px;">Your Heading Goes Here</div></h3>
  • For Heading style surrounded by borders, use this code,
<h3><div style="color:#0080ff; border:1px solid #289728; font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>
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

,

tag please convert it to

and

respectively.  


wordpress-editor---html-mod

Then press the visual button to see the effect live!
wordpress-editor--visual-mo
To customize the styles read the customization guide for blogspot users
Hope it was clear :>>

November 16, 2009

Best Adsense Ad Locations & Ad Formats To Earn Handsome Revenue

44 Comments so far

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

Note:-1000 Page Impressions can return $0.5-$1. Depends on type of Ad.

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,

Adsense-Best-Ad-Spots

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,

ads-below-post-titles

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.

The Ad formats below will return really impressive results for Ads displayed below post titles.

Best Ad Formats:-

  • Banner (468 x 60) Or
  • Square (250 x 250)  Or
  • Medium Rectangle (300 x 250)

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!

ads-above-navigation-menu

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 links   OR
  • (728x15_4) Displays up to 4 links

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

header-right

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.

adsense skyscraper

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

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

35 Comments so far

Animated-Bullet-List

 

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!

Go To,

  • Blogger > Layout > Edit HTML
  • Search For ]]></b:skin>
  • and just above ]]></b:skin> add the code below,   (Tip:- Press Ctrl + F)

.post ul {list-style:none;

}

.post ul li {
    line-height: 1.4em;
        background: transparent url(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}

.post ul li:hover {
        background: transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/s400/261.gif) no-repeat scroll 0px 4px;

}

 

  • Save your template and you are done!

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,

 

Try it Yourself! :- MBT HTML EDITOR

 

Paste this code in the HTML Editor,

<style>

ul {list-style:none;

}

ul li {
    line-height: 1.4em;
        background: transparent url(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}

ul li:hover {
        background: transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/s400/261.gif) no-repeat scroll 0px 4px;

}

</style>

<ul>

<li>This is Sample Text</li>

<li>This is Sample Text</li>

<li>This is Sample Text</li>

</ul>

I hope you will like it. Take care :>

November 13, 2009

Customize The Color Scheme Of Wordpress Mp3 Flash Player

49 Comments so far

wordpress mp3 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,

  1. Adding the JavaScript Inside Blogger
  2. 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 HTML Code for our simple Mp3 Players looks like this,

<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=1&amp;soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

 

And The HTML Code For Our New Customized Mp3 Will look like this,

<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=audioplayer1&
bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&

soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

 

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

player-sketch

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,

bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&

You need to align all this vertical code into a single line like this,

bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&
righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&
track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&autostart=no&

Now your code will look like this,

<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=audioplayer1&bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&
righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&
track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&autostart=no&
soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

Make sure you replace URL of your MP3 with the link of your Mp3 file. For example the URL for my Mp3 file looks like this,

http://stcmustafa.fileave.com/lastbreath.mp3

Some Players With Different Flavors

Masked Red

The code for this player is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

Masked Purple

The code for this player is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

Masked Black

The code for this player is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

And the code for the first Mp3 player used in this post as Green and Blue is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

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,

I hope you will like this post :>

Importance Of Post Title Limit In The Eyes Of Search Engines

21 Comments so far

title-tag-importance 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,

Absolute-Title

 

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 :)

Widgets + Web Designing

Workshops

SEO Mashup