Cara Membuat Tabel Dengan Kode HTML

Halo, ketemu lagi. Terimakasih ya masih setia baca permakblogs. Hari ini aku mau share cara membuat tabel menggunakan Kode HTML. Bagaimana caranya? mumpung lagi buat project Takengive.org bagian sponsor dan donatur iseng-iseng googling cara pembuatan tabel dan berikut hasil penemuan yang sudah ku praktekan.

kode HTML standart pembuatan tabel :

<table border=1><tbody>
<tr><td>Kotak1</td><td>Kotak2</td></tr>
<tr><td>Kotak3</td><td>Kotak4</td></tr>
</tbody></table>

Hasilnya :

Kotak1	Kotak2
Kotak3	Kotak4

kalau mau lihat aplikasinya silahkan kunjungi takengive.org .
kalau mau jalan singkatnya pake generator online aja :
Berikut situs-situs penyedia layanan HTML Generator online:
1. Quackit
2. Code-Generator
3. Spectrum-Research. Table dengan  aturan CSS dan konsep Frame.
4. Hoover Web Design. Bukan untuk pengguna Browser Netscape.
5. 2CreateAWebsite
6. HTML Basix
7. HTML Portal
8. Table Generator

Selamat mencoba..
Catatan : yang belum ketemu cara memeperkecil bordernya biar lebih tipis, mungkin ada yg tau tulis di coment ya..

thanks to google

Continue reading ...

Mengatur Bagian Footer ( Part 5)

Tuorial template Part 5 mengatur bagian Footer Blogspot, lanjutkan nyimaknya ya.. jangan lupa bagi yang ketinggalan baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4

Lansung kita mulai aja ya? Setelah kita mengatur sidebar dan kontent, kali ini kita akan bagian akhir dari suatu blog yaitu footer. Bagian footer biasanya diisi dengan copyright atau pembuat design. OK sudah siap? Jangan lupa sediakan minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :

1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan footer lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
   Setelah muncul boks TagsWizard ketik footer pada kotak isian di samping “id” kemudaian klik ok.
   
   Ganti tulisan footer dengan tulisan " (&#169;) 2011 Design by nama kamu ". Jangan lupa hapus kurung buka dan tutup yang menyertai &amp....
3. Langkah selanjutnya kita buat code CSS untuk bagian footer. scroll layar ke atas sampai terlihat #content {..... } copy paste code CSS dibawah ini untuk footer.
   #footer {
   margin: 0px 0px 0px 0px;
   padding: 10px 10px 10px 10px;
   text-align: center;
   color: $footerTextColor;
   font: $footerTextFont;
   line-height: 1.2em;
   }
   
   Sudah dan haslinya seperti dibahah ini.. betul?
4. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini

Tambahan :

Untuk menghilangkan efek float silahkan tambahkan kode ini

<br class="clear"/>

sebelum </div> sidebar dan <div id="footer"> seperti dibawah ini
Dan juga tambahkan kode CSS untuk clear di bawah ini di bawah kode CSS #footer{....} :
.clear {
clear: both;
text-align: center;
}
kemudian tekan tombol crtl+s.

Nah selesai sudah pembuatan template tahap awal, untuk artikel berikutnya kita akan memasukan kode khusus blogspot ke template agar dapat dipasang di blog kamu. lho kok tampilannya cuma begitu kalau mau nambah gambar, background dll bagaimana? Terus simak aja ya biar lebih jelas... kalau ada yang masih bingung comment aja ya... ok ciau

Part 6 - Merubah kode HTML menjadi XML

Continue reading ...

Mengatur Sidebar dan Content ( Part 4)

Yuhuuuu Part 4 mengatur bagian Sidebar dan Content Blogspot sudah hadir... silahkan di simak ya.. jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3

OK kita mulai setelah kita bermain di header dan top Menu, kaliini kita akan bermain air di sidebar dan content. Sudah siap? Ambil minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :

1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik sidebar pada kotak isian di samping “id” kemudaian klik ok.Pindah </div> ke bawah tulisan sidebar-kiri .
3. Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
4. Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
   #sidebar {
   margin:2px;
   padding:3px;
   width:200px;
   border:1px solid #000;background:#abc;
   float:left;
   Overflow:hidden;
   }
   Dan juga copy paste kode CSS di bawah ini untuk content.
   #content {
   Overflow:hidden;
   margin:2px;
   padding:3px;
   width:500px;
   border:1px solid #000;
   background:#eee;
   float:left;text-align: left;
   }
   Sudah dan haslinya seperti dibahah ini.. betul?
   


5. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini
   

OK sekian dulu ya untuk pengaturan sidebar dan content, untuk artikel berikutnya kita akan mengatur bagian footer(Part 5). Terus simak ya biar tuntas... kalau ada yang masih bingung comenta aja ya... ok ciau

Continue reading ...

Mengatur Header dan Top Menu (Part 3)

Sudah Part 3 ya...hmmm ok kita akan melanjutkan dengan menata bagian header dan top menu, bagi yang ketinggalan kereta baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2

Sudah ? Mari kita mulai bermain di header dan top Menu. Di dalam header akan kita letakan Judul Blog dan Diskripsi. Dan top menu berisi menu-menu untuk memudahkan pengunjung blog menemukan artikel yang mereka cari. Ok langsung ikuti langkah-langkah di bawah ini :

1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan kotakblog lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
   Setelah muncul boks TagsWizard ketik kotakblog pada kotak isian di samping “id” kemudaian klik ok. Makan akan muncul kode <div id="kotakblog">kotakblog</div>,pindah </div> ke posisi dibawah footer dan hapus tulisan kotakblog yang berwarna hitam.
3. Setelah itu blok tulisan header, lalu ulangi langkah sebelumnya dengan mengklik “HTML TagsWizard” pada toolbar atas, pilih DIV. Dan pada kotak isian disamping id tulis header lalu klik ok.
   Maka akan muncul kode header pindah ke bawah diskripsi blog lalu hapus tulisan header yang diluar <> tara... jadilah seperti dibawah ini :
4. Lakukan hal yang sama dengan tulisan top-menu, blog tulisan tersebut klik “HTML TagsWizard” , tulis top-menu di kotak isian disamping id klik ok. Akan muncul tags <div id="top-menu">top-menu</div> lalu hapus tulisan top-menu dan pindah </div> kebawah Contact Us. Hasilnya seperti dibawah ini :
5. Nah sudah selesai membuat tag header dan top menu, sekarang saatnya mengatur letak masing – masing content dengan CSS.
   
6. Scroll lembar halaman sampai ketemu <style type="text/css"><!-- // --> </style> nah disini kita tulis CSS nya.
7. Langkah pertama copy paste kode dibawah ini diantara <!-- // --> :
   body {
   padding:3px;
   background:#fff;
   font-family:Century gothic, Arial,Tahoma,sans-serif;
   color:#126A9B;
   font-size:13px;
   text-align: center;
   margin:2px; }
   #kotakblog {
   margin:2px;
   padding:3px;
   width:930px;
   border:1px solid #000;
   background:#0ff;
   margin:0 auto;
   }
   Akan jadi seperti di bawah ini :Kemudian copy paste kode dibawah ini di bawahnya :
   #header {
   margin:2px;
   padding:3px;
   width:920px;
   height:100px;
   border:1px solid #000;
   background:#0f0;text-align: left;
   }
   #top-menu {
   margin:2px;
   padding:3px;
   width:920px;
   height:30px;
   border:1px solid #000;
   background:#ccc;text-align: left;
   }
   Akan jadi seperti di bawah ini :
8. Save dengan menekan ctrl+s, nah selesai sudah tahap 3 mengaturan header dan top menu. Bila klik preview seharusnya hasilnya seperti dibawah ini :

Sekarang kita sudah membuat struktur ruangan untuk header dan top menu.Bagaimana mudah bukan? ok sampai disini dulu ya... :) di artikel berikutnya saya akan membagi ilmu lanjutan Bagaimana Mengatur bagian Sidebar dan Kontent.

Continue reading ...

Perkenalkan Diri dengan Gadget Profil Blogspot

Belum terkenal di dunia perbloggeran? pasang Gadget Profil di blog kamu, biar pengunjung tau siapa dirimu... (narsis dikit hehehheehee)

Tampilkan profil kamu dengan menggunakan Gadget Profil Blogspot/Blogger. Pilih foto kamu yang paling narsis :) lalu upload, biarkan pengunjung blog kamu tau siapa kamu sebenernya...

Bagaimana caranya, apa yang perlu disiapkan? ikuti langkah - langkah berikut ini :

