wordpresshubs: Tutorial

Affichage des articles dont le libellé est Tutorial. Afficher tous les articles

samedi 12 novembre 2016

Blogger Tutorial (5/6): How to Install a Custom Blogger Template

alt="Blogger Tutorial (5/6): How to Install a Custom Blogger Template" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

Hi once again. Remember not long ago we explored href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-46-must-have-addons-for-your-blogger-blog/">some nice gadgets and addons to enhance your blog? Now we are going to go one step further – customizing your blog template!

In href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-26-setup-your-first-blogspot-blog/">Tutorial 2/6, we used the Blogger.com’s standard template “Minima” and our blog looks like this now:

src="http://www.webhostingsecretrevealed.com/images/2010/0118-1.jpg" alt="" class="border" />

Yes yes, I can hear everyone complaining how dull it is already! But fear not, we are going to transform this blog into something much more interesting and wonderful at the end of this post. Before that, let’s look at how other people tend to customize their website/blog template. How about we begin with this site – WebHostingSecretRevealed.com?

Design of Web Hosting Secret Revealed

src="http://www.webhostingsecretrevealed.com/images/2010/0118-2.jpg" alt="" class="border" />

Blog Title with Logo (should be easily interchangeable)
Home button to let reader return to the main page
Other useful links to be put at the top

Actually, this is a much adopted approach for the web nowadays. This layout gives the reader a totally neat and “user-friendly” feeling. You could see many more examples around:

Design of EnGadget

src="http://www.webhostingsecretrevealed.com/images/2010/0118-3.jpg" alt="" class="border" />

Site link: href="http://www.engadget.com/">http://www.engadget.com/

Design of CNN

src="http://www.webhostingsecretrevealed.com/images/2010/0118-4.jpg" alt="" class="border" />

Site link: href="http://politicalticker.blogs.cnn.com/">http://politicalticker.blogs.cnn.com/

Getting into action: Installing K2

We are going to use this approach to customize our blog. To begin, let’s head over href="http://www.eblogtemplates.com/k2/">here to have a look at a very popular blog template called href="http://www.eblogtemplates.com/k2/">K2. This is what we want! Customizable title and background picture with tabs underneath it, awesome. Now download the template:

src="http://www.webhostingsecretrevealed.com/images/2010/0118-5.jpg" alt="" class="border" />

The file downloaded is “k2-blogger.xml”.

Now, from your Dashboard, you’ll need to get to Layout>Edit HTML. Before we begin any modification to your blog, let’s be on the safe side and backup your current template, haha! Just in case any “unfortunate” events occur, at least we could revert back to the old one.

src="http://www.webhostingsecretrevealed.com/images/2010/0118-6.jpg" alt="" class="border" />

Backup a copy of your current template (the file would be “template-somenumbers.xml”)
Choose the file “k2-blogger.xml” that you’ve downloaded just now
Upload the new template to the system

OMG!!! Your blog just magically transformed into a beauty!

src="http://www.webhostingsecretrevealed.com/images/2010/0118-7.jpg" alt="" class="border" />

Still, this is not perfect yet. The downloaded template consists of some tabs and links that we will not require for our blog. Hence, some minor modifications are still needed. We could even change the title background to something we fancy. Just follow the below tips to make everything go your way. :)

In Edit HTML page, tick the Expand Widget Templates checkbox, and be in the Edit Template column to do this:

src="http://www.webhostingsecretrevealed.com/images/2010/0118-8.jpg" alt="" class="border" />

Change the highlighted link to the link of the title background image you would like to use.

src="http://www.webhostingsecretrevealed.com/images/2010/0118-9.jpg" alt="" class="border" />

Edit these codes to change the tabs to the links that you’d like to display.

Tada! Have a look at the href="http://equantravels.blogspot.com/">customized blog now and compare it to the previous layout. Wonderful isn’t it?

To experiment with a variety of different templates, give these links a try:

type="disc">

href="http://www.eblogtemplates.com/templates/blogger-templates/">Eblog Templates

href="http://www.chethstudios.net/2009/01/roundup-of-best-blogger-templates.html">Cheth Studios

href="http://www.mintblogger.com/2009/01/25-best-magazine-style-blogger.html">Mint Blogger

In the next and final installment of this Blogger Tutorial, we’ll be learning how to use some analytical tools/statistic counters to analyze and understand where our blog readers come from, what they are interested in, and how all these data could help you improve your blog contents and increase your readers. Till then, adios!

About the author

id="floatright">src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (href="http://confirmcekap.blogspot.com">Confirm Cekap), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the href="http://en.wikipedia.org/wiki/Electone">Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

