Color-UI Simple Blogger Template is the best-looking design theme in the world, as well as an SEO Ready blogger template for news and blogging purposes.
In this theme, we’ve included a trendy tags area as well as a fashionable popular post part called the highlighted section.
Utilize this blogger template on your website to make your blog look more professional.
Color-UI Simple Blogger Template #1 The Best Blogger Template with Fully SEO – Friendly Premium Design
Color-UI is Most Loved Template by our users Their are so many gadgets and amazing features like compare then any other platform. We provide osm featured posts section with fast and responsive design that assurely ehance your website look and performance over search engines
Get an Awesome Design for Your Website Discover the Powerfull Design by Templateiki Templates that really meets your requirements to turn your Website into a Beautifull and Professional Look.
This template is almost the same as the latest Nikk UI Colorful Blogger Template
Color-UI Simple Blogger Template
Color UI Simple Blogger Template Documentation with each step explained in detail Easy installation without any trouble follow below documentation and install this pretty professional template. The widgets gadgets images have been attached properly where red tic mark for better understanding easily
Here is a detailed Documentation of Color UI Blogger – Template Read Carefully to Install all Gadgets on Your Website
1. How to Change FontAwesome Icons in Templates?
Get FontAwesome Icons Short Codes Visit Here. All the ShortCodes of Icons you can copy and use in below Link Boxes like Example : <i class=”far fa-arrow-alt-circle-down”></i>
2. Admin Control Panel
To edit or handle the blog posts, comments system, no. of posts, fixed menu, Facebook SDK plugin, etc. These Options Can be Controlled from Layout in Blogger Dashboard.
2.1). Facebook SDK (Plugin):
Here you can use this gadget to install the Facebook comment box and Facebook page in the sidebar. For More Click Here.
Example of Facebook:
2.2). Default Variables/Comments:
Open Layout > then click on Edit Icon > in the Default Variables gadget.
Here you can set DisqusShortname, and change your blog CommentSystem we Support 3 Comments Plugin Facebook, Disqus, Blogger
Example to set Disqus Comment box:
Use below shortcut code:commentsSystem = facebook or disqus or blogger
disqusShortname = pikitemplates
noThumb = image url
You can use Disqus comment box a optional feature of our template, Just go to disqus.com create account after that tap on Get Started and follow “I Want to install Disqus on my Site” as shown in above image how to setup shortname for disqus. That’s done just change blogger comment system and use disqus comments pluign easilyExample of Disqus Comment:
2.3). Related Posts/ Show Texts:
Open Layout > then click on Edit Icon > in the Related Posts/ Email text gadget.Example:
Here you can set show more text and related posts title also you can set many related posts easily without any trouble. To change load more text edit and change from here above link list option listed.
Example of Related Posts:
Use below shortcut code:relatedPostsText = You May Like These Posts – you change Related Posts title
relatedPostsNum = 3 – you can set number of Related Posts
loadMorePosts = Load More – you can change Load More Homepage button text
Example of Load More text:
2.4). Lazy Scrolls/ More Text:
Open Layout > then click on Edit Icon > in the Lazy Scrolls/ More Text gadget.Example:
Here you can set Sticky Sidebar and Sticky Menu easily by giving value true or false. as shown in the above image.Use below shortcut code:fixedSidebar = true or false – you change sticky sidebar fixed to scrolled
fixedMenu = true or false – you change sticky menu fixed to scrolled
showMoreText = Show More – you can easily change Show More text in Featured Posts
3. Main Logo:
Open Layout > then click on Edit Icon > in the Main Logo (Header) gadget.Example:
Here you can change your blog main logo click on upload option to use your new logo, and try to compress your logo (there’re various online image png compression tools available) compression can help you to boost up your website speed.
For Dark Logo: You can upload dark logo easily, first of all upload dark image in post and copy img source link and then paste in link box as shown in above image.
4. Main Menu:
Open Layout > then Click on Edit Icon > in the Main Menu gadget.Example:
All the main menu items are easy to edit and manage from layout as shown in above image to you understand properly, remeber to use correct format as ahown in above image also you can insert FontAwesome icons here just refer above – How to use FontAwesome icons section .What are Labels in Blogger?
4.1). Use below shortcut code:
Default Menu Example= Featured – for simple menu list
Sub-Menu Example = _Level 1 – just add 1 underscore before title
Double Sub-Menu Example = __Level 2 – just add 2 underscore before title
4.2). How to setup Mega Menu in Blogger?
For recent posts = megamenu/recent – this shortcode shows recent posts
For random posts = megamenu/random – this shortcode shows random posts
For specific label = megamenu/Your Label – this shortcode shows custom label posts
Note: Use the correct shortocde as shown in above image, Use lable name same exact as in posts either in Lowercase or Uppercase.
5. Featured Posts:
5.1). With the help Popular Posts gadget Featured Posts displayed
Open Layout > then click on Edit Icon > in the Featured Posts (section) gadget.Example:
5.2). Featured Post Gadget with Js where you can insert label
Open Layout > then click on Edit Icon > in the Featured Posts (section) gadget.Example:
5.3). How to setup Featured Post Shortcode?For recent posts = featured/recent – this shortcode shows recent posts
For random posts = featured/random – this shortcode shows random posts
For specific label = featured/Your Label – this shortcode shows custom label posts
6. Featured Posts Section:
Open Layout > then click on Edit Icon > in the Pixy Featured Posts Section gadget.Example:
6.1). How to setup Featured Post Shortcode?
For recent posts = 6/column/recent – this shortcode shows recent posts
For random posts = 6/column/random – this shortcode shows random posts
For specific label = 6/column/Your Label – this shortcode shows custom label posts
6.2). Supported All Featured Post Shortcodes
For Left/Right/Center Posts Section = 6/column/recent – this shortcode shows Left posts.
Example For Left/Right:
7. Main Recent Posts:
Open Layout > then click on Edit Icon > in the Main Recent Posts (section) gadget.Example:
Main Recent Posts section with all editable options are specified in an above image like show author profile and adjust in feeds ads. You can easily edit and change from here
8. Inside Posts Ads:
Open Layout > then click on Edit Icon > in the Top / Bottom Posts Ad (section) gadget.Example:
Here you can use this gadget to implement your ads in your posts section only. This section shows in posts top and bottom area as per your requirements Also below you can the Shortcode to show ad in a specific area of the post paragraph so that on invalid click activity you can just turn off this Posts Top Ads section and all ads from inside posts automatically turned off
9. Post Paragraph Ads :
Open Post > then Choose area in Post > and paste ShortCode.Example:
9.1). Use below shortcut code:
Top Posts ads shortcode = (ads1) – this shortcode can be used to shows ads in specific place in post
Bottom Posts ads shortcode = (ads2) – this shortcode can be used to shows ads in specific place in post
10. Post-Author Social icons:
Open Blogger Setting > then Choose Edit Blogger Profile > and paste ShortCode.Example:
You can create this Blogger Profile easily by follwoing below steps that we provide here, Go to Blogger Click on Setting then at last click on edit profile put the code that we provide belowExample:
After editing, Blogger Author Profile Copy the code that we provide and paste in your blogger profile and replace social media links with your own pages links that you want to use.Example:
10.1). Use below shortcut code:
For Social Media icons = <a href=”https://instagram.com/pikitemplates”>instagram</a> – this shortcode can be used to shows social media icons under your profile
Add this Short code :
Hello this is Jane Doe, I am Web Designer and Expert at Piki Templates<a href="https://facebook.com/pikitemplates">facebook</a><a href="https://twitter.com/pikitemplates">twitter</a><a href="https://youtube.com/pikitemplates">youtube</a><a href="https://instagram.com/pikitemplates">instagram</a><a href="https://www.pikitemplates.com/">external-link</a>10.2). Supported Social Media icons:Social Media icons shortcode = facebook – whatsapp – instagram – pinterest – blogger – reddit – youtube – twitter – linkedin – blogger – google – apple – microsoft – facebook-f – rss – behance – stack-overflow – telegram – tumblr – dribbble – codepen – snapchat – email – github – stumbleupon – vk
11. Facebook Page Plugin:
<div class="fb-page" data-href="YOUR FACEBOOK PAGE URL" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
Remember: This Facebook plugin works only for both Facebook Page and Facebook Comment Box you have to Installed below facebook SDK code in the admin section follow below steps provided here
12. Facebook Comment Plugin:
Open Layout > then click on Edit Icon > in Facebook SDK (Plugin) > in Admin Section.Example:
here you can add Facebook SDK Code to Show Facebook Comments inTemplate Also Turn of Facebook Comment System From DefaultVariables as shown in First Admin Section at top ofdocumentation. Copy Code from below box and paste in AdminSection of Facebook Plugin gadget.Facebook SDK en_US :
13. Sidebar Section:
Open Layout > then click on Edit Icon > in the Social Widget (section) gadget.Example:
Here you can add a social media link in your sidebar by using shortcut code in LinkList Gadget as shown in the above image
13.1). Supported Social Media icons:
Social Media icons shortcode = facebook – whatsapp – instagram – pinterest – blogger – reddit – youtube – twitter – linkedin – blogger – google – apple – microsoft – facebook-f – rss – behance – stack-overflow – telegram – tumblr – dribbble – codepen – snapchat – email – github – stumbleupon – vk
14. SendinBlue Subscription Box:
Open Layout > then click on Edit Icon > in the Follow by Email gadget.Example:
Here you can use this section to display Responsive Subscription Email Box easily with SendinBlue platform. Just paste your subscription form link and done. Also you can also change title and caption easily by implementing title and caption code (only if you need to change text)14.1). Supported Optional Changes:SendinBlue Subscription Box shortcode = (sibForm)
SendinBlue Title Text shortcode = title=(Follow by Email)
SendinBlue Caption Text shortcode = caption=(Get Notified About Next Update Direct to Your inbox)
Just Copy and Paste in Title Box above to Change title and caption if you want to modify the text and caption otherwise by default you have no need to copy and paste this code.
14.2). How to Create SendinBlue Platform Form Links:
Just follow the simple steps to create subscription form link First of all Go to this link and Signup or Either Signin if have already account, we always recommend to use SendinBlue platform because it is the only platform provinding unlimited emails storage without any fees.
Totally free also you can upgarde your account on your needs and requirements, but SendinBlue is the best email subscription you can campaign to target your audience and drive more traffic. Lets start the following steps craefully
14.3). Go to Contacts:
At top right corner and select forms option then click on Create a Subscription form button as shown in below imageExample:
14.4). Enter the title name:Example:
14.5). No Changes require press Next button:Example:
14.6). Select the Your First List checkbox to store all emails:
14.7). Select No Confirmation Email Option only:
14.8). No Changes require press Next button:
14.9). Copy SendinBlue Form link:
Now you can use this form link in above box to create a flexible and professional Email Subscription Box. We hope its easy for you for any trouble you can contact us easily.