Last time, we already installed OIO Publisher successfully in our WordPress blog by using OIO Publisher Web Installer facility. The OIO Publisher is in our WordPress plugin list now but still can not be used. It is needed some next steps to use it in our blog – we may need to tweak our WordPress theme so OIO Publisher’s ads zone can be showed perfectly in our blog lay out. Base on my experience, OIO Publisher may break your blog lay out if we directly integrate the OIO Publisher’s ads zone without WordPress theme tweaking.
Therefore, I share the complete step how I integrate OIO Publisher with this Blogging Tips Blog which use Atahualpa WordPress theme as blog theme. There are 5 Steps that you should follow to integrate the OIO Publisher’s ads zone – especially the OIO Publisher’s Banner Ads zone – with Atahualpa WordPress theme.
OIO Publisher Banner Ads Integration
I use OIO Publisher’s banner ads integration with this blog’s widget area as example since it is the most complex integration of OIO Publisher’s ads zone in my opinion. If able to integrate OIO Publisher banner ads zone perfectly in to blog’s widgets area, you shouldn’t worry about others OIO Publisher ads type integration. You will able to integrate it in to your blog easily for sure. It can be said that this blog post is about how to integrate the OIO Publisher banner ads zone with the high customized widget area of Atahualpa WordPress Theme.
Yes, you will find how I integrate OIO Publisher’s banner ads zone with this Atahualpa blog’s widget area in this blog post. It is needed five steps to finally perfectly integrate OIO Publisher ads banner with this blog. As summary, here the five steps:
- Activate the OIO Publisher
- Configure the OIO Publisher
- Install the PHP Code Widget Plugin
- Tweaking Atahualpa WordPress Theme
- Place the OIO Publisher Banner Ads Zone
I already said in the OIO Publisher installation blog post that we may need some tricks to integrate OIO Publisher perfectly in to our blog. It is true since it is needed to tweak this blog theme, Atahualpa WordPress Theme in the integration process. This tweaking involves CSS coding which is usually feared by many bloggers. However, I will share the needed CSS coding step clearly through this blog post so you no need to be feared again.
I believe you will able to integrate your OIO Publisher banner ads perfectly after read this blog post. OK, here we go:
Step 1. The OIO Publisher Activation
This step is very simple but a must do step. OIO Publisher is surely needed to activate before it able to use as like other usual WordPress plugin. I do this step easily through the WordPress plugin area. Here how I do it:
- Log in to admin page
- Go to “Plugins” area and click it
- Click “Installed” and then find “OIOpublisher Direct 2.0” in the list
- Click “Activate” to activate the OIO Publisher plugin
If there is no error message, It mean that the activation is success. Now, I am ready to do the next step – the configuration.
Step 2. The OIO Publisher Configuration
The OIO Publisher is already activated now and ready to use. However the configuration is still the default configuration which should be customized so able to fulfill my needs. There are two area of configuration that I need to take care which are General Settings area and Banners Ads Settings area. It is needed only two areas since I only do OIO Publisher banner ads integration in this blog post. It will be needed more configuration area to take care if use the entire of OIO Publisher ads types. Here how I configure OIO Publisher:
- Log in to admin page
- Go to “OIO Publisher” area and click it
- Click “Settings”
- In the tab area above, I use General Settings and Banner Ads Settings tab.
Step 2.1. General Settings
This setting area is the place to configure general behavior of the intended OIO Publisher advertising – The advertising that I intend to integrate with this blog. Here find the sub area that I need to set:
- Basic Settings which are the web site name, contact Email, and Affiliate ID option
- Payment Settings which are payments currency and payment methods option
- Advanced Settings which are paid after approval, display ads in the new window, and allow the image uploading options.
- Purchasing Guidelines in where I put simple guidance for the advertiser.
Area 2.2. Banners Ads Settings
This setting area is the place in where I configure OIO Publisher’s banner ads zone behavior specially. It is allowed to create unlimited OIO Publisher’s banner ads zone through this setting area. However, for this blog post, I choose to only create one banner ads zone for sake of simplicity. Here find the sub area that I need to set in this banner ads settings:
- Zone number selection
- Banner Ad Settings which are zone title, banner price, banner duration, banner width, banner height, zone columns, and zone rows options.
- Advanced Settings which are rotation factor, ad queue length, spacing between ads, default image URL, use nofollow attributes, nofollow price boost, and use wordpress categories options.
- Default Ads Settings which are number of default ads, and default ads display method option.
Step 3. PHP Code Widget WordPress Plugin Installation
This PHP Code Widget WordPress plugin is needed to be installed so OIO Publisher’s banner ads PHP Code can run through this blog’s widget area. I use this widget instead the default widget from OIO Publisher because I want to add other OIO Publisher’s banner ads zones in future. As for your information, the OIO Publisher‘s banner ads zone only available only once. This plugin is also needed if want to keep the widget lay out consistent as the rest of other widget in blog’s sidebar. Here how I install PHP Code Widget WordPress plugin:
- Log in to WordPress admin page
- Go to “Plugins” area and click it
- Click “Add New”
- Use “php code widget” as keyword in search box
- Click “Search Plugins” button
- Click “Install” link in PHP Code Widget
- Click “Install Now”
- Click “Activate Plugin”
The installation is success. Now, I allow to insert OIO Publisher’s banner ads zone freely in this blog’s widget area – just need to insert the banner ads’ PHP Code into PHP code widget. OK, let’s move to next step which is the core step – The Tweaking.
Step 4. The Atahualpa WordPress Theme Tweaking
This is the core step to integrate OIO Publisher banner ads zone with Atahualpa WordPress Theme’s widget area. This tweaking is needed because the OIO Publisher’s CSS style is conflict with this blog’s widget style. This conflict ruins the look of OIO Publisher’s banner ads zone. The banner ads look will be showed not right. As example, The 2×2 ads banner zone will be look like 1×4 banner ads zone. It is because the ul li style of OIO Publisher can not work since it conflict with widget’s ul li style. Therefore It is needed some simple CSS style customizing to solve this issue.
Exactly, It is needed to insert CSS code so the ul li style of OIO Publisher is applied instead the ul li of widget style.
Here the CSS code that need to be inserted:
ul#oio-banner-1 li
{
border-left:0px;
}
Note: oio-banner-1 is the id of banner ads zone ul li style. This id may unique for each blog. Therefore, It is needed to check through blog’s source code. You can use firebug Mozilla Firefox’s add-on for it.
The above code set the border left as 0 specially for OIO Publisher’s banner ads zone that we created before. It is needed to insert this code into blog’s CSS style so the banner ads zone will be showed rightly. Fortunately, it is easy to insert customize CSS code for Atahualpa WordPress Theme. Here how I insert the code:
- Log in to WordPress admin area
- Go to “Appearance” area and then click it
- Click “Atahualpa Theme Options”
- Go to “Various Content Items”
- Click “Add HTML/CSS Inserts”
- Go to “CSS Inserts” area and paste the code in to the text box area
- Click “Save changes” button to apply the code
OK, the tweaking is done. Now, the banner ads will be showed rightly in this blog widget area. It mean that the OIO Publisher’s banner ads zone is ready to be placed. Therefore let’s move to next step which is the finishing step – The Placement.
Step 5. The Placement of OIO Publisher’s Banner Ads
OK, The OIO Publisher’s Banner Zone is ready. Next move is the banner ads placement. It is quite easy to place the ads. I only need to do some regular widget placement activities. There are two available way to do banner ads placement in widget area. The first way is by using the OIO publiser’s banner ads default widget. The second way is by using the PHP code widget WordPress plugin. This time, I use the second way for more flexibility. Here how I do it:
- Log in to WordPress admin page
- Go to “OIOPublisher” area and click it
- Click “Settings”
- Click “Banner Ads” In above of setting page
- Copy the “PHP Output Code” code
- Go to “Appearance” and click it
- Click “Widgets”
- Drag “PHP Code” widget to the sidebar in where the ads banner will be added
- Fill the title and then paste the “PHP Output Code” code
- Click “Save” button
The OIO Publisher’s Ads Banner is placed perfectly in this Blog which is powered by Atahualpa 3.5.1 WordPress Theme.
Final Words
By using 5 steps of Atahualpa and OIO Publischer integration, we can integrate the OIO Publisher’s banner ads perfectly into our Atahualpa Blog’s widget area. Since Atahualpa allow us to put widget area freely in anywhere, it mean that we also freely put the OIO Publisher’s banner ads in any where. This is great since we have unlimited ads placement area by using Atahualpa WordPress Theme and OIO Publisher WordPress Plugin combination now.
That’s all update this time, wait for next update!
