How To Setup CoolBaby Blogger Template

How To Setup Coolbaby Blogger Template

CoolBaby Blogger Template is a features rich blogging blogger theme with fine piece of coding, you can't find any other better fashion focused blogger template better than this. There are tons of features pre-installed in this template. CoolBaby Blogger Template is perfect for bloggers, travelers, writers, photographers, illustrators, food or sport lovers even fashion shopper to share important something, hot news, events, personal stories or daily simply life on their own blog websites. Glossy is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template.
You can check the live demo or download the template through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there�s no support for free users.

Video Documentation

You can check this below video to understand the setup process much more easily, just click the below image to watch the video directly on YouTube, or click this link - How To Setup CoolBaby Blogger Template

Main Menu/Dropdown


Access your blog Layout > click Edit link on Navigation Menu widget.

Normal Link: Mylink
Sub menu: _Submenu

Image Example:

Top Feature Post Widget


Access your blog Layout > click Edit link on Feat Section widget.

Now if paste the below id's to make the widget appear

recentposts
randomposts

Note:- just add any one of the above.

Image Example:

Label Based Featured post widgets


Access your blog Layout > click Edit link. add your desired label in the html/javascript area.
like this.

[Blogger][feat1]

[Your-Label][feat1]

Image Example

Bottom Featured post widgets

Access your blog Layout > click Edit link. add your desired label in the html/javascript area.

image example.

Footer Logo

On Blogger Dashbord Click Theme
Click Edit HTML
(Logo) Scroll down and Find this Code :
 <div class='cb-footer-logo'>            <a href='#'> <img alt='Coolbaby' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfRfuz3VI3iUjsogNbFiKW-1UI82eL31l2z5tBSKX3xP2AdUUDoEu8do3fj1zjNs3Rlx91hDV7vcfrmpVKzrqE2r7QekYmaEQyLF39w9mIC-GyN8HDxX33p5ZqDJfpNQzY9ZaIT-bS16T/s1600/cb_logo.png'/> </a>        </div>        <!--footer-logo-->

Change link and image with your desired url and image. 

Bottom Menu

On Blogger Dashbord Click Theme
Click Edit HTML
(Menu) Scroll down and Find this Code :
             <ul class='menu' id='menu-menu-2'>
                    <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-168' id='menu-item-168'><a href='https://coolbaby-soratemplates.blogspot.com/p/blog-page.html'>Contact Us</a>
                    </li>
                    <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-339' id='menu-item-339'><a href='https://coolbaby-soratemplates.blogspot.com/p/about.html'>About</a>
                    </li>
                </ul>

Change links and text with your desired url and text. 

Footer Social Links

On Blogger Dashbord Click Theme
Click Edit HTML
(Social) Scroll down and Find this Code :
 <div class='content-social'>
            <ul>
                <li>
                    <a class='fb-social-icon' href='#' target='_blank'> </a>
                </li>
                <li>
                    <a class='twitter-social-icon' href='#' target='_blank'> </a>
                </li>
                <li>
                    <a class='rss-social-icon' href='#'> </a>
                </li>
            </ul>
        </div>
        <!--content-social-->

Change links with your desired url. 

Sidebar Author Box

Access your blog Layout > click Edit link. replace the code with your own in the html/javascript area.
<div class="about-widget-image"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMpdDRJi3076YAk52j-woXS-rEk2jfhwxdulZbtHYQAVIAAkbNlkDTkLRE5Lub6k8Ckqxh8cScUbkYkTkT-K1YUfe3aAFIKgFvjMDDtkj9APqLznUcFuSbs9Upl561kavgluNz_-cA6WD/s1600/115.jpg" alt="About Me"/> </div><div id="profile">    <a href="https://twitter.com/soratemplates" class="btn btn_left">@SoraTemplates</a>  <a href="https://www.facebook.com/soratemplates" class="btn btn_right">Facebook</a>  <div class="info">   My name is Joanne Doe, a lifestyle photographer and blogger currently living in Osaka, Japan. I write my thoughts and travel stories inside this blog..  </div></div>
Replace highlighted code, which is image url, social profile links and text with your own. 

Sidebar Subscription Box

Access your blog Layout > click Edit link. replace the code with your own in the html/javascript area.
<style>#Templatesyard-sbox-v2 {  padding: 0;  padding-bottom: 5px;  font-family: inherit;  display: block;  margin: 0;  border-radius: 1px;  border:1px solid #496853;}#Templatesyard-sbox-v2 p {  font-size: 15px;  color: #000;  line-height: 27px;  padding: 5px 10px 5px;  text-align: center;  width: 80%;  margin: 5px auto 20px;  border-bottom: 2px solid #ebebeb;  border-radius: 20px;}#Templatesyard-sbox-v2 .rssform {  padding: 0;  margin: 0 auto;  display: block;}#Templatesyard-sbox-v2 .rssform input {  padding: 8px;  margin: 20px auto 15px;  font-size: 13px;  color: #000;  text-align: center;  display: block;  font-family: inherit;  font-weight: normal;  width: 90%;  height: 38px;  text-transform: uppercase;  outline: none !important;  border: 1px solid #ebebeb;  border-radius: 1px;  background-color: #FCFCFC;  box-sizing: border-box !important;}#Templatesyard-sbox-v2 .rssform .button:hover { opacity: 0.7;    -moz-opacity: 0.7;    -webkit-opacity: 0.7;}#Templatesyard-sbox-v2 .rssform .button {  background: #496853;  color: white!important;  margin-top: 15px;  outline: none !important;  transition: all .3s ease-in-out;  padding: 5px 2px !important;  float: none;  text-transform: uppercase;  font-size: 18px;  font-weight: normal;  cursor: pointer;}#Templatesyard-sbox-v2 form {  margin-bottom: 10px !important;}</style><div id="Templatesyard-sbox-v2">                             <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>   <div class="rssform">            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Templatesyard', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">            <input type="text" name="email" placeholder="Enter your email address..." vk_14173="subscribed" />            <input type="hidden" value="Templatesyard" name="uri" />            <input type="hidden" name="loc" value="en_US" />            <input value="Join Now" class="button" type="submit" />            </form>            </div>                   </div>
Replace highlighted code, which feedburner id and text with your own. 

