Category Archives: Blogging

Information on blogging.

add-gadget

Blogger: How to Keep Your Widgets When Changing to a Custom Blogger Template

For many Blogger users, changing templates is a regular occurrence.  Since my wife and began creating and publishing Blogger templates, we’ve noticed that a lot of people change their themes regularly.  The main difficulty with this habit involves keeping gadgets (also called widgets) that have been used to personalize a blog, such as Followers, Pictures, .  My wife recently designed a Blogger template for my sister-in-law to use on her recipe blog.  When my sister-in-law uploaded the new template, her blog list disappeared.  That scenario happens quite often, and it inspired this article.   Here’s a quick solution to allow you to change your Blogger template while retaining your gadgets.

 

Continue reading

wp-themes-directory

Installing and Activating a WordPress Theme

Ever wonder how to install and activate a WordPress theme?  Here’s your answer.

[This tutorial applies to WordPress blogs running in a self-hosted environment, meaning that you’ve installed WordPress on a web host of your own.  It doesn’t apply to blogs hosted on free WordPress.com accounts.]

Installing a WordPress theme is very straightforward.  WordPress themes available for download from various places on the Internet are typically packaged in .zip files (i.e. theme-name.zip).  Installing a WordPress theme involves nothing more than unzipping the .zip file into the appropriate directory of your WordPress installation, and activating the theme from your WordPress administration console.

Structure of a WordPress Theme
In order for you to install your new WordPress theme correctly, you need to understand the basics of how the WordPress system interacts with themes.  A WordPress theme needs three essential files in order to work correctly with the WordPress administration:

·         An index.php file:  This file is the controller of a WordPress blog.  Most WordPress themes also have other PHP files that represent various sections of a WordPress page, but index.php is the only truly necessary PHP file.

·         A style.css file:  This file controls the look and layout of the WordPress-based website using style definitions.  It also contains the information that is used in the Manage Themes section of WordPress to display the theme name, version, author, and description

·         A “screenshot” image:  This image is used to create preview of the corresponding theme in the Manage Themes section of the WordPress administration. It can be any of the common web graphics files (png, jpg, gif), but it needs to be named screenshot.  For instance, screenshot.png, screenshot.jpg, or screenshot.gif.

If you’ve gotten your theme from a designer who knows what he’s doing, you don’t really need to worry about making sure the theme is set up correctly.  If you’re not sure, you might just want to double-check that you’ve got the basic files needed to install your theme.

WordPress Directory Structure

The WordPress directory structure contains three folders in the root directory:

·         wp-admin

·         wp-content

·         wp-includes

Under the wp-content folder there is a folder called themes.  Inside this folder is where you need to deposit the folder that contains your theme.  Here’s an example.  Say I’m installing a theme for a recipe blog.  The theme is called Recipe, and its folder structure looks like this:

recipe-blog/
            index.php
            style.css
            screenshot.png

This theme would normally be packaged in a .zip file.  To use the theme, I would need to unpackage the file, then upload it (probably using FTP) into my WordPress themes folder.  If I have WordPress installed on my web server under a directory called blog, my directory structure would look like this:
            /wordpress/wp-content/themes/recipe-blog/
                                                                                    index.php
                                                                                    style.css
                                                                                    screenshot.png

Activating a WordPress Theme
After I upload the theme to the correct directory, I can now go to my WordPress administration to activate it.  After logging in to the WordPress admin section, I go to Appearances->Themes.  I can see that my new theme is installed correctly and ready to be activated, because I can see it in under Available Themes on the Manage Themes page.

At this point, all I have to do is click on the Activate link associated with my new theme.  My new theme is now active on my WordPress blog.

recipe-blog-minima

Why You Should Use a Custom Blogger Template For Your Blog

A picture is worth a thousand words, they say.  Why is that?  Because the ability to quickly visualize the details in a graphic representation is a much more efficient way to process what’s being communicated.  Reading blogs, especially ones that are well-written, is a fulfilling way to spend time.  However, there are obvious advantages to mixing well-written advice, stories, or journal entries with a theme that has been designed to enhance the content on your blog.

Continue reading

blogger

Blogger.com or WordPress: How They Compare

This article was written by Richard Robbins. 

Bloggers:  Should You Use Blogger.com or WordPress?

