Showing posts with label beginner's guide. Show all posts
Showing posts with label beginner's guide. Show all posts

Blogger vs WordPress: Which is Better for You?

There are two big-name services in the world of blogging: Blogger vs WordPress. No matter where you go on the internet looking for advice, these two names are nearly impossible to avoid because they play such an important role within the online content community.

If you're just starting out a new blog, or making some major changes to your current layout, you'll most likely be faced with the decision to choose between Blogger vs WordPress. Both are stellar services that are going to make your life as a blogger much easier, but ultimately, your decision must come down to one. So don't cross over, let's walk this path together and ensure that you don't get lost in the wonder world of web, looking for answers.

blogger vs wordpress

Before we start!

WordPress as you might have noticed, comes in two different flavors, wordpress.org and wordpress.com. Seemingly same, but practically, not. Like in Blogger vs WordPress, hosting at wordpress.com is like renting a corporate apartment where the corporate is responsible for maintenance and facilitation of your place. While hosting at wordpress.org is similar to buying your own apartment, where you are responsible for your place's security, maintenance and many others.

So, wherever in this post you see the word 'WordPress'; know that it refers to wordpress.org.

User-Friendliness

WordPress is a clear front-runner in the blogging and web design community in terms of how many people actually use the platform. The founder of WordPress, Matt Mullenweg, provided eye-opening statistics that around 18.9% of the entire Internet runs on WordPress. Compared to a 2012 study done by Blogging.org, of all the actual blogs on the Internet, WordPress makes up 43%, Blogger 35%, and the remaining blogs are Tumblr or other less known services.

However, just because something is used more often than another, it doesn't mean it's easier to use. The problem with WordPress is that it wasn't designed for beginners who just want to take up blogging as a side hobby. In order to set up your own WordPress blog, you have to have some previous knowledge of things like hosting, bandwidth, HTML and SEO practices. There are WordPress services out there that will help set up your site and get you online, but WordPress itself comes as a set of files that you are expected to download and configure to your own site.

Some hosting companies have made the idea of using WordPress a little bit easier with things like one-click downloads; but it's still a pretty steep learning curve for new bloggers to overcome. You also have to deal with paying for the costs of hosting your site and acquiring the domain name. If you opt to use one of the many WordPress services instead of setting it up yourself, you'll be stuck with a URL such as 'yourwebsite.wordpress.com', which takes away from the professional image you may be trying to portray.

Blogger is entirely based on Google and makes setting up a blog a breeze. With Blogger vs WordPress all you need to get started is to sign up for the service using your Google account, or make a new account like you would if you were setting up an email account. From there, Blogger takes responsibility for all your files, backing up the systems and the details associated with operating a content site like a database. Blogger is so much easier in terms of walking you through the steps, providing you with everything you need to be successful and it's at little-to-no cost to you.

Design & Customizability

Hosting at WordPress means stepping into the Disney world. With hundreds of featured rich-customizable design templates, you would find yourself literally lost in the WordPress arena, ensuring that your site looks unique, catchy and simply marvelous to visitors. The wide array of WordPress templates include customized designs for nearly every walk of life including fashion, entertainment, music, health, kitchen, etc.

Blogger templates, some would say, are not responsive; but let me tell you a secret. With a little search online, you can find hundreds of free, highly customizable, responsive Blogger templates that you can easily integrate into your blog, so that you, and your site visitors stay in touch with your blog through their handsets. For WordPress, however, you don't need to wander around. By default, it has rich and responsive native designs, making WordPress ideal for mobile bloggers.

Both platforms will allow you to make modifications to the theme and features of the site if you have experience or feel comfortable to use HTML and CSS. They also both provide helpful post areas for when you go to submit new content. These post areas will also include HTML and some basic functions to change the font style and the size of your text.

One design feature between the two that may tip the scale toward Blogger in the Blogger vs WordPress discussion is that Blogger is integrated with other Google services like Google Picasa. Picasa is a photo sharing site that will allow you to share all your personal photos, or the photos that you plan on using within your posts. These can then be accessed via the text editor when you are submitting content and can be easily included with the content.

Gadgets, Widgets & Plugins

Talking of plugins, WordPress provides you with thousands of easy to integrate plugins from security to multimedia, enabling you to add any feature or functionality in your site, in a couple easy steps. Users of this platform have submitted thousands of independent plugins that you can install for just about anything you would need, from SEO to E-commerce. There are so many interesting plugins available, that blog owners often make the mistake of cluttering their site with too many and distracting their readers from the content.

