Mengubah Template Thisaway Menjadi Tiga Kolom

Bahasan yang satu ini aku ambil dari template milik Blogger, yaitu Thisaway. Menurut polling di Internet, beberapa orang pengguna Blogger menggunakan template ini sebagai template mereka, dan mereka ingin mengubah template ini menjadi tiga kolom. Di internet tidak tersedia template Thisaway tiga kolom, untuk itu, dalam bahasan kali ini aku akan merubah sendiri menjadi tiga kolom.

PERHATIAN: Trik ini berlaku untuk template Thisaway dan Thisaway Blue.

Caranya yaitu. Pertama, untuk menjaga keselamatan blog kita nantinya, backup template terlebih dahulu dengan masuk ke Layout > Edit HTML > Download Full Template. Setelah itu baru kita mulai trik ini.

Pertama cari code yang berwarna hitam:

/* global-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43
url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
berder-right: 6px solid #f7e8d8;
color: $postTitleColor;
}

kode {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat left bottom;
}

#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #493015 url(http://www.blogblog.com/thisaway/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}

Setelah ditemukan, ganti code yang berwarna hitam tersebut dengan code yang berwarna hitam berikut ini. Dan tambahkan juga beberapa yang berwarna hitam sehingga menjadi seperti berikut:

/* global-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce8b43
url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
berder-right: 6px solid #f7e8d8;
color: $postTitleColor;
}

kode {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_bottom_2.gif) no-repeat left bottom;
}

#header {
background: #634320 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_2.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_main_wrapper_2.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}

#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#newsidebar .widget {
margin-bottom: 20px;}

#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}

#footer {
background: #493015 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_2.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}

Setelah itu cari code berikut dan tambahkan code yg berwarna hitam:

/** page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
body#layout #newsidebar {
padding: 0;
}

Lalu tambahkan code ini di atas div Sidebar:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:sectiont>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Post' type='Blog'/>
</b:section>
</div>

Sekarang apa kita sudah puas dengan template Thisaway yang tiga kolom ? Selamat bersenang-senang dengan template yang baru.

Ternyata Halaman Yang Ini Bagus Juga Untuk Di Cetak: Cetak Halaman Ini

Masukkan Email Kalian Untuk Mendapatkan Artikel-Artikel Seperti Di Atas:

Delivered by FeedBurner