Blogger.com (also known as Blogspot) and WordPress are the two most commonly used blogging platforms today.  Blogger.com was a pioneer in the blogging industry, allowing users to set up accounts and blog for free beginning in 1999.  Blogger.com was purchased by Google in 2003, which enabled it to grow using Google’s resources.  Today, Blogger.com has an undisclosed number of millions of users blogging on their system.

 

 WordPress began in 2003 as the successor to another (now relatively unknown) blogging system.  It has since become the blog platform of choice for most blogging professionals.  There are currently over two million people who are active users of WordPress.com, and there are millions of others who have downloaded various versions of the WordPress code.

 

Continue reading

picknewtemplate

Changing the Look of Your Blogger Site Using Templates

Changing the Look of Your Blogger Site Using Templates

When you set up a new Blogger site, you can select from among sixteen default different templates, the majority of which have more than one theme variation you can select.  When I first started blogging, I often tried two or three of the default templates before I settled on one that fit the theme of my site okay.  You can use one of the following methods to change your existing template.

Picking a New Blogger Default Template
After you set up your blog, you may decide that you don’t like the template so much, or you might just want to give it a fresh look.  There are a couple of ways you can change your template.  The easiest way is to simply switch to one of the other default templates provided by Blogger.  You can switch templates by going to Layout -> Pick New Template from your Blogger account dashboard.  You can pick a new template as simply as you selected your initial one.  All the information (posts, pictures, and videos) you have already placed on your blog will be retained.  Blogger’s system separates the actual information (your posts and media) presented on a blog from the way in which the information is presented – your blog’s theme.

When you change your template by choosing Pick New Template, Blogger’s system is intelligent enough to preserve the gadgets you currently have set up.  For instance, if you have added some gadgets using the Add a Gadget link on the Layout -> Page Elements page, those gadgets will be preserved in your new template design.  I’ll discuss later a method for changing your template design that requires more caution.

Editing Your Template’s XML Code
Another way that you can customize your template is by editing the blog’s template file.  You can access the template file by going to Layout -> Edit HTML.  Blogger would probably be more accurate naming the link “Edit XML”, since that’s what you’re actually editing.  What you’ll find in the template file are some variable definitions, some CSS style definitions, and finally the body of the blog page, which contains a bunch of XML tags that look something like this: 

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Header1′ locked=’false’ title=’Blogger Template Tester (Header)’ type=’Header’/>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

In order to effectively edit your template beyond simply changing fonts and colors in the variable definition section, you’ll need to know (or be willing to learn) some things about CSS and the Blogger XML schema.  It will likely take some studying of the existing XML setup and some experimenting to make the improvements you’re looking for.  As you make changes, you might want to keep a backup copy of your last working template so you don’t have to go back to work from the original template file if you mess something up.

Installing a Third-party Blogger Template
The third way to change your blog’s theme is to download and install a Blogger template created by a designer.  There are many free Blogger templates available for download all over the Internet.  WebsiteTemplateDatabase.com provides a variety from which you can choose.  With such a wide selection of free Blogger templates available, you should be able to find something that matches your style and the content of your blog.

To install a third-party Blogger template, save the template XML file to your computer.  Then, from the Layout -> Edit HTML page, click Browse…, and find the template file on your computer.  Then click Open to return to the Edit HTML page.  Click Upload to upload the new template.

Something to keep in mind if you are using a third-party blog template is that if you have added gadgets to your blog (e.g. Followers, Poll, Labels, etc.), you need to be careful when using a third-party template to avoid removing those gadgets.  If you download and install a template that doesn’t support your custom gadgets, they will be deleted when the new template is saved. 

If your new template does have gadget discrepancies, you will receive the following message when you click the Upload button.

Widgets are about to be deleted

Please confirm that the following widgets should be deleted. All the widgets’ configuration data will be lost.

 

The warning message will then list those gadgets that will be deleted if you proceed with uploading the new template.  To avoid losing your existing gadgets, you’ll need to find the XML tags that represent those gadgets in your current template, and merge those tags into the template you want to upload.  Doing so may be a little tricky.  You might be able to get some help from the original template designer.

 

Each of these three methods of changing your existing themes has advantages and disadvantages.  Hopefully this article has helped you understand the issues involved so you can make an informed decision.  Happy blogging!

bloggeruploadimage

How to Use Blogger.com as an Image Host

Most users of Blogger.com think of it as simply a blogging platform.  However, it can also be used to host images that can be referenced from anywhere on the Internet.  Here’s how it works.

When you create a new blog post on your Blogger account, you have access to a menu from which you can upload images.  Since picture illustrations are important parts of blogs, most bloggers have used this feature.  You have a pretty good amount of freedom in adding images to your blog.  With your Google account, which your Blogger account shares, you have access to up to 1 GB of picture storage.

