Mengubah Template Thisaway Blogger Menjadi Tiga Kolom

Bahasan kali ini kita ambil dari template milik Blogger, yakni Thisaway. Bagi teman-teman yang ingin menggunakan template ini dan mau menjadikannya tiga kolom ikutilah Hack ini.

Catatan : Hack Ini berlaku bagi Thisaway dan Thisaway Blue

Tapi sebelum kita hack templatenya ada baiknya jika kita meng-backup template terlebih dahu dengan masuk ke Layout > Edit Html > Download Full Template. Setelah itu baru kita mulai meng-hacknya.
Cari Kode yang di garis bawahi :


/* global ----------------------------------------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 10px;
border-$startSide: 6px solid #f7e8d8;
border-$endSide: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}
#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x $startSide bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 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-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x $startSide top;
}
.post {
margin-top: 0;
margin-$endSide: 8px;
margin-bottom: 14px;
margin-$startSide: 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin-top: 0;
margin-$endSide: 16px;
margin-bottom: 14px;
margin-$startSide: 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide 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-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 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 $startSide top;
clear: both;
}
#footer {
background: #493015 url(http://www.blogblog.com/thisaway/bg_footer.gif) repeat-x $startSide top;
text-align: center;
min-height: 2em;
}
Setelah ditemukan, ganti yang bergaris bawah dan juga sisipi beberapa kode yang bercetak miring :
/* global ----------------------------------------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 10px;
border-$startSide: 6px solid #f7e8d8;
border-$endSide: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: $startSide;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_bottom 2.gif) no-repeat $startSide bottom;
}
#header {
background: #634320 (http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header 2.gif) repeat-x $startSide bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_main_wrapper 2.gif) repeat-y $startSide top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 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-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x $startSide top;
}
.post {
margin-top: 0;
margin-$endSide: 8px;
margin-bottom: 14px;
margin-$startSide: 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin-top: 0;
margin-$endSide: 16px;
margin-bottom: 14px;
margin-$startSide: 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide 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-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 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: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide 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-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .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 $startSide top;
clear: both;
}

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

Setelah itu geser/scroll mouse sampai menemukan baris kode dan tambahkan dengan teks yang bergaris bawah :

/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
body#layout #newsidebar {
padding: 0;
}
Lalu tambah kan kode ini diatas <div id='main-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Selamat mencoba semoga beruntung....

Popular posts from this blog

Nikita willy - Foto Profil Nikita Willy

Image
Nikita willy - Mungkin semua sudah kenal dengan Nikita willy , beliau ini seorang artis cantik dengan bayaran yang termahal sekarang ini apalagi setelah dia memenangkan Panasonic Awards Artis Terfavorit 2010 & 2011 dan pastilah ini membuat dia semakin mahal bayarannya. gadis imut yang sedang membintangi ANAK TERTUKAR sekarang ini lahir di Jakarta, 29 Juni 1994. Nikita Willy memulai karier di dunia hiburan Indonesia sejak usia 6 tahun, melalui sinetron Bulan Bintang. Nikita memiliki darah Minang. Ia mulai dikenal publik, ketika berperan dalam sinetron Roman Picisan bersama Evan Sanders. Selain itu ia juga mulai merambah ke dunia menyanyi. Profil Lengkap Nikita willy Nama : lahir Nikita Purnama Willy Lahir  : 29 Juni 1994 (umur 16) Pekerjaan :  Artis, Penyanyi Tahun aktif :  2000 - sekarang Agama :  Islam Akun twitter :  @nikita_wlilly Hobi : Travelling & Shopping Anak ke : Pertama dari 2 bersaudara Nama saudara : Winona (adik) Foto-Fo...
Read more

Ide Desain Interior agar Rumah Terasa Lebih Nyaman: Mewujudkan Keindahan dan Kesejahteraan

Image
Rumah merupakan tempat di mana kita menghabiskan sebagian besar waktu kita. Oleh karena itu, penting untuk menciptakan suasana yang nyaman dan memikat di dalamnya. Desain interior yang tepat dapat membuat rumah terasa lebih hangat, nyaman, dan mengundang. Dalam artikel ini, kita akan mengeksplorasi berbagai ide desain interior yang dapat meningkatkan kenyamanan rumah Anda. 1. Pemilihan Warna yang Tepat Warna memiliki dampak yang besar pada suasana ruangan. Pilihlah warna yang menenangkan seperti nuansa lembut dari biru atau hijau untuk menciptakan atmosfer yang santai di ruang tamu atau kamar tidur. Gunakan warna netral seperti putih atau abu-abu untuk memberikan kesan bersih dan luas pada ruangan. Namun, jangan takut untuk menambahkan sentuhan warna cerah seperti kuning atau merah di aksen dekoratif untuk memberikan kehidupan pada ruangan. 2. Pencahayaan yang Tepat Pencahayaan yang baik dapat menciptakan suasana yang hangat dan nyaman. Kombinasikan pencahayaan alami dan buatan untuk ...
Read more

Menginspirasi dengan Desain Pagar Rumah Modern: Keselamatan dan Estetika yang Seimbang

Image
Desain rumah modern seringkali menekankan kebersihan, kejernihan, dan garis-garis yang tajam. Bagian penting dalam merancang rumah modern adalah desain pagar rumah . Selain berfungsi sebagai elemen keamanan, pagar rumah juga berperan sebagai elemen dekoratif yang mencerminkan karakter dan gaya pemiliknya. Artikel ini akan membahas berbagai inspirasi dan panduan untuk desain pagar rumah modern yang seimbang antara fungsi dan estetika. Fungsi Pagar Rumah Sebelum kita mendalami berbagai desain pagar rumah modern, penting untuk memahami fungsi utamanya: 1. Keamanan: Fungsi utama pagar rumah adalah untuk memberikan keamanan dan privasi kepada pemilik rumah. Pagar yang baik akan menghalangi akses orang asing ke properti Anda. 2. Privasi: Pagar juga memberikan privasi yang diinginkan oleh banyak pemilik rumah. Dengan pagar yang sesuai, Anda dapat menjaga privasi keluarga Anda di dalam rumah. 3. Penanda Properti: Pagar rumah adalah cara yang jelas untuk menandai batas properti Anda. Ini memban...
Read more