*Side Note: This is the fifth article of E-quan’s Blogger Tutorial series. You can read the first four articles href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial16-introduction-getting-started/">here, href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-26-setup-your-first-blogspot-blog/">here, href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-36-writing-your-first-post/">here, and href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-46-must-have-addons-for-your-blogger-blog/">here. Also, if you are interested to write for us, read href="http://www.webhostingsecretrevealed.com/guest-posting-at-w-h-s-r/">how to guest post at W.H.S.R..

Page 29 – Web Hosting Secret Revealed

Blogger Tutorial (1/6): Introduction & Getting Started

alt="Blogger Tutorial (1/6): Introduction & Getting Started" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

I know some of you guys are keen about blogging but unwilling to spend extra on web hosting and domain. The good news is there are tons of great blogging platform around and they are absolutely free. One of the top rated blog platform is of course Blogger.com manged by Google. For the next few weeks (or months), I’m glad to have experienced blogger E-Quan on board to share his experience and knowledge in operating a Blogger blog. I’m sure his tutorials bring great joy and valuable information, so stay tuned and have fun learning!

Blogger: Introduction & Getting Started

So you’ve decided to start a blog, great! I bet you have plenty of thoughts, ideas, or even wonderful photos to share with close ones and the world. What better way of doing that than writing them down, publishing them easily, and at the end, archiving them systematically using Blogger (href="http://www.blogger.com">www.blogger.com)?

A little history about Blogger

Blogger is one of the earliest blog publishing systems and was created by the nice people over at a small company called href="http://en.wikipedia.org/wiki/Pyra_Labs">Pyra Labs in San Francisco back in August 1999. To make the great story short, Google eventually saw the potential that was hidden in this blog publishing tool together with its many great features that it formally acquired Pyra Labs in February 2003. Blogger has now emerged as one of the most successful blog hosting providers offering many wonderful features with a user-friendly interface — for FREE!

Blogger when it was first launched

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0824-3.jpg" alt="Blogger when it first launched" />

Blogger now

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0824-2.jpg" alt="Blogger nowadays" />

The basics of Blogger (and some example)

Basically, your blog will be hosted by Google at subdomains of blogspot.com.

What this means is that you could choose a unique name that is meaningful to you and your readers and publish your posts at that address (provided that the name is not taken up already!). Like this author, he also uses Blogger service and his blog is available at confirmcekap.blogspot.com. Many people use their own name/nickname as the URL and one famous blogger whose blog is being hosted on blogspot that I can think of right away is XiaXue (href="http://xiaxue.blogspot.com" rel="nofollow">xiaxue.blogspot.com).

class="border aligncenter" src="http://www.webhostingsecretrevealed.com/images/2009/0824-4.jpg" alt="Xia Xue" width="560" height="413" />

Pros and cons of Blogger

Besides Blogger, there are actually many blog hosting providers out there in the wild: href="http://www.wordpress.com/">WordPress, href="http://www.livejournal.com/">Livejournal, href="http://www.live.com/">Windows Live Spaces, to name a few. Before registering at Blogger.com, you might want to know the pros and cons from my own personal experience:

Pros:

FREE!
Fast and simple registration/setup. Even more so if you already have a Google account (Gmail for example).
User-friendly interface (referred to as the Dashboard) — easy to navigate between Editing, Settings, and Layout. Even a drag-and-drop feature to arrange your blog’s layout!
Labels option for your posts — meaning that you could categorize each post for example: travel, food, rants, etc.
Easy to add photos/videos to your posts.
Comments system is also available for you to gather feedback from your readers.

Cons:

You don’t own nor can you control the site because it is free and being hosted by Google. Your blog can be blocked/deleted by Blogger if they judge your content being in violation of its Terms of Service.
Multiple pages are not supported by Blogger currently. Your Blogger blog is not like a website where every page created has a new link/URL. You create posts instead. In short, it is not possible to create yourblog.blogspot.com/location where this page will contain your address with a nice hand-drawn map.
The basic layout templates offered when you first register are pretty dull and if you’d like a more sophisticated layout, some research is definitely required.

Should you go with Blogger?

All in all, I still recommend that you try and start your blog at Blogger because as you can see above, the advantages are still quite significant. Click the Blogger’s logo below to start your blogging journey right away!

p/s: In the next session, we’ll be discussing about setting up your first Blogger blog and configuring it to fit your requirements.

About the author
id="floatright">class="alignright" src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" width="100" height="97" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (confirmcekap.blogspot.com), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

Page 30 – Web Hosting Secret Revealed

Blogger Tutorial (2/6): Setup Your First Blogspot Blog

alt="Blogger Tutorial (2/6): Setup Your First Blogspot Blog" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

id="floatleft">href="https://www.blogger.com/signup.g">src="http://www.webhostingsecretrevealed.com/images/2009/0824-1.jpg" alt="Blogger Signup" border="0" />

