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 - post one item at a time and include 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. 

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 editor.

You can customize your posts layout either in posting campaign editor in RSS Ground account.

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 element has its own set of default styles. You can edit or delete them if you wish. You can also use these CSS classes names and describe them in your blog. If you leave CSS code in the popup tab, styles will be added to each post, and they may conflict 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 for each campaign individually. 

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

However, once again, 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 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