Link Proz – Your One Stop Solution for SEO

Yesterday night, I sat down before my pc to look out for SEO solutions. I googled a bit and I could find this excellent site called 'LinkProz.com'. I just browsed their website to check out the services they offer. Surprisingly, I found that they offer possibly all kinds of solution starting from simple SEO consultation to a complete website/template design.

Why choose LinkProz.com? Pretty simple! They provide all that you need as a webmaster – be an amateur or a professional. You get all the stuffs you need at one place. I like the sleek but simple design and the phrase which says “There isn’t a job we can’t handle or a keyword we can’t nail”. You can very well understand the level of confidence that they have on their solutions. Their testimonials speak well than what I do.

Moreover, you get immediate feedback for the queries you post via their contact form – better client support. This is very important as far as clients are concerned. I hit their contact form regarding a quick SEO consultation for my very own blog www.newbloggingtip.com. I received a reply in not more than 8 hours with a small snippet about where I go wrong as far as SEO is concerned – neither I nor you can expect a complete SEO solution for a free quote:)

I would like to enlist few features about the services that offer.

1. Link Building: This is rather aimed at people who wish to improve their Google PageRank. They do guarantee genuine links from sites related to your niche than just links from spam comments/sites.


2. SEO Consultation & SEO Site Analysis: SEO consultants from Link Proz basically concentrate more on keywords to generate better revenue from your blog. However, you'll get to know about your strength and weakness when you prefer a SEO site analysis for your website.


3. Keyword Research: As mentioned earlier, a complete analysis about the common keywords for your domain shall be listed and they'll start working on what you prefer and achieve. I guess they do guarantee an increase in your PR.


4. Web Design: Ah! You know what they'll offer here. Simple and sleek web designs to enhance your blog. I'm sure they'll design your thoughts into reality because I see good testimonials & portfolio up there.


5. Optimized Content Creation: By choosing this option, you'll simply hire an author who'll generate quality content for your blog/web site. I'm not sure how many would choose this. Anyway, I just listed the options available. 

To read about the complete list of services, in detail, visit this page - Link Proz Services.

Well, I just wanted to share this site for those who need assistance with SEO. To be frank, I'm not an expertise when it comes to SEO. So, you may refer to experts @ Link Proz for better guidance. The pricing shall be the only factor which one should consider as far as this site is concerned but their service is highly appreciated. Anyway, share your opinions about Link Proz via comments!

Click4more... 2 Comments

Changing Backgrounds Dynamically On Blogger Using Jquery

I've been quite busy over the past few weeks with my clients and articles on SML. Today, I found sometime to work out a simple trick based on Jquery - Changing Backgrounds Dynamically. Well, I hope you read the article about "Adaptable View On Blogger" wherein, I mentioned we can tweak the design of our blog dynamically. We'll be using the same concept in this article as well...

I don't want to take too much of your time. So, I'll just explain the basics about the working of the script. The script will add or remove classes to the body element based on what list item the user clicks on. That's it. So, take a look at the demo of this simple effect by visting the link below and we'll get started...

CHANGING BG COLOR DYNAMICALLY - LIVE DEMO

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

.bg1 { background: url(BG IMAGE URL) repeat-x; background-color: #6c0000; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

        $(&quot;li.one&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&#39;bg2 , bg3&#39;).addClass(&quot;bg1&quot;);
    });

    $(&quot;li.two&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg3&quot;).addClass(&quot;bg2&quot;);
    });

    $(&quot;li.three&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg2&quot;).addClass(&quot;bg3&quot;);
    });

});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.

5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper.

<ul>
<li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>

6. That's it! Save your template or publish the post. 

Just hit the text of your choice - Red or Brown or Blue and enjoy the changing environment on your blog. You may change from the default colors (Red, Brown, Blue) to the ones you like, by just altering the color codes (highlighted in blue) mentioned in step 2. In fact, you can alter between your background images. To do so, just replace "BG IMAGE URL" with the URL of your background image.

I hope, I kept the logic as well as the post simple. The above code was tested to work fine on all major browsers including, but not limited to, IE, FF, Opera, Chrome and Safari. If you find any difficulties in installing the above effect, then leave a comment or ping me on gtalk. I'll help you out! Do share your opinions about the article via comments:)

Click4more... 17 Comments

Photo Rules for Beginner Bloggers

Every blogger should know that besides having unique blog content and articles, images play an extremely important role in ensuring that that your readership levels remain high. After all, you can post the most interesting thing known to man but unless it's "aesthetically pleasing", your readers may never pay any attention to it. 

