I wanted to completely customize my blog as I knew exactly how I wanted it to look and flow. Below is the code that you can help you do that.
1. After logging into your Blogger account, you should see this:
2. Click on the drop-down menu next to the icon with the pages.
3. Select Template. You will then see this:
4. Click on Edit HTML. Highlight everything you see in the editable window:
5. And then copy and paste this:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
max-width: 100%;
height: auto;
}
iframe,
embed,
object {
max-width: 100%;
}
.container {
width: 70%;
padding: 5%;
margin:0px auto;
background:#fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.vendor {
padding: 2%;
background: #d1eed1;
margin-bottom: 2em;
}
.unsupported {
background: #fddfde;
}
]]></b:skin>
</head>
<body>
<div style='border: 1px solid lightblue; padding: 10px;'>
<h3>About Frinton</h3>
<div class='widget-content'>
<a href='YOUR GOOGLE+ PROFILE LINK'><img alt='My Photo' class='profile-img' height='90' src='YOUR GOOGLE+ IMAGE' width='80'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='YOUR GOOGLE+ PROFILE LINK' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);'>
YOUR NAME</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/103188197674714680428'/>
</dt>
</dl>
<a class='profile-link' href='YOUR GOOGLE+ PROFILE LINK' rel='author'>View my complete profile</a>
<br/>
<br/>
<div class='fb-follow' data-href='https://www.facebook.com/YOUR NAME' data-show-faces='true' data-width='550'/>
<div class='clear'/></div></div>
<br/>
<br/>
<!--Start Please keep the Credits intact-->
<div style='margin-top:0px; '>
<center>
<p class='author'>©Treasurette Girl</p></center></div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<!-- End Please keep the Credits intact-->
</body>
</html>
6. Put your custom css above </head> and your html coding below <body>.