So you’ve decided to pursue further, GREAT! In the href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-16-introduction-getting-started/">last article, we touched a little on Blogger introduction and also its history. Some pros and cons on using Blogger were also deliberately discussed. Today, we’re gonna register for a Blogger account! I hope you’re as excited as I am.

Just click this button to start registering for an account

The whole registration process is really simple and can be divided into three sections namely:

Create Account
Name Blog
Choose Template

Step 1: Create A Google Account

In [Create Account], instead of creating an account solely for Blogger, you will be registering for a Google Account. This grand account enables you to access many Google services like Google Calender, Googler Reader, and many more. Please understand that this is not an option. You can’t just use your own e-mail account (hotmail, yahoo, etc) as the main user identification for your blog. So, if you already have a Google Account, e.g. Gmail, then great! You could log in to your account first before returning again to the Blogger registration page.

Step 2: Naming Your Blog

[Name Blog] is a very important step of the registration process so pay a little more attention here:

id="right">src="http://www.webhostingsecretrevealed.com/images/2009/0921-1.jpg" alt="Blog registration at Blogspot" border="0" />

Blog Title

“Blog title”, like the name implies, is the title of your blog. This title will appear at the top of your reader’s web browser whenever he/she visits your blog. You may put anything relevant here and it is not constrained to limited characters so it is okay to put “My Little Diary”, “Daily Rants”, etc here.

Blog Address

id="right">src="http://www.webhostingsecretrevealed.com/images/2009/0921-2.jpg" alt="Example of a blog title at Blogspot" border="0" />

“Blog address (URL)” is your actual address in cyberspace so you better get this right, haha! My suggestion is to be creative on this one. Something simple and easy for your readers to remember so that they could frequent your blog again. Besides having the constraint that your blog will be hosted at subdomains of blogspot.com, your URL must also only contain alphanumerical characters and the only allowable special character is hyphen (also known as dash, -). The “Check Availability” is a function for you to check whether your desired URL has already been taken up or not.

Step 3: Choose Your Blog Template

In [Choose Template], you will be given a few choices of dull standard blog templates to choose from. These are actually very basic layouts but should be adequate to cover your needs. Please choose one that you feel best represents how you want your blog to be presented. Blogger reminds us that, “you can easily change the template later, or even create your own custom template design once your blog is set up.” For me, I’ll choose “Minima” because the design looks nice and clean.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0921-3.jpg" alt="Blog Created!" />

Congratulations! Once you click the “Start Blogging” arrow, you will be brought to a new page where you could write your first post.

But instead of starting to write straight away, let’s explore some of the Settings and Layout that are available to us to be customized.

Blog Configuration: Settings, Archive, & Page Elements

We’ll go to the Settings first. “Settings” is a place where you could customize how your blog shall “behave”. Let me show you some of the more important settings in “Settings”, haha.

id="floatright">src="http://www.webhostingsecretrevealed.com/images/2009/0921-4.jpg" alt="Blog Configuration" border="0" />

Settings – Publising

Here, you could totally change your blog’s URL if you think the current one is not suitable anymore. Again, it’s subject to availability of course.

Settings – Formatting

This is a setting to determine how many blog posts will be displayed on the main page of your blog. If your blog posts are usually long and full of pictures, it may be a wise choice to put a smaller number for this one so that your reader wouldn’t take forever to load your blog.

Settings – Comments

Comments are the feedbacks your readers leave you at the end of your blog post. Here, you could choose who are able to leave comments at your blog, where the comment form should be placed, and so on. I want to touch a little on “Comment moderation”:

Sometimes, you don’t really want comments to be shown on your blog without you first authorizing it. This is called “comment moderation”.

If you set this to “Always” and you include an e-mail address, every time a reader leaves a comment, it will not be automatically shown on your blog but will arrive at your e-mail first. You then decide to approve or reject the comment.

id="right">src="http://www.webhostingsecretrevealed.com/images/2009/0921-5.jpg" alt="Blog Archive" border="0" />

Blog Archive

Archiving is a systematically procedure for storing your blog posts. You can archive daily, weekly, or monthly.

Figure on the right is the example of an archive.

We will now proceed to “Layout”. Layout, as the name implies, is a place where you could adjust the look and feel of your blog.

Furthermore, with Blogger’s superb features, you could even customize it by just clicking and dragging. (Now that’s user-friendly!)

Page Elements and Gadgets

The most important thing I want to show you here is adding a Gadget. A gadget is a small tool that is programmed to do a specific task. With the default layout chosen, Blogger has already thrown in “Followers”, “Blog Archive”, and “About Me”.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/0921-6.jpg" alt="Blog Elements" />