1. Masuk ke Account Blogspot kamu.
2. Pilih tab Tata Letak
3. Klik Tambah Gadget, muncul pilihan Gadget silahkan pilih Profil. Setelah itu pada form Edit Profil lengkapi dengan data anda. Isi Judul, setting bagi pakai profil saya, dan mengenai saya.Tulis nama dan uraian tentang Kamu, Setting Lokasi kamu sekarang, mau ditampilkan atau tidak..
4. Setelah selesai klik simpan, lalu buka blog kamu untuk melihat hasilnya. contohnya seperti dibawah ini.

Catatan :

• pastikan profil kamu di dasbor sudah dilengkapi seperlunya ya, yang paling penting foto narsisnya :)

Mudah bukan... ada yang masih bingung ? bingung ninggal komen aja...

Ok semoga berhasil..

Continue reading ...

Jalin Pertemanan dengan Pengikut/Follower Gadget Blogspot

Biarkan pengunjung jadi pengikut/follower blokmu, ya itu judulnya. Apasih maksudnya? yang pasti bukan biarkan pengunjungmu menjadi pengikut aliran sesat... wkwkwkwkwk..Pengikut/Follower disini maksudnya, apabila temen kamu yang pengen dapet update postingan terbaru di blog kamu harus menjadi Pengikut/Follower blog kamu. Nah Blogspot memberikan failitas untuk memudahkan pengunjung yang ingin mengetahui postingan terbaru blog kamu yaitu dengan Gaget Pengikut/Follower.
Bagaimana cara pasang dan menjadi pengikut ? ini dia caranya :

1. Masuk ke Account Blogspot.com kamu.
2. Klik tab Tata Letak, pilih Elemen Halaman.
3. Pilih letak followernya, di samping kiri, samping kanan atau dimana kau suka lah.. Untuk memasangnya cukup klik Tambah Gadget, maka akan muncul layar baru Tambahkan Gadget. Pilih Gadget Pengikut/Follower.
4. Setelah di pilih akan muncul Konfigurasi Daftar Pengikut , isi judulnya dan atur warna sesuai keinginanmu.
   
5. Selesai ? Jangan lupa klik simpan, tunggu sampai jendela tertutup. Klik Lihat blog untuk melihat hasilnya.
6. Hasil persisnya seperti di samping kanan blog ini yang judulnya Follower, jangan lupa jadi pengikut PermakBlogs ya... :)
7. 

Lalu bagaimana cara menjadi pengikut suatu blog?

1. Caranya tinggal klik tombol Follower , trus akan muncul jendela baru dan disana ada pilihan kamu mau menjadi pengikut menggunakan account apa?
2. Setelah kamu pilih akan muncul login account masuk seperti biasa, kalau sudah berhasil baru klik ikuti dan kamu sudah berhasil menjadi pengikut suatu blog dan foto kamu akan terpublish di blog yang kamu ikuti.
   

Jadi tau kan pengikut/follower itu apa, dan mudah kan...
Oke selamat mencoba..

Continue reading ...

HTML/JavaScript Gadget Serbaguna Blogspot

Hello guys and girls, apa kabarnya nich... semoga sehat-sehat ya..

Sorry nich baru nulis lagi, soalnya sibuk di kerjaan dan nyiapin blog traveling jadi semua aktivitas Permak Blogs terbengkalai. Moga - moga kalian masih setia baca artikel kami ya.. (ngarep mode on :) ). Ok kalai ini kami mau bahas dasar-dasar gadget Blogspot.com, buat yang baru ngeblog perlu tau nich. Makanya baca artikel ini biar tambah ilmu dan bisa nyaingin masternya he3.. Gadget pertama adalah HTML/JavaScript Gadget Serbaguna Blogspot. Gadget ini sangat serbaguna, banyak yang menggunakannya untuk Banner, Text link, backlinks, memasukan widget - widget yang berbasis HTML. Bagaimana cara pakainya? ikuti langkah di bawah ini :

1. Langkah pertama masuk ke Account Blogspot anda seperti biasa.
2. Kedua klik Tab TataLetak, untuk menambahkan gadget silahkan pilih posisi yang akan ditambahkan Header, sidebar, diatas postingan, footer, atau dimanapun anda suka (asal ada tulisan tambah gadget). Lalu Klik pada tulisan Tambah Gadget.
   