Sidebar Social Counter

Access your blog Layout > click Edit link. replace the code with your own in the html/javascript area.
<style>/* Social Counter--------------------------------------*/li.social_item-wrapper {float: left;width: 48%;text-align: center;margin-right: 4% !important;margin-bottom: 10px !important;color: #fff;}#sidebar .widget {margin-bottom: 35px;}a.social_item {position: relative;display: block;height: 60px;line-height: 60px;overflow: hidden;}.social_item-wrapper:nth-child(2n+2) {margin-right: 0 !important;}.social_icon {float: left;line-height: 60px;width: 41px;font-size: 1.3rem;}a.social_item.social_facebook {background: #3F5B9B;}.fa-facebook.social_icon {background: #2E4372;}li.social_item-wrapper:hover .fa-facebook.social_icon {background: #3F5B9B;}li.social_item-wrapper:hover .social_facebook {background: #2E4372;}a.social_item.social_twitter {background: #1C97DE;}.fa-twitter.social_icon {background: #1571A5;}li.social_item-wrapper:hover .fa-twitter.social_icon {background: #1C97DE;}li.social_item-wrapper:hover .social_twitter {background: #1571A5;}a.social_item.social_youtube {background: #E22020;}.fa-youtube.social_icon {background: #B31919;}li.social_item-wrapper:hover .fa-youtube.social_icon {background: #E22020;}li.social_item-wrapper:hover .social_youtube {background: #B31919;}a.social_item.social_dribbble {background: #E82159;}.fa-dribbble.social_icon {background: #B51A45;}li.social_item-wrapper:hover .fa-dribbble.social_icon {background: #E82159;}li.social_item-wrapper:hover .social_dribbble {background: #B51A45;}a.social_item.social_rss {background: #E86321;}.fa-rss.social_icon {background: #C2521B;}li.social_item-wrapper:hover .fa-rss.social_icon {background: #E86321;}li.social_item-wrapper:hover .social_rss {background: #C2521B;}a.social_item.social_google-plus {background: #E82C2C;}.fa-google-plus.social_icon {background: #BF2424;}li.social_item-wrapper:hover .fa-google-plus.social_icon {background: #E82C2C;}li.social_item-wrapper:hover .social_google-plus {background: #BF2424;}a.social_item.social_linkedin {background: #0275B6;}.fa-linkedin.social_icon {background: #02669E;}li.social_item-wrapper:hover .fa-linkedin.social_icon {background: #0275B6;}li.social_item-wrapper:hover .social_linkedin {background: #02669E;}a.social_item.social_instagram {background: #8E714D;}.fa-instagram.social_icon {background: #6F583C;}li.social_item-wrapper:hover .fa-instagram.social_icon {background: #8E714D;}li.social_item-wrapper:hover .social_instagram {background: #6F583C;}a.social_item.social_pinterest {background: #CA2027;}.fa-pinterest.social_icon {background: #AB1B21;}li.social_item-wrapper:hover .fa-pinterest.social_icon {background: #CA2027;}li.social_item-wrapper:hover social_pinterest {background: #AB1B21;}ul.social-counter a {color: #fff;}</style><div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>
Replace highlighted code, which is social profile links and text with your own. 

Post Author Box

Access your blog Layout > click Edit link. replace the code with your own in the html/javascript area.
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design
Replace  text with your own. 

Note:- Image will be picked automatically from your blogger profile so don't forget to setup yours.

Page navigation results  


Access your blog Theme > click Edit Html and then find the following coding.

 var perPage = 7;
Change the value of  " var perPage = 7;" with any other number to show your desired number of posts.

Facebook Page Plugin:

<center><div class="fb-padding"><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=1395743857335531";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/soratemplates" data-width="280" data-height="230" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div></div></center>
or you can follow this tutorial if above method won't work

Theme Customization:

Access your blog Template > click Customize.

Here you can change the background, and apply pre-defined colors


Clicking Advanced You will see the official option to change the Main Color


NOTE: To make any changes you must click Apply to Blog in the upper Right.

NOTE 02: To return to default style click "Clear advanced changes to theme color", and click Apply to Blog.

Installation And Custom Services

We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.

Post a Comment

0 Comments