How to add/remove gadgets

Try clicking and dragging them to re-arrange the positions of these gadgets. Now, click “Add a Gadget” to see what goodies we could pack into your nice little blog.

id="floatright">src="http://www.webhostingsecretrevealed.com/images/2009/0921-7.jpg" alt="Blog Elements" />

A Blog List is a list of your favourite blogs together with the links to them. Let’s add this one. Let’s see, my favourite blogs include: Xiaxue, Kennysia, and many more. Add add add!

And as you can see on the right, that’s my completed blog list.

Example: Facebook Badge

There are so many possibilities here and so many cool things to play with. You can now even add, what is referred to as “Facebook Badge” here so that your Facebook status update could also be shown on your blog!

Anytime if you would like to change your blog’s template, just go to Layout – Pick New Template to do so, simple as that.

Please feel free to play around and click “Preview” to see how the changes will really look like to you and your readers. “Clear Edits” is your Undo button and “Save” to save your changes. Good luck!

P/S: In the next session, we’ll be writing our first ever Blogger post! Please stay tuned as tips on writing a clean post, attaching a photo, embedding a video, tagging/categorizing posts and more will be shared.

About the author
id="floatright">class="alignright" src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" width="100" height="97" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

Page 30 – Web Hosting Secret Revealed

Blogger Tutorial (3/6): Writing Your First Post

alt="Blogger Tutorial (3/6): Writing Your First Post" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

Hi again, how have you guys been? Remember in our href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-26-setup-your-first-blogspot-blog/">last tutorial (Setup Your First Blogspot Blog) we created our Blogger account and also configured it to our liking? Today, we’re writting our first post! I hope you’re as excited as I am. I still remember writing my href="http://confirmcekap.blogspot.com/2005/11/meaning.html">first post on my birthday year 2005 describing what my blog is all about. It’s really great fun having your own place in cyberspace and writing down part of your memory and sharing your joy/sorrow with others. And now, we are going to do just that!

The writing interface on Blogger.com

This is your writing window and you might want to get a bit familiar with the interface:

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-1.jpg" alt="Writing window at Blogger.com" />

Some key functions on the writing panel:

The Undo/Redo button
Strikethrough, YEAH! So you could write something like this: “Although I’m a ~~rocket scientist~~ smart, I tend to be humble.”
The highlight button, example “That freaking T-shirt costs style="background-color: yellow;">0?!? NO WAY!”
Hyperlinking. This is really useful to lead you readers to another site by clicking some text. For e.g., please click href="http://www.webhostingsecretrevealed.com/">here. (Ooppss, I mean the word “here” is demonstrating a hyperlink, not an example on how to hyperlink is available there, haha!
Insert Image button. We’ll talk more about this.)
Preview gives you a snapshot on how your post will look like when published. It is always advisable to preview your post before really hitting the “Publish” button.
Labels functionality. For your posts, you are able to tag them into categories of your wish, e.g. Food&Travel, Work, Rants, etc. If your reader clicks on Food&Travel, all posts with the associated label will be sorted out and presented to him/her. How convenient!

What to write in your first blog post?

Now, you may wonder, “How should I write my first post?” The answer, unfortunately, varies. For me, my first post was about what my blog title meant. As a general guidance, you might want to consider these three points when writing your first post:

Who are you?
An introduction of you as the owner of the blog, maybe some particulars on your occupation, location, and interests.

Why are you blogging?
This is quite important to your readers but it is more important to yourself, really. Knowing why you want to blog is a great motivation to keep on doing so and you may find yourself writing more quality posts.

What will you be blogging about?
By having a general idea on what you will be writing in the next posts/future and relating them in your first post, it will get your readers coming back for more as you write.

I must admit that the above is a more conventional way of starting your blogging journey. It should work for most bloggers but there are also available tips on the net on writing your first post, creatively/differently. Have a look!

href="http://www.copyblogger.com/5-simple-ways-to-open-your-blog-post-with-a-bang/">5 Simple Ways to Open Your Blog Post with a Bang
href="http://www.mintblogger.com/2008/02/how-to-write-good-blog-post.html">How to Write Good Blog Post
href="http://www.chrisbrogan.com/writing-effective-blog-posts/">Writing Effective Blog Posts

Getting into action

Haha, I think I’m dragging too much on the introduction. We will really write our first post now.

To set an example, I have already created a new blog “E-quan Travels”. The idea of this blog is to share with my readers the places I’ve been to and the memories along the journey. Let’s see if you could get some idea on how to write your first post by seeing how I write mine.

First, a snapshot on my Page Elements:

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-2.jpg" alt="Page Elements" />

Writing the text