3. Setelah itu akan muncul jendela baru Tambahkan Gadget, pilih gadget HTML/JavaScript klik di tanda (+).
4. setelah itu akan muncul jendela konfigurasi HTML/JavaScript. Isi sesuai dengan keinginan anda mau di isi apa aja terserah :). kalau mau coba di isi widget shoutbox untuk chat silahkan, ndak tau caranya baca aja artikel cara pasang shoutbox.
   

Setelah semuanya selesai jangan lupa klik tombol simpan, lalu klik lihat blog untuk melihat hasilnya. Bagaimana mudah bukan... Selain shoutbox banyak kok widget-widget yang bisa digunakan dengan gadget HTML/JavaScript ini.. silahkan googling aja...

OK, selamat mencoba.. semoga berhasil....

oh ya kalau ada yang masih bingung tinggalin comment aja ya...

Continue reading ...

Cara Membuat Blog Menggunakan Blogspot

Blog siapa yang tidak kenal, semua orang yang telah terbiasa dengan internet sudah pasti mengetahuinya. Setiap hari ada saja yang ngeblog "istilah kerennya" ada yang baru membuat, ada yang baru update artikel, upload foto, dan cari duit melalui blog termasuk didalamnya lho…

"Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. " ref : id.wikipedia.org

Tapi ada juga sebagian yang belum mengenal blog atau sudah tidak tahu cara buatnya . Nah dalam tulisan ini akan di jelaskan cara membuat blog menggunakan Blogspot . Bagaimana caranya ? ikuti langkah - langkah di bawah ini.

1. Kunjungi www.blogger .com
2. Masukan account Gmail kamu di "nama pengguna(email)" dan password di "Kata Sandi", trus klik masuk.


3. Kemudian kamu akan di bawa ke tahap pertama pendaftaran "Mendaftar untuk Blogger".
   Isi Nama Tampilan dengan nama yang ingin kita tampilkan saat posting.
   Contreng pada persetujuan persyaratan kemudian klik Lanjutkan.
   
4. Kemudian masuk tahap ke dua "Beri nama Blog anda".
   Isi Judul Blog dengan judul yang ingin kita tampilakan. Isi juga Alamat Blog (Url) dengan alamat Url blog kamu. Klik Cek Ketersediaan untuk melihat apakah alamat yang kita pilih tersedia ata tidak. Jika sudah tersedia klik Lanjutkan.
   
   
5. Lalu masuk ke Pilih sebuah tamplate , pilih dulu aja template yang ada kemudian klik Lanjutkan. Nanti kalau tidak suka bisa di ubah/di ganti tamplatenya. Banyak template gratisan di internet.
   Cara ganti template blog klik disini.
   
6. Ok Blog sudah selesai dibuat. Tinggal klik mulai blogging untuk menulis artikel pertama kamu.
7. Cara mengisi artikelnya gampang. Pada Judul isi aja judul artikel kamu, dan kotak di bawahnya dengan artikel. Setelah selesai klik Terbitkan Entri.
8. Setelah muncul pesan Entri blog Anda berhasil diterbitkan! berarti artikel anda sudah terbit. klik Lihat entri maka kamu akan melihat artikel yang baru.

catatan : untuk menambah artikel baru kamu tinggal masuk ke tab Posting lalu klik Entri Baru.

Bagaimana mudah kan?
Ok selamat mencoba ... Semoga berhasil...

Continue reading ...

Cara Ganti Tamplate Blogger

Tamplate bawaan Blogger waktu pertama kali kita buat blog mungkin terlalu simple dan kurang menarik. Buat kamu - kamu yang pengen ganti template bawaan blogger dengan tempalte yang lebih menarik ikuti dech langkah - langkah di bawah ini.

1. Sebelum kamu ganti template download tamplate gratisan dulu di internet. Coba kamu cari menggunakan kata kunci download template blogspot di google atau kalau mau gampang klik aja di tempalte boss.
   
2. Setelah di download, extract filenya.
3. Masuk ke account kamu di blogger.
4. klik Tab Tata Letak(Layout). Klik Edit Html, contreng pada "Expand Template Widget" . Lalu klik tombol telusuri dan cari file xml template yang sudah di extract tadi. dan klik tombol unggah.
5. Kalau ada pesen seperti di bawah ini :
   Klik tombolKonfirmasi & Simpan.... Selesai dech, coba cek blog kamu pasti sudah ganti tampilannya.

OK selamat mencoba semoga berhasil ya..

Continue reading ...