Today I’m releasing a new premium template made for owners of CE4 (aka ClickBump Express/Engine). Its called “Velocity” and its an SEO optimized, fully-validating html5 compatible template made for WordPress and CE4.

Here’s a preview (click the image for full size preview):

This template features a unique blend of cutting edge CSS design, html5 compatibility, as well as the ability to morph into any color scheme you can envision, using the CE4 point and click color options.

You can also add a custom header graphic (to replace the default female avatar character) and I’ve included a layered .pxd file with the package so that you can easily create your own custom header image to make this your own. You can open the .pxd image at pixlr.com, edit it, then save it as header.png for uploading to your site.

The template also features a vast array of color customization options. Here is the help overlay that you will see at “CE4 > General Settings > Show Help” (click the image for full size preview)

By default, the color values are preset to match the example. However, you can easily customize these colors, along with the header image to instantly transform this template into your vision. As you can see in the screenshot below showing CE4′s point and click color swatches (1-4) that you will use to set those colors:

Adding the CE4 Google Search Widget to the template

At the top right corner of the screenshot, you can see the Google Search Widget, specially formatted and anchored to the top right corner of the template’s header area. Its a snap to add this to your CE4 enabled site.

1) Go to “Appearance > Widgets” and drag “Google Search Widget” (a ClickBump CE4 exclusive widget not found elsewhere) over into the “Sidebar”. Once you’ve done that, it will look like this:

As you can see from the screenshot, I’ve already pasted in all of the default script for you. All thats left for you is to place your Pub Code into the space provided. You’ll get this from your Google search widget code at your Adsense dashboard.

Adding Your Ad Code to the template’s Main Content Ad Area

To add your Main Ad code to the template, you have two options (for Adsense), you can use your Client ID and Slot ID or you can paste your entire Ad code block. I’m using a combination of both in my example, so that I can rotate ads between the two. However, you can use one or the other.

To enable the stacked 336×280 ads as you see in the screenshot, open your site’s admin dashboard and click on the theme options panel (CE4). Once you have that open, just click on the “Ads” tab and paste in your Google Client ID and Slot ID for your saved large rectangle ad like so (click the image for full size preview):

Note that I have a few extra options selected in my example. These are all optional (as all of the CE4 settings are). By placing ad code into the “Alternate Ad Code” block, and checking the “Turn on Ad Rotation Script” option, I’m enabling CE4 to rotate the ads that the viewer sees between the Adsense main ad (the one I’ve specified at the top with the Client ID and Slot ID) and the “Alternate Ad Code”.

What’s cool about this feature is that I can place ANY ad code I want into the “Alternate Ad Code” box, and I’m not limited to Adsense. I can, for example, rotate between my stacked 336 Google Adsense blocks, and a high commission ClickBank product with affiliate link (or whatever). You get the idea. This is very powerful.

Feel free to use the comments are below to ask any questions you may have about setting up the new “Velocity” template for CE4. Existing CE4 owners can purchase and install this template beginning today at Paypal.

Adding Menus to the Velocity Template

The template is pre-configured to present the WordPress custom menus as you see in the screenshot, with the current post or section automatically highlighted. It also will display any posts you’ve flagged with the top-menu category and place them in the blue bar across the bottom portion of the header area. If you built your site with JumpStartPro!, the installer automatically created a custom menu for you. However, if you did not, click on “Appearance > Menus” to create and configure your menu similar to this (click the image for a full size preview):

The custom menus are flyout enabled, so that if you drag and drop them under one another, they will automatically orient themselves as flyout menus.

To flag specific posts to appear in the blue bar below the custom menus, just add the “top-menu” category to the post and CE4 takes care of the rest.

Adding the footer boxes

The four boxes you see at the bottom are optional. However, these are great areas to showcase special Amazon or ClickBank products that relate to your niche. Or, you can just place additional content into them. To create them, just go to “Appearance > Widgets” and drag a few “ClickBump Box” widgets over into the “Footer” sidebar as you can see below. You can use as many or as few box widgets as you want. Velocity with auto adjust them to fit alongside one another!

Note from the screenshot above, one of the unique capabilities of the CE4 theme that set it apart from other themes, the ability to set widget visibility. For example, in this case, the widget will only be seen on the home page.

Feel free to use the comments are below to ask any questions you may have about setting up the new “Velocity” template for CE4. Existing CE4 owners can purchase and install this template beginning today at Paypal.

Nov 21, 2011 update. Demo CTR-Plus site is now live

In this blog post tutorial, I’m going to walk you through the process of creating a review site using my WordPress theme, ClickBump 5 (aka C5).

I will be using my “CTR-Plus” template which installs into ClickBump 5 with one click to instantly transform your site.

ClickBump 5 is the WordPress core theme which comes with any of products > ClickBump Express, or Engine, or Express with JumpStart Pro or ClickBump Bundle)

Here’s what the site will look like when we are done (click the image for a larger preview):

(Above: CTR-Plus for ClickBump 5. Click the image for full screen preview.)

You can view the live demo site here

As you can see from the screenshot, there are several monetization sources available and at your disposal in ClickBump 5.

The Ads in the Example Site

To the right side of the header image, you can place a Google search widget, just by dragging and dropping the ClickBump ClickBump 5 exclusive “Google Search Widget” from the “Widgets” area over into the “Header” sidebar at “Appearance > Widgets“.

Below the header image and to the left, we’ve placed a 160×600 tall skyscraper banner (it can be from Google adsense or from any affiliate network such as Amazon or ClickBank). To place this ad, I just went to “Appearance > Widgets” and dropped a “ClickBump Ad Box” over into the “Sidebar” widget area. I then pasted my ad code into it and clicked “Save”.

To the right of the skyscraper ad, and inside the main content area, I’ve placed a set of “Stacked 336×280 ads” one on top of another. ClickBump 5 has an automated setting to do this for you, so I’ve just enabled that option at “ClickBump 5 > Ads > Use Stacked Ads“. I also placed my Adsense Publisher ID into the space provided at “ClickBump 5 > Ads > Adsense ID” and I’m all set, ClickBump 5 does the rest, including the nifty, two column, magazine style layout you see in the screenshot.

