Tempat Silaturahmi, Berbagi dan Berdiskusi


    Tips and Trick Hacking Blog (Only Blogspot)

    Share
    avatar
    Mac Gyver

    Posts : 75
    Join date : 2009-10-29
    Age : 34
    Location : Mahameru.NET

    Tips and Trick Hacking Blog (Only Blogspot)

    Post  Mac Gyver on Sun Nov 01, 2009 8:54 pm

    Oke akhirnya bisa mulai lagi bikin tulisan mengenai cara2 haking Blog di blogspot, yang sbelumnya pernah saya tulis di [You must be registered and logged in to see this link.] Tulisan ini hanya sekedar sharing saja, tidak ada keinginan menggurui. Bagi rekan2 yang ingin share mengenai topik ini, dengan senang hati dipersilahkan.


    Oke kita mulai :

    Tutor ini hanya berlaku bagi pengguna Blogspot.com saja, tidak berlaku di wordpress atau penyedia blog lainnya. Anggap saja kita sudah mempunyai sebuah blog standard, dengan alamat [You must be registered and logged in to see this link.] dengan tampilan dengan 2 kolom sesuai dengan theme yng kita pilih. Namun tentunya akan kurang pas jika tampilan tersebut tidak sesuai dengan keinginan kita. Apa yang harus kita lakukan? Oke tentunya kita harus mengubah script CSS yang terdapat dalam blog, caranya :



    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....
    avatar
    Mac Gyver

    Posts : 75
    Join date : 2009-10-29
    Age : 34
    Location : Mahameru.NET

    Re: Tips and Trick Hacking Blog (Only Blogspot)

    Post  Mac Gyver on Mon Nov 02, 2009 9:09 pm

    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 ^^.

      Current date/time is Wed Jul 18, 2018 11:32 pm