cara sederhana untuk mengubah template / tampilan blog

catatan ini di peruntukan bagi anda yang suka dan sedang belajar ngeblog di Blogspot.com. Mungkin anda kurang merasa sreg dengan tampilan template yang disediakan oleh Blogspot. Karena blogspot tidak terlalu banyak menyediakan template, dan tampilannya standard.

Anda bisa mengganti template blog anda yang sekarang masih standard dengan template blogspot sesuai selera anda. Saat ini banyak sekali template blogspot yang menarik. Download template blogspot
di sini... (copas alamat URL tersebut ke browser anda). Lalu file template simpan di komputer anda.
Selanjutnya, cara mengganti template blogspot sangat mudah, ikuti langkah-langkahnya sebagai berikut :

ikuti langkah-langkahnya di bawah ini :

1. Buka blog anda dan login dengan akun anda,

2. Masuk Dashboard

3. Pilih Layout,

4. Pilih Edit HTML, … lihat gambar :

5. Centang —-> Expand Widget Templates

6. Lakukan —–> Upload File template tadi dari komputer anda,

7. Klik —–> KEEP WIDGETS

8. Klik ——> View Blogs

9. Selesai, template blog anda sudah jadi ….sangat sederhana kan ?

SELAMAT MENCOBA…. !

Catatan Tambahan : di rekomendasikan hanya untuk anda yang sedang belajar. Untuk blog lama yang postingannya sudah banyak, lebih baik jangan ganti template… di karenakan file-file yang ada akan menghilang atau terhapus secara AUTOMATIC.

di bawah ini adalah template yamg bisa anda download :

Communist - Demo

  Communist (5.3 KiB, 1.008 hits)

Flora Scent - Demo

  Flora Scent (6.3 KiB, 1.504 hits)

Connexion - Demo

  Connexion (5.2 KiB, 2.022 hits)

Field of Dreams - Demo

  Field of Dreams (6.2 KiB, 2.260 hits)

Butterfly - Demo

  Butterfly (6.7 KiB, 1.705 hits)

Japanese Fleur - Demo

  Japanese Fleur (6.7 KiB, 2.474 hits)

Nitelife - Demo

  Nitelife (5.3 KiB, 1.094 hits)

FunkyZine - Demo

  FunkyZine (5.5 KiB, 1.122 hits)

Techlure - Demo

  Techlure (6.4 KiB, 2.064 hits)

SEMOGA SUKSES

cara sederhana untuk menyisipkan gambar (image)

untuk menyisipkan gambar atau image ke dalam sebuah halaman HTML. mula-mula kita haurus menyediakan file gambar yang di butuhkan. File gambar ini biasanya berekstensi GIF. JPG atau BMP. Bila file gambar itu telah tersedia , dan kita mengetahui nama dan letak (lokasi) fle itu , barulah kita bisa menyisipkannya ke dalam halaman web kita menggunakan tag < IMG SRC="file_gambar "= >.

Misalnya kita mempunyai halaman web seperti ini:

Sisipkanlah gambar di bawah ini:

Mudah bukan ?

Kita ingin menyisipkan sebuah gambar yang file gambarnya bernama email.gif diantara kedua kalimat di atas. Bukalah sourch kode HTML tersebut sehingga tampak seperti ini:

< p >Sisipkanlah gambar di bawah ini:
< p >Mudah bukan ?

Sisipkan tag paragraf lagi di antara kedua paragraf di atas, kemudian tuliskan tag penyisip gambar < IMG SRC ="file_gambar =" >sehingga menjadi seperti ini:

< p >Sisipkanlah gambar di bawah ini :
< p >< IMG SRC =" email.gif "= >
< p >Mudah bukan ?

Simpan (save) source code tersebut kemudian buka dengan browser maka tampaklah seperti ini:



Mudah, bukan ?

Untuk contoh di atas, file email.gif dan file halaman yang disisipi gambar itu harus terletak dalam folder yang sama. Bila terletak dalam folder lain, maka harus dituliskan lokasinya. Misalnya:

< IMG SRC="images/email.gif " > bila file gambar itu terletak dalam folder bernama images, dimana folder images itu letaknya di bawah (di dalam) folder yang ditempati oleh halaman HTML yang disisipi gambar.

< IMG SRC ="../ email.gif "> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman HTML yang disisipi gambar.

ATRIBUT-ATRIBUT GAMBAR

Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa disertakan dalam tag < IMG SRC > untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi. Kemudian sisipkanlah atribut border dalam tag gambar sehingga menjadi:

< P >Sisipkanlah gambar di bawah ini:
< P >< IMG SRC="email.gif" BORDER ="3 ">
< P >Mudah, bukan ?

Anda boleh mengganti angka 3 dengan angka yang lebih kecil atau lebih besar untuk menghasilkan ukuran border yang lebih kecil atau lebih besar pula. Save lalu tampilkan dalam browser, maka hasilnya seperti ini:

Sisipkanlah gambar di bawah ini:



Mudah bukan ?

Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT. Dengan atribut ini kita bisa menyiapkan teks pengganti gambar bila suatu waktu gambar - karena satu dan lain hal - tidak bisa ditampilkan. Misalnya user menggunakan browser versi lama (yang belum bisa menampilkan gambar) atau browser yang dimatikan fungsi penampil gambarnya (untuk mempercepat proses loading). Dengan adanya atribut ALT ini, tampilan gambar dapat digantikan dengan teks yang kita masukkan di dalamnya. Contoh:

Sisipkanlah gambar di bawah ini:

Mudah, bukan?

Bila suatu ketika, gambar tidak bisa ditampilkan maka akan tampak seperti ini:
Sisipkanlah gambar di bawah ini:

tombol email

Mudah, bukan?

Atribut image berikutnya yang akan kita pelajari adalah atribut ukuran gambar yaitu WIDTH (lebar) dan HEIGHT (tinggi). Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari file gambar yang bersangkutan. Kita bisa mengatur ukuran tampilan gambar dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut.

Kita masih mengambil contoh gambar email.gif di atas. Ukuran gambar yang sebenarnya dari file GIF ini adalah 132x37 pixel (ukuran suatu gambar bisa kita ketahui dengan menggunakan program penampil gambar seperti ACDSee, IrfanView, dsb.). Kita akan mencoba menampilkan gambar itu lebih kecil misalnya menjadi 99x25 pixel dan lebih besar misalnya menjadi 165x47 pixel. Untuk itu, editlah kode HTML-nya sebagai berikut:

< P >Sisipkanlah gambar di bawah ini:

< P >< IMG SRC =" email. gif"> < IMG SRC =" email.gif" WIDTH=99 HEIGHT=25> < IMG SRC =" email.gif" WIDTH=165 HEIGHT =47 >

< P >Mudah, bukan?

Ingin tahu hasilnya setelah ditampilkan dalam browser?

Sisipkanlah gambar di bawah ini:







Mudah bukan ?

Selain menggunakan satuan pixel, kita pun bisa mengatur ukuran tampilan gambar dalam browser dengan satuan persen. Umumnya, satuan persen ini digunakan untuk mengatur lebar (WIDTH) gambar, bukan tinggi gambar. Sebab mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan yang tidak konsisten karena akan bergantung pada lebar jendela browser serta setting resolusi monitor. Oleh karena itu jika anda mengatur lebar gambar dengan satuan persen, atribut HEIGHT tidak perlu diatur lagi karena ukuran pixelnya secara otomatis diskala dengan ukuran yang benar.
Misalnya:
< IMG SRC="file_gambar" WIDTH =50% >.

Ukuran gambar yang ditampilkan oleh browser akan mengikuti ukuran jendela browser relatif terhadap setting resolusi monitor. Jika monitor diset pada resolusi 800x600 pixel dan jendela browser dibuat maksimum, maka gambar akan ditampilkan dengan pada ukuran sekitar 400x300 pixel, yakni 50% dari ukuran jendela browser, bukan 50% dari ukuran gambar. Penggunaan satuan persen untuk pengaturan ukuran tampilan gambar ini, sering digunakan untuk gambar-gambar besar dan tampilannya ingin kita sesuaikan dengan ukuran jendela browser dan resolusi monitor.

Apakah atribut WIDTH dan HEIGHT ini semata-mata digunakan untuk pengubahan ukuran tampilan gambar? Ternyata tidak. Atribut ini juga berfungsi untuk mempercepat tampilnya halaman web (loading). Karena dengan adanya kedua atribut ini, secara teknis memerintahkan browser untuk menyediakan tempat seukuran itu sebelum gambarnya sendiri selesai di-load. Jadi bila kita ingin menampilkan sebuah gambar sama dengan ukuran aslinya, alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan angka yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.

MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND

Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara menggunakan warna sebagai latar belakang halaman web. Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang. Untuk warna, kita menggunakan atribut BGCOLOR="warna", sedangkan untuk gambar, kita menggunakan atribut BACKGROUND="file_gambar". Kedua atribut ini disisipkan dalam tag BODY. Sangat mudah, bukan? Misalnya kita ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti di bawah ini:

< HTML >< HEAD >< TITLE >Latarbelakang Gambar

< BODY BACKGROUND =" email.gif ">

< H1 >< FONT COLOR =" yellow ">Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan latarbelakangnya



Bila dibuka dalam browser akan tampak seperti ini:

Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan latarbelakangnya

Bagaimana cara mendapatkan file-file image untuk dijadikan background? Mudah saja. Misalnya anda tertarik dengan background halaman web ini yang berlatarbelakang garis kotak-kotak abu-abu. Klik kanan pada sebarang tempat yang tampak background kotak-kotak itu maka akan muncul pop-up menu. Salah satu menu di dalamnya pasti bertuliskan Save Background As.... Pilih (klik) menu ini maka muncullah kotak dialog Save Picture. Di situ anda bisa memilih tempat (folder) dimana file image itu ingin anda simpan (misalnya di folder tempat halaman-halaman web anda). Anda pun bisa mengubah nama dari file image itu. Setelah itu klik tombol Save.

MENGGUNAKAN GAMBAR SEBAGAI LINK

Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email kami
. Kode HTML dari link ini adalah:

< A HREF ="mailto: akiradozima@blogspot.com ">email kami

Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu < IMG SRC="email.gif ">. Sehingga lengkapnya tertulis:

< A HREF =" mailto: akiradozima@blogspot.com ">< IMG SRC =" email.gif ">

Inilah gambar yang sudah dijadikan link:





silahkan klik link tersebut untuk mengecek nya.

belajar html untuk PEMULA ,

BELAJAR HTML

Dewasa ini hampir semua dokumen web/blog dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat webpage atau halaman blog tanpa mengerti sedikitpun tentang HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYG seperti Microsoft Front Page. Adobe Page Mill atau Netscape Composer namun sangat di sarankan bahkan nyaris di haruskan, agar anda mengerti bahasa HTML. Terutama agar anda bisa memanfaatkan secara optimal berbagai fasilitas browser dan mengingat sejumlah kelemahan yang terdapat pada editor WYSIWYG seperti di atas. Untuk itu langkah pertama bagi anda yang bercita-cita dan mempunyai ke inginan untuk memiliki sebuah website ataupun sebuah blog sendiri adalah belajar HTML

HTML (Hypertext Markup Language) Adalah bahasa program yang di gunakan untuk menulis format dokumen yang dapat di gunakan dalam web. Dengan HTML, teks ASCII (file *.txt) dapat di poles (di-mark-up)dengan kode-kode tertentu yang di sebut tag untuk menjadi dokumen HTML (file *.htm atau .html). Oleh karena itu untuk membuat dokumen HTML. Anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad- MS Word. Untuk mudahnya ,kita gunakan Notepad. Bila ada yang belum tahu caranya, klik START > Program > Accesories lalu Notepad. Sekarang ikutilah latihan-latihan berikut satu demi satu.

PENGENALAN KODE HTML

dan coba tulis seperti contoh di bawah ini

< html >
< head >

Masing-masing baris di sebut tag. Tag adalah kode yang di gunakan untuk me mark-up (memoles) teks ASCII menjadi file HTML. dan setiap tag diapit dengan tanda < untuk membuka dan tanda > untuk menutup tulisannya. Tag di atas memberikan faidah atau fungsi/ke gunaan, bahwa yang akan di tulis di antara kedua tag tersebut, adalah isi dokumen HTML. Perlu anda ketahui tag-tag html bisa di tulis dengan huruf besar atau kecil. Artinya, penulisan < HTML > atau < Html > atau < html > sama saja hasilnya. Namun perlu selalu di ingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan sangat berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa di tampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya. Tambahkan lah tag seperti berikut :

< html >
< body >
< /body >
< /html >

Isi dari dokumen HTML yang sesungguhnya adalah yang di tulis di antara tag < body >. Coba tuliskan :

< html >
< body >
Tulisan ini akan terlihat atau nampak pada browser
< /body >
< /html >

ekarang simpan lah file ini dengan meng-klik menu File lalu Save As. Pada kotak dialog yang muncul ,terlebih dahulu klik anak panah kecil di ujung kanan kotak save as type kemudian pilih All Files (*.*). setelah itu isilah kotak File Name dengan nama file yang anda inginkan misalnya: home.htm. Jangan lupa penambahan ekstensi .htm di belakang nama File ! Akhirnya, klik tombol Save maka File akan tersimpan sebagai dokumen web. Kini, tutuplah pprogram Notepad anda, Sekarang bukalah lagi program browser (internet Explorer) Selaiin jendela browser yang anda baca ini, klik menu File lalu Open. pada kotak dialog yang muncul .klik tombol Browse. Cari dan pilih file Home.htm lalu klik Open nah' lihatlah hasil karya anda yang pertama !