Just below the content area, I’ve placed a single 600×160 banner ad that reinforces my main offer, which is a ClickBank product on the workout ebook my site is targeted to. To place this ad, I simply grabbed my ad code from ClickBank, then opened “Appearance > Widgets” and again, dragging a “ClickBump Ad Box” over into the “Below Content” sidebar area. I then opened the sidebar widget and pasted in my ad code before clicking “Save“.

The Images in the Example Site

Starting from the top left, you have the ability to add your own custom header image (the avatar character). This can be any image you choose. You’ll upload it via “ClickBump 5 > Images > Header“. I choose an headshot of a male avatar character, which has a transparent background to seemlessly blend in with the template gradient background area for a nice, clean look.

Directly under the header area, you’ll see two large 350×250 images that match my site’s theme (Crossfit Workouts). I grabbed these images via Google search. Make sure the images you use are cleared for display and you are not violating copyright. There are many free stock photo collections available online and you can also search google images with a copyright license filter enabled. I also use istockphoto.com for paid stock photography.

The Content and Menus in the example site

To create this site, I used JumpStart Pro, the one click site installer that comes with my “Express with JumpStart Pro” and “ClickBump Bundle” packages. The JSPro installer automatically installed ClickBump 5, along with the CTR-Plus template (I placed a copy of the unzipped ctr-plus template folder into the JSPro’s “templates” folder prior to using it to create this site).

By using JSPro, I did not have to create any pages or posts, since JSPro creates them all for me as part of the one click install process. I merely had to edit my home page post with my main article content.

The menus were all created as part of the JSPro installer process as well. I simply removed the default “Custom menu” that the JSPro installer created (since I wanted a clean look across the top), but going to “Appearance > Menus > and de-selecting the “Site Menu” from the “Theme Locations” box and clicking “Save”.

Unlimited Color Options

As with all ClickBump templates, you have unlimited color options via the point and click colorpicker in ClickBump 5 theme options. For example, with just a few clicks on the colorpicker, you can instantly change the background to any color you like. Here are a few examples:

Since the template runs in the ClickBump Framework, you have complete control over ad placement, menu counts, and foreground (text) and background color options at the click of a button. You can also take advantage of ClickBump’s built in support for social media as well as Google search box as seen below (click for full size preview) as well as automatic social sharing widgets above or below your post content.

Finally, because CTR-Plus runs in ClickBump Framework, you can instantly customize the color palette to match your niche or tastes, from an unlimited selection of colors, with point and click ease via the ClickBump theme options panel. Here are a few color scheme examples:

CTR-Plus Step by step setup

1. (optional) Install and activate JumpStart-Pro. This sets up your site’s default pages and posts, installs the ClickBump WordPress theme into the site and sets up the site default settings to optimize it for search traffic and monetization.
2. Install the CTR-Plus template package ctr-plus.zip into the ClickBump Framework at “ClickBump > Home > Add/Upgrade Templates“.
3. From the “Template/skin” pulldown menu, select ctr-plus and click “Save Changes” at the top of the theme options panel. This tells ClickBump framework to use the CTR-Plus skin for your site’s design and layout. The ClickBump framework still controls the core markup, html5 & css3 compatibility, w3c validated markup and all settings. The template gives it the unique look and feel that leads to high conversion rates.
4.  Site Check – Assuming you’ve built your site with JSPro, the site will now appear as in the “Figure 1” screenshot below.

5. Next, if you don’t want the slider widget active, you can disable it, along with the jQuery library that it relies on by un-checking the two options at “ClickBump > Misc > Slider > Enable” and “ClickBump > Misc > Scripts > Enable jQuery“
6. Configure your Ad options – To do this, Go to “ClickBump > Ads“ and enter your Adsense Client ID (if using Adsense) and/or your Ad script or Amazon/ClickBank/Ebay/Chitika code at “ClickBump > Ads > Alternate Ad Code“
7. Site Check – Assuming you are using Adsense, and have pasted your Google Adsense Client ID into the space provided at “ClickBump > Ads” your site will now look like the screenshot labeled “Figure 2″ below.

8. Now I’m ready to place my affiliate ads into the left sidebar and below the content as in the screenshot. Before I do so, I’m going to clear out the default sidebar widgets that JSPro added to my sidebar. To do that, I just go to “Appearance > Widgets” and drag the 3 widgets out of the box labeled “Sidebar”. Just drag them over to the left and they will be removed from the sidebar leaving it empty.
9. Next, without leaving the Widgets screen, drag a “C5: Ad Box” widget from the “Available Widget’s” collection over into the sidebars labeled “Sidebar” and “Below Content“. If  you don’t want to place ads here, you can skip this step.
10. Continuing with Step 8, expand the “C5: Ad Box” widget and paste your ad code into it and click “Save”. In my example, I’m using a ClickBank offer in these areas, so I’ve uploaded my ad images via “Dashboard > Media” as ad1.png and ad2.png (but you can name your images anything you like). For the left sidebar, which will be using ad1.png, I”ve placed the following code into my “C5: Ad Box” widget for the left sidebar (don’t forget the “alt” attribute. You site won’t validate as html5 without it):
    

    <a href=”my-affiliate-link”><img src=”path-to-my-site/wp-content/uploads/ad1.png” alt=”crossfit workout course” /></a>

11. Continuing on with Step 9, for the Ad that appears below my content, I’ve expanded the “Below Content” sidebar and pasted the code for the 2nd ad into the “C5: Ad Box” that I placed into that sidebar:
    

    <a href=”my-affiliate-link”><img src=”path-to-my-site/wp-content/uploads/ad2.png”  alt=”crossfit workout course” /></a>

12. Site Check – Now that I’ve got all my ads in place, you can see what my site looks like now in Figure 3 below…

13. Next, I’m going to temporarily hide the 4 boxes that JSPro added to my “Footer” sidebar at the bottom of my template. Unlike before in Step 8 where I removed the widgets completely from the sidebar, in this case I might want to use them later, so I’m going to use ClickBump Framework’s built in “Widget Visibility” option to simply disable them for now. To do this I simply check the Hide button on each of the “C5: Box” widgets 1-4 and then “Save” at the bottom of each widget. You can see this in Figure 4 below.
14. Next, I’m going to customize the header image and replace the image of the girl with my own custom image. The default size of the CTR-Plus template’s header image is 967×100, but your image can be any size you like. To expand the header to accomodate a taller image, you can enter a custom header height at “ClickBump > Images > Header Image > Custom Height“.
15. To upload your image, go to “ClickBump > Images > Header” and click the button that reads “Upload Header”. Just remember to save your image as a .png file. ClickBump will automatically rename the image header.png and place it into the ctr-plus folder under “wp-content/themes/c5/styles/ctr-plus/”