If you want to use your Blogger account as an image host, create a new blog post and upload the image(s) that you want to host on the Blogger server.   If you don’t want to actually publish the post (you probably won’t if you’re simply using the post as a way to upload images), you can choose to save it as a draft instead.  The fact that Blogger doesn’t provide an option for uploading images outside of creating a blog post indicates that Blogger’s intent isn’t to have its system used as an image host.  However, there are some advantages to using Blogger’s setup for hosting images as compared to some of the other free image hosting services.  The main advantage, especially for those whose images will be viewed excessively, is that there is no bandwidth limitation.

Accessing Your Image

After you have uploaded an image through a blog post, you can access it by right-clicking the image and choosing copy link location.  If you then visit the copied link location url into another browser window, you can see where the image is stored. 

To access the direct URL of your stored image that you’ll need to use for hotlinking, you need to right-click on the image from the previous step (Copy Link Location) and select  Copy Image Location.  You’ll notice that there is a slight difference between the two.  The first step produced a url similar to this:  http://4.bp.blogspot.com/_lrZgwwEYjhk/SoCUsz9-WNI/AAAAAAAAADI/ec0DnmwowMg/s1600-h/blogger-edithtml.jpg

The Copy Image Location step you performed afterward creates a URL that removes the –h part of the s1600-h directory to create this:  http://4.bp.blogspot.com/_lrZgwwEYjhk/SoCUsz9-WNI/AAAAAAAAADI/ec0DnmwowMg/s1600/blogger-edithtml.jpg.

Now that you have a URL that shows the exact location of your image, you can reference that URL wherever you want to use the image.

bloggeraddgadget

Blogger Trick: How to Make a Post Sticky on Your Blogger Account

Blogs are great formats for sharing information.  When you create a blog entry, the typical blog setups, Blogger and WordPress, put your most recent entry at the top.  The older entries are moved down the page.  After awhile, the older blog entries typically move off the main page of a blog, and they’re archived.  The older posts can still be accessed, but they’re definitely not as prominent for readers or search engines as the most recent post.

Sometimes you want to keep a piece of information in one place, normally at the top of your home page.  Often you’ll want to keep a summary of your blog or an important notice at the top of each page on your blog.  This is referred to as keeping the information sticky.  The “sticky” post or block of information doesn’t move from its position on your blog.  Here’s how to do it.

Blog posts are included on a Blogger account using what’s referred to by Blogger as a widget.  A widget is a piece of code included in a Blogger template that tells the Blogger system to include some text or some kind of functionality. If you use one of the default templates from Blogger, you will find this section of code in the XML file for your blog setup, which can be accessed by going to Layout->Edit HTML from your Blogger control panel

      <div id=’main-wrapper’>

        <b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

      </div>

 

These lines of XML tell the Blogger system to include your recent blog posts in the main section of the page for your blog.  When you are creating posts, there is really no way to convey to the widget that you want a particular post to stay at the top of the page.  Instead, you have to use a different widget, separate from the main “Blog Posts” widget described above.

 

For a blog I recently created, I wanted to have such a setup – a sticky post that would keep an overview of my blog at the on top of every page.   I accomplished this by using a Blogger widget that actually doesn’t deal with what’s normally considered a “post” at all.  Blogger has a widget called “Text” that suits the purpose well.  If you click on any of the “Add a Gadget” links from the Layout page of your Blogger control panel, you can select the Text widget and enter the information you want to show up in your “sticky post”.  After you click Save, you are returned to the Layout page, where you can drag and drop the new widget so that it appears above your blog entries.

Click Add a Gadget and choose the Text gadget.

After adding the gadget, you can drag and drop it to a location above the Blog Posts section.

bloggernavleft

Blogger Trick: Hide that Gaudy Blogger Navigation Bar using navbar-iframe Style

You can spot the rank and file Blogspot blogger from a mile away when you come across a site that has this…

…across the top of the toolbar.  By default, Blogger places its own navigation bar at the top of each of the blogs it hosts.  The problem with this generic navigation bar is that it looks somewhat awkward, and it just doesn’t fit with most themes on most web sites, and most bloggers would rather not have its imposing presence glaring from the top of their carefully constructed masterpiece.

So how do we remove the nuisance navigation menu?  Your first response might be, “Just find the place in the template XML file where that particular “widget” is added, and remove it.  The problem is Blogger secretly puts the navigation bar into your blog outside of what can be edited using widgets.

