Tips on Designing Effectve Navigation for Website Design

Website navigation is the most important aspect to consider while designing a website. The primary aim for effective navigation is get your visitors to stay in your site and also for visitors to easily find what they are looking for easily and quickly. The website is a source of providing access on the internet for information.  The best way to provide that information is with simple navigation of the website.

Designing effective navigation can also entice your visitors to try out the other things you offer on your site. In this article we will discuss some of the basic ideas you need to follow while designing the navigation of a website.

Easy to understand : Make sure your links easy to understand and well organized..  Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable .Visitors should be easily able to find what they are looking for under different categories.

Use HTML for Better Website Navigation:One of the best tips to improve your website navigation is to use HTML as much as you can. Instead of using Flash, which often becomes quite problematic, slow and inefficient, adopting HTML provides users a more user-friendly and easy-to-use interface.

Navigation Consistency:A web site's navigation design should be simple. More importantly, with the possible exception of the home page, the navigation system should be consistent throughout the entire website, on every web page navigation element. Uniformity, orgainization and carefully planned design are key principles to developing an effective web site navigation system that will help your website users browse your site efficiently and confidently.

Avoid Irrelevant links: Time is precious and if your visitor is spending time in your website then let them feel they haven't wasted their time.If you clutter with all the irrelevant links in your website it will not only look unorganized but also least desired by your visitors. Have all the pertinent links in your website, which can be utilized by your potential visitors.

Avoid Horizontal Scrolling: Horizontal scrolling is the very definition of irritating. It also happens to be somewhat time consuming due to the absence of a horizontal wheel on the average mouse. Avoid horizontal scrolling at all costs.

Sitemaps for navigation: Part of a good website navigation is using a sitemap. Place your sitemap link on an area that it can easily be found. A sitemap displays your website’s link structure as an easy to read list. Sitemaps are generally more helpful for sites with a lot of pages, but are a good thing to have even if you do not have a lot of links. Providing visitors with a sitemap can simplify their browsing experience.

Conclusion:  Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link. By following these tips you'll convert website traffic into paying customers. That's a return on investment your business can appreciate, in any economy.

Read More

How to Display Post Author, Date/Time and Labels Below Post Title in Blogger

 

 Dear CrcaksTrick readers when you publish a post on your blog, you may see information related to your post such as Author, Time, Labels etc. on your post footer. But if you wanna get rid of post footer or make use of jump breaks, readers may not be able to find that particular information on your homepage or blog. So you would like to show them off out of post footer. Else if you just wanna customize the way that post specific information has been displayed on your blog, you would seek a way to do that too. So how about showing those information along with your post title to be differentiate and stylish

It's kind of a complex process 'cause you can't easily get off those information from post footer and display elsewhere without editing your template. However eventually, you can display essential information such as post author, date and time and labels under your post title though you keep post footer or not. Bloggers who may show only snippet of post on their homepage with no footer, will obviously love this. So let me help you to show off your post related information beneath your post title.

Before You Go:

You should not be disabled displaying post date header option. And here we use Date Header Format for Date and Timestamp Format for Time. So make sure you have selected correct values for particular options. You can make sure all of these options by following below steps.

• Go to Blogger Dashboard.

• Click on your Blog Title.

• Navigate to Layout from left pane

• Now Click Edit link correspond to Blog Posts element under Page Elements tab.

• Make sure the date option aka first option under Post Page Options heading is ticked and  selected value for that option represents full date including year, month and date.
  
  Note: Selected value will be displayed as the Date beneath your post title.
   
• Now find the third option aka Timestamp format under Post Page Options and make sure the value selected for that option only shows Time, not a date.

• Note: Selected value will be displayed as the Time beneath your post title.

• Save your page elements.

• Note: After enabling Date Header Format option, it will show up date above list of posts for particular date.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Templatetab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Now search for <b:if cond='data:post.dateHeader'> and identify which code snippet matches with yours from below. You may have either one code snippet in your template. Then select matching code snippet in your template.

Code Snippet 01

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

OR

Code Snippet 02

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>

6. Now replace your whole code snippet with following.

Note: If you code snippet matches with Code Snippet 01 above, use the Code Snippet 01 code below to replace your snippet. Else if you have Code Snippet 02, the use Code Snippet 02 below.

Code Snippet 01

<b:if cond='data:post.dateHeader'>
<script>var DateScript = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>

Code Snippet 02

<b:if cond='data:post.dateHeader'>
<script>var DateScript = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>

7. Now search for <div class='post-header-line-1'/> and add following code right after that. I have implemented the code using a table to make it more organized.

<b:if cond='data:blog.pageType != "static_page"'>
<table style="font-size: 12px">
<tr valign='top'>
<td>
<img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/>
</td>
<td>
<span class='post-author vcard'><b:if cond='data:post.authorProfileUrl'><span class='fn'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></span><b:else/><span class='fn'><data:post.author/></span></b:if></span>
</td>
<td>
<img src='[Date/Time Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>
</td>
<td>
<script>document.write(DateScript);</script> at <data:post.timestamp/>
</td>
<td>
<img src='[Label Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>
</td>
<td>
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> </b:if></b:loop></b:if>
</td>
</tr>
</table>
</b:if>

Color Indication Information












































Font Size

You can change text size of author name, date/time and labels here if you prefer. Just specify your value here in pixels.

URL of the Icon

You can specify URL of 16 x 16 pixels icons to show leading icons for information you displayed. For example, use an icon represent an author for Author Icon. If you need no icons, just remove whole image tag completely.

i.e: <img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/>
 Post Author

This is tag which displays author of the post. If you need to append a text for that such as 'Post by', add your text before or after the tag.

i.e: Before: Post By <data:post.author/>      After: <data:post.author/> posted this.

 Published Date of Post

