A few days ago, I experimented with another wordpress theme, the Dkret3.

This one is good also. It is flexible. It can be set in many ways. You can choose one of its many lay-outs such as the following:

• double-side bar left

• double-side bar right

• single-side bar left

• single-side bar right

• hoverama

• fluidelity

• side bar off

• small-font size

• side bar small

• side bar left and right

The header is also customizable. Plus it has footer. It has built-in insert ads functionalities. Drop down navigation menu. The side bars can be further subdivided.

Dkret3 Theme is easy to customize.

What I customize in Dkret3 Theme are the following:

• I added ads division in the header.

• As usual I changed the font-family and colors

• I changed the drop-down navigation menu color

• I changed the footer color.

How I changed them? Here are the steps…

In the header.php, I added the following codes for the ads division:

Send me 1 Million Free Visitors!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

<div> <!– add by yljien reserve for ads rental start –>
<p align=”center”><a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner1-468×60.gif”/></a><a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner3-468×60.gif”/></a></p>
</div> <!– add by yljien reserve for ads rental end –>

These codes are added after the blog description codes. The css for the ads are the following:

#ads {
float: left;
display: inline;
margin-top: 8px;
margin-left: 0px;
width:940px; /* or whatever the width should be */
}
/* yljien wants to insert header ads*/

The ads css is added after these following codes:

#blog-description {
font-size: 13px;
padding: 1px 20px 1px;
text-align: left;
}
.access-sep {
display: none;

For the font family, I changed to the font I want.

For the font-colors, I changed those codes starting with # and followed by alpha-numeric to the color codes I want. I refer to the colorpicker of w3schools: http://www.w3schools.com/tags/ref_colorpicker.asp

Generally there are basic templates and files for most themes. And if what we need is not included in the theme package, we install plugins.

How to install plugins?

Inside your admin panel, look for the menu called “Plugins,” then click “Add new.” You’ll be directed in plugins repository, just type in keywords in the search.

Then plugins will be displayed, just read the description of the plugins before you install them. Then click install then click activate. There are plugins that needed to be configured, just follow the plugins’ instructions.

Listed below are the plugins used in this site:

Add to Any: Share/Bookmark/Email Button

This is for sharing and bookmarking posts.

Add to Any: Subscribe Button

This is for subscribing thru RSS and others.

AdSense Integrator

Should you want to integrate or add adsense inside your posts, if not just checked the AdSense Integrator

Akismet

This for block and spam comments.

All in One Adsense and YPN

This is adding your Adsense codes in your sites. This is good to install because a site owner can control where he/she wants to appear the google ads/ypn ads. In this site, I want the ads to appear in middle or center of each articles.

All in One SEO Pack

For the SEO. This is the best. Because we want Search Engines to crawl our sites, install this. Everything about SEO is here. That’s why it is All in One SEO Pack.

All in One Webmaster

For Webmaster tools and more.

Collapsing Categories

Send me 1 Million Free Visitors!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

There’s a ready widget for categories, however, if you want more flexibility for category listing in your sidebar install this.

Dagon Design Sitemap Generator

For me, this is the best Sitemap Generator because of its look and flexibility.

Different Posts Per Page

This is to show how many posts should you want to appear per page. I want this because I can opt to show only 3 posts per page so that my pages will not look lengthy.

Fast and Secure Contact Form

There’s a custom contact form for Padangan. Just that I do not know how to customize it. So I installed this one and I like it. I can control how my contact form will look.

Link to Post

Sometimes we want to show some related articles in our posts, to do this install “Link to Post.”

My Page Order

This is to control the ordering or numbering of my pages. I love this because it is simple and easy to use.

Ozh’ Absolute Comments

About and for easier commenting.

Ozh’ Admin Drop Down Menu

This is to save spaces in my admin panel. I love this. Many installed this too.

Page Links To

Because I want my categories to overflow in pages so I linked each pages to categories. This way my articles are organized and arranged according to categorized pages.

SI CAPTCHA Anti-Spam

This is best installed so to avoid robots to log-in or comment/s.

wp-insert

This made my wish come true. I want my site to have ad spots at the top and bottom post contents and this wp-insert made it happen. What’s more good thing about the “wp-insert” plugin is you can insert many codes and alternatively it will display the ads you want. This is a space saver and adds flexibility to the sites.

This article explains the how-to of customizing WordPress “Padangan” Theme.

In here, are lessons about dissecting a wordpress theme and customizing it. This is where the html, css, javascript and php coding come in.

I’m glad that I have this drive to learn new things. While building this “HAG” site I learned some html, css, javascript and php coding. It was fun doing it.

Let’s begin the tutorials…

Step 1. Install and activate the Padangan Theme

Inside the control or admin panel of your wordpress, there’s a menu called “Appearance.” In the Appearance, clicked the add a theme, then search for Padangan Theme, then click the “install” and “activate.”

Note that you can select any theme you want, however, in this tutorial I’ll just focus on dissecting and customizing Padangan. Before selecting for a theme, make a lay-out and structure of your website in a piece of paper then look for a theme which is a close resemblance of your layout and design. Better preview the theme first then intall and activate.

Step 2. View and browse the theme

Do this by clicking the “visit site” in your admin area. Why are we doing it? Because we want to know which part of Padangan we want to delete, replace or enhance.

Originally, Padangan is colored blue and orange. In the header, there’s a search area. It has built-in font-family and sizes. And, it has some widget ready to be installed.

In this HAG site, what I customized was the header, the orange-color borders and fonts, the font-family and sizes, search form moved to the wide sidebar and installed some useful plugins.

Step 3 Dissect and customize the part one-by-one

The Header

a. How I want my website header to look like?

I want the title to be in an “Apple Boy BTN” font and the description to be in an “Informal Roman” font, I want everything in the header to be in the shade of blue color. I also want to have an ad spot in it.

b. Customization process

b.1 Removing/deleting the search and replacing it with ad spot

b.1.1 In the editor menu of “Appearance,” open the header.php

Look for this codes…

<div class=”search”>

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

</div>

Delete them then replace it with this codes…

<div class=”ads”>

<a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner1-468×60.gif”/></a><br/>

</div>

Note that the codes in the red font is my ad spot codes so replace it with your own.

Click update file button.

b1.2 Style the ad spot by opening the style.css of the editor

Before or above this codes…

#headr .search {

Insert and copy-paste the ff. codes…

#headr .ads {

position: absolute;

top: 20px;

right: 0;

}