On the bottom you could see the words “Draft saved at..”. Blogger automatically saves your work periodically so that you wouldn’t lose it just in case unfortunate event happens, say href="http://en.wikipedia.org/wiki/Blue_Screen_of_Death">BSOD?

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-3.jpg" alt="Writing a post at Blogger.com" />

Attaching a picture

First, you’ll have to click the “Insert Image” button. You will then see the images below:

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-4.jpg" alt="How to insert image" />

Click “Choose File” and choose the picture you would like to attach

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-5.jpg" alt="How to insert image to your blog?" />

After successful uploading, you will see a thumbnail of the picture. You may click “Choose File” to add more pictures or “OK” once you’re done

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-6.jpg" alt="Image option" />

You will also be given options on the size of the picture and where to position it. Cool!

id="floatright">src="http://www.webhostingsecretrevealed.com/images/2009/1002-7.jpg" alt="Inserting video into your blogpost" />

Embedding a video

Don’t we just love YouTube? Now, you can share the videos you like without needing to ask your readers to go to a particular youtube page. You can straight embed the video in your post! When you view a youtube video, you might have noticed the “Embed” column.

The “embed” part is all you need. Let’s copy that code down with Ctrl+C.

Remember that when we are writing our post, we are in the “Compose” mode. But when we need to embed a video in our post, we will have to go to the “Edit HTML” mode. From the “Compose” mode, put your cursor at the location where you would want your video to appear, then switch to “Edit HTML” mode.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1002-8.jpg" alt="YouTube code in your blogpost" />

Paste the code you copied just now there with Ctrl+V. TADA! Not hard, eh?

Finishing touch: Hit the publish button!

I think that’ll be all for my first post. Customarily, I will go to the “Preview” mode to proofread my work. It’s also easier to spot any mistakes or errors in your post by having this “bird-eye” view on your post. Yeap, I think I’m quite satisfied with this post. Just before hitting the “Publish” button, I’ll label my post. Erm, perhaps I’ll categorize this as “myblog”. Next, when I blog about travels to other countries, I might have labels like “Europe”, “Asia”, “Middle-East”, and so on.

Have a look at my work here href="http://equantravels.blogspot.com/">Equan Travels!

It’s simply remarkable how Blogger has made blogging so easy and hassle-free. Just some minor tweaking and you’ll have a clean and organized blog. In the next tutorial, we’ll be exploring some must-have tools for a blogger like storage space for your photos/videos, chat-box, and many more. So stay tuned!

About the author
id="floatright">class="alignright" src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" width="100" height="97" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (href="http://confirmcekap.blogspot.com">Confirm Cekap), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

Page 30 – Web Hosting Secret Revealed

Blogger Tutorial (4/6): Must Have Addons for Blogger.com Blog

alt="Blogger Tutorial (4/6): Must Have Addons for Blogger.com Blog" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

In the last tutorial – href="http://www.webhostingsecretrevealed.com/blog-hosting/blogger-tutorial-36-writing-your-first-post/">Blogger Tutorial (3/6): Writing Your First Post, we learned about writing our first post, attaching photos, and embedding videos. It is time to take things to the next level. In this “action-packed” episode, you are going to propel yourself from a beginner to semi-pro with the 9 free essential tools for a blogger! With these added elements, your blog will be more fun and exciting, while increasing your reader interaction. Need I say more? Let’s begin:

1. Photobucket

Site: href="http://www.photobucket.com/">http://www.photobucket.com

Like mentioned in the last tutorial, Blogger provides the capability of attaching photos to your blog post. Your photos will be uploaded to the Blogger server and kept there, randomly. Photobucket provides a way for you to keep your photos in an organized manner. First, you upload all related photos to one folder, say “Finland Trip”. Then, you could easily use them for your posts.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-1.jpg" alt="Photo Bucket" />

2. Flickr

Like Photobucket, Flickr is also a photo repository.

Besides giving you the option to share the photos in your Flickr account to your Blogger blog, you could also first edit your photos. Flickr Edit is powered by Picnik which gives you powerful editing capabilities. Resize, crop, red-eye reduction, you name it.

id="right">src="http://www.webhostingsecretrevealed.com/images/2009/1116-2.jpg" alt="Photo Bucket" />

3. Chat Box

Site: href="http://www.cbox.ws/">http://www.cbox.ws

Everybody needs a CBox (Chat Box). You need to provide an area for your readers to gossip, haha! It’s a quick way to let your readers ask you a question; respond to your readers, etc. It also keeps the history of your chats so that you could refer to them if you want to. It’s in html, no java nor flash required. Simple yet great.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-3.jpg" alt="ChatBox" />

4. Statcounter

Site: href="http://www.statcounter.com/">http://www.statcounter.com

