Friday, 30 March 2012

SEO vs. PPC, which is the best to Increase traffic to your site


This guest post is by Brianne Walter
Websites need to mark their presence on the internet to get more traffic. This can be done using appropriate online marketing techniques that serve to promote a given website. Search Engine Optimization (SEO) and Pay-Per-Click (PPC) are two such marketing techniques that are used to draw the attention of the end-user by ensuring that the website is displayed prominently on the result pages of popular search engines such as Bing, Yahoo and Google.



When placed high on the search engine result pages (SERP), the website is automatically bound to be noticed and explored by the visitors, thereby increasing the chances of improving traffic to your site.

 Both SEO and PPC work well in getting a website to rank high on the SERP, but they are two totally different marketing approaches targeted however at the same result. The choice of the appropriate technique depends on several factors such as purpose of the website, purpose of the marketing campaign, and the budget allocated for the marketing exercise. Here’s how you can decide which of these techniques is best to increase visitor traffic to your website.

Purpose of the Website

Online marketing varies based on the purpose of the website. If your blog or personal website is simply a form of expression, a casual attempt to connect with the world at large and make friends with the like-minded, SEO is a better option. It is a natural, organic way of gradually reaching out to visitors over a long term through quality and relevant content, building goodwill and reputation in the process.

This is also the preferred technique of veteran websites that look to consolidate and maintain their hard earned high rankings. However, it is difficult for new websites to capture high ranks on SERP instantly. A quick bout of advertising using PPC, a paid marketing service, allows them to figure high on the SERP for a short span, enough to announce their presence.

They can then get back to SEO to build their content for natural ranking, as PPC is quite expensive in the long run when compared to hiring professional support for SEO.

Scope of the Marketing Exercise and Budget

PPC expenses vary based on the exact position of your advertisement on the SERP as well as the trending keywords against which you want the advert to be displayed. This technique is usually used short-term to simply get the attention of the users to your website and is then supplemented with other natural SEO techniques such as content creation, link building, and social media optimization to yield results in the long run. PPC is especially useful for new websites, and those looking to promote seasonal or occasional offers, discounts, sales and other such events that are valid only for a limited time frame.

Long-term PPC is advisable only if the returns outweigh PPC expenses, but you will have to note that you will be spending quite a bit on experimenting with the technique before you learn the ropes.

Conversion rates with systematic organic SEO are bound to be relatively higher than short-term PPC rates. Building trust, quality inbound links, and relevant, unique content right from the very launch of your website will make the site both user and search engine friendly in the long run, to give a high rank and increased traffic. Optimum use of PPC to quickly jog the user’s memory occasionally will help trigger a revisit and spike traffic short-term. Both these techniques go hand-in-hand to improve traffic, but website / marketing purpose and budget are the factors that you should consider while opting for either one of them.

About Guest Blogger

Brianne is a blogger by profession. She loves writing on technology and luxury. Beside this she is fond of gadgets. Recently an article on luxury yacht attracted her attention. These days she is busy in writing an article on aphelion.

Monday, 26 March 2012

Make a custom 404 page for Blogger


Several days ago ,Blogger team announced new SEO functions for Blogger after a long time waiting :D These functions are grouped in Meta Tags, Errors and Redirections, and Crawlers and Indexing.In Redirections group,we got 404 page function and redirect dead links .
Now in this post ,I will show you how to create a custom 404 page for all Blogger templates and Simplex's templates .

Here are steps for making this 404 page


1, Read this step if you are using one of Simplex's templates .
If you apply all instructions in internet for creating a custom 404 page for Simplex templates,you will see nothing appear.
To fix this ,make a search for this line
<b:includable id='main' var='top'>
The search result will look like this
<b:includable id='main' var='top'>
..........code here .blah blah blah......
</b:includable>

Add this code right after the line we search
<b:if cond='data:blog.pageType == "error_page"'>

<b:include data='top' name='status-message'/>

</b:if>
We make the code look like this
 <b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "error_page"'>
                          <b:include data='top' name='status-message'/>
                     </b:if>
..........code here .......
                             </b:includable>
What does this code mean ? it means if the page is not found , Blogger will call the includables status-message (<b:includable id='status-message'> ) which showing error message ( for more information on includables ,what are they and what they do ? you can read this post )

Keep reading if you are using SimplexEnews template. Skip for other Simplex's templates

Because the includables for showing 404 message ( <b:includable id='status-message'> ) were changed for making breadcrumb bar ( this feature is only on Enews template ^^ ) so we need to fix this includable for showing both of breadcrumb bar and 404 error message .

Find this code
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                     </div>                                       
                                 </b:if>
                             </b:includable>