If your Blogspot blog still has one of these clumsy headers, you can find out who the culprit is by viewing the source for your blog.  You will notice a line that looks like this:

<iframe src=”http://www.blogger.com/navbar.g? […] marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ height=”30px” width=”100%” id=”navbar-iframe” title=”Blogger Navigation and Search”></iframe>

 

You notice that Blogger magically inserted an iframe at the top of your blog.  To get rid of the navigation bar, you need to get rid of the iframe.  Well, you can see that the iframe uses a style called navbar-iframe.  To turn off the navigation bar, we can simply change the style definition for navbar-iframe.  Changing the style definition is something that can in fact be done from the Blogger Layout->Edit HTML menu.

There are a few different ways you can tell the navigation bar iframe not to display itself.  Among the most popular is to place this style definition in your Blogger template XML file:

#navbar-iframe{ display:none !important;}
 

This style definition does two things.  First, it tells the iframe tag not to display itself.  Second, it tells the browser (!important) that this style doesn’t want to be overridden by another definition.  You may have also noticed when you viewed the source for your offending blog that there was already a style defined for  navbar-iframe:

<style type=”text/css”>#navbar-iframe { display:block }

</style>

 

This style needs to be trumped by our don’t-display-the-navigation-bar style, so we use the !important attribute.

If you paste the CSS style above into your XML template file (put it with the rest of the style definitions), save the updated template, and refresh your blog, you’ll notice the navigation bar is gone.

One thing to consider if you’re building a Blogger template without the navigation bar is that it might be handy for the bloggers using your template to have a quick way to edit their particular blog.  A good way to accommodate this is to include an Edit link that takes the user to his Blogger dashboard.

bloggerclassicview

Switching from Blogger Classic to Layout View (and vice-versa)

In 2009 Blogger introduced a new layout setup for bloggers using their blogging platform.  The new setup simplifies the process of changing the look and feel of your blogger site.  In the past, you had to get more into the nuts and bolts of the HTML and CSS affecting your blogger template if you wanted to make substantive changes.  The new layout allows you to make changes using a more push-button type approach.  Although Blogger still allows users to stay with the Classic view, any time you make a change to your blog layout using the Classic view, you are prompted to upgrade to the updated system.

Here are some images that illustrate the difference between the classic Blogger layout and the new one.

Blogger’s classic view, shown above, looks much simpler than the new one.  However, the only real push-button feature available with the classic view is the ability to change the NavBar color.  The new view, shown below, allows bloggers to add and remove gadgets and to customize the gadgets without having to sort through HTML markup and CSS style tags.

To change from Blogger’s classic view to the new version, click on the Template tab.  Then click on Customize Design.  You will then be prompted to “Upgrade Your Template”.  Click that button.  Then choose the upgraded template you want to use, and you’re all set up with the new feature layout.

Switching back to Classic View

If for some reason you want to switch back to the classic view, Blogger accommodates doing so.  To switch back, click on the Layout tab, and go to Edit HTML.  Near the bottom of the screen is a link that says “Revert to Classic Template”.  Click on that link. You will be informed that the classic design you currently use will be saved for you to use later, and you’ll be given the chance to okay the change or cancel it.

By saving the classic version of the template, Blogger makes it easier for bloggers to switch to the upgraded system without worrying about not being able to go back to their former template.  Should you be hesitant to move to the updated setup because you have an affinity for your classic look, you can try out the upgraded layout, and if it doesn’t work for you, you can restore your classic view, even if it’s been personalized, the same as you had it previous to upgrading.

Blogger Trick: Using JSON APIs with Blogger to Include Recent Posts with your Template

My wife was designing a blogger template, and she wanted to include a section for recent posts.  There are plenty of Google widget code sections available for download on the Internet that allow a Blogger user to add a Recent Posts section to a blog.  However, the theme for the Blogger template required the feature to be included as an integral part of the template rather than being optional.  I’ll show you how we accomplished the task.

Blogger automatically generates an XML news feed for your blog.  The feed allows people to subscribe to your blog so they’ll receive notices when you publish new posts.  This automatically generated news feed is located at myblogname.blogspot.com/feeds/posts/default.  For your particular blog, substitute your actual Blogger sub-domain in place of myblogname.  If you enter your blogspot URL followed by /feeds/posts/default into a browser, you will see the feed for your blog in your browser window.

Accessing the feed
Accessing your blog’s feed is done by using a technology called JSON (JavaScript Object Notation) through a callback.  I’ll explain what I mean by that.  You need to do two things: 1) create a JavaScript function to process the feed data;  2)Access the feed data and initiate the callback process by using some query parameters.  Here are the technical details.