Statcounter is an invisible web tracker that will help you monitor the traffic to your blog. By invisible it means that your reader will not know that they are being “tracked”. Haha, it is not something illegal, by all means. The best thing is it is really free, no advertisement whatsoever. You get to have a detailed report on where your readers come from, what browser they are using, which post they frequent the most, and so much more.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-4.jpg" alt="Statcounter" />

Even a hit counter to show daily or accumulated visits (Detailed reports showed below).

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-5.jpg" alt="Statcounter" />

5. Search Box (Install from Blogger Gadget)

Search boxes have become a necessity for blogs. It will be so much easier for your readers to look for a particular post amongst your humongous archives of posts. Just provide an easily accessible corner of your blog to put this. Your reader simply needs to type in some keywords, and the script will automatically crawl through your blog and presents the matching posts. It is powered by Google Search.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-6.jpg" alt="Google Search Box" />

6. Recent Comments (Install from Blogger Gadget)

“Recent Comments” is a gadget that allows you to show latest reader commentary on one column of your side pane. The motive that many bloggers start implementing this is to encourage readers to engage in discussion on the posts you have written. If a reader sees another reader commenting on something, he/she might feel want to participate too and the chain goes on. This is definitely a good way to attract your readers to come back to your blog for updates.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-7.jpg" alt="Google recent comment box" />

7. Facebook Badge

Site: href="http://www.facebook.com/facebook-widgets/profilebadges.php">http://www.facebook.com

Since July 2009, Facebook’s official user count has already reached 250 million! Almost everyone has a FB account nowadays – your friends, family, colleagues, even your bosses. By adding a FB Badge, you could show your current FB status on your blog. Your readers will know what you are up to lately and if they like, they could also easily add you on their FB from there. Get to know more friends, expand your social circle!

8. Twitter Updates (Install from Blogger Gadget)

Every now and then, instead of writing a full-blast post, you might want to update your readers about your current mood, things you are doing, and whatnots. If you have a twitter account, you might be doing just that already! Now, it is easier than ever to integrate your twitter update straight to your blog. Your reader could now track your presence, every second, haha. “Going shopping now, blog laterz..”

src="http://www.webhostingsecretrevealed.com/images/2009/1116-8.jpg" alt="Twitter Updates" />

9. Google Translation Gadget

The translation tool is something really awesome – totally translate your blog to another language! This might only be an extra add-on for your blog but you might never know how useful it really is to your readers. Powered by Google Translate, this gadget gives you a dropdown menu so that your blog could be translated to a language of your reader’s choice. I do not know many languages but I tried with Chinese Language and Bahasa Indonesia and it’s “freakingly” accurate. Salute to Google Translate for this.

class="border" src="http://www.webhostingsecretrevealed.com/images/2009/1116-9.jpg" alt="Twitter Updates" />

Do you feel powerful already? Try enrich your blog with these addons today. In the next entry, we’ll be talking about how to apply custom templates to your blog (instead of using the boring ones Blogger provides, haha). I’ve also narrowed down some great places for you to get free quality custom templates. Don’t miss it!

About the author
id="floatright">class="alignright" src="http://www.webhostingsecretrevealed.com/images/2009/0824-5.jpg" alt="Blogger Signup" width="100" height="97" />

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (href="http://confirmcekap.blogspot.com">Confirm Cekap), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

Page 30 – Web Hosting Secret Revealed

WordPress Tutorial: How to Create a Testimonials Plugin

alt="WordPress Tutorial: How to Create a Testimonials Plugin" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/wordpress-500x133_c.jpg" />

So, here we are for our second weekly tutorial on WordPress. We have learned how to create an href="http://www.webhostingsecretrevealed.net/blog/wordpress-blog/how-to-create-an-infinite-scrolling-wp-site/">infinite scrolling WP site and href="http://www.webhostingsecretrevealed.net/blog/inbound-marketing/wordpress-development-creating-an-awesome-page-flip-plugin/">page-flip plugin in the past. Today we’ll learn a little bit more about custom post types, and how to load their data.

This feature is really important in your site, since it allows you to show people recommending you. Testimonials are a great social proof of your awesomeness. And you don’t need complex plugins or a lot of code to achieve this, as you’ll see with a couple of files you can create a sexy presentation for your testimonials.

Let’s get started then!

Zip & Install

If you are in a hurry to check this, you can href="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/testimonials.zip">download and install it.

You’ll need to add some data then, by adding a few testimonials using the brand new testimonials are you can see in your dashboard:

style="text-align: center;">class=" wp-image-1857 aligncenter border" title="Print Screen of Testimonial plugin" alt="list-testimonials" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/list-testimonials.jpg" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/list-testimonials.jpg 1133w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/list-testimonials-300x169.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/list-testimonials-750x424.jpg 750w" sizes="(max-width: 1133px) 100vw, 1133px" />