And change it to
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                     </div>                                       
                                     <b:if cond='data:blog.pageType == "error_page"'>
                          <div class='status-msg-wrap'>
                                      <div class='status-msg-body'>
                                         <data:navMessage/>
                                     </div>
                                     <div class='status-msg-border'>
                                          <div class='status-msg-bg'>
                                              <div class='status-msg-hidden'><data:navMessage/></div>
                                         </div>
                                     </div>
                                 </div>
                                 <div style='clear: both;'/>
                     </b:if>
                                 </b:if>
                             </b:includable>

2, Now this step is for you all :D both of Simplex's templates and other templates
Go to Blogger Dashboard - > Search Preferences -> Custom Page not found -> click on Edit and add the content for your custom 404 page to the text box . You can add HTML code to this box so feel free to add anything you want ,for example : a cool picture ,a search box ,or a link ...
Here is what I did for SimplexDesign : A picture for 404 message and a small text ask the readers if they can back to homepage and search again .



If you want to make a 404 page with a picture ,the content of page can be something like this        
<img src="link to your 404 picture">
Page not found ,back to Homepage
A 404 page with a search box ,the content of page can be something like this
<h3>Your requested page was not found</h3>
<p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
Please check that the Web site address is spelled correctly.</p>
<b>Other things to try:</b><br/>
<ul>
<li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
<li>
<form method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
<td><input type="button" Value="Search"></td>
</tr>
</table>
</form>
</li>
</ul>
3,After two steps above ,you can type  a wrong URL in your blog and see what is displayed .
Do you see your custom error message ?Does it has a gray background and a black border ?
Yes ,we can add more CSS to make the border and gray background disappear
Find the tag </head>

And add this code right before
<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>
Now go back and see what happen to your 404 page . Is this what you want ?

You can custom the 404 page as you want by adding your own CSS in step 3 or add your own HTML in step 2 .

That's all for a custom 404 page .Please do backup before making any change . If you are using a Simplex template ,please pay attention to step 1 and finish it before move to step 2 and 3 .

Wednesday, 14 March 2012

SimplexGameZone - magazine template for game site



(A new update for this template has been released. Download link has been changed to newer one . For more detail on this update,you can check at this page ) 
It's been a long time since SimplexLinepress came out to you all . I was very busy ,so I couldn't publish any template . But when everything is fine ,it's time for a new template . In this post ,I want to show you the blogger version of Gameup template from Magazine3.com : SimplexGamezone . Yes, another magazine template .

DemoDownload Download jquery-ui.js

Install Instruction

1,Download template file

2,Download the jquery-ui.min.js file

To download these files ,click on the link . It open a new browser window . Click Save page as. Choose the place which you want to save and click on Save as

3,Upload this js file to your host . I have no hosting so I can't host it for you .

4,Open template in a word editor such as Notepad++

5,Find this code
<script src=".../jquery-ui.min.js" type="text/javascript"></script>
Replace .../jquery-ui.min.js to the url of jquery-ui.min.js file which you hosted .

6,Find this code
<b:widget id='HTML6' locked='false' title='socialnetwork' type='HTML'>
                                 <b:includable id='main'>
                                     <div class="headerbookmark">        
                                         <div class="headerbookmark1">
                                             <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCaUpTxKMiCn72KET9VteP82TafdWky7hNAvNXmzcy-McobuRqVw827QNliBv45_dhoZ7tXhzlsEar5T_BNC3_5yjMj7XHbS-AOPaEjS3gA73JXlZ-zd6dzTyZwkrvDui9a66OY4u47Q/" alt="" height="36px" width="36px"/></a>
                                         </div>  
                                         <div class="headerbookmark1">     
                                             <a href=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF5Ad7tQbO24StP_A45xfWQ8FfWnmgIpsV_JedeHNloTMhs6QNEkJxxVksPAZFs0S_qZNrA7w2djOSLK0u7mJiUImS_9YqQ5_fXnrXdlGVWSd8Z4bLvCgi-Wa752I-BmpIJ63p1AxsQ/" alt="" height="36px" width="36px"/></a> 
                                         </div>  
                                         <div class="headerbookmark1">  
                                             <a href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1Ny2E6fU_5gNasIRDNjp83yxzhdNoFuferc4VeEDeDPy8ggEQZI2ehgBfMQDKxw7ryuaVFvcXhSpV48gbaZvGcUOq3aZt13H-rP6w8h3DU5VnvuOKw4eZQmh5iADJNA_uusjuZ1EHw/" alt="" height="35px" width="36px"/></a>
                                         </div> 
                                     </div>                                                                     
                                     <div class="clr"></div>    
                                 </b:includable>
                             </b:widget>

Add the url of your social networks to this code .