This tag displays date published of the corresponding post. It uses script to get post date. You can add more text to make it more informative by adding text as explained in Post Author.

 Published Time of Post

This tag displays published time of the corresponding post. You can add more text to make it more informative by adding text as explained in Post Author. I have added at text before that.

 Labels/Categories Related to your Post

This is code snippet which pops up labels you specified when you publish your post. You can add more text to make it more informative by adding text as explained in Post Author.

Text in between Labels
This is text in between multiple labels. I have specified just only a space. but you can specify a punctuation mark like comma (,) here.

That's Done!!!!!

Read More

Why you should buy custom domain for blogger Blog

                                   

Today all the bloggers starts blogging using the free subdomain provided by the bloggers but as time goes many people found that you have a blog and you are running that blog under the blogger subdomain. And when you are receiving handsome traffic and then you found that you don’t have sponsors for your blog and the blogger ranks are also increases day by day. And still there are many confusion in blogger like what if they lost their Alexa rank, page rank in custom domain ? well the solution of that kind of questions is also given bellow.

Your blog posts will get more shares and bookmarks

When you have your own custom domain name instead of the blogger’s sub domain then people will think that you are serious about your blog and the articles of your blog is unique and it will make good impression on the visitors and they will be your royal reader. And your reader will also share some of the good articles with their friends and they can also bookmark your blogger articles.

Fans and subscriptions will increases with the custom domain

Mostly people are not trusting the subdomains of the blogger’s blog because its free and anyone can make it so they can guess that you cant publish good content on your blog because you are using the subdomain of the blogger and when you have custom domain for your blogger blog then your Facebook and twitter follower will increase.

It Costs Just $10 To Buy a domain name !!

You can buy the custom domain in just $10/year and its not big deal !! there are many domain name provider like Godaddy and BlogRock etc. there are many more. And we have bought our blogger domain name from the Godaddy and its easy to redirect your blogger subdomain to the custom domain in my next article I will publish how to set a custom domain for the blogger blog.

Will you lose your traffic and web ranks ?

Its main confusion of all the blogger that what if they lost their blogger traffic and web ranks ? well we are just redirecting the blogger subdomain to the custom domain and all the web ranking system are based on the content and the traffic you get and when the web ranking gets updated and your blog will get back the web ranks.

Some  Publisher network don’t accept the subdomains

Publisher network like buysellads ads do not accept the subdomains it means that you are losing 60% of the revenue from your blog !!!

Read More

Tips to get approved by Google AdSense

                               

Dear CracksTrick readers today I am providing you some tips with you to get approved by AdSense using blogger. Every Bloggers and webmasters are dreaming to make money using  their blog, Google AdSense is the grate way to make money with blogs. All you need is approved AdSense account, but its not too easy to get approved by Google AdSense, your blog should follow their policy to get approved by them! And here are few tips to get approved by Google AdSense using blogger blog.

1. Write Original and fresh content

Write your own content and never publish copied content  if you are publishing copied content in your blog then Google AdSense will never approve your application.And remember one thing Google loves fresh and original content. So write fresh and Original content and it will also increase your blog’s traffic.

2. Age of your site

In Google AdSense policy they require 6 month old blog. And well it takes 6 months to optimize your blog, But in real if your content is so good then you need not wait for 6 months you just need to wait for a single month.

3. Add your blog into search engines

You have to add your blog into different search engine like Google , yahoo , Bing so you can get traffic using that search engine and in AdSense its also require to add your site in the different search engine. 

4.Number of posts require to get approved by Google AdSense

You must have published more then 50 posts before applying for Google AdSense approval. And write 100 to 300 words in each posts so you can get traffic from search engine and you will get approved by Google AdSense within a week.

5. Fill the AdSense forum accurately

Don’t write fake address in AdSense signup forum because later it will send you a post to verify your address. Fill address forum correctly and don't use proxy while applying for Google AdSense account. For more information read AdSense policy here.

Now wait for a week for their reply if you have followed above five point then you will get approved by them.

Read More

How to add Scrollbar within the Blogger Post

                                           

Sometimes your blog post contents or text gets too long and you wants to add some blog post paragraphs or certain lines of text into the ScrollBox. If you add the text in scrollbox, it improves the appearance of your blog post page length. Look at the screenshot above for actual scrollbox within the post content.If we are adding large codes to  our post or a large text to our blog it becomes irritating for the blog viewers. So to get rid of this irritation for the blog viewers and make your blog more attractive we use  scroll-bar in our post

Here I am going to guide to make a scroll bar  bar in your blogger post

If your blog post contains long text and you want to add scrollbar then follow below steps –

• Log in into the blogger account.
• Go to you desired blog listed in dashboard. 
• Now Click on Template which is in left pane.
•  Click on Edit HTML.
•  Now you can see the HTML code of your blog
• Now by pressing Ctrl+F you have to find the code given below

                              /* Comments

         Just above the code, paste following  code given below

 

           .crackstrick_ScrollBox {

      height:400px;

      width:480px;

      overflow:auto;

      }

Note: You can change the height and width of scrollbox by modifying the bolded px value in above code.

• Save the Template by clicking Save Template button.

• Now, the next step is to add actual post contents in ScrollBox. Create a new blog post  or open existing post contents.

• Click on HTML button. Your blog post text will be displayed in HTML format.

• Now find the place where you want add the ScrollBox. Paste following code before the start of the contents that you want to display in ScrollBox. -

               <div class="crackstrick_ScrollBox">

•  At the end of the post contents that you want to display in ScrollBox, paste following code

                                            </div>

• That’s Done!. You have added the ScrollBox successfully in blog post. Now open your blog post and scrollbox appearance

Read More