Thus, you should always aim to include photos or graphics in your posts whenever possible. But you can't just simply attach any photo you download from a search engine. They have to be legal to use, otherwise you can find yourself face-to-face with a major law suit or worse. So what photos are ok to use? To find out, proceed with the article further...

ROYALTY-FREE IMAGES

Before anything else is said, it's important that you automatically assume every image you come in contact with is copyrighted. It can be confusing, especially if the image doesn't specifically say it's copyrighted, but it doesn't necessarily have to say anything at all for you to still get slapped with a law suit. Moreover, simply putting a link back to the owner's page or original source will not help defend you in court. One of the easiest ways to avoid any problems, however, is to only use royalty-free photos.

Some of the images cost a small fee to download and use. But there are tons of sources to find free legal-to-use photos as well. For example sites like Flickr, stock.xchng and depositphotos are some of the popular choices. While some sites may require you to sign-up (for free) to gain access to both their collections of paid and free images, it's important that you still comply with the user's common creative licenses. This will specifically state how the owner wants you to attribute the photo and under what terms it can be used.

PUBLIC DOMAIN PHOTOS/FAIR USE IMAGES

Popular blog posts tend to consist of written product reviews. That being said, it's perfectly fine to use images of CD covers, book covers and movie posters to give your article some extra sparkle as long as the images have been floating around the internet for quite some time and already seen by the majority of public. In short, you may not post the images if they were "leaked" to you.

You may also use public domain photos. Typically images that fall under this category include the following: photographs and pieces of art work created before 1923, photos created/taken by the U.S. government, photos that have an expired copyright, and photos that are used on educational sites like Wikipedia.

SCREEN SHOT IMAGES

Lastly, screen shots that you take of a particular web site, video game, or software in order to show visual assistance in "how-to" blog posts are also perfectly acceptable to use as long as you give proper credit (meaning the name of the web site with a hyperlink) and you do not jeopardize the product/service in any way. Basically, this means that you are not taking a screen shot of a particular element that would discourage your audience from buying the product or service. For example, don't take a snap shot of the most climatic scene of a newly released book—no one will want to buy it if they know how it ends.

Click4more... 2 Comments

Photo Stack Effect Using Only CSS3

There's a lot of buzz around the web about Google plus! I'm sure many, including me, are fascinated about circles! Well, did you find time to check out the other sections - albums on Google+? If not, try it now! You'll find a cool transition effect on hovering your mouse over the albums! Inspired by this, I googled about the same & found a solution to get it work on Blogger. Take a look at the demo here.

PHOTO STACK EFFECT - LIVE DEMO (LOOK AT THE SIDEBAR ON DEMO BLOG)

The main advantage with the above hack is that it works purely with CSS3. No Javascript nor Jquery - only CSS! However, there is one main disadvantage working with pure CSS3 - browser compatibility issues! The above hack works only on browsers that support CSS3! I'll try to get the same effect working on all browsers, with a gradual transition rather than the abrupt change, using Jquery in the upcoming weeks! Anyway, let's get started with this tutorial now...

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Download the following text document - CSS FOR PHOTO STACK EFFECT and paste the code present in it just above the line mentioned step 1. 

3. Save your template. To realize the stack effect, declare image tags with class="photo1", class="photo2" and class="image3" respectively. Then, wrap them with an anchor tag using class="album". That's it! Difficult to understand?  Then, paste the following code anywhere on your template to realize the final effect.

<a class='album' href='#'>
<img class='photo1' src='IMAGE URL'/>
<img class='photo2' src='IMAGE URL'/>
<img class='photo3' src='IMAGE URL'/>
</a>

Note: Replace IMAGE URL highlighted in blue with your image URLs to realize the stack effect on your blog. If you wish to extend the same effect for more than 3 photos, then ping me via gtalk or leave a comment, I'll help out to achieve the same!

4. Save your template and view the same on a browser that supports CSS3 - possibly using FF3+!

Over the past few weeks, I've been trying to post articles that are pretty unique on blogger. I would like to receive your opinion about the same. I hope you enjoy the articles on my blog including the one above! Please share your views about the same via comments:) Check out the other interesting tutorials on CSS here - CSS Tricks

Click4more... 16 Comments

Adaptable View On Blogger - Introduction

It sounds pretty interesting rather strange to hear adaptable view. Isn't it? Well, adaptable view is basically an user interface pattern that allows people to change the visual appearance of the content/design on your blog. This offers more flexibility and control to the user over your content/design. A very good example to illustrate this effect could be on your delicious bookmarks.

Just navigate to the following link - Recent Bookmarks. Notice the three tabs/links that say "Low | Medium | High" once you hit the display options. Each one shall show you a different view: single, compact or full. So, how do I achieve a similar effect on blogger? Pretty simple, provided you have some knowledge about CSS and Jquery! Adaptable view can be used to change background colors, switch layouts, increase or decrease font size, darken or lighten the post area - as you see on Sohantaka's blog when you toggle the article view, etc...

