Simplex Design blog : Simplex ColorBlock - Template for personal blog, online portfolio

Link to SimplexDesign - free premium blogspot template

Simplex ColorBlock - Template for personal blog, online portfolio

Posted: 16 Aug 2013 11:09 AM PDT

In previous post, I wrote about Bootstrap and the way apply to current template of SimplexDesign. In this post, I will show you another SimplexDesign template name Simplex ColorBlock.
Template feature:

This template is good for personal blog, online portfolio.
Responsive design, it can display good in most of monitor and mobile device.
Colorful block for another kind of blog post, from normal blog post to music, image, tip ...
Widget ready for you to add advertisement.

Live demo Download

Install instruction

1, Download template file

2, Open template in a word editor such as Notepad++

3, To edit menu

Find this code

<div id='menu'>
                               <div class='menu-main-nav-container'>
                                    <ul class='sf-menu' id='menu-main-nav'>
                                         <li>
                                            <a expr:href='data:blog.homepageUrl'>Home</a>
                                         </li>
                                       <li>
                                             <a href='#'>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>
                                       <li>
                                             <a href=''>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>

                                   </ul>
                               </div>
                           </div> 
                             <select>
                                 <option selected='selected' value=''>Go to...</option>
                               <option value=''>Home</option>
                               <option value=''>Home</option>
                           </select>

In the code above, here is the code of menu:

<div class='menu-main-nav-container'>
                                    <ul class='sf-menu' id='menu-main-nav'>
                                         <li>
                                            <a expr:href='data:blog.homepageUrl'>Home</a>
                                         </li>
                                       <li>
                                             <a href='#'>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>
                                       <li>
                                             <a href=''>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>

                                   </ul>
                               </div>
                           </div>

And this is the code of Mobile navigation menu, this menu is only shown when you are using mobile to browse.

                            <select>
                                 <option selected='selected' value=''>Go to...</option>
                               <option value=''>Home</option>
                               <option value=''>Home</option>
                           </select>

4, For the Disqus comment system, find this code:

<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexenews'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

Please change the text "SimplexEnews" which marked in bold in code above to your Disqus shortname. For more information about Disqus, you can find out in Disqus official website.

5, Because sidebar in this template only appear in Single page, not in home page, it's also not displayed in Blogger Dashboard->Layout for you to add widget.
So the only solution here is to add the code manually to sidebar. You can find this code:

<b:widget id='HTML5' locked='false' title='widget code' type='HTML'>
<b:includable id='main'>
                <aside class='ct_flickr_widget clearfix' id='ct_flickr_widget-2'>
                                 
                    ..............
                            </aside>

                            
                    </b:includable>
</b:widget>

And start adding your own code (ad code, Facebook likebox.... ) after the line Start your code here.
Remember to encode your script before adding to template, by going to this site: http://htmlentities.net/
Paste your code in Input box and click Encode, then copy back the result in Output box to template file.

6, Save template and upload to Blogger.

7, Open Blogger Dashboard -> Layout

8, To add logo

Click on Logo widget

Add image url to widget content as picture bellow

9, To add Top Banner widget and Banner widget, Click on edit link

Paste the ad code into widget content

How to use this template

1, This template is designed to display 5 kind of blog post : article, image, video, tip, music. Each of them has a background color and icon.
So everytime posting, beside adding your own labels, you have to add one of 5 labels bellow (in lower case) to make the post display with corespondent style.

post
image
video
music
tip

For example, you have a post name "How to do ...." with your own label "life hack". This post is not displayed in homepage, you have to add one of 5 labels above to make it appear. Because this is a post "how to", so in addition to label "life hack", I add one more label "tip".
It's the same when you want to publish a post on photography, you can add your own labels, and add one more label "image".

2, Another notice that this template has no readmore function. Please use button Insert Jump break in Post editor window to make post summary in homepage.