Blogger may not have as many plugins or widgets as WordPress, it does have enough to provide you with what you need. Blogger's simplicity in many ways provides it with an edge over WordPress because you are able to focus most of your time in producing great content, instead of seeing how many bells and whistles you can add on the site.

The SEO Question

Not every person that starts a blog is looking to make money off the content; some people just like to write for the sake of writing. Whatever your goals are for starting the blog, search engine optimization - or SEO for short - is a key strategy in growing your readership, so others might enjoy what you have to share.

Over 1 quadrillion searches are performed via Google each year. The goal of most SEO producers is to implement strategies that can appease Google so that their content will be ranked higher up in search query results. Blogger is a service created by Google, so it's obvious that they added their own formulas to the service to ensure that those blogs are doing what they need to do to be found.

Sticking to Blogger means Google would optimize your blog itself from a SEO perspective. All you need to do is check / uncheck a couple of options from your dashboard and Google will start crawling your site with just a click of a button. WordPress takes a hands-on approach that will require you to know a little bit more to modify your website design and content to meet these standards.

And the Blogger vs WordPress Winner Is…

In terms of Blogger vs WordPress, both services might be worth trying out, but ultimately Blogger comes out as a winner in all four categories discussed above. For new or returning bloggers, it is a fantastic service that makes it easy to focus on what you love, regardless of all the add-ons and fancy additions of WordPress. Blogger's simplicity is perhaps one of it's greatest advantages and provides bloggers of all experience levels a chance to succeed.

How to add custom Variable definitions to Blogger

In this tutorial, we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template Designer where are the settings for colors, backgrounds, fonts and font sizes.
blogger variable definitions

Most default Blogger templates, such as the Minima Template, use these settings for the CSS, which makes it easier to modify the variables through the Blogger dashboard, using the Template Designer ("Template" > "Customize") editor and going to the "Advanced" section.

blogger template designer, variable definitions

If the definitions are already added in the CSS, we'll be able to change the background colors, font colors, styles or sizes, directly from our Blogger dashboard without having to touch the HTML code of our template.

If these values ​​are not set, we can define them by creating our own variables. The more variables are created, the greater will be the ease of changing colors and fonts of the Page Elements by going to the "Template Designer" and click on the "Advanced" tab.

In some cases, we can't change the color or font of a custom template if the designer has not implemented the variables and didn't defined & specified a particular value directly into a property. And if there is no definition for these values​​, we may not be able to customize it through the Blogger's Template Designer.

There are two types of variables:

1) Color Variable:
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#66bbdd"/>
  • In red is the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word.
  • In green is the description that will appear in the Fonts and Colors panel (it can contain spaces).
  • In blue is variable type, which in this case is "color".
  • In purple is the default value, which runs in the absence of any other value.
  • In orange is the value of the selected color.
2) Font Variable:
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" />
  • In red the variable name without spaces.
  • In green the description of the variable, may contain spaces.
  • In blue is the type of the variable, which in this case is font.
  • In purple the default font.
  • In orange is the font that you choose.

Where Are Variable Definitions located

We can find the variables definitions in the <head> section of our Template by accessing the HTML code (click on the "Edit HTML" button). There we should see a pair of <b:skin>..</b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names.

variable definitions

How to Create Variables with type Color

Now, let's see how we can create type="color" variables in our template.