#cari-padangan {

position: relative;

Send me 1 Million Free Visitors!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

height: 65px;

}

#cari-padangan #s {

border: 2px solid #93D1DD;

padding: 5px;

margin-bottom: 8px;

width: 470px;

}

Click update file button.

The Search Form

Since I removed the the search form in the header and replaced it with an ad spot, I would like to place it somewhere in the wide sidebar.

In the widgets, there’s an available search form, just drag and drop the search form where you want to place it. In this site, I drag and drop it in the wide sidebar.

The border and font colors

I want to change the border and font colors.

Colors are easy to spot in the css stylesheet. I just looked for those codes starting with a # sign and followed by alpha-numeric characters. Example of this code is #99FFEB. Just play around which color you like for the fonts and borders. Highlight the code and replace it with the code of the color you want–to replace is to use control+v or just hardcode it. I always refer to colorpicker of W3schools : http://www.w3schools.com/tags/ref_colorpicker.asp. Then always click on the update file to save changes.

The font family and sizes

The font-family is the font styles. For my site title I want it in “Apple Boy BTN” font, the description to be in an “Informal Roman” font and the content fonts in “TW Cen MT.”

Originally, Padangan’s fonts will just follow what’s in the global style.css. Below (those in red font) are the changes I made in the css.

#headr h1 a {

color: #00008F;

font-size: 45px;

font-family: Apple Boy BTN;

margin: 0px 0px 20px 0px;

padding: 0;

}

#headr .description {

color:#0000FF;

font-size: 16px;

font-family: Informal Roman;

margin: 18px 0px 0px 0px;

}

For the content fonts in “TW Cen MT,” look for the following codes in the upper part of css then replace the font style with what you want. In my case, I want it TW Cen MT. Refer to your MS Word for Font-Styles.

h1, h2, h3, h4, h5, h6

{

font-family: Tw Cen MT, Arial, Sans-Serif;

}

For the font sizes, look for those codes with em or px then change the number or size of the font. Example, when you see a code like 1.2em you may change it to 22px. “em is 16px.” For me it’s more easier to use the px than the em size formatting because I do not need to compute for the em and px is more direct. Again, click the update file button to save changes.

That’s it! Steps and processes are seemingly simple but it took me hours and days to finish the designing and styling. Maybe because this is my first time doing these tasks. Maybe next time with my next site/s, it may take me just a few hours for styling the way how my sites will look like.