7,To edit the main menu

Find this code
<div class="menu-header">
                 <ul id="menu-gameumne" class="menu">
                     <li><a href="">Home</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>
                     <li><a href="">Category</a></li>                   
                 </ul>
             </div>

Add link to categories to menu code above .

Link to category has structure like this
http://xxx.blogspot.com/search/label/category_name

8,Save template and upload it to Blogger

9,Go to Dashboard ->Setting ->Other - > Allow Blog Feed and change feed mode to Full

10,Go to Dashboard -> Layout

11,To add logo

Click on logo widget

Add the url of logo to widget content as structure bellow

12,To add content to newsticker

Click on headerticker widget
Add the category which you want to show posts in newsticker

13,To add content to slider


Click on slider widget

Add name of category which you want to show latest post in slider in widget content

14,Do the same for thepart1,thepart2,thepart3 ,latestupdate widgets .

14,To add the ad

Click on small ad widget

Add the ad code into widget content .

Do the same for other ad widgets

15,There's many place which you can add widget in this template .
You can add/remove them as you want .

Save changes . Ok ,you are done .
Installing this template is not different to other templates from SimplexDesign ,so If you familiar to others ,it only take you a few minutes .
I added the download link for js file . Because many of you complaint on 110mb.com hosting downtime . I hope with this js file and your host ,it can be much more easier .
I publish the template files and js file on dropbox website . So anytime I make a changes in template ,for fixing errors or doing something else ,this patch will automatically updated ,and you can get the latest updates with the same link ,don't need another download link . I will try to publish other templates to dropbox folder in future .
That's all for this template . Hope it helpful to you . Free to leave me comments :"D

Monday, 5 March 2012

8 tips for increasing blogger's loading speed

improve blogger loading speed by 200%
Many peoples complaint about their blog loading speed . 'Slow' is the term that I heard so much . So in this post ,I want to tell you some tips for increasing the loading speed .


1,Host javascript files in your host or Blogger template itself 
 Most of templates from SimplexDesign use a lot of javascript . Because blogger provide some APIs for designer ,so using javascript is the only way to masking -up the homepage . Javascript are also used for special effects in site ,for example sliders,tabs . In many Simplex's templates ,I used 110mb.com for hosting javascript files . It's a free hosting but not stable . Sometimes it downs ,all the blog that javascript files hosted in 110mb.com will be affected . So I suggest you all host javascript by yourself or host them in blogger template itself if you can't afford a hosting . If your site has a lot of traffic ,a host that support CDN technology is a good choice .

2,Remove unnecessary code
 I checked many sites that report error ,they add a lot of codes, ad code ,toolbar ,tooltip ... These codes increase the loading time ,some of them conflict to existing scripts in template and make template not working properly .

3,Remove unnecessary widgets 
Widgets can increase your loading time the way you've never thought .Believe it or not ,some widgets in blogger widget list is not from Google Blogger team ,it was built by bloggers ,and they also use javascript :D

4,Reduce social media buttons 
Social media buttons are also use javascript for taking post url when page load ,more button ,more script to load . So I suggest you all keep popular social media buttons only ,Facebook ,Twitters ... or the networks you use the most . Use addthis.com service and keep the number of button in the minimum ,I think it will be better .

5,Avoid extra comment systems
 Disqus or Facebook comment system can be modern comment systems with many functions ,but they are third party services ,all the comments and comment form are stored/loaded from remote servers . What happen if this service is busy or out of orders ? Many times ,I see facebook comment struggling in loading and then stop with a blank canvas ,no comment,no form displayed .

6,Load less posts 
Another question that I see a lot . People want to increase the number of posts in archive pages ,increase the number of post sections in homepage ... Should we load more post and make blogger processing more data ,make client browser process more javascript ? Web browser can be stopped from working, go to 'idle' status if it has to process a lot of javascripts . I often meet this error in working with Firefox (a good browser but eat a lot of RAM and CPU processing )

7,Use default 'readmore' function 
All Simplex's templates integrated 'auto readmore' function to create post summary with image for each post in homepage/archive page . But this script can be passed if we use Blogger default 'readmore' function . What is the difference ? The 'readmore' from blogger process data in server and send the result to client computer . 'Auto readmore' funtion use javascript for processing data in client computer . Your computer or Google server is more power ? I think you get your own answer .

8,Optimize images before posting 
Images is the largest part of every website . Optimizing images before posting , reduce the number of images will make your blog load faster ,especially for template such as Simplex Portfolio ,Simplex Photography 2 ...

Here are 8 tips for increasing loading speed of Blogger blog . I hope it helpful to you . Feel free to leave comments and click like if you think it interesting :D Thanks for your support :D