Category: Wordpress

WordPress Blogging Tutorial 8 – Working with Widgets

Software Tutorials, Wordpress

A widget is a web tool that performs a specific task. It can be a clock, a daily weather news, a random quotation generator, and many others. Widgets can usually be embedded in blogs using a short code. It can be a simple HTML, a Javascript, a flash animation, or any reusable code.

The Clustermap widget located at the bottom right of Mathematics and Multimedia page is an example of a widget.  The Clustermap reveals the location of the visitors. The code of the Clustermap for Mathematics and Mutlimedia is shown below.

<a id=”clustrMapsLink” href=”http://www3.clustrmaps.com/counter/maps.php?url=http://mathandmultimedia.com/”><img style=”border:0;” title=”Locations of visitors to this page” src=”http://www3.clustrmaps.com/counter/index2.php?url=http://mathandmultimedia.com/” alt=”Locations of visitors to this page” /></a>

Some widgets are just codes that you can directly copy and paste to your website, while there are others, like Clustermap, where you have to register your website or blog first, before you will be given the widget code.

Widgets in WordPress

To embed a widget in WordPress, go to your Dashboard and select Widget from the Appearance panel.  You will see a list of available widgets. Drag the widgets of your choice to your side bar. Non-Wordpress widgets can be embedded using the Text widget.  Drag the text widget to your side bar, click the text widget, and then paste the widget code.

 

Another reminder is that some websites or blog sites (e.g. WordPress.com) do not allow Javascript (and other scripts) widget codes for security purposes.

Here are some websites where you can get widgets:

  1. Google Tools
  2. Blogger Plugins
  3. 25 Great Blogger Widgets
One comment , , ,

WordPress Tutorial 7 – Changing the Theme of Your Blog

Wordpress

From the previous tutorials, we have learned the basics on creating and editing blogs.  In this short tutorial, we are going to learn how to change the theme of your blog.  The theme composed of the general appearance of your blog including the header picture, the color, menus, widgets,  font, background, etc.

To change theme of your blog, do the following:

  1. Log in to your WordPress account.
  2. Go to your Dashboard.
  3. Expand the Appearance panel located at the lower left side of your Dashboard window  and then select Themes (see first figure).
  4. This will display the different themes as shown in the second figure.

  5. You can choose your own theme later, but for the sake of this tutorial series, try to choose first the Inove theme which I am using. You can search for in in the Search box.

  6. When you have found the Inove Theme, press the Activate link.
  7. Now, try to play with different themes, and choose what is suited for your blog. Each theme has its own characteristic. In later tutorials, however, you will be requested to switch back to Inove, so that you can follow the tutorials easily.
One comment , , ,

WordPress Blogging Tutorial 5 – Embedding Videos and More

Software Tutorials, Wordpress

In tutorial 2, we have discussed how to insert image in you WordPress blog, and in tutorial 4, we have discussed how to link texts to other files on the internet.  In this tutorial, we are going to learn how to embed videos in our WordPress blog.

In inserting a video, we are going to use Khan Academy’s video on Introduction to Logarithm in Youtube. To insert the video to your document, do the following:

 

  1. In your New Post/Edit Post window, click the Add Video button from the toolbar to display the Add Video dialog box.
  2. In the Add Video dialog box, select the From URL tab.
  3. Copy the Youtube URL (web address) of the video that you want to insert and paste it in the URL text box of the Add Video dialog box.
  4. Click the Insert to Post button to insert the video.
If we are too lazy to do the steps, just type after pasting, and you are done.

Notice that in the Add Video dialog box, there are also instructions on how to insert videos from Google and DailyMotion. The output of our tutorial is like the embedded video shown below. » Read more

2 comments , , , , ,
1 2 3 4