My next step for this HAG site is to choose and install plugins. Watch out for my articles on “How To install plugins and the plugins I used for this HAG site.”

Bye for now and please come again.

This post pertains to the steps and processes I went through in building this site, the Here Anything Goes. Please note, this is not a tutorial on how-to build a site by doing some coding in the html, css and javascripts. As the saying goes, do not reinvent the wheel. There are those who already did, tested the waters and become successful ones. Just copy the successfuls–they are our models.

Now, here are the steps and processes I did…

1. Blog Site or Web Site Name

Think of your own dot com, dot net, dot org, dot info website. I thought of galaxy but it was already taken so I thought of changing the way it spelled. So, my dot com site is galaksee.com. You’ll notice my url is http://hereanythinggoes.galaksee.com, this is because I want to make a mock site first so I thought of creating a subdomain from my original domain name. And, I did a lot of customization so I decide to retain it as is. I’ll just use http://galaksee.com for other purpose.

2. Register site name as a domain name

Look for domain name registrar or a company that offers domain name registration. Maybe, look for a web host which offers free domain name, however, be careful when you tie-up your domain name with a web host. Ensure that they are credible and can be trusted. Possibilities are a web hosting company may take advantage of your domain name and may not transfer to you if you stop engaging their hosting services.

3. Engage to a web hosting company

Since I reside here in the Philippines, I looked for a web hosting which is located here. In short, I engaged the web hosting services of Jolly Works Hosting. Please note, before I contacted them, I visited some sites which they serviced and I heard positive feedback so I engaged their services. My advice is scout first and observe the sites hosted by your prospect web host.

Plus, they offer a free domain name and they can host unlimited domains. Also, they offer money back guarantee.

4. Study and learn how to navigate the cpanel of chosen web hosting

Normally, there’s a tutorial inside the cpanel/web hosting account and this is the so-called “get started” tutorial. Just read on.

5. Upload and install wordpress 2.8.6 in cpanel/web host.

Send me 1 Million Free Visitors!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

In my case, I used the fantastico deluxe in installing wordpress 2.8.6. This is one of the features of my web host.

For those who do not have fantastico, follow the instructions provided in the codex of wordpress.org

6. Create database for the web site inside cpanel/web host

There is accompanying instruction on how to do these inside the cpanel/web host.

7. Install FileZilla and/or activate webdisk.

These are for transferring files from own computer to web host server.

8. Log in to wordpress site and choose theme.

I chose several themes but sticked to Padangan theme. Please note, there’ are already installed themes when you log-in to your wordpress site, the default and classic themes.

To choose a theme, inside the control panel of wordpress site, there’s a portion for “appearance.” In there, click the “add a theme.” Then, browse themes, choose, install and activate the chosen theme.

9. Customize theme.

Here, you can customize the look of your site. Originally, Padangan theme is colored blue and orange, however, I change them to blue and red.

Then, you can add and install plugins for easy navigation and for dressing up the sidebars and footers of the site.

Next time, I’ll write an article on how I customized the Padangan theme and the plugins that I installed here in my HAG site…this is where the html, css, javascript and php come in.

A few days ago I received an email coming from someone who wants to learn blogging and earn something from it. This someone is a special person. This person met an accident several years ago and because of it made him incapacitated to earn a living. I’ll just call him “Jan.” This is not his real name.

Hi Jan, this article is dedicated for you. I hope you learn from it and I wish that this may help you bring some means of earning-a-living support.

For a newbie or beginner to blogs and blogging, here’s how to start.

1. Choose a blogging platform.

When I started blogging, I begun with blogger.com aka blogspot.com. I chose this one because this came from google and naturally you can put google adsense ad units in it. Ad units are those advertising boxes in web sites or blog sites. Site owners earn commissions or rebates from these ad units. Ad units can be image or text units. Plus, blogger.com is free.

Another is WordPress.com and WordPress.org. WordPress.com is free but you can not put adsense ad units in it while WordPress.org is something like you can use for self hosted site and of course you can put ad units here. In my case, I opted for WordPress.org. Aside from I insert ad units I can also customize my site according to what I want.

There are also other platforms out there. You can choose from many others. However, in this how-to tutorial, I’ll tackle more of blogger.com. So, Jan can put ad units in his would-be site for free. And also, blogger.com and wordpress.org are only those platforms I am familiar to navigate and maneuver with.

2. Create an account or Sign-up for an account