In this article, I'll illustrate the above effect using two views: single-column and two-column view. Users can switch their views between single-column and two-column dynamically. I don't want to take too much of your time on explaining the same further. So, take a look at the live demo and let's get started...

ILLUSTRATING BASICS ABOUT ADAPTABLE VIEW ON BLOGGER - LIVE DEMO

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

#commands { margin-top:50px;}
#list { width:580px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:560px; background-color:#D7D3E0; padding:5px; margin:5px;}
#list li span { font-size:1.2em; margin-right:10px; font-weight:bold;}
#list.compact li { float:left; width:270px;}

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#fullswitch").click(function() {
$("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
$("#list").addClass("compact");
});
});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.

5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper. Replace CONTENT HERE with your content.

<div id="commands">
Click on icons to change view:
<a href="#commands" id="fullswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HZuX1Wy5dRiJVUUIwUT3vqqRR6tj79GifE3H1orLjpHeOCAKL1NWx6myiDTkdG_A9Tj6lnaTNGZ4rv0XWriVx1YrhCa1DV-YvkYhE4zRCwai98PkfmHtpu8CglwBD6ASBOyLSaVWbSI/s800/switch_full.png"/>
</a>
<a href="#commands" id="compactswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmC3BGksj2Rkmuu4tTFa4B_54OQg1UTtLVCTly3pfJkb2mK0qIW-YwnQf5Nb5Y2GZXZfIr7V6YD18G0XClKSv0OtZ8O0WltNzl11OJosaqcrMcUd18c6GedWyIDtz2_2uNGQYxTsVfe4/s800/switch_compact.png"/>
</a>
</div>
<ul id="list">
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
</ul>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post  with the codes mentioned in step 5 and you're done!

I would like to provide the reference script (used within the post editor to illustrate adaptable view on  the demo blog) for those who find it difficult to work out step 5 in the above tutorial. Download the reference script here - REFERENCE.

The above effect was tested to work fine on all major browsers - IE, Firefox, Opera, Safari. I'll illustrate the same (adaptable view) with more examples in the upcoming articles on my blog. Subscribe to my blog so that you don't miss any article that might interest you like the one above:) Share your opinions via comments! You may read more about the tutorials on jquery here - Jquery.

Click4more... 6 Comments

Simple Slide Effect On Blogger Using Jquery

I've got another interesting tutorial using jQuery - four in a row. However, it's very important to note that all these effects are possible with the inclusion of one single jQuery file on your template which means no additional time to load your site. In this article, I'll teach you another simple slide effect or in other words, an up/down slide panel effect using jQuery. Take a look at the demo below...

SLIDE PANEL EFFECT ON BLOGGER USING JQUERY - LIVE DEMO

Interesting? Well, I have implemented the hack within the article on the demo blog whereas you can implement the same anywhere on your blogger template. Few examples include adding it to the sidebar with facebook like box, adding the hack to wrap the featured section, add the effect below your articles to show the share icons/author info widget, etc... So, let's get started.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnssFHhP35djP8H7JjqKbErsHRlRcXvNcjEffuGuu2_aGHtTo3g-tE5E183KoBt2yqApvW9eMMLFXNLyiYzPJ0GNd_z7M6c5LaK_sMmB3sz3WbO4R4hSW2Uc97IJkU8R_0x7HZfAtTQDe/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEB98jgC_T-9fK9P6SHJkkbJSPcTFFwLjEtIG5Lm4UM0WI-vNtNCjMphXPAcB6FHbUQq2H82Nd8f8tpqfo7oI8Q29hbvznV-8ubQSAX1rG3FmCyxV3iDfusS7myvDARhm-0-94KUGvf2Pk/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

Note: You may replace the color code highlighted in blue to change the background of the panel. Similarly, the text color by varying the code highlighted in green. To change the height of the panel, vary the code highlighted in orange. You can also change the color of the slide button by varying the URL highlighted in pink. We have provided six different buttons below. Pick one from the slot that interests you!

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor (or) on your template. Replace YOUR CONTENT HERE with any content you want - it can be a script or an image or a link, anything under the earth... lol....

<div id="panel">
YOUR CONTENT HERE
</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post  with codes mentioned in step 5 and you're done!

The above slide panel effect was tested to work on all major browsers - IE, Firefox, Chrome, Opera. We are happy to inform our readers that some of my design articles have started to appear on the famous design site - Design News. I hope we'll be able to provide such quality articles in the future as well! Share your opinions via comments!

Click4more... 20 Comments