Rabu, 24 Februari 2021

How to Make a Blogger Template: Sections and Widgets

0 comment

 Designing a Blogger Template is not as difficult as you think (if you already understand a little about HTML and CSS). I have summarized how to make a Blogger Template and here I will show you a way that is easy to understand. Before continuing, the first thing you should know is how Blogger works.

To design a template requires skills in Web Development. You have to be good at or understand Web Design but you don't have to be (very) very good at it. At least, you understand basic HTML, CSS, JavaScript, and XML. To learn about these technologies, I recommend that you study them at W3Schools.com.

How Does Blogger Work?

When we upload or install a new template on Blogger. The template will be entered into the Blogger Database. When someone visits your blog, the browser will send a request and the blogger will give the output to the browser.

Basic Layout


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
 <!-- CONTENT HERE -->
</body>
</html>
The Blogger templates all contain XML code and a few elements. We can see the code above that the code structure of Blogger consists of xmlns (XML Namespace). Namespaces such as xmlns:b , xmlns:data, xmlns:expr are used to provide us with data from the Blogger database.

The following is an explanation of the XML Namespace on Blogger:
  1. xmlns:b - To access elements on Blogger.
  2. xmlns:data - This is where the data comes from.
  3. xmlns:expr - Used to compute Expressions for attributes (We'll learn about that later)
Note : You can change the Namespace from xmlns:b to xmlns:blog or xmlns:data to xmlns:d . But it's better to just use the default version.

Before Continuing

Before we go to the next stage, here I have a little explanation about the Layout and how it looks like. To design a Layout, you can take a picture or make a sketch.

Here are some keys to creating a Layout:

  1. Determine where the Menu is located and how the Menu will look.
  2. Determine how and where the post will appear, whether it consists of 2 columns or 3 columns.
  3. Determine where the Widget can appear. 

Section

The layout on Blogger Templates is created using Sections. The section is one of the locations of elements such as Header, Footer, Sidebar, etc.

Writing Section

Creating Sections on Blogger is very easy. We can insert widgets into sections, but we cannot insert HTML elements into sections. To insert content in a Section, we must use the Widget element.

Here is an example of writing a Section:


<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>
Writing Sections is almost the same as writing HTML which has attributes. Each attribute has a different meaning.

Attributes to Section

  1. id (Required) - Contains a name that is allowed only in letters or numbers.
  2. class (Opsional) - Berisi nama seperti "navbar", "header", "sidebar", dll.
  3. maxwidgets (Optional) - Number of Widgets to add to the Section.
  4. showaddelement (Optional) - You can only select " Yes " or " No ". By default, the showaddelement is " Yes ". These attributes are elements for adding a Widget.
  5. growth (Optional) - You can only choose between " Horizontal " and " Vertical ". By default, the contents of the growth attribute are " vertical ". This attribute is the layout of the widget (flat sideways or flat down).
Sections can have Widgets inside. However, we cannot add a Section to the Section.

Here is an example of writing a Section:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Content Of Section -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Content Of Section -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Content Of Section -->
</b:section>

Widget

The section is where the Widget comes from. The section is just a Layout element, which will be displayed in the browser is a Widget. We can enter a default Widget or Custom Widget into the Section.

Here is an example of writing a Widget:

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

Attributes on Widgets

  1. id (Required) - Contains a name that is allowed only in letters or numbers.
  2. type (Required) - This is the type or type of Widget. The following types of widgets can be used on Blogger:
  3. BlogArchive
  4. Blog
  5. Feed
  6. Header
  7. HTML
  8. SingleImage
  9. LinkList
  10. List
  11. Logo
  12. BlogProfile
  13. Navbar
  14. VideoBar
  15. Newsbar
  16. locked (Optional) - You only choose between " Yes " or " No ". By default it is " No ". If you select " No ", the Widget will be locked, cannot be moved or deleted.
  17. title (Optional) - This is an attribute to display the Widget title. If not filled, then the Title can be the name of the Widget Type.
  18. pageType (Optional) - Can be a name such as "main", "archive", "item", etc. The default is "all".
  19. mobile (Optional) - You just choose between " Yes ", " No ", or " only ". If you select " Yes ", the Widget will only appear on Mobile devices.
The following is the writing of the Section and its Widgets:

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>
You Might Also Like
Tidak ada komentar

Posting Komentar

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search