Inside the blogger template, I placed a piece of JavaScript code (which I borrowed from one of the widely available widgets I referred to earlier) inside the <head>  section of my wife’s template using the Blogger template editor, which is accessed from a Blogger account by going to Layout -> Edit HTML.   The script essentially accesses the feed through the json parameter, parses out the blog titles for the last numposts (this variable is specified in the callback mechanism explained later) blog entries, and writes them out to the web document (as links to to actual blog posts) at the point from which the function is called.  Here’s the function:

<script type=’text/javascript’>
//<![CDATA[
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];

    var posttitle = entry.title.$t;

    var posturl;

    if (i == json.feed.entry.length) break;

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == ‘alternate’) {

        posturl = entry.link[k].href;

        break;

      }

    }

    posttitle = posttitle.link(posturl);

    var readmorelink = “(more)”;

    readmorelink = readmorelink.link(posturl);

    var postdate = entry.published.$t;

    var cdyear = postdate.substring(0,4);

    var cdmonth = postdate.substring(5,7);

    var cdday = postdate.substring(8,10);

    var monthnames = new Array();

    monthnames[1] = “Jan”;

    monthnames[2] = “Feb”;

    monthnames[3] = “Mar”;

    monthnames[4] = “Apr”;

    monthnames[5] = “May”;

    monthnames[6] = “Jun”;

    monthnames[7] = “Jul”;

    monthnames[8] = “Aug”;

    monthnames[9] = “Sep”;

    monthnames[10] = “Oct”;

    monthnames[11] = “Nov”;

    monthnames[12] = “Dec”;

    if (“content” in entry) {

      var postcontent = entry.content.$t;}

    else

    if (“summary” in entry) {

      var postcontent = entry.summary.$t;}

    else var postcontent = “”;

    var re = /<\S[^>]*>/g;

    postcontent = postcontent.replace(re, “”);

    if (!standardstyling) document.write(‘<div class=”bbrecpost”>’);

    if (standardstyling) document.write(‘<br/>’);

    document.write(posttitle);

    if (showpostdate == true) document.write(‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdday);

    if (!standardstyling) document.write(‘</div><div class=”bbrecpostsum””>’);

    if (showpostsummary == true) {

      if (standardstyling) document.write(‘<br/>’);

      if (postcontent.length < numchars) {

         if (standardstyling) document.write(‘<i>’);

         document.write(postcontent);

         if (standardstyling) document.write(‘</i>’);}

      else {

         if (standardstyling) document.write(‘<i>’);

         postcontent = postcontent.substring(0, numchars);

         var quoteEnd = postcontent.lastIndexOf(” “);

         postcontent = postcontent.substring(0,quoteEnd);

         document.write(postcontent + ‘…’ + readmorelink);

         if (standardstyling) document.write(‘</i>’);}

}

    if (!standardstyling) document.write(‘</div>’);

    if (standardstyling) document.write(”);

}

if (!standardstyling) document.write(”);

if (standardstyling) document.write(”);

document.write(”);

if (!standardstyling) document.write(”);

 

}

//]]>

</script>

 

In order to have the above code executed, we need to insert some JavaScript code at the point in the blog template where we want to have the Recent Posts inserted.  The code will need to tell the Blogger system to run our JavaScript showrecentposts code when it’s called.  Here’s the JavaScript block of code to accomplish that.


<script style=’text/javascript’>var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 30;var standardstyling = false;</script>

<script src=’/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts’/>

 

This block of code first sets some JavaScript variables so that they’re available when our showrecentposts function is later called.  You’ll notice that numposts is among those variables listed.  numposts determines how many recent posts will be displayed.

 

The script block following the variables tells Blogger to access the news feed for the current blog (/feeds/posts/default), order the feed entries by the date they were published (orderby-published), set up a JSON callback (alt=json-in-script), and call our function to process the feeds (callback=showrecentposts).  The important query parameters to note in the process of using a JSON callback are 1) alt=json-in-script, which tells Blogger we want to access the feed with a JavaScript function; and 2) callback=showrecentposts, which tells Blogger to call our showrecentposts function.  It’s important to note that the name we use in the query parameter must match the name of our function.

 

To summarize, we were able to integrate a Recent Posts widget as part of a Blogger template by using the automatically generated Blogger feed and the JSON callback functionality to run a JavaScript function.  I hope you found at least some part of this explanation helpful.