Then you can use the basic shortcode to load that:

[ testimonials rand=0 max=5 ]

When you’ve added that code you’ll see something like this in your page:

href="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/main-testimonials.jpg">class="alignnone wp-image-1858 border" alt="main-testimonials" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/main-testimonials.jpg" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/main-testimonials.jpg 644w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/main-testimonials-300x142.jpg 300w" sizes="(max-width: 644px) 100vw, 644px" />

Now we’ll see how to create and explore this (by adding more functions and changing the look).

The Basics

As we’ve said before, you’ll need to add the title="WordPress Tutorial: How To Create An Awesome Page Flip Plugin" href="http://www.webrevenue.co/inbound-marketing/wordpress-development-creating-an-awesome-page-flip-plugin/">header metadata, create the plugin file and call your scripts. Long story short, you’ll create a new folder under your wp-content/plugins with your plugin’s name, then create a file with the same name as the folder to be your main plugin file.

Once you’ve done that copy and paste as follows:

<?php
/*
Plugin Name: Testimonials
Description: Display customer testimonials.
Version: 1.0
Author: Web Revenue Blog
License: GPL2
*/

//enqueueing scripts and styles
function plugin_scripts(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('flexslider', plugins_url( 'js/jquery.flexslider-min.js' , __FILE__ ), array('jquery'), '2.2', false);
    wp_enqueue_script('testimonials', plugins_url( 'js/testimonials.js' , __FILE__ ), array('jquery'), '1.0', false);
    wp_enqueue_style('flexsliderCSS', plugins_url( 'css/flexslider.css' , __FILE__ ), false, '2.2', 'all' );
    wp_enqueue_style('testimonialsCSS', plugins_url( 'css/testimonials.css' , __FILE__ ), false, '1.0', 'all' );
}
add_action("wp_enqueue_scripts","plugin_scripts");

Here is what we’re doing:

Telling to the WP what’s our plugin’s name, author, what it does
Creating a function, where we insert regular scripts (like jQuery) and custom scripts (like flexslider), and Stylesheets
Telling to the WP to load the scripts function in its default scripts call, so they’ll be actually loaded in the pages

It’s all pretty cool, but don’t forget to actually create the files under /js and /css. You can just download them in our demo content so you don’t need to dig a lot to find the flexslider files.

Now we have all basic things in place we can start the funny part.

The Custom Post Type

By default, WordPress have 2 common post types, pages and posts. But it also has a lot of internal post types (like attachments), so the “post type” definition is: Every type of data you need to store.

As our plugin will create a new functionality WP doesn’t have a built-in place to store that, so we need to create that. Don’t be afraid little grasshopper, it’s quite simple, you can use this code:

//the black magic to create the post type
function create_post_type() {
    register_post_type(
        'testimonials',//new post type
        array(
            'labels' => array(
                'name' => __( 'Testimonials' ),
                'singular_name' => __( 'Testimonial' )
            ),
            'public' => true,/*Post type is intended for public use. This includes on the front end and in wp-admin. */
            'supports' => array('title','editor','thumbnail','custom_fields'),
            'hierarchical' => false
        )
    );    
}

Here we’re just using the register_post_type() function to tell to WP “Hey Buddy, we need to store this kind of data, please be ready to receive it”.

We also tell him that this kind of data is called “testimonials”, it should be available for public access (so it actually create a new menu item in your dashboard for it), the fields that we need on it, and if it’s hierarchical or not (like pages that we have parent and child pages).

Then we need to call it every time we load WordPress. This hook will do it:

add_action( 'init', 'create_post_type' );

The Custom Fields

Now our custom post type have the title (person’s name), the content (person’s testimonial), a picture (featured image) but it’s missing a link, since if the person is nice enough to talk about you, you should at least link to their site, right?

We could do this with usual custom fields, but it’s much better to have a “closed” field, where the user doesn’t need to type field’s name, and also where you can add some validation rules.

First of all we need to create a new metabox, which is those nice panels you have in your post edit area, each little panel is a metabox. This function will create and call it:

//adding the URL meta box field
function add_custom_metabox() {
    add_meta_box( 'custom-metabox', __( 'Link' ), 'url_custom_metabox', 'testimonials', 'side', 'low' );
}
add_action( 'admin_init', 'add_custom_metabox' );

The add_meta_box() function requires these parameters:

ID – The unique identifier for it. You could use anything unique here like “unicorn-eating-rainbow” or “testimonial-link”. Anything that can be used internally
Title – What will be shown for the user? Here it’s important to use the __() function, it’s the function that allow users from foreign languages to translate your plugin with .po files (without editing plugin files)
Callback – The function where you have the actual contents of the metabox
Post Type – In our case we want it to be visible only for testimonials
Context – Where in the page you want to show it
Priority – If it should be before other items of the same position or after them

