Thursday, July 21, 2011

Turbocharge your blog without coding - introduction


Blogging is a great way to get an instant presence on the web. You can get it going in a matter of minutes and begin to blog away, and hopefully in no time you will get a community of readers to follow you. Nowadays many small businesses may even choose to use a blog or Facebook pages as their 'main site,' and save the cost and headache that come with building and maintaining a website.

However, if you have been a regular blogger it is likely that you have had one of those 'how do I do this or that' moments with your blogging site. It is possible that you are hitting the limits of your blogging site. Or more often it is because you don't have the coding knowledge needed in order to achieve you want to do. If you are considering using a blog site as the main site for your business, then you definitely should be aware of such disadvantages.

In this post I will show you how you can add all kinds of useful enhancements to your blog, even if you know nothing about coding. This is based on the free services from deepwidget.com, and if you are patient with me you will be rewarded with a very high quality announcement ad on your blog in a couple of minutes! This is meant to demonstrate to you that while using a blog is convenient with many limitations, but by adding deepWidget into the mix then you will find yourself be able to do much much more with a blog.

In this tutorial I am using blogspot.com (where this blog is hosted) as an example. You should be able to do the same with other blog sites, so long as they allow you to add Javascript to your blog.

In case you are wondering if this is one of those web widgets that you find all over the Internet, then the short answer is 'no,' it is something much more advanced and much easier to use. If you want the long answer you can find it here.

First, Do The One-time Setup

First you must do an one-time setup of your blog template, using one line of setup code that you get from deepwidget.com. This is the magic code that makes it extremely easy to add widgets onto your blog in just a couple of mouse clicks. You can find out how to get the setup code using the instructions here. Once you get the code, follow the steps below to insert it into your blog
  1. Log onto your blogspot.com account. For my own blog it is http://kaihuchen.blogspot.com/
  2. Click on 'Design'
  3. Click on 'Edit HTML'
  4. Find the 'Edit Template' area and insert the code you got from deepWidget.com to the end of the HTML code, just before the closing HTML tag. The last part of your template code should looking something similar to the following:

    <script src='http://cdnsysfiles.smesh.net/javascripts/dwms.js'/> <script type='text/javascript'/> __dwms('xxxxxx/wp_xxxx') </script/>
    </html/>

    Your code should look a little different from the example given above with the 'xxxxx' being some numbers specifically generated for you.
  5. Click on the 'SAVE TEMPLATE' button
And you are already done with the hard part! From this point on you can add, remove, or configure all kinds of widgets onto your blog in a WYSIWYG (what-you-see-is-what-you-get, i.e., no need to see or handle the code) manner, so it is all very easy.

Now The Fun Part

Next as a demonstration I will show you how to add a component (called 'widget') to your blog. For this you need to sign onto the deepWidget Sandbox, which is a web-based administration portal, and that's where you manage the widgets on your blog in an easy-to-use environment. If you are not familiar with the deepWidget Sandbox, please read the illustrated instruction here. Here I am just going to show you a simple example to give you a taste of how it works.

  1. Go to http://deepwidget.com, sign on, and go into the 'deepWidget Sandbox'.
  2. Enter the URL of your blog (the same one you used earlier when getting the setup code) into the Sandbox. You should see your blog displayed inside the Sandbox.
  3. Click on the 'Add' button (on the left panel, near the icon of this widget) to display the widget gallery, then select the 'Business/professional Poster' widget. You should see this widget displayed in the Sandbox immediately.
  4. Click on the 'Publish' button and confirm your action, and this widget is now live on your blog! See the lower-right corner of this blog for an example of such a widget.
If you open up your blog in another browser window now, you will see this widget already there. This widget will stay at the lower-right corner of your blog regardless of how your scroll the page. So there you now have a powerful way to announce something important (upcoming events, sales, important notice, etc.) on your blog, and keep it there at all times. This is something you cannot do previously unless you are a very good coder!

And of course you can go ahead to click on the 'edit' button to configure this widget with a different background image, a different 'decal' (i.e., the image at the lower-left corner of this widget), and also change the text to something that suits your need. You should be able to complete all these in just a couple of minutes, and then by simply clicking on the 'Publish' button again your blog instantly has the updated widget up there. No code, no mess.

From the Sandbox, you can go ahead to add other widgets onto your blog to try them out. I am sure you will be amazed at how easy it is to add all those cool-looking and useful widgets to your blog.

So here you have learned the basics about how to add widgets to your blog. The same procedure (except for the part about the one-time setup) also work for your website.

Advance Techniques

Since the postings on you blog are usually moved to secondary blog pages or to an archive after a while, you may find that sometimes it is desirable to keep a given widget in sync with a certain post. For example, if you have a post about a certain restaurant with a slideshow widget displaying the photos of dishes from the restaurant, then you certainly want this slideshow widget to stay with the post no matter where the post is moved to by the system. This way the slideshow also won't be present at all times displaying on top of other unrelated posts. This is certainly possible with deepWidget. The live 'Poster' widget that you are seeing here is in fact tied to this very post that you are reading right now, so you will find it disappears from the screen if you proceed to read other posts. I will talk more about how to do this later in a separate tutorial.

No comments:

Post a Comment