Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Search Suggest

How to design blogger article section?

The article section is the main section for bloggers. When we published any post it needs to be shown on our blog. There are some steps we are seen in

How to design blogger article section?

It is very difficult to design an article section for bloggers. There are some important points you need to notice while designing an article section on blogger. 

The article section is the main section for bloggers. When we published any post it needs to be shown on our blog. There are some steps we are seen in this article.


1. Add basic XML code

At first, we need to add basic XML code on blogger. This is needed to save our blogger template. Here we need to add one section while saving the template. This is the code you need to add first.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en' 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>
    <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <title>Website Name</title>
      <b:skin><![CDATA[
      
]]></b:skin>
</head>
<body>
  <b:section id='Your Section'/>
   
</body>
</html>


2. Add article section/widget

It is also easy to add an article widget on blogger here are some basic steps you need to follow while adding the article section widget.

Add Article Section/Widget

1. Go to edit Html

2. Delete default section

3. Add article section/widget

<b:section id = 'Blog1'>

<b:widget id = 'Blog1' type = 'Blog'>

</b:widget>

</b:section>



3. Design Article with CSS

This is the most important part of designing the article section. In blogger, there are two types of sections multiple sections and single sections. MULTIPLE SECTION is the homepage of our blog and there we can showcase blog posts.  When users link on any blog post and it can go on SINGLE SECTION. Their users can read articles, comment articles, share articles, and more. And there are also some steps you need to know while designing an article section with CSS.

1. Add b:class below <body>

    <b:class cond='data:view.isPreview' name='preview'/>
    <b:class cond='data:view.isMultipleItems' name='feed-view'/>
    <b:class cond='data:view.isSingleItem' name='item-view'/>
    <b:class cond='data:view.isArchive' name='archive-view'/>
    <b:class cond='data:view.isLabelSearch' name='label-view'/>
    <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
    <b:class cond='data:view.isError' name='error-view'/>
    <b:class cond='data:view.isPage' name='page-view'/>

2. Design MULTIPLE SECTION

First, we can edit multiple sections. While designing multiple sections there we need to add feed-view class according to b:class. This is a very very important point no one knows while designing the article section.  For Example:

.feed-view  .blog-posts

.feed-view .post-hentry

.feed-view .post-outer

While adding this feed-view class on every widget class it cannot affect on SINGLE SECTION. And you can redesign a single section. And while you add <b:if cond = 'data:view.isMultipleItems'></b:if> on any widget or item it can only visible on homepage.


2. Design SINGLE SECTION

Single Section is the section where your post has been seen by users. There are users who read articles, comment on your article, share your article, and more. For Example:

.item-view .blog-posts

.item-view .post-header

.item-view .comments

While adding this item view class before any classes it cannot affect Multiple Sections. And while you are add <b:if cond = 'data:view.isSingleItem'></b:if> on any item it can only visible on Single Section.


Conclusion

And if you have some problem while designing the blogger article section you can comment below. And you can directly contact me.

Hello to everyone. My name is Sandesh Tandan. Sandeshtandan.com was created by myself. It's my personal blog where I offer graphic design, Blogging, programming, and digital marketing advice.

Post a Comment

Feel Free To Contact