28 April, 2017

Java Programming Basics to Brilliance Part 2

This post is a progression to previous post here.

Java Syntax
Every language in this world has a syntax so does a programming language like Java. Now take a look at the following programming which simply prints the all famous "hello world."

public class play {
public static void main(String[] args){
System.out.println("hello world.");

In this program what we do is create a class by the name of play. In this class we create a function or method by the name of main in which we print out a line "hello world.".
Any program in java will always have a class and a main method. When a java program is executed, the main method is called and all of the statements in this method are executed in progression.
Writing the above lines of code is a piece of cake in Eclipse. To further define what is happening in above program in details, lets break it.

public class play {
States the beginning of the class. We stated class as public, which means it's members and methods will be accessible publicly. Other than public we have private, protected and default when you don't define anything. In details below.

public static void main(String[] args){
main method is always public because JVM has to make a call to this method. 
static methods carry a functionality that shall remain same throughout the program.
void just states that the method need not return anything.
String[] args defines an array of name args which will be holding everything we input to this program in this array. We need not necessarily use this array. 

Access modifiers in slight details.
A private class can have public methods. Why?
Because when we make a class private it is usually to protect it's instance variables from outside sources and public methods are the way to initialize these private instance variables.
If this confuses you, lets learn it with an extensive example.

public class MyDog {

private String tail;

public String waggingTail(String activity){
tail = activity;
return tail;



public class MyDogActivity {

public static void main(String[] args) {
MyDog tommy = new MyDog();

String tommysTail = tommy.waggingTail("Look at it move!!!");



Write the above code line by and use Ctrl+space for suggestions in Eclipse. The two classes MyDog and MyDogActivity are meant to be in different class file. Run the program by using keyboard shortcut Ctrl+F11 for faster access.

What happens in the above program is, we have a class called MyDog with a private variable of String type tail and a public method waggingTail which sets its value to activity.
Furthermore we have a class MyDogActivity which creates an object of MyDog by the name of tommy. Now we make a String type variable tommysTail which has to perform a its task defined in MyDog class. If this confuses you the line below might help.

MyDog is a class which defines the structure of any dog out in the world. Like any dog can wag his tail we made a function waggingTail also no dog likes their tail to be touched so we made the tail private.

Now we have a dog by the name of tommy. Like any other dog tommy has a tail called tommysTail and can perform whatever function any dog can perform like waggingTail.

I hope this clears the picture about MyDog and tommy being one of the Dog. If you still find it confusing read it over and make your own classes and objects to clear it up and feed it in your head. This is by far the most important aspect in Java and everything we do in Java consists of classes and objects one way or the other.

Moving on, lets make a simple program of adding two digits we take as input from the user.

public class Addition {

public static void main(String[] args) {

Scanner inputReceiver = new Scanner(System.in);

System.out.println("Enter first number: ");

int firstNumber = inputReceiver.nextInt();

System.out.println("Enter second number: ");

int secondNumber = inputReceiver.nextInt();

int sum = firstNumber + secondNumber;

System.out.println("The sum is: "+sum);



In the above program we make an object called inputReceiver of the class Scanner. Now what is Scanner?

Scanner like our
MyDog class in previous example is a class which has certain attributes and functions.
Like our
MyDog had a tail attribute and a function of wagging the tail, Scanner is a class predefined in Java which carries a function to take the input and forward it as required.If you want to see this class just press hold Ctrl and click on Scanner in Eclipse.
In the example above, we make an object of class Scanner by the name of inputReceiver using which we take the input
firstNumber and secondNumber. Rest of the code should be self explanatory as its simple addition and printing. This is pretty much how everything is done in Java, just thing become more complicated depending upon the complexity of a program.
Like most of the object oriented programming languages out there, Java also has methods for looping and condition checking like

for loop,
if else,
do while,

There are various ways of storing data in Java at run time like
Variables which have types of int, String, char, byte, boolean,
then arrays of same types. Which are still simple and easy to understand and deal with.
Things get complicated in Java with the introduction of Collections, reason being collection consists of objects rather than simple strings and integer values and it's one of the feature that makes Java powerful.

Next up will be Collection, conditional operators and loops.

Go to next. http://www.shiftescape.com/2017/06/java-programming-basics-to-brilliance.html

24 April, 2017

Java Programming Basics to Brilliance Part 1

Let's get our hands dirty with Java Application Development. By the end of this course, you will be able to understand and code in Java programming language. We will also be making some real-life application which I haven't yet decided.
Now, I know there are just too many sites out there which can teach you Java and probably far better than what I am writing here. So what am I gonna do here which is different from them? Nothing.
I am only going to repeat what you have probably already read. But I will keep it short and try to make it as easy as possible.
This is part one, and I haven't planned as for how many parts this series will have.
This tutorial is meant for complete beginners to the Programming world. This will get you an idea of how programming(not just Java) works in the shortest possible way.

Useful links: 
This is my way of tracking my progress. 

First of, 
What is Java?
  1. Java is an OOP based programming language. OOP stands for Object-Oriented Programming. Defined further ahead.
  2. You can make cross-platform(including mobile) applications using Java. 
  3. You can make web applications using Java.
How do Java works?
  1. Java code is written by a developer.
  2.  The compiler reads the complete code and generates a .class file which contains the bytecode.
    This .class file is like the instructions for JVM defined next.
  3. JVM, stand for Java Virtual Machine takes the .class file and does whatever it says.
The step 2-3 results in Java being platform independent. JVM is a system specific software and every different kind of system will have a different kind of JVM. 

Things you will need.
I will simplify this for you in one step, just install Eclipse IDE. Download it from here. It will help you setup rest.

To mention is any way you will need to download JDK(Java Development Kit) from Oracle website here. Set the environment variables to run Java files through command prompt or link JDK folder in Eclipse. That's it. 

What is OOP?
Given that we are learning an OOP based programming language it's natural to ask what actually is OOP? 
Object Oriented Programming is a concept of programming in which we deal and do anything and everything by creating objects.
Objects are like real-world entities in the program. Like any object in real life will have certain characteristics, objects in a program is expected to carry some attributes. Like any object in real life can do something, objects in a program can also do something. For example, an Object like myDog has a dogTail as an attribute and myDog can wag his dogTail.

OOP can always be achieved with the 4 features, namely 
Abstraction: which is hiding of details from the viewer. Like f I want to feed myDog I don't need to know how his digestive system works I just have to offer myDog his food.
Encapsulation: which is binding up of certain feature and features to limit their scope of functionality. We use access modifiers like Public, Private, Protected and Default to achieve this. For example, if myDog is Public anyone can pet him, but if myDog is private and not allowed to move out of the home, only the people inside the home can pet him.
Inheritance: which is carrying the similar attributes like that of their parent. This reduces the amount of code written and makes it easier to understand. For example, if myDog has a myPuppy he will carry similar attributes like Tail, Eyes, Ears.
Polymorphism: which is different behaviour performed by the object in different situations. For example, myDog will walk slowly when I take him for a walk but run away when I let him. So the feature is same which is move() but mydog can either walk or run depending on the situation.

Java Syntax
Every language in this world has a syntax so does a programming language like Java.

Continued further here.

23 April, 2017

Are Backlinks and keywords really dead? An insight on SEO hack

I usually don't like the world of SEO and marketing, reason being anyone with enough money to throw can make absurd things popular. Have you seen useless Facebook pages with little to no updates but an immense audience, websites with great Alexa rank and traffic yet no useful content, celebrity pages with ridiculous likes and followers. It all happens in the backyard of the Internet. It's all like a surface of Deep Web. Okay I went too far. But I hope you get the idea.

So I am here to disclose something which people think is long dead. Backlinks.
If you are into SEO and or have been into it before you must be aware of how Google penalizes pages with weird backlink activity and they even hide the keywords details now.
They restricted ways to hack into search results. And I think it was all for good and still is. It significantly improves the search results and you are less likely to wander among useless websites. Simply the search results are more dependent on Domain Authority, value and it's previous content.
But recently I happen to realize backlinks and keywords aren't really dead.
You still have chance to trick your way into top Google results.
Apparent Question how?

Let me just go through an example which I have witnessed with some website I won't disclose. Let's call it Example.com

Steps we followed:

  1. Site being completely new.
    No previous registration of the domain either.
  2. Selecting a niche.
    This took longer time than one would normally expect. We went through numerous topics and it was really difficult to chose one. Then how did we do it? We did and extensive research on random topics using keywords tools like aherf or you can use Adwords Keywords Planner.
  3.  Blogging.
    I think it's pretty obvious step. Blogging is the easiest possible way into the Google Search results. But we did not just start writing anything. We did a preper keyword research to find keywords with low competition yet high search volumes. This can be done for free using Google Adwords
  4. Creating Backlinks.
    This is one part you have to be careful with. You do not go berserk buying random backlinks to your blog or website. You need just a minor amount yet quality link backs. Hence the phrase Quality over Quantity. How? What ever you are targeting through you website just go through similar websites and blogs and leave a genuine comment and hope they have do follow link back. Don't waste time checking whether some site has do follow link. The objective is to just leave in the comments. Whether it's do follow or not, you will still benefit a little from it.

People still do it, and they will continue to do it. There is no possible way to stop exploitation of this. After all you cannot expect all the rain without a little mud.

12 April, 2017

SQL in a nutshell | Learn SQL

SQL stands for Structured Query Language. SQL is used to access and modify the data in a database.
All dynamic web applications and websites make use of a database and only way to access these database is through SQL.
Now practically what happens is that a programming language passes an SQL command which returns the result which is further processed for viewing.

Demo of what we are making here Post it! Chatroom

Let's cut the theory and move to practical.

Objective: We will be making a small PHP website(chat room) using the SQL commands to feed and fetch the details. I will leave the lessons of PHP for some other day, in fact I'm myself in the learning phase as well.

Part 1. Database and SQL installation.

If you wish to run a database on your local machine follow this link.
I recommend using an online service for practicing. 000webhost is free and provides you everything.
For this tutorial I will be using 000webhost so that the project I end up with will be public for demo.

Setting up a Database and SQL always involves

  1. Creating a database. 
  2. Defining a user and granting him privileges to modify the database we created in step 1.

Part 2: Basic SQL commands.

These are some basic SQL commands that will come in handy, always.

Creating a database: SQL>create database myDB
You don't need this command when using Oracle. We simply create tables in Oracle and use them.

Creating a table: SQL>create table myTable(column1 number(8), column2 varchar2(20));
The above command results in a table of name myTable with two columns. First column will accept values only of type number that too of size upto 8 and column2 will accept value of type varchar which can take any number or character or combination of both.

In case you need to modify the table you just made, following command will be helpful 

alter table tableName add columnName datatype;

alter table tableName drop column columnName;

alter table tableName modify columnName datatype;

alter table tableName rename column oldName to newName;

rename yourtable to mytable;

Inserting data into the table.

insert into tableName values(87, 'hello');

In case you want to change a value you have previously entered.
update mytable set uname='abhay' where uid=123;

Use where clause to narrow your search to specific data.

Like wise there are just too many commands and that would just complicate things for a beginner.

Part 3: PHP website using SQL

Let's get our hands dirty by making an actual application that uses database and SQL.
Objective here is to make a small website that will let anyone post a message to it and it would be visible to everyone.

To explain it like you're 5 year old.

I will make a table which will have a serial number like 1,2,3 and so on and a data associated with each number.

  1. I just made this up.
  2. Some text here.
  3. Well yea again.

Firstly I will make a database and grant privileges to a user to modify this database. Luckily 000webhost provides a very simple way to do this.

To make this type of table I will run the command

SQL>CREATE TABLE `posts` ( `serial` INT NOT NULL , `content` LONGTEXT NOT NULL );

But unfortunately it wasn't as easy as it may look. I used phpMyAdmin to generate my SQL command which was

CREATE TABLE `id1132423_post`.`post` ( `serial` INT NOT NULL , `content` LONGTEXT NOT NULL ) ENGINE = InnoDB;

Now we will test the working of our database by inserting some dummy content.
For this I will use the Insert tab in phpMyAdmin and preview the SQL command and note it.

Now the SQL was generated as

SQL>INSERT INTO `post` (`serial`, `content`) VALUES ('1', 'Hello World!\r\nThis is blog.');

Now I will be executing the likes of above SQL command through my PHP page.

Now let's make a PHP file and make a connection to the database.

For this I will need following details,

  1. database host name, usually localhost. .
  2. database name, whatever you chose earlier, in case of 000webhost it can be found in settings.
  3. database user,
  4. database password for that user.

then make a file by the name index.php
 and put following code in it

<title>Post it!</title>
<body style="background-color:#efefef; font-family:monospace;">
<h1 style="text-align:center;">Post it!</h1>
 $db = mysqli_connect('localhost','databaseUser','password','databaseName')
 or die('Error connecting to MySQL server.');
$query  = 'SELECT * FROM post ORDER BY timestamp DESC LIMIT 20';

mysqli_query($db, $query) or die('Error querying database.');

<form action="post.php" method="post" align="center">
            <input type="text" name="id" placeholder="enter a number(optional)" />
            <input type="text" name="content" placeholder="enter a text"/>
            <input type="submit" value="submit" onclick="test()" />
$result = mysqli_query($db, $query);

while($row = mysqli_fetch_array($result))
echo "<table align="."center".">";
    echo "<tr>";
    echo "<td>$row[0]</td>";
    echo "<td>$row[1]</td><br/>";
    echo "</tr>\n";
echo "</table>";

This file makes a call to post.php

Make another file and save it with following content as post.php

$sContent = $_POST['content'];
$db = mysqli_connect('localhost','databaseUser','password','databaseName')
 or die('Error connecting to MySQL server.');
$query = "INSERT INTO `post` (`id`, `content`, `timestamp`) VALUES (NULL, '".$sContent."', CURRENT_TIMESTAMP)";
mysqli_query($db, $query) or die('Error querying database.');
header('Location: ' . $_SERVER['HTTP_REFERER']);

I made post.s2pd.com with just these code.
It is kind of chat room. I will be covering the break down of PHP code in another post.
Go experiment.

Update: I have made this project available on Github here.

10 April, 2017

HTML and CSS in a nutshell | Learn HTML and CSS

If you are new to the programming world HTML is something you should start from. HTML is not really a programming language though but getting to know it is a must have for anyone who wishes to make web applications.

This (not so)little guide/tutorial will cover most of the HTML and CSS and a little bit of HTML5 which would be more than enough to get you started with web development.

Lets start with complete basics.

HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it's a mark-up language meant for defining and formatting web pages.
HTML can be combined with many different programming languages to achieve anything, literally.

CSS stands for Cascading Style Sheet.
CSS is used for defining the style of a webpage.

Let's skip the theory and move to practical.


Part I: Making a Simple HTML Page.

Part II: Learning various HTML tags.

Part III: Basic CSS.

Part I: Making a simple HTML page.

<html><head></head><body>Hello World!</body></html>

Copy the code above in a text file and save the text file as helloWorld.html
Make sure you have file extensions visible from the settings. If not, go to Folder Options > Views and uncheck "Hide file extensions."

Lets break and study different parts of this HTML file.

<html> : Marks the beginning of an HTML page.

<head> : Marks the beginning of an HEAD part of the page. Think of it like an HEADER portion of your webpage. Although you can define or write anything in it but the convention is to only include the HEADER's information in this. HEADER's information could be the TITLE of the webpage, Header image, heading and or menu of the page.

<body> : Marks the beginning of the BODY section of a webpage. This is where we do everything a web page contains. Paragraphs of content, images, forms and everything else you can think of. 

Hello World! : This is the content of a web page. Anything that goes inside the BODY tag is considered the content of the page. Now this content can further be formatted according to the need with various HTML tags which will be discussed below.

</body></head></html> : Marks the ending of respective tag. 

Part II: Learning various HTML tags.

<title>Holy Shit I made a WebPage</title>
<body style="background-color:#CCC; font-family:monospace;">
<i><h1 style="text-align:center;">Remember the name.</h1></i>
<h2 style="text-align:center;">This is so boring.</h2>
<h3 style="text-align:center;">No not really.</h3>
<h4 style="text-align:center;">How and why?</h4>
<h5 style="text-align:center;">What has this world come to.</h5>
<h6 style="text-align:center;">Yea you can't even see me now.</h6>
<p style="text-align:center;"><b>Today is fourth of April,</b> <em>two thousand seventeen</em>. This is a webpage made on <mark>Thinkpad</mark> by <strike>IBM</strike> Lenovo. <u>Did you know!</u> Thinkpad are the only laptop range approved to be used in ISS the International Space Station.</p>
</p><bdo dir="rtl">This is another line to text from right to left.</bdo></p>
<blockquote>There are seven billion people living on this Earth! Can you tell me what every single life is worth?</blockquote>
<h1 style="text-align:center; font-size:500%;">H<sub>2</sub>SO<sub>4</sub></h1>
<h1 style="text-align:center; font-size:500%;">K<sub>2</sub>Cr<sub>2</sub>O<sub>7</sub></h1>
<h1 style="text-align:center; font-size:500%;">(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</h1>

Take the code above into another HTML file and save it as you like and remember to add .html as it's extension.

Lets break and study different parts in BODY part of this HTML file.

<body style="background-color:#CCC; font-family:monospace;"> In this body tag we have define a style component which is used for defining the CSS. In this particular case we are using In-line CSS(will be discussed later) which sets the background color to #CCC and font to monospace#CCC is the HTML color notation you can use normal color names like BLUE, RED etc. as well. monospace is the font family and you can use any compatible font instead like Arial, Impact etc.

Headings Tag: 

<i><h1 style="text-align:center;">Remember the name.</h1></i> : In this part we made use of In-line CSS again to align the text to center of the page. <h1> tag states that the text between the tag is a Heading. Like wise we have H2, H3, H4, H5 and H6 sub-headings' tag.

By using <i> tag we make the heading italic
Similarly we have <b> tag to make text bold

<p style="text-align:center;"><b>Today is fourth of April,</b> 
<em>two thousand seventeen</em>. This is a webpage made on 
<mark>Thinkpad</mark> by 
<strike>IBM</strike> Lenovo. 
<u>Did you know!</u> Thinkpad are the only laptop range approved to be used in ISS the International Space Station.</p><p>
<bdo dir="rtl">This is another line to text from right to left.</bdo></p>
<blockquote>There are seven billion people living on this Earth! Can you tell me what every single life is worth?</blockquote> : In this part we wrote a paragraph. I'm pretty sure you can point out the bold part in this. 
Then we have <em> tag which stands for emphasize which emphasizes the text in between a little. I have never used it before, and I don't think you will either.
<mark> marks the text in between. Just like we use markers on books and papers. You cannot change the yellow color or mark tag.
<strike> strikes the text. Needs no further explanation.
<u> underlines the text in between.
<blockquote> stands for quoting a block of content like a paragraph. 
<bdo dir="rtl"> stands for Bidirectional Override. It is used to set direction of text. You can replace rtl with ltr which is actually the default. 

<h1 style="text-align:center; font-size:500%;">H<sub>2</sub>SO<sub>4</sub></h1>
<h1 style="text-align:center; font-size:500%;">K<sub>2</sub>Cr<sub>2</sub>O<sub>7</sub></h1>
<h1 style="text-align:center; font-size:500%;">(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</h1> 
<marquee><h1>Holy Shit!</h1></marquee> : In this part we have,

<sup> tag which stands for super script makes the text in between appear as super script.

<sub> tag which stands for Sub Script which makes the text in between appear as sub script.

<marquee> runs the text in between from right to left.

That's it.
Now the CSS.

Part III: Links and Images.

<title>Mind Blown</title>
<p>Image with height and width</p>
<a href="http://shiftescape.com">Click here to open my blog.</a><br/>
<img src="http://i.imgur.com/cqMnINb.gif" alt="Mind Blown" width="640" height="320"/>

Create another web page with the code above.
<a href="url-here"> tag is used to create anchor text links.
<br/> tag is used to break the line. You can use either from <br>, </br>, <br/> they all do the same work.
<img src="image-url-here" width="640" height="320"/> tag is used for embedding an image. The alt part stands for alternate text which is still optional and appears when the desired image is unavailable. width and height are speaking for themselves.

Part IV: Dictionary and Lists.


<dt>Random Title</dt>
<dd>A random title is something that we make up to fill the title part.</dd>
<dt>Title Again</dt>
<dd>This is the description, yep, pretty small description.</dd>

<ol type="i">List of Female DOTA2 Characters


Dictionary and list are just another way of representing data in form of lists.
Dictionary has <dt> as data title and <dd> as data definition.
When it comes to list, we have an ordered list
<ol> which numbers the list content and unordered list <ul>.

Part V: Forms and Tables.

<title>Registration Form</title>
<body style="background-color:#CCC; font-family:monospace;">
<h1 style="text-align:center;">Register Now!</h1>
<form name="Registration Form" method="POST" action="demo_form.jsp" align="center">
<table align="center">
<td>Select Username: </td><td><input type="text"/></td></tr>
<tr><td>Set Password: </td><td><input type="password"/></td></tr>
<tr><td>Gender: </td><td><select><option value="Male">Male</option><option value="Female">Female</option></select></td></tr>
<tr><td>Address: </td><td><textarea rows="5" cols="21"></textarea></td></tr>
<tr><td>State: </td><td><select><option value="">------------Select State------------</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<tr><td>Select Qualification: </td><td><input type="checkbox" name="B.Tech" value="B.Tech">B.Tech 
<input type="checkbox" name="M.Tech" value="M.Tech">M.Tech 
<input type="checkbox" name="MBA" value="MBA">M.B.A 
<input type="checkbox" name="Phd" value="Phd">Ph.D </td></tr>
<input type="submit" value="submit"> 
<input type="reset" value="clear"><br/><br/>

Lets break and study different part of this HTML file.

The code above is an example of a Sign Up form using HTML. 
The purpose of an HTML form is usually to take user data and pass it to a file that can save it or process it accordingly. In the example above we have 

<form name="Registration Form" method="POST" action="demo_form.jsp">

This form uses POST method and sends the data it collects to demo_form.jsp

To take an input from the user we use <input type="text"/>

To create a check box <input type="checkbox" name="Some name" value="Value">Some name

Likewise we have different input types for forms which you can find through google and on w3School website.

In the example above we are using a table to format and align the content of the form. 
The table has the following structure, always

<tr><th>Column Heading 1 |</th> <th>  Column Heading 2</th></tr>
<tr><td>Row 1, Column 1 |</td> <td>Row 1, Column 2 </td></tr>
<tr><td>Row 2, Column 1 |</td> <td>Row 2, Column 2 </td></tr>

The table below is made using the exact code above

               Column Heading 1  |    Column Heading 2
                   Row 1, Column 1  |    Row 1, Column 2
                   Row 2, Column 1  |    Row 2, Column 2

Part VI: Basic CSS.

This will cover only the basic aspects of CSS. No animation, no transition. 
By saying that I wanted to aware you of the power of CSS. 
CSS is a powerful means of designing and can be used for making interactive and beautiful web pages.

There are three ways of using a CSS with HTML. All three will result in similar outcomes. Difference comes in handling and memory consumption.
  1. In-line CSS
  2. Internal CSS
  3. External CSS

1. In-line CSS
When the style for an HTML tag is defined within the tag itself, it's called in-line CSS.
Eg. <h1 style="text-align:center;">Remember the name.</h1>

2. Internal CSS
When the style for an HTML tag and the page itself is defined in the HEAD section of the page using the style tag, it's called internal CSS.
<style type = "text/css" media ="all">
body {
background-color: #CCC;
h1 {
color: #EEE;
margin-left: 40px;

3. External CSS
When the style for an HTML page is defined using an external CSS file.
Eg. <head>
<link rel="stylesheet" type="text/css" href="styleSheet.css" media="all"/>

The code above in the HEAD section makes a link with the file stylesheet.css placed in the same folder as the HTML file.

The content of styleSheet.css could be following.

color: red;
color: blue;

////////////////end styleSheet///////////////

You can define as many HTML components in the external CSS. 
If two HTML components are to carry the same properties, you can define them as

h1, h2, h3{
color: red;

To collectively apply some style to a part of html file, enclose the part in a DIV tag.

<div id = "myID"> <p><h1>... </p></div>
<div class = "myClass"> <p.....</p></div>

In appearance there is no difference in id and class made using CSS.

Classes in CSS are suffixed with a dot(.) operator and IDs can be suffixed with an hash(#) which is still optional.
background-color: red;

background-color: blue;

That's it.

Go explore, experiment.

09 April, 2017

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-radius50%;
  2. width150px;
  3. height150px;
  4. marginauto;
  5. displayblock;
  6. padding5px;
  7. text-aligncenter;
.profileBadge li {
  1. text-transformuppercase;
  2. list-stylenone;
  3. line-heigth1.4px;
  4. text-aligncenter;
  5. padding5px;
.profileBadge {
  1. border1px solid #ddd;
  2. border-radius4px;
  3. padding5px;
  4. background-repeatno-repeat;
  5. background-imageurl(http://yourCoverImageUrl.com/image.jpg);
  6. background-size100%;
  7. background-position0% -20%;