Now we need to create the url_custom_metabox() function, since we’ve called it.

// HTML for the admin area
function url_custom_metabox() {
    global $post;
    $urllink = get_post_meta( $post->ID, 'urllink', true );

    //validating!
    if ( ! preg_match( "/http(s?):///", $urllink ) && $urllink != "") {
        $errors = "This URL isn't valid";
        $urllink = "http://";
    } 

    // output invlid url message and add the http:// to the input field
    if( isset($errors) ) { echo $errors; }
?>    
<p>
    <label for="siteurl">URL:<br />
        <input id="siteurl" size="37" name="siteurl" value="<?php if( isset($urllink) ) { echo $urllink; } ?>" />
    </label>
</p>
<?php
}

Ok, now translating this to plain English:

The global variable $post is called, so we can know which is the POSTID of the current item
We load the current value for the URL
We validate If the value that user inserted is valid. If there is at least one “http” or “https” occurrence the value is OK, otherwise it’s in valid and we need to use the default value
Then we show the errors, if there’s any
Now we start the actual HTML, adding the default value in the input field as we’ve got in the PHP

After this point we need to actually save what’s being sent by the user. We’ll use the “save_post” hook, so every time WordPress saves a post it’ll call this function:

//saves custom field data
function save_custom_url( $post_id ) {
    global $post;    

    if( isset($_POST['siteurl']) ) {
        update_post_meta( $post->ID, 'urllink', $_POST['siteurl'] );
    }
}
add_action( 'save_post', 'save_custom_url' );

Here we just check if there’s any post data called “sitelink” which is our field name. If there is a sitelink, let’s save it.

After everything is in place, here is how your new testimonial page will look like:

class="alignnone wp-image-1859 border" alt="new-testimonial" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/new-testimonial.jpg" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/new-testimonial.jpg 1133w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/new-testimonial-300x169.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/new-testimonial-750x424.jpg 750w" sizes="(max-width: 1133px) 100vw, 1133px" />

Loading our Custom Data

Now we need to actually load our items, and we’ll use the get_posts() function, mostly because we have only simple data so we don’t need a proper WP loop (that would add a lot of DB calls and we really don’t need it).

So, first let’s create a function to get our site’s link, if there’s any.

//return URL for a post
function get_url($post) {
    $urllink = get_post_meta( $post->ID, 'urllink', true );

    return $urllink;
}

Now, we can start the shortcode function. A simple way to default and validate the shortcode data is creating the attributes for the loop as an array, so we can add new items as we need them, like this:

//registering the shortcode to show testimonials
function load_testimonials($a){

    $args = array(
        "post_type" => "testimonials"
    );

    if( isset( $a['rand'] ) && $a['rand'] == true ) {
        $args['orderby'] = 'rand';
    }
    if( isset( $a['max'] ) ) {
        $args['posts_per_page'] = (int) $a['max'];
    }
    //getting all testimonials
    $posts = get_posts($args);

    //HTML OUTPUT
}
add_shortcode("testimonials","load_testimonials");

As you can see we have the shortcode attributes loaded and passed to the $args array when they validate, in the format that WordPress needs it, so we can load posts using them.

Now we need to add some HTML code there, following flexslider’s default structure. Here is how it’ll look like:

echo '<div>';
    echo '<ul>';

    foreach($posts as $post){
        //getting thumb image
        $url_thumb = wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID));
        $link = get_url($post);
        echo '<li>';
            if ( ! empty( $url_thumb ) ) { echo '<img src="'.$url_thumb.'" />'; }
            echo '<h2>'.$post->post_title.'</h2>';
            if ( ! empty( $post->post_content ) ) { echo '<p>'.$post->post_content.'<br />'; }
            if ( ! empty( $link ) ) { echo '<a href="'.$link.'">Visit Site</a></p>'; }
        echo '</li>';
    }

    echo '</ul>';
echo '</div>';

Wait, but why would we create the HTML code inside of the PHP function? That’s because we can conditionally load content only if the user have added content, so you won’t have empty HTML tags, just waiting to mess up your layout.

What about the sidebar?

Most people just want to show testimonials in the sidebar, and this plugin won’t work really well since text widgets don’t process shortcodes. There’s a simple solution for this, just add this in your code:

add_filter('widget_text', 'do_shortcode');

What’s next?

So, did you enjoy this tutorial? What would you add as an option for your testimonial shortcode? Do you have any ideas for future posts? Let us know using the comments section!

Page 18 – Web Hosting Secret Revealed