LATEST STORIES

How To Inter-link Pages Smartly To Flow The PR Juice To Ever Single Page!

Internal-Linking-Seo-Tips I was waiting for this day so that I could show it with prove that how can one easily flow the Google Page Rank Juice to all internal pages. That means that if your homepage has a PR-2 or more you can undoubtedly make most of your internal pages a PR-2 or more ranked pages. You know that most of my pages are either PR-1, PR-2 or PR-3. Only Few authorities have linked to my internal pages but yet you can see that most of my internal pages have the same PR as that of the homepage. If you think this technique of spreading the PR evenly in all internal posts or pages is hectic or may require plenty of hard work then be sure that you have mistaken yourself :>

I have selected randomly just few internal pages in a hurry which have some PR. You can browse old posts yourself to see it with your own eyes that PR has really been equally shared in most of the MBT pages.

Blogger Templates Page      PR-2

Special Characters Tool      PR-1

Read More Link Page            PR-2

Advance Multi Tab Widget      PR-2

Feedback and Back To Top Button Page     PR-2

CSS Color Chart     PR-1

Now there are more example pages as well but I hope these are enough to convince you. Lets know learn how to really make good use of your Homepage PR through the concept of Internal-Linking.

What is Internal Linking Of Pages?

By this term we mean that when you write a post you should make it a habit to link to one of your old post so that the reader may be engaged even further. This linking to your older posts relevantly while writing new posts is termed as Internal Linking. When all pages in your blog are linked to one another, then you will have a fairly optimized blogs which will be loved by search engines while crawling and will be gifted quite often by Google with a cool Page Rank!

In this post I have linked to six pages which are,

  1. Blogger Templates Page 
  2. Special Characters Tool    
  3. Read More Link Page          
  4. Advance Multi Tab Widget     
  5. Feedback and Back To Top Button Page    
  6. CSS Color Chart    

All these pages will enjoy a further flow of PR Juice to them. It doesn’t matter whether the current post I am writing is a PR-0 or more but what is more important are the number of links to a single post from several posts all coming under your main domain which in my case is www.mybloggertricks.com

What Are The Advantages Of Internal Linking?

The main purpose of internal linking is to give your internal pages some Rank which is termed as “Google Page Rank” The advantages of Pages with some PR are,

  • The biggest advantage is that if most of your internal Pages receive some PR then they will rank higher in search engine listings. Thus blessing you with quality Traffic!
  • Pages with some PR are always crawled and indexed within minutes. Google crawls my homepage every 5-6 minutes.
  • Blogs that have good flow of PR to all internal pages are respected by Advertisers and indeed advertising services will offer you handsome adds.
  • And so on

How Should You Start Know?

Now whenever you write a new post make sure to first link to one of your older post which is related to the topic of the current post. For example I often link to my tools while writing a new post. Moreover I always link posts related to one another, like If I am writing a post on a “Advanced Multi Tab Widget” I will certainly link it to one of my previous posts i.e “Multi Tab Widget –The Tabber!”  This way I am able to give every page some importance in the eyes of both the readers and search engines.

If you want to link together some of your already published posts then simply start editing them one by one and add a relevant link to each one of them either at top or at the bottom of the post. Like in this post at the end before concluding the post I can encourage the readers to read another post in this way,

You can also better optimize your posts if you write the Post Tiles smartly. May be you will like this post too –> Importance of Post Title Limit In The Eyes Of search Engines

Internal Link Your Pages Sensibly With Good Keywords

While linking to older posts make sure that you use relevant keywords to describe the content of the post you are linking to. It is a good practice to choose the Post Title as the Link Description. Confused? Let me explain :>

For instance if you wish to link to a post with URL “http://www.mybloggertricks.com/2009/11/11-useful-tips-to-reduce-your-blog-load.html” and Post Title “12 Useful Tips to Reduce Your Blog Load Time”  Then link the URL and title in this way,

 

<a href="http://www.mybloggertricks.com/2009/11/11-useful-tips-to-reduce-your-blog-load.html” > 12 Useful Tips to Reduce Your Blog Load Time</a>

This will appear like this,

12 Useful Tips to Reduce Your Blog Load Time

 

And Avoid Linking your pages with these keywords,

  • Click Here!
  • Go Here!
  • Read this Also
  • Check This Out

All these ways will bring you nothing but waste of time. So I hope you have understood in detail on how to better optimize your internal pages and let search engines better crawl and rank your Blogs.

That’s All!

If anything is still unclear then kindly do not hesitate to post your questions. I love it when you guys ask queries :)

More

