Tips and Trick Hacking Blog (Only Blogspot)

Oke kita mulai :




Tips 1 Mengubah Tampilan Blog menjadi lebih dari 2 kolom style 1

Untuk artikel Edit templete Blog ini saya mencoba mengulas pengeditan templet menjadi 3 kolom yang urutannya sebagai berikut, Untuk halaman posting berada disisi paling kiri, kemudian halaman untuk menempatkan gadget1 berada di tengah dan yang gadget2 berada di urutan paling kanan.

Syarat utama dalam pengeditan ini adalah teman-teman harus menggunakan templete standar contohnya type minima Berikut adalah langkah-langkah pengeditan :
1. Pastikan temen-temen menggunakan operating sistem Windows ^^
2. Kita edit templete tersebut menggunakan dreamweaver terserah mo versi berapa atau mo pake notepad juga bisa atau terserah temen-temen saja yang jelas saya pake dreamweaver 8
3. Seperti biasa login dulu di blogspot kemudian setelah masuk pilih layout
4. Akan terlihat tampilan main (halaman posting) berada di sebelah kiri dan halaman gadget berada disebelahnya
5. Selanjutnya pilih Edit HTML akan terlihat banyak sekali script HTML kemudian copy script HTMLnya dengan catatan expand widget templete tidak usah dicentang!
6. Setelah itu paste script HTML tersebut di aplikasi dreamweaver or sejenisnya, hasilnya akan terlihat kurang lebih 429 baris code.
7. Selanjutnya cari code HTML berikut

Code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Kemudian ganti variable float: $endSide dengan float: right
8. Setelah diganti variablenya kemudian copy code dari mulai #sidebar-wraper { sampai…...} hasilnya seperti ini:

Code:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Setelah dicopy kemudian paste code tersebut dibawah listing yang tadi di copy setelah tanda }
Ini hasilnya :

Code:

#sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper { <- ini yang di ganti dengan #left-sidebar-wrapper
width: 220px;
float: $endSide; <- ini yang diganti dengan float:right
word-wrap: break-word;
overflow: hidden;
}

9. Nah kemudian tulisan #sidebar-wrapper ganti dengan #left-sidebar-wrapper dan float:$endSide ganti dengan float :right; Hasilnya akan seperti ini :

Code:

#sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#left-sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

10. Sampai sini templet telah berubah menjadi 3 kolom, namun tata letaknya belum di setting…Ok…Lanjut
11. Kita mulai menempatkan sidebar yang kita buat tadi #left-sidebar-wrapper berada di tengah yaitu antara halaman main dengan sidebar yang berada di sebelah kanan. Caranya cari code berikut :

Code:

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

12. Kemudian dibawah code tersebut (dibawah </div>) ketik listing berikut :

Code:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/></div>

13. Setelah itu cari listing berikut :

Code:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Kemudian ubah width dari 660px menjadi 880px karena sudah tidak muat lagi di tambah satu sidebar yang berukuran 220px.
14.Cari listing berikut :

Code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ubah widthnya menjadi 880px.
15.Cari listing berikut:

Code:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Ubah width nya menjadi 880px
16. Copy seluruh code yang telah di edit dari dreamweaver atau sejenisnya yang teman-teman gunakan kemudian paste di edit HTML atau ctrl+A terus delete kemudian pastekan.
Ok...Sampai sini sudah selesai,Selamat Mencoba...Insya Allah berhasil.

Tips : Jangan lupa sebelum diedit, back up dulu templetnya...kalau2 nanti ngeditnya tidak berhasil ^^. Okeh coba dulu, kurang jelas boleh nanya dibawah.

Silakan preview dulu blognya, kalo hasilnya acak2an ulangi langkah pengeditan dari awal dan Baca dengan teliti.

Selamat mencoba, Wilujeng Lieur....

Tips 2 Mengubah Tampilan Blog menjadi lebih dari 2 kolom style 2

Melanjutkan Tips 1, jadi sebelum praktekan tips yang ke 2 ini harus ngikuti tips 1 dulu. Supados henteu lieur.

Dalam artikel ini akan di bahas bagaimana membuat templete blog yang mempunyai 2 kolom sidebar dan satu buah main post, yang mana letak kedua sidebar mengapit satu buah main post atau kedua sidebar berada disisikiri dan kanan main post. Sebagai contoh adalah tampilan [You must be registered and logged in to see this link.]

Pengeditan dimulai dari mengcopy listing code pada tahap ke 12 diatas yaitu kodenya sebagai berikut :

Code:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/></div>

Kemudian teman-teman cari listing code sebagai berikut :

Code:

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

setelah kode tersebut ditemukan kemudian listing yang pertama tadi di paste kan tepat di atas kode yang dicari barusan. Hasilnya akan terlihat seperti ini:

Code:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/></div>
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section></div>

Silakan teman-teman preview blognya, mudah-mudahan berhasil ^^.