Below is the code you have to copy then paste in your blog, all the layout pictures were already uploaded to Blogger, if you want them for any reason, they are in
HERE.
For detailed installation instructions checkout
THIS POST.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
* Blogger Template Style
* Iceberg - Left Sidebar
* by BlogSpot Soft Themes
* url: http://soft-themes.blogspot.com/
*
* Modified from:
* Herbert
* by Jason Sutter
* Updated by Blogger Team
*/
/*
* Variable definitions
* ====================
<Variable name="mainBgColor" description="Page Background Color"
type="color" default="#ffffff" / value="#ffffff">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#000066" / value="#000066">
<Variable name="titleColor" description="Blog Title Color"
type="color" default="#ff0000"/ value="#ff0000">
<Variable name="descriptionColor" description="Blog Description Color"
type="color" default="#000000" / value="#000000">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#3D81EE" / value="#333333">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#0000cc" / value="#0000cc">
<Variable name="postFooterColor" description="Post Footer Color"
type="color" default="#003366" / value="#003366">
<Variable name="mainLinkColor" description="Link Color"
type="color" default="#3D81EE" / value="#3D81EE">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#66B5FF" / value="#66B5FF">
<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#3D81EE" / value="#0000cc">
<Variable name="sidebarLinkColor" description="Sidebar Link Color"
type="color" default="#3D81EE" / value="#000066">
<Variable name="sidebarVisitedLinkColor"
description="Sidebar Visited Link Color"
type="color" default="#66B5FF" / value="#000066">
<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 87% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal normal 87% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="titleFont" description="Blog Title Font"
type="font" default="normal bold 286% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 286% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="descriptionFont" description="Blog Description Font"
type="font" default="normal bold 99% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 99% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font" default="normal bold 144% Trebuchet, Trebuchet MS, Arial, sans-serif" value="normal bold 144% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="sidebarTitleFont" description="Sidebar Title Font"
type="font" default="normal bold 151% Trebuchet, Trebuchet MS, Arial, sans-serif" / value="normal bold 151% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/
body {
margin: 0;
padding: 0;
background: $mainBgColor;
color: $mainTextColor;
font: $bodyFont;
}
a {
color: $mainLinkColor;
text-decoration: none;
}
a:hover {
color: $mainLinkColor;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: $mainVisitedLinkColor;
}
a img {
border: 0;
}
@media all {
#main-wrapper {
padding:0;
float: right;
width: 100%;
margin:0 0 0 -270px;
background: #C3D9FF;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrapper-2 {
margin:0;
margin-left: 270px;
padding:0 10px 0 0;
background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRpatTCmGOSiGAvugi5ZwNKvPUC8Gvq2m1IgNLgkcyqbA78-pp0zktogiOOABZl7_H22Hx-83W54Cl98GfBq6WtrqokirUIzMQPHSd7QU2dolmeQNlaARIOPQrhiWPlhX3QSEw5uKkmd1C/s1600-r/body-back.jpg') bottom right no-repeat;
}
#sidebar-wrapper {
position: relative;
width: 260px;
float: left;
padding: 0 5px 0 5px;
text-align: left;
border-top: 18px solid #ffffff;
background: #C3D9FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ4vkDtloWsglpzLS29dVoAejHoVP36vkhA9Zn4vlgzGN_hPTNk6foldcUlgvPAkzFLXzgkEeLVaQW0VXt8wNdhP6JwTKrRKscG_GfKabHLgU6PridikAZUJ_sKPZ0x25nLZveimbEq-S/s1600-r/leftside-back.jpg') top left no-repeat;
}
#sidebar {
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}
#content-wrapper {
padding: 0;
margin: 0 0 0 10px;
min-width: 780px;
}
@media handheld {
div#main-wrapper {
float: none;
width: 90%;
}
#sidebar-wrapper {
padding: 20px 1em 0 1em;
text-align: left;
}
}
#header {
position: relative;
height: 190px;
padding: 0;
margin: 0 0 10px 0;
border-bottom: solid 5px $titleColor;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtGPwJxeoYKf7zICzhX7yfGrLJ8clV6a-dedFyq2VjAeuQR9v40ovM9J2bARWP64RXC38i7WZEdOZ8JnCPg-55VUJEgMEkRgYiGD7SgjLMMuCA81Fsqyu50shKy4sviCp8dG6r_vQg01vg/s1600/header.jpg') #C9D2E8 top left no-repeat;
color: $descriptionColor;
}
#footer {
padding: 0 0 50px 0;
margin: 0;
border-top: solid 5px $titleColor;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-75Kxi6SGIq3fNA9FmZQcdAWWQt0sEqCz_PBWI6xCQFlYSIxDqlFBeriRFZk5Ee-xAPty8Mcl0he-qNsBe_IJKdOaotqmmGwSb9OA31AK8yaWtvnUHbqMaTeafqaYK93X08K65pmzwTxI/s1600/footer.jpg') #2A4785 bottom left no-repeat;
color: $descriptionColor;
}
h1 a:link {
color: $titleColor;
}
h1 a:hover {
text-decoration: none;
color: $titleColor;
}
h1 a:visited {
color: $titleColor;
}
h1 {
padding: 18px 0px 0px 5%;
margin: 0;
color: $titleColor;
background: ;
font: $titleFont;
}
.description {
padding: 0px 0px 0px 5%;
margin: 0px;
color: $descriptionColor;
background: transparent;
font: $descriptionFont;
}
h3.post-title {
margin: 0;
padding: 2px 0px 2px 2%;
color: $postTitleColor;
background: #C3D9FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGOK0kRsJGOqcgPs-Ppg1ncfRzCTraYtCFh4nsrDwMY46JsHbQQGzcrMZuhnBDdgmmyvpLx9jmnSS4CJ8Feln6hluA6kEHBd19V8KMQ7mFxfVNfQX6GZF2YuI1QnrvJ0Whx5j2ZILMvbU/s1600/post-title-bg.jpg') top left repeat-y;
font: $postTitleFont;
}
h3.post-title a,
h3.post-title a:visited a:hover {
color: $postTitleColor;
text-decoration: none;
}
h3.post-title a:hover {
color: $postTitleColor;
letter-spacing: 5px;
text-decoration: none;
background: transparent;
}
h2.date-header {
margin: 0;
padding: 0px 0px 0px 1%;
color: $dateHeaderColor;
font-size: 90%;
text-align: left;
}
#sidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
padding: 0;
border: none;
}
#sidebar .widget {
margin: 5px 0 25px 0;
padding: 0;
}
#sidebar ul {
list-style-type: none;
font-size: 100%;
margin-top: 0;
}
#sidebar li {
margin: 0;
padding: 0;
list-style-type: none;
}
.Blog {
margin: 0;
}
.blog-posts, .feed-links {
margin-left: 10px;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.post {
margin: 0;
font-size: 100%;
}
.post-body {
margin: 0;
padding: 5px 6px 0 5px;
border: 5px solid #C3D9FF;
border-top-width: 0;
}
.post strong {
font-weight: bold;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:link,
#sidebar a:visited {
color: $sidebarLinkColor;
}
#sidebar a:active,
#sidebar a:hover {
color: $mainLinkColor;
background: transparent;
font-weight: normal;
}
pre,code,strike {
color: #666666;
}
.post-footer {
padding: 0 0 0 15px;
margin: 0;
color: $postFooterColor;
font-size: 80%;
}
#comments {
padding: 2px 0px 2px 5px;
font-size: 100%;
font-weight: bold;
font-family: $bodyFont;
}
.comment-author {
margin-top: 20px;
}
.comment-body {
margin-top: 10px;
font-size: 100%;
font-weight: normal;
color: black;
}
.comment-footer {
padding: 0;
margin-bottom: 20px;
color: $postFooterColor;
font-size: 90%;
font-weight: normal;
display: inline;
margin-right: 10px;
}
.deleted-comment {
font-style: italic;
color: gray;
}
.comment-link {
margin-left: .6em;
}
/* Profile
----------------------------------------------- */
.profile-textblock {
clear: both;
margin-left: 0;
}
.profile-img {
margin: 0 0 5px 5px;
float: right;
}
.BlogArchive #ArchiveList {
float: right;
}
.widget-content {
margin-top: 0.5em;
}
#sidebar .widget {
clear: both;
}
#blog-pager-newer-link {
float: left;
}
.blog-pager-older-link {
float: right;
}
.blog-pager {
text-align: center;
}
.clear {
clear: both;
}
/** Tweaks for layout editor mode */
body#layout #outer-wrapper {
margin-top: 0;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Another Theme (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<div id='main-wrapper-2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links List' type='LinkList'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
Iceberg theme in its 2nd version, another template designed for Soft Blogger Themes blog, the seventh counting all previous themes & the second that has a fluid width.