Go to www.blogger.com and create an account. You must have a google account to create a blog from blogger.com. So if you do not have a gmail account create one first. Then, in www.blogger.com, fill-in information like email address, your would-be password, your blog display name and word verification. Then, click the accept terms of service and click continue arrow at the bottom of the page.

3. Create a blog

Once you click the continue arrow, you’ll be directed to a page called “Name Your Blog.” In here, fill-in the Title of your blog and blog address or url (click check availability) and word verification fields then click continue arrow.

4. Choose template

Click on the template you want from the selection given. Click continue arrow. You will be prompted “Your blog has been created.” Then, click “start blogging” arrow.

5. Create post

Here, you can now start writing your articles or the so-called” posts.” Fill-in the Title of your posts and the body or the content of your articles. Then, click post options and fill in post date and time. Then, fill-in the labels for this post, these are basically the keywords of your article content. Then, click publish post. Then, view blog.

Please note, you can only create one post per day, however, you can schedule posts articles. Meaning you can create a few posts today and set the post dates on different dates.

5. Decorate your blog site.

Click on the “customize,” located in the upper right most of your site. Click on the lay-out tab.

a. Click the fonts and colors tabs, here choose whatever color and fonts you want for your site.

b. Click the page elements tab, here click “add a gadget,” here click whatever you want to add in your site like pictures, search form, picasa album, etc. Just read the brief description of the gadget then decide if you want to include them.

6. Monetize your blog–earn while blogging.

Send me 1 Million Free Visitors!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

a. Click the page elements tab, here click “add a gadget.” Here, choose adsense and html/javascript.

Notes:

1. In order for you to have an adsense, create an account first. Indicate your true name and true address. Those info that indicated in your IDs because adsense will send your commissions to western union, naturally you need to present your ID when claiming money. Please note that Adsense application processing and approval takes time. There are cases an applicant is disapprove, do not be disheartened. There’s alternative to adsense.

2. Alternatively or while waiting for adsense, sign-up for nuffnang, adbrite, chitika, etc. Just google search them so you can land on their websites. Once, you sign up with them, you will be given codes. These codes are the codes for the ad units to be displayed in your site. Copy and paste them in the “html/javascript” element. Note that they are free.

7. Drive visitors or readers for your site.

Now that you have a blog site, invite others to visit and read the posts in your blog.

a. Sign-up for blog directories and blog catalog.

They are many out there, to name a few, blogcatalog, topblog, mybloglog, pinoy top sites, etc. Just google search and use key words like blog directories and blog catalog then sign up to those offering free membership.

b. Advertise your blog for maximum exposure. Sign up only for those free.

I normally advertise my sites with Entre Card, Adgitize, Fwebtraffic, etc. Browse my site, yes this one, this “Here Anything Goes” site, then click on the widgets and badges of entrecard, adgitize, etc. Click on them so you can be listed under my referral list. I am your referror. Then, you will be directed to their sites then sign up for free. just follow their guidelines or read FAQs so you will be familiar on how they operate.

8. More semi-passive money/income for bloggers

Aside from writing post articles and earn from monetization programs of online advertising companies lioke adsense, nuffnang, adbrite,chitika, etc. you can also earn from the ff.:

a. Affiliate programs or Referral programs.

Join or participate in the affiliate programs of web sites offering them. Adgitize has it and many others have it. Again, just search for them.

b. PPPs, PTCs (Pay Per Click, Pay To Click) and the like

There are web sites who offer this. Just search and sign up for them and read their guidelines or mechanics for earning. Just click on the widgets/badges in my site and you will be directed to their sites.

c. Be a Virtual Assistant and/or Content Writer

There are people who are in need of virtual assistants and/or content writers especially now that blogging is at its booming stage. Offer your service to them, make a post in your site that you are offering such services and get paid. Discuss and negotiate your scope of work, the timeline/due date, pricing, and manner and where of payment, this can be thru atm or gcash or paypal. You can be full-time or part-time. You could also make a banner like ad of your services, in the add a gadget, choose either picture or text.

And/or, join/apply ContentCurrent or oDesk, they are companies that hire virtual assistants, writers, editors, etc. These are typically “work from home” jobs.

Til here. Hope this helps. Maybe you can share this to the group you are belong to –http://apnil.org/about-us/ — so they can learn and earn from blogging somehow.

Happy blogging.

PS: Jan, when you already created one, don’t forget to inform me so I could include you in my list of blog roll.