TUTORIAL KOMPUTER
  • 10 Virus Komputer Paling Mematikan Di Dunia
  • Kunci Mempercepat Acces Komputer
  • MENGENAL SISTEM KOMPUTER
  • Sejarah Perkembangan Komputer
  • Informasi computer terkini
  • Mengenal System Software
  • Mengupas Masalah Motherboard
  • Mengupas Detail Tentang CPU
  • Kode Mempercepat Editing Paragraf
  • Memproteksi Folder Dengan Password
  • Macam-Macam Perintah Pada Run Commands
  • Mempercepat Waktu Shutdown
  • Ubah Tampilan Windows
  • Kode Akses Siemens
  • Kode Akses Samsung
  • Kode Akses Sony Ericsson
  • Kode Akses Nokia
  • Seni Photoshop ( Angan Merokok )
  • Menyembunyikan Menu Help Pada Start Menu
  • Menyembunyikan Menu Document Pada Start Menu
  • Menyembunyikan menu Find pada Start Menu
  • Mengembalikan Folder Documents Yang Hilang
  • Memproteksi File
  • Mengganti Icon Drive
  • Mengganti Alignment Pada Drop Down Menu
  • Disable Klik Kanan Pada Taskbar
  • Disable Klik Kanan Pada Dekstop & Explorer
  • Menyembunyikan Menu Start Menu
  • Persentasi Antara Flash Dan Power Point
  • Mengganti Screen Saver Lewat Registry
  • Menghilangkan Username Pada Start Menu
  • Menampilkan Administrator Di Welcome Screen
  • Menyembunyikan My Recent Documents
  • TUTORIAL HACKER
  • Bad Unicode
  • Cara Skip Win Registrasi XP
  • Craking Dengan F.A.R.A.B.I
  • DoS, Serangan yang Belum Tertangkal
  • Hack Dan Prinsip Dasar Psikologis Hack
  • Hacking NT Server Melalui Remote Data Service
  • 95% Web Server Di Dunia has been dead
  • Hacking Web Site with cart32.exe installed
  • Konsep Lain Menjebol Server Webfroot Shutbox
  • Istilah Teknologi Informasi Bahasa Indonesia
  • Mendapatkan account ISP gratis!
  • Mendapatkan Serial Number WinZip 8.1
  • Menghilangkan Password Bios
  • Mengintip Password Linux
  • Menjebol Apache Web Server Melalui Test-Cgi
  • Menjebol Server Melalui Service FTP
  • Pembobolan 1000 Kredit Card di Step-up
  • Penjebolan Server Melalui FTP
  • Hati-hati DLM Mengetikkan Klikbca.Com
  • VIRUS M HEART
  • Bongkar Password Microsoft Acces
  • BUG TELKOMSEL & (FREE Phone ke-CYPRUS
  • Cara Efisien Mendapatkan Puluhan Ribu Email
  • Cara Sederhana membuat virus PHP
  • Cara Singkat Menginfeksi Openssh-3.4p1 Z
  • Cracking GateKeeperm
  • HACKING FOR BEGINNER
  • Hack Windows NT2000XP Admin Password
  • Melewati pembatasan hak akses warnet
  • Melindungi Data dari SQL Injection
  • memainkan fungsi tombol HP
  • Membedah Teknik SQL Injection
  • Bongkar key Windows Dengan @ stake LC4
  • Meminimalkan Biaya Saat menelpon Di Wartel
  • Menangani Virus Lohan
  • MENGACAK-ACAK REGISTRY WARNET
  • Mengelabui Pengejar Hacker
  • Meng-Hack Pesawat Telepon Yang Terkunci
  • Meng-hack PHP-BUg's
  • Kelemahan pasword & login yahoo pd Cgi
  • Trik Penjebolan Sites
  • Ragam Hacking Menggunakan Google
  • Rahasia Teknik Serangan SQL Injenction
  • Teknik Pembuatan Virus Makro Pd XP
  • Seni Internet, Googlingg
  • Situs Hacker Yang Ikut Bermasalah
  • Teknik Hacking Situs KPU Dr segla arah
  • Teknik Menyusup Ke TNP Center KPU
  • Tip N Trik Telephon Gratis Musso
  • Trik Mereset Password Windows 9x
  • TUTORIAL BLOG
  • Menuliskan Script di Blog
  • Membuat Artikel Terkait/Berhubungan
  • Membuat Feed di Blog Dengan Javascript
  • Membuat Navigasi Breadcrumb di Blog
  • Membuat Meta Deskripsi di Halaman Blog
  • Membuat Readmore Versi 1
  • Membuat Read More Otomatis di Blog
  • Membuat Read More Versi 2
  • Membuat Tabs Menu Horizontal
  • Membuat Menu Tab View
  • Membuat Menu Vertikal
  • Cara Memasang Musik Pada Blog
  • Membuat Template Blog Hasil Buatan Sendiri
  • Buat Threaded Comment dgn Intense Debate
  • Membuat Menu DTree
  • Membuat Tab Menu Dengan Banyak Style
  • Menambah Toolbar Baru di Blogspot
  • Cara Membuat Tabel di Blog
  • Cara Membuat Tulisan Berjalan
  • Melakukan Backup Website atau Blog
  • Mendapatkan Free Hosting
  • Membuat Widget Status Twitter pada Blog
  • Manampilkan Profil Facebook di Website (blog)
  • Membuat Avatar Komentar Pada Blogger
  • Membuat Halaman Contact Me pada Blogspot
  • Cara Membuat Status Yahoo Messenger di Blog
  • Mendapatkan Layanan Google Friend Connect
  • Membuat Nomor Page Posting Di Blog
  • Tips dan Trik Menambah Kolom Di Blog
  • Mengatasi "Invalid Widget ID" pada Blogger
  • Membuat Slide Show Album Foto di Blog
  • Membuat Kotak Komentar dibawah Posting
  • Cara Membuat Kotak Link Exchange
  • Membuat Link Download
  • Cara Membuat Dropdown Menu
  • Cara Membuat Buku Tamu
  • Trik Memproteksi Blog
  • Cara Membuat Search Engine
  • Membuat Kategori / Label di Blogger
  • Menghilangkan Navbar (Navigation Bar)
  • Memasang Emoticon di Kotak Komentar
  • Menambah Emoticon di Shoutbox
  • Pasang Jam di Sidebar
  • Memasang Pelacak IP Address
  • Mengganti Tulisan "Older Post / Newer Post"
  • Memasang Alexa Traffic Rank
  • Memasang Tombol Google Buzz
  • Cara Membuat Cursor Animasi
  • Menyembuyikan Buku Tamu
  • 5 Cara Terbaik Mendapatkan Uang Dari Blog
  • Blogging Cepat Dengan BlogThis!
  • 21 Posts Separator Images
  • Mengganti Link Read More Dgn Gambar
  • Cara Menampilkan 10 Artikel Di Recent Posts
  • Offline Blogging Dgn Windows Live Writer
  • Cara Memasang Jadwal Sholat
  • Cara Membuat Daftar Isi Blog Otomatis
  • Membuat Daftar Isi Blog Manual
  • Iklan Google Adsense Di Tengah Artikel
  • Membuat Link Warna - Warni
  • Meletakkan Widget Di Bawah Header
  • Membuat Kotak Scrollbar
  • Memasang Video Di Artikel
  • Kode Warna HTML
  • Home » » Tips dan Trik Menambah Kolom Pada Blogspot

    Tips dan Trik Menambah Kolom Pada Blogspot

    Mengedit template blogspot pada dasarnya tidaklah sulit, apalagi template blogspot tersebut didesain dalam satu buah dokumen XML. Berbeda halnya dengan template Wordpress CMS yang terdiri dari banyak dokumen (file) yang terintegrasi. Selain itu, struktur kode pada template blogspot juga lebih sederhana jika dibandingkan dengan Wordpress CMS yang dibangun menggunakan PHP-MySQL. Sebenarnya keduanya juga mempunyai teknik sendiri-sendiri dan bergantung kapabilitas kita pada pemrograman yang mana, XML atau PHP. Namun, saya tidak akan membawa Anda berselancar sampai kesasar dalam menyelami struktur bahasa pemrograman tersebut. Saya hanya akan memberikan tips dan trik yang biasa saya gunakan dalam mengedit template blogspot. Saya sudah pernah menjelaskan bahwa blogspot menyediakan 2 cara yang bisa kita gunakan dalam mengedit template blogpsot.
    1. Yang Pertama adalah dengan mengedit melalui bagian Elemen Halaman. Pada dasbor klik link menu Tata Letak dan pilih submenu Elemen Halaman. Cara ini hanya untuk menambah maupun menghapus widget yang Anda masukkan pada blog.
    2. Yang Kedua adalah dengan mengedit melalui bagian Edit HTML. Pada dasbor klik link menu Tata Letak dan pilih submenu Edit HTML.
    Cara yang kedua juga terbagi 2 lagi, yaitu: mengedit dengan mengaktifkan pilihan Expand Template Widget dan tanpa mengaktifkannya. Jika kita mengaktifkan (mencentang) pilihan Expand Template Widget, maka kita akan ditunjukkan kode template yang lebih kompleks.
    Berikut beberapa tips dan trik yang saya maksud dimana saya asumsikan kita tidak terlalu paham dengan pemrograman XML:
    1. Jika kita ingin menambah kolom di bagian tertentu, bekerjalah pada bagian Edit HTML dengan tidak mencentang pilihan Expand Template Widget agar kode untuk menambah kolom lebih mudah dikenali. Kolom yang saya maksud adalah bagian-bagian yang menyusun layout blogspot, seperti kolom header, kolom mainbar, sidebar, dan footer, yang semuanya sudah saya bahas , dan kita akan mencoba untuk menambah kolom seperti bagian-bagian tersebut sehingga kita bisa menambah konten seperti widget pada kolom yang akan kita tambahkan.

    2. Sebagai contoh kita akan menambah kolom baru di bawah header. Pada bagian Edit HTML, backup terlebih dahulu template Anda dengan mengklik link Download Template Lengkap pada bagian Backup/Restore Template agar jika terjadi kesalahan, bisa mengembalikan ke template semula.
    3. Jangan memberi centang pada bagian Expand Template Widget.
    4. Selanjutnya adalah kita akan mencari struktur HTML yang digunakan untuk menambah sebuah kolom. Asumsinya adalah kita ingin mencontoh struktur kode yang digunakan oleh si pembuat template untuk membuat sebuah kolom. Dengan demikian, kita tinggal meng-copy paste struktur tersebut dan merubah beberapa bagian untuk membuat kolom baru. Inti yang saya maksud adalah MENGENALI POLA. Ibaratnya seperti ini, kita ingin membuat sebuah persegi, namun tidak tahu cara membuatnya. Maka kitapun melihat sebuah persegi yang dibuat orang lain dan menyimpulkan bahwa untuk membuat sebuah persegi dibutuhkan 2 buah garis vertikal dan 2 buah garis horizontal dimana setiap ujung dari garis tersebut bertemu. Permasalahan yang muncul adalah bagaimana caranya kita mengetahui pola (struktur dasar) yang digunakan untuk membuat sebuah kolom pada template blogspot yang mana kita tahu sendiri ada puluhan baris kode yang harus kita kenali. Caranya ada pada langkah selanjutnya.
    5. Pada kotak kode template yang ada pada bagian Edit HTML tersebut, periksalah secara perlahan kode-kodenya sampai Anda menemukan kode yang merupakan kode untuk Header (sebab kita ingin menambah kolom di bawah header). Tipsnya adalah temukan kode yang paling tidak ada tulisan "header" nya. Perhatikan kode berikut:
          <div id='header-wrapper'>
            <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Header' type='Header'/>
      </b:section>
          </div>

          <div id='content-wrapper'>

            <div id='crosscol-wrapper' style='text-align:center'>
    6. Anda tentu bingung kode yang digunakan untuk menambah kolom header dimulai dari mana dan berakhir sampai dimana. Untuk itu silahkan turun lebih ke bawah sampai Anda melihat kode seperti berikut:
            <div id='main-wrapper'>
              <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
      </b:section>
            </div>
    7. Coba Anda perhatikan bahwa kode pada langkah 6 mempunyai kemiripan dengan bagian kode yang ada pada langkah 5. Terdapat struktur yang dibungkus oleh tag <div></div>, kemudian di dalamnya terdapat struktur yang dibungkus oleh tag <b:section></b:section>, baru kemudian di dalamnya terdapat stuktur <b:widget>. Tag <div></div> digunakan untuk membuat "kotak" yang membungkus struktur di dalamnya, sedangkan <b:section></b:section> merupakan kode untuk membuat kolom baru. Adapun kode <b:widget> merupakan kode untuk menambah widget yang bisa juga ditambahkan melalui bagian Elemen Halaman pada menu Tata Letak. Dari sini bisa dianalogikan bahwa struktur kode yang digunakan untuk membuat kolom header pada langkah 5 adalah seperti yang di tulis merah di bawah ini:
          <div id='header-wrapper'>
            <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Header' type='Header'/>
      </b:section>
          </div>

          <div id='content-wrapper'>

            <div id='crosscol-wrapper' style='text-align:center'>
    8. Jika Anda belum yakin, silahkan periksa kode-kode yang lain. Anda akan menemukan kode-kode yang mempunyai kemiripan pola seperti yang ada pada langkah 6 dan 7. Pola struktur kode tersebutlah yang akan kita contoh untuk menambah kolom baru.
    9. Sekarang copy-lah struktur kode yang ditulis merah pada langkah 7 kemudian paste-kan tepat di bawah struktur kode merah tersebut.
    10. Selanjutnya, kita akan mengedit beberapa bagian agar tidak terjadi duplikasi. Pada bagian tag <div> biarkan tetap agar pengaturan CSS yang digunakan sama dengan pada header. Jika Anda ingin membuat atribut CSS baru untuk mengatur kolom yang akan Anda tambahkan, silahkan ganti ID div tersebut. 
    11. Untuk section class penjelasannya sama dengan langkah 10.
    12. Yang perlu Anda ganti adalah section id agar tidak sama dengan header. Misalkan Anda ganti menjadi "iklan".
    13. Maxwidgets merupakan parameter untuk mengatur jumlah widget yang boleh Anda tambahkan pada kolom baru tersebut. Jika Anda tidak ingin membatasinya, maka hapus saja kode tersebut.
    14. Showaddelement merupakan parameter untuk mengatur apakah akan ditampilkan link "Add Gadget" pada bagian layout blogspot (di bagian Elemen Halaman pada menu Tata Letak). Gantilah menjadi "yes" agar boleh menambah gadget (widget) baru.
    15. b:widget merupakan struktur sebuah widget (gadget) yang telah ditambahkan pada kolom tersebut. Jika adan ingin langsung menambahkan, maka gantilah id dari widget tersebut. Hapuslah kode <b:widget id='Header1' locked='true' title='Header' type='Header'/> untuk membuang widget tersebut dari kolom yang Anda buat. Maka struktur kode keselurahan untuk menambah kolom baru pada header adalah sebagai berikut:
          <div id='header-wrapper'>
            <b:section class='header' id='iklan' showaddelement='yes'>
      </b:section>
          </div>

    16. Klik tombol SIMPAN TEMPLATE.
    17. Sekarang klik submenu Elemen Halaman pada bagian Tata Letak. Anda akan melihat kolom baru telah bertambah di bawah header.

    18. Sekarang Anda tinggal menambah gadget (widget) baru dan bisa mengedit tampilan melalui CSS. Misalnya Anda ingin membuat CSS untuk mengatur section id="iklan" yang Anda defenisikan pada langkah 12, maka tambahkan struktur CSS pada template Anda untuk atribut "iklan" dari section tersebut.
    19. Selamat mencoba.
    Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

    0 komentar:

    Poskan Komentar

     
    Support : Creating Website | Tutorq Template | Template
    Copyright © 2011. FAROUQ'S - All Rights Reserved
    Template Modify by Creating Website
    Proudly powered by Blogger