Please copy the below snippet and replace the names and types as you like, then paste the code below this comment:
/* Variable definitions
   ====================
Code to copy:
 <Variable name="NAME" description="DESCRIPTION" type="color" default="#xxxxxx" value="#xxxxxx" />
For a better understanding, let's take a look at this example with variable of type "color":
<Variable name="variablecolor" description="Variable with light blue color" type="color" default="#DDF2FF" value="#DDF2FF" />
color variable type

Here, I have created a variable of type "color", with the "variablecolor" name. The color values (#DDF2FF) can be applied to all the borders of my blog and whenever I want to apply color styles to a specific border, I will type it like this:
border: 1px solid $(variablecolor);
Note that I have added the "$" symbol before the variable's name and included the name inside the parentheses. These should be added every time you want to implement a new variable definition.

Once we have created the variable, we can apply it on any property (not only borders) of any selector (page element) where it is possible applying the chosen color.

For example, if I want to add this color in the main-inner background (sidebar and posts area), I will add it just after the "main-inner" class selector, like this:
.main-inner {
background-color: $(variablecolor);
}
variable type color, variable definitions

Now that a new variable has been added, save and return back to the blogger dashboard by clicking on the "Customize" button, then the "Advanced" tab. You will notice that there is a new variable called "Variable with light blue color". In order to change the color, just use the color picker tool.

blogger template designer

How to Create Variables of type Font

Now let's say that I want to create a new variable of type="font" which I want to apply on the title of the sidebar gadgets. I will add it this way:
<Variable name="gadgetstitlefont" description="Gadgets Title Font" type="font" default="normal normal 16px Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif"  value="normal normal 20px Cambria"/>
In this variable that I just created, the default font to be searched by the web browser should be Arial, and in its absence, Verdana and so on. Otherwise, apply the Cambria font which is actually the font that we want and which can be easily changed by accessing the Blogger Template Designer.

Once the font variable has been implemented, we can add it to any property of any selector where we want to define this font style.

To define where this variable should be applied (which, in my example, is the title of the sidebar gadgets), I will need to include the values ​​directly in the "h2" property of the "sidebar" selector (sidebar-right-1), by creating the following CSS rule:
#sidebar-right-1 h2 {
font: $(gadgetstitlefont);
}
And I will add this above the ]]></b:skin> tag of the Template (don't forget to add the "$" symbol before the variable's name, also put the name between the parentheses, otherwise it won't work).

variable font type

Now, that we have included a new variable, Save the template and return to the Blogger dashboard by clicking on the "Template" > "Customize" button and access the "Advanced" tab. Scroll down and we will see a new variable named "Gadgets Title Font" - if you want to change the font type or size, you can do it directly via this panel.

variable font type advanced

After you've decided what font style should be applied, click on the Apply to blog button on the right side.

apply to blog button

As you work on your template design, you can add lots of color and font variable types, however, for other types of CSS attributes, it is not necessary to create variables. The other types, such as margin, padding, need to be included in the HTML of the template above the ]]></b:skin> tag. So that's how you can add custom variable definitions to Blogger. Enjoy!

Understanding the Page Elements of a Blogger Layout

When following a tutorial on how to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements.

For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard.

What are the Page Elements?

Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the "Layout" option in the Blogger dashboard.


Understanding the Page Elements sections

The Blogger Layout is made of sections and elements. The sections mark certain areas of a page. Every section is represented by the <b:section> tag and has an unique "ID" that names its element which is followed by a CSS "class" selector. Each section has some attributes and through these, we can determine the number of elements allowed in the section and if this section gives the option to add a "page element".


Let's take a look to an example of the default code related to the header section found in the HTML of a Blogger template:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<-- rest of the code -->
</b:section>
Breaking apart the code above:
  1. <b:section is the opening tag of the section.
  2. class='header' - describes the existing group inside the "header" element
  3. id='header' - identifies and specifies the header as a single element.
  4. maxwidgets='1' - determines the number of elements allowed in the "header"; here we have the number of gadgets that we can include in the header section. In this example, '1' means that this section allows us to add only a gadget.
  5. showaddelement='no' - the 'no' attribute means that the header will not show the "Add a gadget" link or we won't be able to move any Page Elements. To activate this option so that we can add new Page Elements (Add a gadget), we should change 'no' to 'yes'. By setting the "showaddelement" attribute to 'yes', we'll be able to arrange the elements as we like, just click on the element that you want to move and drag & drop it wherever you want.
The spaces reserved for adding elements in the existing sections are called Gadgets (or Widgets). You can easily add various Page Elements by clicking on the "Add a Gadget" link. This will open a pop-up window for you to pick and choose which elements should be added. Just click on the Gadget's title or on the blue plus sign symbol to add it to your blog's layout.


After you have added a page element, gadgets can be moved up, down or sideways. You can put them wherever you want. Of all the existing gadgets, the most used is the "HTML/JavaScript". Inside this gadget (widget) you can insert any code, as long as it is in the HTML or JavaScript language.

Each time you decide to add a new gadget, click on the "Add a gadget" link in the area where you want to add it. For example, if you want to add a JavaScript code and want it to appear in the sidebar, you should click on the "Add a gadget" link in the "Sidebar" section, choose the "HTML/JavaScript" option and paste the code in there.

Once you have added new gadgets (widgets), it is recommended to check the changes by clicking on the Preview button before saving anything. So, if something went wrong, you simply click on "Clear" and everything that was not saved will return to its previous state. If the position of any Page Elements (Gadgets) has been rearranged, you will need to click on the Save arrangement button in order to see the changes.