Tulisan ini akan terlihat atau nampak pada browser

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web ? Tidak. dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap Format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY

Sekarang lihatlah kembali browser anda yang sedang menampilkan file home tadi, klik menu VIWE lalu SOURCE. Dengan intruksi ini maka, akan munculah program notepad yang di dalamnya tampak Source code atau kode-kode HTML yang tadi anda buat. Misalnya kita akan menjadikan halaman web Home ini menjadi berwarna latar belakang merah dengan tulisan berwarna kuning. Untuk itu, kita perlu menambahkan atribut BGCOLOR dan TEXT ke dalam tag body sebagai berikut :

< html >
< body bgcolor="red" text="yellow" >
Tulisan ini akan terlihat atau nampak pada browser
< /body >
< /html >

Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya, pergilah lagi ke program browser yang menampilkan halaman web Home tadi.

memanggil ulang file Home yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya :

Perlu kita ketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa inggris) dan bisa pula dengan kode warna. Kode warna di tulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap di ingat bahwa tulisan 0 adalah nol. bukan huruf O).

black #000000 blue #0000FF olive #808000
white #FFFFFF fuchsia #FF00FF green #008000
red #FF0000 gray #808080 teal #008080
yellow #FFFF00 silver #C0C0C0 navy #000080
lime #00FF00 maroon #800000 purple #800080
aqua #00FFFF

Dengan demikian, kode HTML untuk contoh di atas bisa di tulis sebagai berikut :

< html >
< body bgcolor="#FF0000" text="FFFF00" >
Tulisan ini akan terlihat atau nampak pada browser
< /body >
< /html >

Dengan menggunakan kode warna heksa. Variasi warna warna yang di buat bisa lebih banyak.
klik disiniuntuk melihat kode heksa yang lain.

Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code alias kode-kode HTML. Masih ingat, kan caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag berikut ini:

< html >
< head >
< title >< /title >
< /head >
< BODY BGCOLOR="red" TEXT="yellow" >
Tulisan ini akan terlihat atu nampak dalam browser.
< /body >
< /html >

Di sini terlihat bahwa kita menambah tag < HEAD > dan tag < TITLE >. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:

< html >
< head >
< title >Karya Pertamaku

< body bgcolor ="red" TEXT="yellow ">
Tulisan ini akan terlihat atau nampak dalam browser.

Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: Karya Pertamaku. Alhamdulillah, selesailah latihan pertama kita.

MENGUTAK-ATIK HURUF

Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan seperti berikut ini:

< html >
< head >
< title >Tipe-tipe Teks

< body >

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi seperti ini:

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah < B > untuk menebalkan (bold) tulisan, < I > untuk memiringkan (italic) tulisan dan < U > untuk menggaris-bawahi (underline) tulisan:

< html >
< head >
< title >Tipe-tipe Teks

< body >

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan < B >tebal, tulisan < I >miring dan tulisan < U >bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan < B >< I >tebal dan miring, tulisan < B >< U >tebal dan bergaris bawah atau tulisan < I >< U >miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan < B >< I >< U >tebal, miring dan bergaris bawah.

Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka

< HTML >

hingga

jangan sampai ada yang salah tulis meskipun satu karakter. Misalnya: bila tag < title > anda tulis maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah menulis source code yang salah seperti itu, simpan (save) kemudian refresh dokumen anda dan lihatlah hasilnya!

Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini, ada baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen dengan judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:

Karena file-file

HTML

sebenarnya adalah file-file ASCII biasa, maka anda dapat menggunakan editor-editor teks sederhana seperti WordStar (WS), Notepad, MS Write, dan lain-lain. Editor-editor teks tersebut dapat membimbing anda mempelajari kode-kode HTML secara luar dalam. Akan tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode HTML baris per baris yang dalam perkembangannya akan menjadi sangat rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web adalah cara terbaik untuk benar-benar mengerti tentang struktur file HTML.

Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program browser.

artikel ini di ambil dari seorang yang -->baik hati. <--

memulai untuk nge HOSTING

jika anda ingin memuat hostingberduit
klick di sini

follow me