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 poster have three default layouts for automated posts: titles only, digest and full single item. 

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

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

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

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 inbuilt blog HTML and CSS editors.

You can customize your posts layout either in posting campaign editor or in your blog editor.

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

In the pop-up, you will see two tabs: HTML template of a given post layout and 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 each element placing, add your own code or plain text, remove any element as you wish. 

In style sheet (CSS) we have the list of classes which 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 class has its default syles. You also dit them as you wish. However, if you have more preferable styles specified in your blog CSS we recommend removing or replacing a given style from this style sheet. All secified here styles will be added to each post, and they may conflic with native styles of your blog, and even styles specified in previous blog posts.

When you are done with editing post layout press Save.

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

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

However, if you don't want to add CSS code to each and every blog post, you can add these styles to your blog CSS.

^ to the top

How to add post layout styles (CSS) to Blogger 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 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 place your CSS code there. Then press "Publish" button on 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