Custom Profile Badge 2 inspired by Linked In

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 {

1. border-radius: 50%;
2. width: 150px;
3. height: 150px;
4. margin: auto;
5. display: block;
6. padding: 5px;
7. text-align: center;

}

.profileBadge li {

1. text-transform: uppercase;
2. list-style: none;
3. line-heigth: 1.4px;
4. text-align: center;
5. padding: 5px;

}

.profileBadge {

1. border: 1px solid #ddd;
2. border-radius: 4px;
3. padding: 5px;
4. background-repeat: no-repeat;
5. background-image: url(http://yourCoverImageUrl.com/image.jpg);
6. background-size: 100%;
7. background-position: 0% -20%;

}

Step 2. This badge uses font awesome, include following link to font awesome css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

If you are not sure how to use font awesome further, go here.

Step 3. Go to page layout and add a gadget of HTML/Javascript. If you're on WordPress you need to create a Text Widget and add the following.

<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>

With a little modification to the code above you can also make it look like this,

What I did was just included the icon and link in the same link row. 

That's it.

And in case you are wondering what is that image I am using as cover. It's Blink from X-men Days of Future Past fighting the Sentinels.

I'm using a smaller version of this image, just to reduce the load on my visitors. Let me know your thoughts.

CODA Basic Instructions

CODA Basic is Adsense ready responsive blogger template.

Here are some of the instructions you might need when using CODA Basic.

1. Blog Header.
The theme uses a blog header widget which you need to define. You can use text header but a logo based header would look better.

2. Blog Footer.
Footer is hard coded in the theme. Go to theme editor and at the bottom of the file you will find
<div class='foobar'> inside which there is a table and its content as an linked image and text.
You can either edit these content or remove the foobar element all together. 

3. Removing/editing header links.

Go to edit template, click anywhere in the editor and press CTRL + F and enter "header" without quotes.
Just below the header you will find the desired links you wan to edit as shown in the picture.

4. Removing/replacing Ads.

There are 2 ad units integrated in the template for easy usage.

First is the bill board of size 900x280 and other is the links ad unit between the post.
To remove or edit the billboard ad unit go to template editor and search for "adsenseBillboard" and remove the part between container and primary division.
To remove the links ad search for "adsenseLinks" and remove the part as shown in the image below.


In case you want to add your own ad units, you have to put it in the predefined division "adsenseBillboard" and "adsenseLinks" then encode the ad unit.
Or you can use the following code and replace your converted ad code for blogger.

     &lt;div class=&#39;adsenseBillboard&#39;&gt;

     ///////your converted adsense billboard code here //////

     &lt;/div&gt;

and for the links

     &lt;div class=&#39;adsenseLinks&#39;&gt;

     ///////your converted adsense links code here //////

     &lt;/div&gt;

Finishing up our First Blogger theme

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 distinguish it from the post content. And I just resized font in the title on home page.

With this I conclude my blank template. It will be available for free download and will be open source. You can create your own versions and let me know if you like.

I would feel proud to display them on here for downloads.

The complete blank template download is below.

Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIZklxOUlDdzFwYW8
You can subscribe to my blog ShiftEscape.com 

Making the homepage more attractive and simple

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;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

For this to work, we need to define following javascript code as well.

Go to the HEAD section of the template and past following code just before </HEAD>

<script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

That's all.

You can also download the theme I have made with all the changes below.

Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIR19aVFFxYzJ6WG8

Making the theme responsive

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{

float: left;

width:30%;

}

}/* media all and (min-width: 800px) and (max-width: 1020px) */

@media all and (min-width: 100px) and (max-width: 640px){

.container

{

width: 100%;

margin: auto;

}

.primary{

width: 100%;

float: left;

}

.secondary{

float: left;

width:100%;

}

}/* media all and (min-width: 100px) and (max-width: 640px) */

This covers 3 types of views which are ones with width 100 to 640px which will cover almost all phones and some tablets, and others are ones with 800px to 1020px wide display and 1020px and beyond for which I used 4080px.

Also I removed the padding of 20px I added to container in previous posts because it was causing problem with the page(scroll was appearing).

Download the responsive Blank template for Blogger from below.
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIR19aVFFxYzJ6WG8

Adding a sidebar to Blogger theme

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't look anything like a sidebar. This is because we have not defined any container to our theme and even if it floats left, it takes the left reference from the body section which again is still undefined. Now we will define an outer section to enclose the main and the side bar. 

#container
{
padding: 20px;
width: 1020px;
margin: auto;;

}

Padding so that the content appears fine and margin: auto to align the content in the center of the screen.
Now we need to define our main as well.
#main {
    float: left;
    width: 70%;

}

Now if you have added content to your footer, you theme would break. To fix that we need to define our footer as well.
#footer
{
width: 100%;
float: left;

}

Now this float:left is important. I might revisit this to align the footer contents to the center. But it still works for now.

Applying a font and changing font color

Previously we had made a blank blogger template which can show the images in the post properly in any device, we fixed the head section not showing the page title in the tab. Now we are going to change the font and font colors for our little theme.
For this we will add the font in body section in CSS.

body {

font-family: Roboto,sans-serif;

font-size: 14px;

line-height: 1.4;

}

Of course you can use any font as you like. Just make sure it is supported everywhere or there is no use of defining it.

Now we need to set a particular color for our links. So that it doesn't look low quality with visited and not-visited links in your blog.

For this we will add this:

a, a:hover {

color: #000000;

text-decoration: none;

}

a:focus, a:hover {

text-decoration: none;

}

again you are free to mess around with.

You can download the blank template from below.
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIRnpmUllpRXViTFU

Blank template Update One HEAD section fixed

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

Setting up a logo and images size

In previous post we created our demo template which had no CSS design defined. Also the images I used in the post were considerable big which I did on purpose. Now when the screen size is reduced the image size remains same. This way the image overflows the view area on device. Which is not acceptable when making responsive designs. So we are going to make the images in our blog fit the view area of visitors.
To do so we simply define the image size to be 100% by default.
That is add

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
}
   


to the CSS of out theme.

This will not only apply to the images in the post. 

Making the basic dummy template

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.