16. Site Check – Now that I’ve disabled the 4 Boxes in my “Footer” sidebar, and uploaded a custom header image, my site looks like you see in Figure 5

17. Finally, all that’s left is to add the two large images just below my header area. To do that, I’ve renamed my images with an underscore in front of the filename (_image1.jpg and _image2.jpg) and uploaded them via “WordPress Dashboard > Media“. I’ve also checked the option to show product images at “ClickBump > Product Images > Enable“. This tells the theme to display any images it finds with an underscore character preceeding the filename at the top of each of my posts.
18. All done! Now you just need to add your content and you are set to go forward. For help configuring your custom menus, check FAQ #19 in the ClickBump User’s Forum. To see how ClickBump Framework’s automated metadata manager works, check FAQ’s #10-12.
19. BONUS: If you want to short circuit a few of the setup steps above (specifically #3, #5 and #17), here’s a script that you can import via “ClickBump > Misc > Settings Manager > Import Settings” to insure your site is set up as directed above (Note: you will still need to upload the product images, this script just assigns all the correct settings in CE4 theme options to emulate my example site).

Figure 1 – CTR-Plus after installing on a new site built with JSPro

Figure 2 – CTR-Plus after enabling ads and checking the “Default to stacked ads” option

Figure 3 – CTR-Plus after adding the ad to the left sidebar and the “below content” sidebar

Figure 4 -Temporarily hiding the footer boxes using ClickBump Framework’s unique “Widget Visibility” panel.

Figure 5 – CTR-Plus after adding a custom header image via “ClickBump > Images > Header Image”

You can now have post-specific ads in CE 4.1 beta!

W
ith the upcoming release of the latest version of ClickBump theme, I’ve introduced multiple levels of new Ad placement options including post-specific ads and global “alternate” ads.

For example, you still have the famous, out-of-the-box integration of Adsense within the post content, but you now have the ability at the global level to display an “Alernate Ad Network” by placing your code directly into the “Alternate Ads” block in theme options: ClickBump > Ads > Alternate Ad Code

Whatever code you place here, will automatically be displayed for every post page on a global level. This means that not only can you place single ad code, you could also place scripts that rotate ads from a series of CPA banners, for example.

Since its an open code entry field, you could use it for virtually any ad code, even Adsense for example, if you prefer the “old school” method of pasting your entire code block into the input field complete with hardcoded color values, etc. Some people that haven’t started to use Ad Channels or Slot Ids for globally managing Ad colors, will find this an appealing option over the traditional Ad Client ID, Slot ID combination that was previously the only option for Adsense inclusion.

Whichever you choose, the theme manages the placement of the ads within the post content, using the template’s styles to wrap the surrounding text around the Ads as specified in css.

But what’s really cool, and what you see in the image above, is that now you also have post level Ad management. This means for any given post, you can place a specific Ad on JUST THAT POST ONLY. Here’s the kind of response I’m getting from early adopters of this feature…

Scott, that new custom post ad code option! That’s SO much better in many cases than Adwords! Got a chance to use it this AM and it’s fantastic! This will work out great for three of the four authority sites I’m running. Thanks!
- Warbar

This allows you to override the global settings in ClickBump > Ads, with whatever Ad code you’ve placed into the new “Custom Ads” block which you will find just below the excerpt field while editing a post as shown below.

As you can see from the screenshot above, with the addition of the “Custom Ads” input field onto the post editor workspace, you can attach “post-specific” ad code the post without having to place it into the content, then allowing the theme to automatically control the insertion and placement of your custom ads into specific posts and global Adsense or Alternate Ads into others.

If it wasn’t there already, ClickBump theme should be getting pretty close to an Affiliate marketer’s dream system. Stay tuned for more…

BTW, ClickBump Engine owners can pick up the latest Version of ClickBump theme now at the member’s dashboard, to get all the good stuff I’ve just talked about.

~ s

With the emergence of ClickBump Engine as one of the indispensable tools for Internet Marketers, along with the incredible reviews and accolades for the ClickBump SEO! Plugin, lots of people are discovering my products for the first time.

So I thought it might be helpful to share my default settings so that you can quickly get your sites setup exactly like mine are done.

All of these settings will be the defaults in the next JumpStart update, which makes this a one click and done solution, but until then, here goes…

Once you’ve installed CE4 into your site, you can access the CE4 theme options panel by clicking on the blue CE4 icon at the bottom of the left side dashboard menu. You will then see the General Settings panel open for view as well as the following collapsed menu tabs: Colors, SEO, Ads, Menus, Layout and Misc.

For those of you just getting started with CE4, it might be helpful to emulate my default “tried and true” setup until you are familiar enough with the settings to start tweaking them to suit your tastes.

The following options are enabled (has the checkbox ticked on) in my default site setup (CE4 provides an explanation of what each setting does, but I’ve omitted that here for simplicity)

CE4 > General Settings

• CE4 > General Settings > Enable Category Index
• CE4 > General Settings > Category Index Layout > List View (2 column)

CE4 > Colors

• CE4 > Colors > Body Text Link Color > [ #005fbf ]

CE4 > SEO

• CE4 > SEO > Use Post Title | Site Title
• CE4 > SEO > Show Post Excerpt Text Under Post Title
• CE4 > SEO > Use Post Excerpt for Google SERPs Description
• CE4 > SEO > Custom Head Code (enter google webmaster’s metatag)
• CE4 > SEO > Unlink Post Tags
• CE4 > SEO > Permalinks Settings > [ /%postname%.html ]
• CE4 > SEO > Use Post Title | Site Title

CE4 > Ads

• CE4 > Ads > Adsense Client ID > [ pub-1234567891234 ]
• CE4 > Ads > 336×280 Adsense Slot ID > [ 1234567890 ]
• CE4 > Ads > Divider Line Above Ads
• CE4 > Ads > Default to Stacked Ads

CE4 > Menus

• CE4 > Menus > Recent Posts Default Count > [ 10 ]
• CE4 > Menus > Enable Latest News & Article Links on Home page
• CE4 > Menus > Enable Related Articles Links on Posts
• CE4 > Menus > Move top-menu links to Sidebar
• CE4 > Menus > Show Sitemap Link in Site Menus
• CE4 > Menus > Show Sidebar Widgets Above Menus
• CE4 > Menus > Show Empty Categories

CE4 > Layout

• CE4 > Layout > Underline Links in Content

CE4 > Misc

• CE4 > Misc > Custom Hidden Footer Code (I place my visitor analytics code here)

Important Tip: When you paste in your Google Adsense Pub ID, make sure there are no empty spaces at the end. If there are, you won’t get any ads since its not a valid number!

I’ve just put the finishing touches on the newest update of ClickBump SEO! and I’ve added a few really essential features to help you manage how links within content are followed. If you use an SEO optimized theme like ClickBump Engine, you already have full control over your menu links outside your content. SEO! applies that same level of automation to your links within your content posts.

Here’s a quick sneak peak (click the image for full size preview)...

External links are the easiest, since you almost always want to assign them as nofollow. You can see the setting to nofollow external links in the options panel above. Check that option and click “Save Changes” and SEO! will automatically add nofollow attributes to your external links upon each content update.

This helps prevent PR leakage through the link out to the external site you are linking to. Its especially important with regards to one particular type of external link: The affiliate referral link.

So step 1 with affiliate referral links is to make sure that they are set to “nofollow“. And, in the latest version of my WordPress SEO plugin, ClickBump SEO!, I make this easy for you. With the SEO! Settings panel you can tell the plugin to automatically add rel=”nofollow” to the external links within your content every time you save or publish a post.

So if you are still linking to your affiliate partners with open links, this will certainly help you to make sure that the nofollow part is automated.

However, to take it a step further, if you are savvy, you are probably “cloaking” your links so that they appear to the end user as an internal link. For example, your link to your hostgator affiliate URL might be something like, http://hostgator.com/affiliate=12345 (just an example obviously), but you may be “cloaking” the link so that it appears to the end user as http://yoursite.com/recommends/hostgator/

If you don’t know how to cloak your links like that, stand by, I’m about to explain to you exactly how to do it. But if you are already cloaking your links, I have a neat feature in my WordPress plugin for you too. You can now specify a link pattern in the SEO! Settings options that matches your cloak folder and SEO! will automatically add rel=”nofollow” to those links, without touching your other valuable internal links which you certainly do want followed from post to post and article to article. So ClickBump SEO! owners, head over to the member’s dashboard and grab a copy of 1.9.1 to take advantage of these new features.

Now, if you are not currently cloaking your external affiliate links, here’s how:

1. Open your site via FTP and add a folder to the site’s root directory, if you are on HostGator, your site will likely be under public_html/sitename/
2. Name the folder something like “recommends” or “go”, since your links will contain the name of this folder (http://yoursite.com/recommends/) for example
3. Next, open notepad or a text editor and copy this text into it, replacing your affiliate URL where specified…

   <? header(‘Location: http://your-affiliate-link-goes-here/’); ?>

   Note: Make sure you include the slash at the end of the link “/” and make sure your quote marks around the link address are straight ones (not skewed left or right or curly). If you have errors, 99.9% of the time, its the friggin quotes!
   

4. Now, Save this file as index.php and head back over to the FTP application.
5. Open the folder you created in step 2 and create a new folder, named after the affiliate program for which you just created the index.php file. For example, if this was my hostgator affiliate link, I would just name the folder “hostgator”.
6. Finally, upload your index.php file, containing the hostgator affiliate link and place it inside the hostgator folder.
7. That’s it, just repeat this process for each affiliate link you are promoting

In the above example, now when you want to link to the HostGator offer with your affiliate link, you no longer have to expose your affiliate link ID, you can simply create the following link > http://yoursite.com/recommends/hostgator/

And if you have ClickBump SEO!, you could have it automatically apply nofollow to all of your cloaked links, simply by placing the URL pattern http://yoursite.com/recommends/ into the SEO! Settings page and you would never have to worry about adding nofollow to your affiliate links within content again.

Hope that helps someone!

If you’ve picked up the brand new XFactored 2.0 Premium ClickBump add-on template, along with the recently released C5 (ClickBump Version 5), you are ready to roll with creating your first authority site modeled after John Robinson‘s new Authority Site Adsense Guide.

Above: XF2 template using the “Default Grid View” category layout. ClickBump > Layout > Category Index > Grid View | Design Tip: Where possible, use images with a white background (or transparent background) to give a professional sheen to your site.

Above: The template’s “Show Help” reference inside the theme options panel

Above: You can easily set template colors and backgrounds via the quick color changer above. You also have detailed color and size control of text, links and body copy via “ClickBump > Text” manager.

Here’s a quick checklist to assist you to quickly get your sites up and running in the new ClickBump theme together with the new XFactored 2.0 add-on template…

1. Install and Activate ClickBump theme (get the latest from the member’s dashboard. Unless the file says “Upgrade”, install as a New Theme via Appearance > Install Themes. If the file is an upgrade: clickbump_upgrade.zip, install at ClickBump > Home > Add/Upgrade template)
2. Download and install XFactored 2.0 Premium Template (ClickBump > Home > Add/Upgrade Templates)
3. Set your home page post as a “Sticky” post and add to “dont-show-ads” via “Quick Edit” link. The home page’s content is used as intro for the categories. No need to set up a static home page, ClickBump does this automatically when you assign a single post as sticky. (Posts > Quick Edit > Make this post sticky). Also, to emulate the clean look home page you seen in the screenshot, enable the dont-show-ads flag so that Ads do not appear on the home page grid area. They will still appear on post articles and category landing pages, and in the header area widgets if you’ve set them up.
4. Create or update your categories. You will upload a custom category image, full text description and add a custom category title via the enhanced Category Manager made possible by ClickBump theme. The theme automatically creates the teaser description summaries that you see on the homepage. Make sure they end with a period punctuation to mark the end of the excerpt.
5. Assign each of your posts to the appropriate category (other than “Uncategorized”). This is the essence of creating a silo site structure with themed content and the key to gaining “Authority” status with Google. For best results, go to “WordPress Settings > Writing > Default Post Category” and select any category other than “Uncategorized” as your default category. Never delete or re-parent Uncategorized. It holds the critical ClickBump utility functions that allow you to do lots of cool stuff with posts.
6. Go to Appearance > Widgets and drag a Categories Widget over into the “Sidebar” widget area. This creates the list of category button links just as John discusses on page 132. The XFactored 2.0 template automatically creates the button styling for you using the color you specify in “Color 4″ in theme options. You’ll also want to check “ClickBump > Layout > Move > Sidebar Widgets Above Menus“
7. Create your static pages as PAGES and publish them (About Us, Contact Us, Privacy Policy, Earnings Disclaimer, etc). Alternately, install ClickBump JumpStart Pro plugin and activate it to have all of these pages created for you. Regardless how you create them, they will automatically appear in the navigation bar just under the header as John describes on page 130. You will then create each of your articles as POSTS.
8. Activate the Homepage Category Index in theme options – Go to “ClickBump > Layout > Category Index > Enable” and tick the checkbox, then select one of the three options from the “Category Index > Layout” setting just below it and click “Apply Changes”. This will turn on the display of your categories in your selected view (grid view or list view).
9. Theme Options Settings: To emulate John’s example site exactly down to the last detail enable these options:
   1. Layout > Category Index > Enable
   2. Layout > Category Index > Layout > List View (1 column)
   3. Ads > Divider line
   4. Ads > Adsense Stacked Ads
   5. Menus > Latest News > Enable
   6. Menus > Related Articles > Enable
   7. Layout > Move > top-menu Links to Sidebar
   8. Layout > Show > Sitemap Link
   9. Layout > Move > Sidebar Widgets Above Menus
10. Upload a custom header.png via “ClickBump > Images > Header Image > Upload Header” – see this post if you need help creating it. Click “Show Help” to see all the color options for the template. The size is 967px wide x 100px tall (in pixels) and must be a PNG file format saved as “header.png”

Some Common Questions and Answers

1. How do I change the header image?
   Answer: “ClickBump > Images > Header Image > Upload Header”
   This template uses a png header named header.png
   To replace it, create your own custom header file and save it as a png (portable network graphics file format) with the filename “header.png” (all lowercase, must be named exactly like that, header.png, and must be a .png file). The image is 967 x 100 pixels. Once you have your own header.png file saved, just go click the “Upload Header” button and follow the prompts. Click “Show Help” for more customization options for this template. Alternately, send your artist the layered header.pxd file, located in your template folder and ask them to open it at pixlr.com to edit the image, then save it as header.png for you to upload. If you want to try this yourself, grab the header file here and open it at pixlr.com
   
2. My custom header image already has the site title and tagline in the graphic, how can I get rid of the text based title and tagline that ClickBump adds to the header?
   Answer: Yes, enable the options to hide this site title and tagline at “Layout > Hide”
3. How can I add a tall CPA ad into the sidebar like John mentions on page 133?
   Answer: Go to “Appearance > Widgets” and drag a “C5:Ad Box” text widget over to the “Sidebar” widget area, then paste your ad code into that. You can use the “Widget visibility” options to specify where the widget should appear (pages, posts, tags, categories, etc).
4. How can I add a Google Search box like John mentions on page 131?
   Answer: “Appearance > Widgets > C5: Google Search Widget”
   This is a custom widget I created to make it super simple to add a custom Google search box to your site. You’ll still need to grab your search box code from Google, but I’ve made it super simple for you to add it to your site, completely styled to match your template. Drag the widget labeled “Google Search Widget”  over into the “Sidebar“ making sure its at the top of the listing (if you have multiple widgets in a single sidebar). Then expand the widget and paste in your entire search box Ad code you got from Google.
5. How do I get the one sentence descriptions to show up in the “Related Links” lists like John describes on page 135?
   Answer: Just create an excerpt for each of your posts and ClickBump does the rest.
   The theme automatically pulls the first line of your excerpt text and places it alongside the article link, giving users a quick glimpse at the focus of your article.
6. How do I get the category menu to appear in the sidebar like John talks about on page 139?
   Answer: “Appearance > Widgets > Categories”
   Just drag a “Categories” widget over onto the “Sidebar” widgets holder. ClickBump does the rest, including styling the menu to look like buttons. The button background color is determined by your setting for “Color 4″ in theme options.
7. How did you get the category image to appear in the category landing page content?
   Answer: Once you’ve uploaded an image to represent your category(s), ClickBump does the rest, including inserting the category image into the home page listing (in either grid or list view) as well as inserting it into the Category landing page content.
8. I know its not part of John’s layout, but can I still use the Leaderboard Area for Ads across the top like you’ve demonstrated in the Adsensed and Amazonia templates?
   Answer: Absolutely, and they look awesome.
   Just go to “Appearance > Widgets” and drag a C5: Ad Box widget over to the “Header” sidebar widget holder, then expand it and paste your Ad code there. Check this post for an example of what this looks like.
9. How do I remove Adsense from my home page only?
   Answer: Posts > Quick Edit (on the home page sticky post) > Categories > dont-show-ads
   You can selectively turn on/off Ads on a post by post basis using this method, for any post, including your home page sticky post.
10. How do I enable the “Most Popular Articles” menu in the sidebar like you have in your screenshot?
    Answer: This menu is a listing of your posts that are assigned to the “top-menu” category (a clickbump only category under “uncategorized”). First, you need to tell ClickBump to move the top menu posts over to the sidebar. To do this, just got to “ClickBump > Move > top menu links to sidebar” and check this setting then click “Apply Changes”. Finally, just add any post you want to feature in this listing to the top-menu category and it will appear in this list. You can also customize the heading for this menu under “Menus > Sidebar heading for recent posts“.

Nov 16, 2011 – Updated for ClickBump 5 the Amazonia “3-in-1″ template package now includes “Amazonia Plus” in addition to the original “Amazonia” and the recently updated “Amazonia Alt“.

View the Live Website Demo of Amazonia >

I first joined the Amazon Associate’s program when the only thing that we could sell were books and music. But now, you can sell almost any product you can imagine. And with Amazon’s reputation for price and service, there’s no better time to jump in and start cashing in on referral links for helpful, high ranking Amazon.com product review sites that you create.

With that in mind, I want to share a template I’ve created for ClickBump that’s tailor made for Amazon product review sites. I call it “Amazonia Plus” and here’s what it looks like in its default color scheme (click the image for a full size preview – article continues below):

This template is unique in that you can achieve a personalized look for your site  just by tweaking a few color options with the visual colorpicker you’ll find in theme options – see “A Theme with Multiple Personality?“ for more examples of the looks you can achieve with ClickBump premium templates.

For example, here’s one of my favorite color options for this template (I like the minimalist use of the spot color, balanced by the neutral gray and the way the header area invites the user to scan vertically to the ad space):

OK, now that you know what it looks like and some options for colors, here’s how I did it …

First, you’ll need to activate and download the template from your ClickBump Member’s dashboard or just click here to activate it now. Once you’ve got it installed, head back over here for some quick setup tips to get the template looking just like the first screenshot above. (Hint, if you like the look of the 2nd shot, just choose the same color for Color 1 and Color 2 in theme options. I used #e5e5e5, which is just below the white color swatch in the colorpicker panel)

The good news is that the site setup is super simple with this template, since I’ve already preset the default colors and images for you. All that’s left is to decide which products you are going to promote, grab a carousel widget that showcases your product and similar products and create your content. If you have ClickBump JumpStart Pro, just activate it on your new site to instantly pre-populate all your default pages and content.

Step 1 > Install the template into ClickBump

Ok, step one is to install the template into your site. Go to “ClickBump > Home > Add/Upgrade Template” and locate amazonia.zip (one file contains all 3 templates) that you just downloaded from the member’s dashboard and click to upload it. Once its been uploaded, select “Amazonia Plus” from the template selector pulldown menu to activate it as your default template.

You’ll see that the colors, links and headings are preset to match the screenshot above with the distinctive trusted Amazon orange and blue. If you want to change up the color scheme, just select some new colors with the colorpicker widget and preview your changes. If you want to experiment with colors, you can always revert to the default colors at any time just by clicking “Reset Colors to Defaults” and then click “Apply Changes”.

Tip: I like to make my site colors the same as the store I’m promoting. This helps insure a smooth transition from my site to the affiliate site. In this case, Amazon.com. Another neat coincidence is that WalMart.com and Amazon.com colors are very similar so you can use this template in its default color set, for both of these site’s affiliate programs. But if you need to change colors, its just a couple clicks as you can see from the screenshot below.

(Above: The ClickBump theme control panel allows you to select the site’s default template along with the main site colors)

Step 2 > Activating the Amazon Carousel Widget

Next thing you will want to do, assuming you are going to be using the Amazon Carousel widget to showcase your products, is to grab a carousel widget from your Amazon associate’s dashboard and place it into the “Header” sidebar via “Appearance > Widgets“. Go ahead and grab that and come back here when you have the code on the clipboard (copy).

The default width of the carousel widget is 600 pixels. To better fill the available space across the top of the post content where the “Header” sidebar sits, I chose to change the size from 600 to 880 pixels. This is completely optional but if you want to do it here’s how: Just open a text editor (like Notepad) and paste the carousel code into a blank page, then find the two places in the code where you see the number 600 and change it to 880. Once you’ve done that, just select all and copy.

Now that you’ve got the code on the clipboard, just head back over to your WordPress dashboard and go to “Appearance > Widgets” and grab a “C5: Ad Box” widget and drag it over into the sidebar labeled “Header” over on the right side of the Widgets panel .

Next, open the widget up and paste your code into it. If you want it to appear only on the home page, set the “Widget Visibility” option at the bottom of the widget to “Show On > Home“. If you want it to appear on all posts and pages throughout the site, just uncheck all the options at the bottom and click the “Hide on” radio button and click “Save”.

Optionally, if you want to keeo the 600 pixel carousel, you may use the “Above Content” sidebar instead of the “Header” sidebar. The main difference is that the “Header” sidebar spans the entire width of the template, above the content area and the sidebar area. However, the “Above Content” sidebar is appx the same width as the default carousel (600 pixels) and sits just above the content and to the left of the sidebar. 

Step 3 > Creating the Default Product Categories

One of the best ways to enhance your site’s search engine rankings, aside from choosing an exact match domain and using the ClickBump SEO! WordPress plugin to optimize your posts, is to create a “Silo” site structure based around major content “themes” (not to be confused with the “Theme” layout/design that your site is displayed in).

In WordPress, a “content theme” is just a Category assignment. So, in  my example site, I’m selling point and shoot digital cameras and my theme is centered around the phrase “Best Camera Under $$$“.

So I’ve created three main categories, “Best Cameras under $100″, “Best Cameras under $200″ and “Best Cameras under $500″. I’ve then assigned all of my posts to one of those three categories, which creates a Silo structure that the search engines really like to see.

Step 4 > Creating the Product Posts and Default Content

OK, this next step is super easy if you have ClickBump JumpStart Pro! To create your default pages (About Us, Contact Us, Privacy Policy and the required FTC Earnings Disclosure page) just intall ClickBump JumpStart! plugin and click “Activate”.

If this is your first time to use JumpStart Pro, you’re going to be amazed because that’s all there is to do – one click and JumpStart goes to work:

• Creates all of your default pages
• Removes the WordPress default pages and comments
• Sets up your site for search engine friendly URLs
• Open’s your site up for search engine accessibility and more.

If you don’t believe it, check out your site and you’ll see what I mean. All of your default pages will be there and your links will be in SEO friendly format. The cool thing is that it only took all of 2 seconds and rather than trudging through the mundane process of creating pages and navigating through WordPress menus to make sure your site is set up properly, you’ve only clicked a single button!

In my example, I created a single post page for each camera that I’m reviewing in each category. You can see that by the listing in the right hand sidebar under “Best Camera’s Under $200″.

Step 5 > Adding the  Product Categories to the Top Header Menu

Now that you’ve created the posts and assigned them to your product categories, you just need to configure the template to show the categories as a menu like you see in the “Amazon orange” color in the example screenshot above.

To do this, follow these steps:

Congratulations! You’ve just built with Amazonia!

As an optional feature, you see that I’ve also added an Amazon  ”Best Deals” widget in the sidebar. To enable that, just do the same thing you did for the Carousel and paste it into the “Sidebar“ widget area.

Hopefully this post has shown you how easy it can be to create a very professional Amazon Associate’s review site in ClickBump Engine in just few minutes. The key here is using the pre-formatted Amazonia Plus template (require’s the ClickBump WordPress Theme), along with the ranking power and ease of use of ClickBump.

What are you waiting for? There’s no better time to jump in and start earning! Amazonia Plus is the dream system for Amazon Associates.

Bonus Points > Customizing the Amazonia Plus Header Image

I’ve been using the Pixlr.com online graphics editor ever since I lost a hard drive and had to be without Photoshop for several days while resurrecting my PC. Click here to see my post on Pixlr.com

I believe you can find the blessing in just about anything and this was certainly the case here. Despite the fact that I lost my hard drive, and considerable time reconstructing things, I found pixlr and now I’m able to share it with you.

So the purpose of this post is to show you how to edit the header image that ships with the Amazonia template that I built for Affiliate review sites for ClickBump Engine owners. Here’s a quick peek at the Amazonia template so that you can see what we are working towards. The header image is in the blue background area…

I’ve started including header.pxd files in most of my premium templates to allow the end user to customize their header images at no cost pixlr.com. The pxd file format is the pixlr.com native file format that supports layering as well as transparency. The pixlr online editor is the closest thing you can get to a copy of Photoshop and not be $650 in the hole for the trade – in other words its absolutely free. What that means is that you can open and save as many images as you desire and so it was the perfect file format to settle on for the custom header images in my themes.

The header image used with the Amazonia template consists of a two-layer image, one layer holds the avatar character on the left side, while the other holds the camera image on the right. I’ve spaced them on opposite sides of the image to allow for the site title and tagline of the page to rest in the middle of the two images once the page is viewed in the browser.

So here’s the step by step on how to customize the Amazonia header image at pixlr.com

Step 1 Go to pixlr.com/editor and select “Open image from computer”

Now select “header.pxd” from your Amazonia folder (you will need to unzip it first). You will see that the image opens with two layers in the pixlr editor as you can see from the screenshot below…

Step 2 > Select Layer 1 and Delete the camera image

The image in “Layer 1″ is the camera photo. And the image in Layer 2 is the avatar character. I could have named them something other than “Layer 1″ and “Layer 2″, but you get the idea. If you uncheck the checkbox on layer 1, it will hide layer 1 from view. Check it and it will toggle the layer back on. You see that layer 0 has a lock icon. If you want to edit that layer, just double click the lock icon to unlock the layer for editing.

To replace either of these with your custom image, just select the layer you want to work with by clicking on it, then choose “Edit > Select All” (or just click “CTRL + A” or the Mac equivalent) and click the delete key to remove the image from that layer.

Step 3 > Paste your own custom image into the layer that once contained the camera image

Now its time to paste in your own image. For example, since your site will probably not be about digital cameras, then you will want to either just remove that layer or paste a relevant image in that location.

To paste in your own image, you will first need to open it in the pixlr editor using the “Open image from computer” as you did in the beginning. Once you have your image open, just choose “Edit > Select All” then “Edit > Copy“. Finally, click on the header.pxd image and select “Edit > Paste” which will place your pasted image onto a new layer in the header graphic.

Step 4 > Resize your pasted image and Move it into place

To resize your image, first make sure that the layer your image is on is selected in the layer’s palette (its background in the layer’s palette will be blue) then select “Edit > Free Transform” to engage the resize mode for the layer. You will see a bounding box with control handles on each corner appear around your pasted image. While holding down the SHIFT key, drag a handle out or in to resize your pasted image (holding the SHIFT key forces the image to be resized in proportion and avoids distortion).

Once you’ve got it resized to your liking, click anywhere outside the image and you will be prompted with “Do you want to apply the changes?”. Click “Yes” to accept the changes. If, for any reason you made a mistake and want to back up a few steps, you can always step back in time using the history palette – “View > History“, then click on any step in the history palette to reset the image to that step.

Finally, to move the image into place you need to select the move tool (the black mouse pointer with the crosshair at the top right corner of the tools palette). Once you’ve got the move tool selected, just click on the image and drag it to its desired location within the layer.

Tip: Pixlr even has a nifty little plugin for Firefox and Chrome that allows you to right click on any image you find online and click “Edit in pixlr editor“. This opens a new tab with the selected image open for editing in the pixlr editor workspace. From there you can copy and paste it into your header.pxd file for example.

Step 5 > How I achieved the fade/feathering effect on the camera image

To achieve the feather effect on the left side of the camera, I used the eraser tool with a broad feather diameter. As you can see from the screenshot below, I settled on a brush size of 300 pixels which gave a nice smooth feather fade to the image…

Finally, to feather the image just place the brush circle over the left side of image and click until you are satisfied with the results. If you make a mistake, you can access the history palette from the “View > History” menu and back up a few steps if you need to.

Final Steps > Saving the image as header.png with transparency

Once you are done with the edits, just click “File > Save” and choose PNG as the file format and name the image “header” (the .png extension will be done automatically once the image is saved to your harddrive. Otherwise, you will end up with a file named header.png.png which will not work when the template stylesheet is expecting header.png)

Once the image is done, and you’ve uploaded the template to your site, just go to “ClickBump  Engine > General Settings > Upload a Custom Header” and select the header.png file you just saved. Once its uploaded, it will automatically replace the template’s existing header file.

That’s pretty much it. Happy Earnings!

Updated on Oct 30 with revised information to support the newly updated Adsensed template now available at the owner’s dashboard.

Lot’s of my customers use ClickBump Engine to rapidly produce product review sites. In this quick blog post, I’m going to show you how the new “Adsensed” template can be used to create a site that contains monetization from multiple sources: Amazon, ClickBank and Adsense (you could also feature Ebay listings if you like, but this example does not).

To best demonstrate this, perhaps an illustration will help…

(click the image above to see a full screen preview, then click the back button to continue reading)

Now, let’s see what’s happening in WordPress using ClickBump Engine to easily manage things. This screenshot has overlays that pinpoint exactly where each element is coming from (Post title, tagline, excerpt, ad blocks, etc)…

(click the image above to see a full screen preview with help overlays, then click the back button to continue reading about )

So, as you can see from the screenshots, the page we’ve taken from this site has neatly arranged all the site elements to create a compelling and organized display for the user. At the top of the page, we have our Avatar character that’s created to help quickly convey comfort and trust. When people see a page, they immediately fixate on any faces they see. This visual cue helps to lead the eyes down across the Adsense leaderboard and engage them into “buyers” mode.

Here’s the Avatar (header.png) character I’ve used in this example. You can substitute your own header.png using the included uploader wizard in the ClickBump Engine theme options panel at “ClickBump 5 > Images > Header Image“.

Adding the Avatar > Step 1

This template, like all ClickBump templates, enables a custom header image named header.png. Its super simple to add a custom Avatar of your own (or you can use the default one supplied with this particular premium template) simply by clicking the “Upload Header” button from theme options at “ClickBump 5 > Images > Header Image > Preview” and uploading your own header.png file.

I’m using a PNG image type here (as opposed to JPG or GIF) because we need a nice transparent background around the avatar character. If you start out with a character with a white background, you can easily make the white background transparent by opening the image at pixlr.com (Free online image editor), then double click on the layer titled “background”, to unlock it. Once you’ve unlocked it, it becomes “Layer 0″ (as in “layer zero”). Doing this enables the image to have a hidden transparent layer, which you will see in the next step.

Now, click on the “magic wand” tool from the tools palette to select it as the active tool (its the 3rd icon from the top left), and click anywhere in the white background of the image to select it (You may want to experiment with the “tolerance” value to get a closer crop on your selection). Once the background is selected, click the “Delete” key on your keyboard. This will remove the background and you will see a gray and white checkerboard pattern which indicates that area will be transparent when the final avatar.png is viewed in the browser.

Finally, click “File > Save” and from the “Format” pulldown menu, choose “PNG (Transparent, full quality) and click “OK” to save the image. Make sure you name it “avatar.png” exactly, all lowercase characters. You can save it to your desktop in a place you can remember. You will be uploading this image to your site next.

Adding the Avatar > Step 2

Once you’ve got your avatar.png created and uploaded (or you can just use the default character that ships with the Adsensed template), the next step is to add some content to the “Header” sidebar (which makes the avatar show up in the template on your home page).

In WordPress, head over to “Appearance > Widgets” (see the screenshot below) and expand the widget named “Header“. Drag an empty “C5: Box Ad” or (if not using Adsense) a standard text widget over into the sidebar titled “Header”. Open the widget and add some text or customize your Adsense leaderboard code (if using the “C5:Box Ad” widget) and click “Save”.

(Above: The widgets panel. Click the image for a full screen preview)

Now you can preview the home page. You should now see your avatar character in the header area, along with whatever text or ad content you placed into the widget in the “Header” sidebar.

Check the screenshot below to see all of the default options, including the template color swatches that allow you to fully customize your site.

(click the image for the full screen preview, then click the BACK button to return here)

The final touch: Add the search box

To add the search box widget, just drag a “Search” widget over to the “Sidebar” widget. That’s it! Preview your site again and you will see the search box has been added to the post title bar just as you see in the screenshots above.

In this example, you can see that the currently active template is “Adsensed”. You can easily choose from any available template on the fly without changing your site content simply be selecting it and clicking the “Save Changes” button.

This template, and all premium templates, allow you to customize the layout colors with the convenient visual color picker right from theme options. The example template is using the default green color scheme. However, as you can see from the screenshot, you have 4 color swatches that you can adjust to “dress” the site in a completely unique color scheme that’s all your own. You can pick from a selection of “web safe colors” simply by clicking on the color swatch or you can type your 6 digit hexidecimal color right into the box.

Here’s a screenshot showing the colors you can customize, along with a couple of different looks achieved with various color selections…

(click the image for the full screen preview, then click the BACK button to return here)

In the next update, I’ll begin to discuss how easily I’ve integrated ClickBank hoplinks and Amazon affiliate links right into the content and images you see across the top of the post content.

Note: The new premium product review template used in this example is “Adsensed”, ClickBump Engine owners can purchase and activate this template for immediate use or click here for a preview of all of the latest premium templates available for ClickBump Engine.

I’m sure that by now you know that If you are doing affiliate product reviews you must provide a disclosure statement to inform your site visitors of your affiliate status with respect to the products that you are endorsing and reviewing. More information on that can be found here > http://www.ftc.gov/opa/2009/10/endortest.shtm

OK, now that you know this, I’ve got some very good news if you have my WordPress plugin, ClickBump JumpStart. You can add your default disclosure page to your newly created WordPress sites with one click, using JumpStart.

Here’s a step by step…

1) Download JumpStart 2.5 from the ClickBump Member’s Dashboard. If you don’t already have JumpStart, do yourself a huge favor and go get it now.

2) Once you get the files downloaded to your PC, unzip jumpstart-files.zip, then create a new folder (does not matter what you name it) and drag jumpstart.zip over into the new folder.

3) Unzip jumpstart.zip, then, once all the files have been extracted to your newly created folder, delete the jumpstart.zip file.

4) Open the file named “ftc_disclaimer.txt” and paste your default disclosure html into this file and save it.

5) Next, open jumpstart.php in a text editor and locate lines 56-57:

// Create a FTC Disclaimer Page?
$FTCpage = false;

6) Change line 57  to

$FTCpage = true;

7) Save the file and close your text editor.

8 ) Select All of the files in the folder and create a zip file of them with the file name jumpstart.zip (file must be named jumpstart.zip exactly and all lowercase)

9) Install and activate jumpstart.zip into your next WordPress site and in addition to the default SEO and site ranking tweaks it performs, as well as the automatically created “About Us“, “Contact Us” and “Privacy Policy” pages, you will now have a page called “FTC Disclaimer” created for you using the text you supplied in the FTC_disclaimer.txt file.