How to edit Wordpress and Blogger blog post layouts?

  1. How to edit blog post layouts
  2. How to add post layout styles (CSS) to Blogger blog
  3. How to add post layout styles (CSS) to Wordpress blog

About blog post layouts

Wordpress and Blogger posters are designed to use three default layouts for automated posts: Titles only, Digest and Full single item. 

  • Titles only - shows only titles of items (news, articles) in the post.   
  • Digest - shows a list of items with titles, descriptions and image thumbnails in the post.
  • Full single item - posts one item at a time and includes all available content in the post.

Each layout has its default HTML template and styles (CSS). These layouts were designed to fit most blog templates and can be used without any modification.

However, you have an option to edit Titles only and Digest layouts if you need. 

The 'Full single item' layout doesn't have any editable template. When you choose this post layout all content is sent to your blog without additional formatting and you can customize it using an inbuilt HTML and CSS editor.

You can customize post layout in the posting campaign editor.

In the posting campaign editor, go to Advanced settings, find the Select post layout option, choose "Tiles only" or "Digest" layout, and click Edit layout.

In the pop-up, you will see two tabs: with HTML template of a given post layout and with its style sheet (CSS). You can start editing either in the pop-up or copy the code to your editor.

In the HTML template, please pay attention to our special tags, which are responsible for certain posted item elements. These elements will be replaced with real content in the post:

%TITLE% - content title;

%DESCR% - content description;

%IMAGE-LINK% - link to the content image;

%LINK% - backlink to the original content page;

%ORIGIN-LINK% - backlink to the original content source;

%DATE% - original content date.

You can change element placing, add your own code or plain text, or remove any element as you wish. 

In the style sheet (CSS) we have the list of classes that are used for each post layout.

Titles only post layout classes:

.rssground .rssg-titlesonly {
}
.rssground .rssg-title {
}
.rssground .rssg-source-date {
}

Digest post layout classes:

.rssground .rssg-digest {
}
.rssground .rssg-col-left {
}
.rssground .rssg-col-right {
}
.rssground .rssg-img {
}
.rssground .rssg-title {
}
.rssground .rssg-source-date {
}
.rssground .rssg-desc {
}

Each element has its own set of default styles. You can edit or delete them if you wish. 

You can also use these CSS styles and classes in your blog. But If they will be different from those that are saved in the popup tab, they may conflict. We recommend editing style only in case you know what you are doing.

When you are done with editing post layout, press Save.

Your layout editing will be implemented only for this posting campaign. Post layouts have to be set for each campaign individually. 

If you wish to return default layout settings, use the Restore default option.

If you don't want to add CSS code to each and every blog post, you can add these styles to your blog CSS (read next).

^ to the top

How to add post layout styles (CSS) to Blogger blog

1. Go to your posting campaign editor, to Advanced settings, and then to "Digest" or "Title only" post layout click "Edit layout" option:

2. Choose "CSS" tab. Copy all its code, then delete this code from the tab and press Save:

3. Now go to your Blogger admin panel. Go to "Theme" in the left navigation menu and press "Customize":

4. Choose "Adjust widths" menu in the left navigation. And paste the code to "Add custom CSS tab". Then press "Apply to Blog" in the upper right corner.

Note: "Digest" and "Titles only" layouts have different styles (CSS) and if you plan to use both layouts on your blog, please add both CSS codes.
^ to the top

How to add post layout styles (CSS) to Wordpress blog

1. Go to your posting campaign editor, to Advanced settings, and next to "Digest" or "Title only" post layout click "Edit layout" option:

2. Choose "CSS" tab. Copy all its code, then delete this code from the tab and press Save:

3. Now go to your Wordpress admin dashboard. Go to "Appearance" > "Themes" in the left navigation menu and press "Customize":

4. Choose "Additional CSS" menu in the left navigation. And paste your CSS code there. Then press "Publish" button at the top of the navigation menu:

Note: "Digest" and "Titles only" layouts have different styles (CSS) and if you plan to use both layouts on your blog, please add both CSS codes.
^ to the top

Still need help? Contact Us Contact Us