Add a Customized Three Column Footer Widget In Blogger

Three-Column-Footer You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

 

See a screenshot, Three-Column-Footer-Widget

Add This Three Column Widget Inside Your Blogger Templates

Follow these steps,

  1. Go To Blogger > Layout > Edit HTML
  2. Back Up your template
  3. Search for ]]></b:skin>
  4. Just before ]]></b:skin> paste this CSS code,

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
      
background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

 

 

    5.   Now Search For </body> and just above this code paste the code below,

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

 

 

 

6.  Save your template. done!

Now visit the page Layout > Page Elements and start adding widgets! :>>

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator

  • background:#333434;   Changing the six digit colour code will change the background colour of this widget.
  • width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
  • background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour of Title Headings
  • font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.
  • border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
  • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.

That’s All!

A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor!

More

Color Code Generator & Color Wheel For Bloggers

color_colorwheel Just to inform you all that for the flexibility and ease of Blogger Template customization, I have published two extremely useful tools that will help you get the hexadecimal color value Or RGB value for any colour you want. These tools are advanced integrated versions of colour pickers used in graphic software like Photoshop. I am more happy than you are because now I don’t need to open Photoshop each time for picking my desired color or eat my brain in finding matching colours :>



I hope you guys will find them really useful. MBT tools are not only useful to you but I personally use them more frequently than anyone else.

Color Code Generators


More

30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

30 High Quality Navigation-Menus Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!
The Horizontal Navigation Menus below are mostly created by Christopher and Highdots and some by me. I have modified most of the codes in order to make them work in blogger and have also made them pretty easy to be understood by most of you. Further all images are uploaded in my Picasa web album so no effort required on your side.

How To Add These Navigation Menus To Blogger

To add your selected navigation menu to your blogger template follow these steps,
  1. Go To Blogger > Layout
  2. Click Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript widget
  4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
  5. Hit Save
  6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,
Add-Navigation-Menu-In-Blogger
    7.   Finally view your blog to see something hanging below your Blog Header/Logo.
See Live Demo of MBT Navigation Menu #3
To change the links, Edit this part of the HTML in all codes below,
<li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>
  <li><a href="#" ><span>Link 5</span></a></li>
  <li><a href="#" ><span>Link 6</span></a></li>
  <li><a href="#" ><span>Link 7</span></a></li>
Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,
<li><a href="#" ><span>Link n</span></a></li>
As a designer I always look for inspiration that can be useful for both my readers and for my designing projects.  I hope the resource below will be of great use to Bloggers from all platforms and to designers. Start choosing your favorite Navigation Menu and do not hesitate to ask me if you needed help in customizing it.

Live demo 1 :: Live Demo 2
 
Tip:- To See Demo Of Other Menus, Simply Copy Paste The Code Inside MBT HTML Editor and Hit Preview To See It Live.

MBT Navigation Menu #1

No Image Used
Black-Orange




MBT Navigation Menu #2

No Image Used
Purple-White-Navigation



MBT Navigation Menu #3

No Image Used
Boxed 1



MBT Navigation Menu #4

 No Image Used
LIGHT-GREY


MBT Navigation Menu #5

 Bulleted-top-Navigation



Tabs Menu #6

Tab Menu I 


Tabs Menu #7

Tab Menu G


Tabs Menu #8

Tab Menu F
CSS CODE:


Tabs Menu #9

No Image Used
ZDnet Emulation



Tabs Menu #10

Tab Menu E


Tabs Menu #11

Tab Menu D


Tabs Menu #12

Tab Menu 12



Tabs Menu #13

Tab Menu 11 


Tabs Menu #14

Tab Menu 10


Tabs Menu #15

Tab Menu 9


Tabs Menu #16

Tab Menu 6


Tabs Menu #17

Tab Menu 8


Tabs Menu #18

Tab Menu 7


Tabs Menu #19

Tab Menu K


Tabs Menu #20

Tab Menu 4 


Tabs Menu #21

Tab Menu 3 


Tabs Menu #22

Tab Menu 2 



Tabs Menu #23

Square 


Tabs Menu #24

 No Image UsedHorizontal Buttons 


Tabs Menu #25

  Tab Menu H




Tabs Menu #26

Tab Menu 1


Tabs Menu #27

Tab Menu A 



Tabs Menu #28

Tab Menu 5


Tabs Menu #29

 Tab Menu B


Tabs Menu #30

Tab Menu J



Happy New To All my Readers! I know I could give you no special gift other than my tutorials. This was my last post of year 2009 :>. I thank everyone for making 2009 a memorable year for me. Wishing best of luck to everyone.
More