- How to edit blog post layouts
- How to add post layout styles (CSS) to Blogger blog
- 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, short 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 the option to edit Titles only and Digest layouts if you need.
The Full single item can't be edited. When you choose this post layout all content is sent to your blog without additional formatting and you can customize it using an inbuilt blog 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 Titles only or Digest layout, and click Edit layout.
In the pop-up, you will see two tabs: with HTML template 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 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 placement, 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 editing the 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 the 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 the 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