Shift Escape

I have decided to make some changes to this blog and the pages that run around here. For that reason, I'm moving the content of the Theme Download Page to a blog post. I have made significant changes to the CODA theme which are not yet reflected in the version available for download below. I'll soon make it available. Not too soon though. Until then feel free use, modify or distribute the blogger template below. Follow the instructions for easy usage,  click here .  CODA Basic 2.1  is free to use the Blogger template. You are free to remove the footer link as well. Will be considered a generosity if you let the footer link remain. Download Change Log: -Added Footer. -Font changes. - Removed header navbar background. - Added Background Color. - Added Card style for posts. - Sidebar restructured. - Non-floating top navigation bar. Previous Versions: CODA Basic 2.1                 ...

Previously we had made a multi-profile badge which you can find here . Now comes the version two of this badge. Which is nothing but the same badge with a cover background. Honestly it's just a rip off of LinkedIn profile badges. But since they are limited to LinkedIn, you can use this profile badge to meet your need. Output of this post will be a profile badge that looks something like this, Since this is basically a modified version of the previous profile badge we are going to reuse the same code. Step 1. Define the CSS for circular image, then a CSS for list of links, and then the badge border and a background cover which is nothing but a background image positioned properly. .profileBadge img  { border-radius :  50% ; width :  150px ; height :  150px ; margin :  auto ; display :  block ; padding :  5px ; text-align :  center ; } .profileBadge li  { text-transform ...

I used this for my sidebar. .sidebar li {     text-transform: uppercase; list-style: none; line-heigth: 1.4px; } .sidebar h2 {     font-size: 14px;     font-weight: 400;     text-transform: uppercase;     margin-left: 30px;     margin-top: 30px; } .sidebar .widget {     font-size: 12px; } Of course you are free to play around with whatever you like. Also I have added CSS to make a read more button at the home page as follows. .readmore a {     padding: 8px 15px;     text-transform: uppercase;     background: #333;     color: #fff; } .readmore a:hover { color: #FFFFFF; text-decoration: none; } Then I defined a little CSS as .post-footer{     padding: 18px 22px 10px 22px;     background-color: #f5f4f4; } .primary h3 {     font-size: 2em; } Now the post-footer part is the one where "Posted by eff on 12/12/16 ..etc" is written. This is done to disting...

Uptill now we have a responsive design which has little to no design CSS added to it. This time we are going to add a little bit to the design. We are going to make post summary and post images to appear on the homepage as or like featured content. In short we are going to make post thumbnails, and summary for our home page. To do this I took help from this  post. To do this we use a Javascript that uses the first image in a post and creates an excerpt which then is shown. To do this search for <data:post.body/> There are only 2 occurrences of this in our theme. Replace the 2nd occurrence with  <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;...

Uptil the previous post we had completed a theme wtih a sidebar and a footer. Now if you might not have noticed that our theme's images and sidebar breaks in the smaller screens. So here we are going to make our theme responsive. To do so we will use  @media (min-width: 1200px) .container {     width: 1040px; } This is used for the browser to distinguish which CSS is to be used. We will simply add  @media (min-width: 1200px) to our container, body, main, sidebar and if you are using my version primary and secondary tags instead of main and sidebar respectively.   I used this @media all and (min-width: 1020px) and (max-width: 4080px){ .container { width: 1020px; margin: auto; } .primary{ width: 70%; float: left; } .secondary{ float: left; width:30%; } }/* media all and (min-width: 800px) and (max-width: 1020px) */ @media all and (min-width: 800px) and (max-width: 1020px){ .container { width: 800px; margin: auto; } .primary{ width: 70%; float: left; } .secondary{ ...

Now that we have a template that shows posts properly, we need to setup the sidebar. Also we are making a responsive design here we will be ensuring that page doesn't breaks on different browsers and devices. In previous versions of the Blank template you must have noticed that we added a footer and sidebar module to our theme. And you would have probably noticed that you can add the widgets to this area. Now all we have to do is to take this module and show it to the right of our theme so that it appears like a sidebar. Now if you look back to our code, the module was  <b:section class='sidebar' id='sidebar' showaddelement='yes'> I removed other parts since this is our concerns with. This part has the class 'sidebar' being used. So we are going to define this sidebar in the CSS section.  To do so add this. #sidebar {     float: left;     width: 30%; } Now our sidebar is ready. But this doesn't really do anything and our sidebar doesn'...

So this is the round up of this session for now. I will get back to this after some hours and a game or two of DOTA. In previous to previos post the theme we made had no title defined in its head section. Download this version for the HEAD section fix and images width defined. Download link:  https://drive.google.com/open?id=0B8Qb2-H0P8xIclhuOFZkOFhWRlE

UPDATE: Please read this . There is a much better and updated version of this blank template. If you are not much of a reader, use this link for download . Basic template for Blogger template development. This is a basic and plain blogger template with no design or customization added. You can use this as a base for developing your own blogger template. With main post, sidebar and footer widget area and fixed HEAD section download link:  https://drive.google.com/open?id=0B8Qb2-H0P8xIclhuOFZkOFhWRlE With main post area only download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIN3NFWFhNQzNTY0k Blank template with footer and sidebar widget area download link:  https://drive.google.com/open?id=0B8Qb2-H0P8xIRnpmUllpRXViTFU I am not making any demo page for this theme since it is complete plain. It should look something like this photo when applied. With your content of course.