Cara Membuat Menu Drop Down Dengan CSS

Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.

Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:

Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.

1. Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:
   <ul>
<li><a href="URL 1">MENU 1</a></li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
   Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>.
2. Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:
   <ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
   Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
   
3. Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:
   
   • Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
     #menuku ul {
list-style: none;
}
     #menu ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
     list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
     padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.
     
   • Untuk membuat menu-menu tersebut tampil secara horizontal:
     #menu li {
float: left;
}
     #menu li --> artinya hampir sama dengan #menu ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
     float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri
   • Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
     #menu ul ul {
visibility:hidden;
width:149px;
}
     #menu ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
     visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
     width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.
   • Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
     #menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
}
     CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
   • Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
     #menu li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
     Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.
     background-color:#000000 -->warna backgroundnya adalah #000000
     height: 2em --> tinggi dari menu tersebut sebesar 2em
     width: 149px --> lebar menu sebesar 149px
     display: block --> menu tersebut akan tampil dalam bentuk block
     border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
     color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
     text-decoration: none --> link menu tidak akan mempunyai garis bawah
     text-align: center --> letak tulisan menu akan berada ditengah-tengah
4. Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:
   <div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>
5. Hasilnya akan seperti ini:
   

Selanjutnya kita akan mempejalari tutorial memasang menu drop down dengan CSS pada sebuah blog. So, jangan kemana-mana ya. Datang lagi dan beri komentar.. :D

»»  read more

Cara Membuat Album Foto Pada Blogspot Memakai Gadget

Tips cara membuat album foto pada blogspot ini sebenarnya sudah pernah saya berikan beberapa waktu yang lalu disini. Hanya saja posting yang pertama tersebut membahas bagaimana cara membuat slideshow album foto pada blogspot dengan memanfaatkan situs gallery foto yaitu www.slide.com. Untuk mengetahui trik pembuatan album foto di blog tersebut, pembaca boleh membukanya kembali disini. Blogspot sebenarnya menyediakan gadget yang berfungsi untuk membuat slide album foto pada blog kita. Namun, menurut saya gadget ini lebih sederhana jika dibandingkan dengan slideshow yang kita buat dari www.slide.com, sebab tampilan slide foto yang kita dapatkan dari situs www.slide.com tersebut bisa kita customize sesuai kehendak kita mulai dari tipe slide, ukuran, animasi, dan lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba gadget slide album foto blogspot ini, sebab kesederhanaan biasanya indentik dengan kemudahan dalam pengaplikasiannya. Berikut langkah-langkah menambah album foto pada blogger:

1. Login pada akun Blogspot Anda
2. Klik link menu Tata Letak pada halaman dasbor. Pastikan Anda berada pada sub tab menu Elemen Halaman
   
3. Klik link Tambah Gadget pada bagian dimana pembaca ingin memasang slide album foto tersebut
4. Akan muncul window Tambahkan Gadget yang berisi daftar gadget yang bisa kita tambah. Silahkan cari dan pilih gadget Tampilan Slide
   
   
5. Berikut pengaturannya:
   Judul :
   Isi dengan nama slide foto Anda.
   Sumber :
   
   • Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
     
   • Flickr. Flickr merupakan situs yang menyediakan tempat menyimpan foto dan video. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di www.flickr.com.
   • Photobucket. Ini hampir sama dengan flickr dimana kita bisa menyimpan foto dan video secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di www.photobucket.com
   • Lainnya. Sumber selain yang 3 diatas.
     
   Pilihan :
   Memilih apakah berdasarkan kata kunci atau berdasarkan album
   Buka link di jendela baru:
   Centang jika ingin foto dibuka pada jendela baru ketika diklik
6. Sebagai contoh kita menambah slide foto menggunakan Album Web Picasa
   Judul: beri judul slide album
   Sumber : pilih "Album Web Picasa".
   Pilihan : pilih "Album"
   Nama Pengguna : masukkan ID akun Google pembaca. Misalkan akun Google pembaca adalah kampanye@gmail.com, maka isikan "kampanye"
   Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk "Public". Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada http://picasaweb.google.com (masuk menggunakan akun Google Anda). Klik tab "My Photos", setelah itu klik album yang ingin Anda atur parameternya.
   Klik menu "Edit" kemudian pilih sub menu "Album Properties" sehingga akan muncul jendela "Edit album information".
   Lihat dibagian paling bawah, akan ada pilihan "Visibility for this album". Silahkan pilih "Public". Kemudian klik tombol Save changes
   
7. Pratinjau album akan terlihat pada jendela tambah gadget tersebut.
   
8. Klik tombol SIMPAN

Untuk melihat contoh hasilnya bisa pembaca lihat disini (tapi maaf, gambarnya hanya 2 dan sama pula, jadinya gak kelihatan deh pergantian slidenya)

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Cara Membuat Menu Pada Blogspot

Pada umumnya, setiap website memiliki menu yang berfungsi untuk mengarahkan pengunjung ke halaman tertentu. Menu memang dijadikan sebagai alat untuk berpindah dari halaman yang satu menuju halaman yang lain. Menu-menu tersebut biasanya diletakkan secara vertikal maupun sebagai menu horizontal. Nah, bagaimana pula kita membuat menu pada blogspot?

Blogspot memang tidak menyediakan bagian pengaturan khusus pada halaman admin (dashboard) untuk menambah atau mengedit menu-menu dari halaman-halaman tertentu seperti pada Wordpress atau CMS Joomla. Hal ini mungkin dikarenakan blogspot tidak memungkinkan kita membuat halaman-halaman terpisah (independen), tetapi merupakan halaman posting yang ditampilkan secara berurutan, dimana posting terbaru akan ditampilkan dihalaman depan, sedangkan posting yang lama akan semakin terbelakang. Menurut saya hal ini menjadi kurang ergonomis. Sebab, sebuah web sebaiknya memberikan kemudahan pada pengunjung untuk menjelajahi halaman-halaman yang ada di dalam web tersebut. Jika suatu posting berada pada urutan paling belakang kita bisa memudahkan pengunjung untuk membukanya kembali dengan menggunakan menu atau sebuah link sehingga mereka tidak perlu membuka satu persatu halaman posting kita untuk sampai pada halaman posting yang ingin dituju.

Gambar: contoh menu yang dipasang pada blogspot

Untuk membuat menu pada blogspot bisa kita lakukan dengan mengotak-atik struktur templatenya. Sangat banyak bentuk-bentuk menu yang bisa kita tambahkan antara lain menu horizontal, menu vertikal, dropdown menu, dtree menu, dan lain-lain. Selanjutnya kita akan mempelajari tips-tips menambah menu pada blogspot satu demi satu.

»»  read more

Mengatasi Message BX- ERRORS Saat Menginstal Template Baru Blogger

Pernahkan pembaca menemukan halaman error seperti gambar dibawah ini?
Saya harap sih jangan pernah :D. Soalnya jika pembaca mengalami hal tersebut pasti akan merasa hampir kecewa, sedikit kecewa, kecewa, sangat kecewa, bahkan bisa sangat kecewa sekali. halah...Halaman tersebut merupakan halaman galat yang akan kita temukan ketika mengalami masalah error saat menginstal New Blogger Template (template baru blogspot yang berekstensi .xml). Blogger akan menunjukkan kode galat (kode error) yang sesuai dengan masalah kita. Kode diatas merupakan salah satunya. Saya sendiri pernah mengalami hal tersebut dan menemukan kode bX-si9ej, bx-ji78k6, bX-ot4j3e, bX-xvu2n5, dan lain sebagainya. Sungguh mengecewakan buat kita aplagi jika template yang kita download sangat bagus dan kita sukai. Lantas, bagaimana mengatasi message kode bX- error tersebut? Sebenarnya blogspot telah menyediakan forum di Google yang membahas masalah tersebut. Jika pembaca mengalami hal tersebut coba lihat sebuah link dibagian bawah, biasanya tertulis "Telusuri Grup Bantuan Blogger untuk bX- error". Link tersebut akan mengarah ke Google forum yang saya maksud tadi. Nah, disini saya akan mengulas dan mereview solusi mengatasi pesan error bX pada blogger dengan bahasa kita sendiri (bahasa Indonesia tentunya). Berikut langkah-langkah mengatasi message bX-errors pada blogspot ketika menginstal template baru .xml:

1. Buka template yang telah Anda download dengan notepad atau wordpad. Klik kanan file tersebut --> Open With --> Wordpad (atau notepad)
   
2. Cari kode widget id pada template tersebut. Tekan Ctrl + F kemudian tulis di kotak pencarian widget id.
3. Lakukan pencarian satu persatu karena akan ada beberapa kode yang bertuliskan widget id.
4. Setiap kali menemukan struktur yang ada widget id, ganti nomor id widget tersebut menjadi 2 digit. Misalnya pembaca menemukan struktur <b:widget id='example2', maka pembaca sebaiknya mengganti misalnya dengan <b:widget id='example21' (usahakan mengganti dengan lebih dari 1 digit)
5. Lakukan untuk widget yang lainnya sampai semua nomor id widget lebih dari 1 angka. Contoh : <b:widget id='Feed1', menjadi: <b:widget id='Feed12'
6. Setelah itu simpan template yang telah Anda edit tersebut.
7. Silahkan instal kembali template tersebut pada blogger Anda
8. Selamat mencoba.
   

»»  read more

Membuat Ucapan Selamat Datang Memakai Nama Pengunjung

Menyapa setiap pengunjung yang datang ke website kita merupakan hal yang sangat baik karena bisa membuat pengunjung merasa akrab dengan kita, atau paling tidak dengan website kita. Namun, hal tersebut akan membuat kita sedikit repot terutama jika pengunjung website kita sangat banyak, bisa puluhan, ratusan, bahkan ribuan. Kalau pengunjungnya masih sedikit seperti blog ini :( ya gak masalah. Untuk mengatasi masalah tersebut saya akan memberikan tips supaya kita tetap bisa menyapa pengunjung-pengunjung yang datang ke website namun tidak harus mengeluarkan tenaga yang banyak. Prinsip kerjanya adalah ketika seseorang membuka website kita, maka akan muncul kotak pesan yang berisi ucapan selamat datang dari kita sambil menyebut nama pengunjung itu sendiri. Berikut langkah-langkahnya:

Untuk website nonblogspot:

1. Buka file index website Anda, kemudian copy kode berikut dibawah tag <head> atau diatas tag </head>
   
   <script src='http://nestoriko.googlepages.com/welcome.js' type='text/javascript'></script>
   
   
2. Copy kode dibawah ini kebagian website dimana kita ingin menempatkan pesan kepada pengunjung website kita, misalnya kita ingin menempatkan pesan tersebut dibagian sidebar, maka dibagian tersebutlah kode dibawah ini ditulis.
   
   <script>
   document.write("WELCOME TO MY WEBSITE, " + getname() + "!");
   </script>

Untuk blogspot:

1. Login ke akun blogger Anda. Setelah masuk ke dasbor, klik link menu Tata Letak, kemudian pilih sub menu Edit HTML.
2. Cari tag </head>, kemudian copy kode berikut ini diatas tag </head> tersebut
   
   <script src='http://nestoriko.googlepages.com/welcome.js' type='text/javascript'></script>
   
   
3. Pada menu Tata Letak, pilih kembali sub menu Elemen Halaman. Klik link menu Tambah Gadget yang ada dibagian sidebar sehingga muncul window baru yang berisi gadget-gadget yang bisa kita tambahkan. Pilih gadget HTML/JavaScript
4. Copy kode dibawah ini kedalam kotak isian HTML/JavaScript tersebut, setelah itu klik tombol Save.
   
   <script>
   document.write("WELCOME TO MY WEBSITE, " + getname() + "!");
   </script>

Anda boleh mengganti tulisan "WELCOME TO MY WEBSITE" dengan tulisan lain yang Anda inginkan. Selamat mencoba dan jangan sungkan-sungkan bertanya melalui kotak komentar ya.
Ingin melihat contohnya? Klik disini

»»  read more

Mengatasi "Invalid Widget ID" pada Blogger

Beberapa hari yang lalu, salah seorang pembaca di blog ini bertanya tentang kasus yang beliau alami ketika mengganti layout blog dengan template yang telah di downloadnya dari sini. Muncul pesan seperti dibawah ini ketika mencoba untuk menginstal template blogspot tersebut:

Please correct the error below, and submit your template again.
The new widget id "Recent-Comments-Widget" is invalid for type: Feed

Setelah saya mencoba lagi menginstal template tersebut, ternyata saya mengalami kejadian yang sama. Tadinya saya sedikit heran karena dulu ketika mencoba template tersebut, saya tidak mengalami kejadian seperti itu. Setelah saya perhatikan struktur widget tersebut dan saya coba bandingkann dengan struktur yang lain baik pada template yang sama maupun yang lain, ada kemungkinan sekarang ini blogspot sangat sensitif dengan penamaan ID yang kita defenisikan sendiri (tentang ID css bisa dibaca disini dan disini).

Atribut ID yang kita berikan pada widget harus sesuai dengan tipe widget itu sendiri. Artinya kita tidak lagi bisa secara bebas memberikan nama sebagai atribut ID widget pada template kita. Secara default, ketika kita menambah sebuah widget melalui perintah tambah gadget pada halaman Tata Letak, maka secara otomatis nama atribut ID widget tersebut akan sama dengan tipe widget itu sendiri dan ditambah dengan angka didepannya agar tetap spesifik dengan widget lain yang sejenis atau setipe. Misalnya kita menambah sebuah widget Feed, maka ID widget adalah "Feed1" (angka 1 dibelakang Feed menunjukkan Feed yang keberapa). Jika kita menambah Feed baru, maka ID Feed baru tersebut akan menjadi "Feed2", dan seterusnya. Supaya lebih jelas, struktur widget Feed yang kita tambahkan akan seperti ini:

<b:widget id='Feed1' locked='true' title='Recent Comment' type='Feed'>

Padahal, sebelum kasus diatas muncul, kita bebas memberikan nama atribut sebagai ID widget yang kita tambahkan, misalnya mengganti strukturnya menjadi

<b:widget id='komentarku' locked='true' title='Recent Comment' type='Feed'>

Namun, karena sepertinya blogspot sensitif dengan atribut ID yang seperti itu, maka kita harus merubah ID widget kita yang nama atribut ID-nya kita buat sendiri menjadi sesuai dengan tipe widget tersebut sesuai contoh yang diatas, agar tidak terjadi invalidasi ID seperti kasus yang saya alami.

»»  read more

Membuat Slide Show Album Foto di Blog

Mungkin pembaca pernah melihat sebuah slide show yang berisi foto-foto yang ditampilkan pada sebuah website maupun blog. Apalagi jika pembaca mempunyai friendster, tentu slide album foto seperti itu sudah tidak asing lagi. Kita juga bisa membuat slide show tersebut pada halaman website atau blog kita, dan langkah-langkah membuat slideshow album foto pada blog juga tidak jauh berbeda dengan ketika kita membuatnya pada friendster. Dan yang lebih menarik lagi, kita tidak perlu download slideshow kemudian memasangnya di web kita sehingga membutuhkan waktu yang banyak. Namun, agar terlihat lebih bagus dan menarik, kita perlu melakukan penyesuaian kode-kode slide tersebut dengan template blog kita. Untuk menambahkan slide foto pada blog, kita akan memanfaatkan sebuah situs gallery picture yang akan menyediakan kode-kode slide foto yang kita simpan pada situs tersebut. Situs tersebut adalah Slide.com. Berikut langkah-langkahnya:

Bagian 1:

1. Silahkan buka www.slide.com pada browser Anda, kemudian login pada situs tersebut. Jika Anda belum memiliki akun, ada baiknya register/mendaftar terlebih dahulu dengan mengklik tombol menu Sign Up. Sebenarnya tanpa mendaftarpun kita tetap bisa membuat slide show album pada situs ini. Namun, dengan mendaftar memungkinkan kita menyimpan slide kita dan dapat mengeditnya jika diperlukan tanpa harus memulai dari awal lagi.
   
2. Saya asumsikan pembaca telah berhasil membuat akun pada situs slide.com dan telah login pada situs tersebut. Jika pembaca berada pada halaman utama, klik tombol yang bertuliskan Make a Slideshow
   
   
   
   Namun, jika berada pada halaman profile, klik gambar yang ada tulisan Make Slideshow. Keduanya sama saja.
3. Selanjutnya akan muncul sebuah halaman pembuatan slideshow dengan 3 langkah, yaitu Create Slideshow, Save Slideshow, dan Share Slideshow.
   
4. Pada bagian Create Slideshow, pembaca diminta untuk mengupload foto atau gambar yang ingin dimasukkan kedalam slide album yang akan pembaca buat. Ada beberapa pilihan untuk memasukkan foto-foto tersebut, yaitu menguploadnya langsung dari komputer pembaca, atau bisa menggunakan foto atau gambar yang telah Anda simpan pada akun friendster Anda, facebook, myspace, photobucket, dan lain-lain. Dengan demikian, pembaca tidak perlu lagi mengupload satu persatu dari komputer pembaca. Namun sangat saya harapkan agar pembaca tidak memasukkan gambar porno apalagi foto bugil artis Indonesia yang sekarang lagi beredar di internet. Kalau sekedar memasukkan foto artis cantik Sandra Dewi atau foto Aura Kasih (tapi jangan gambar telanjang mereka ya) mungkin tidak jadi masalah. Yang cukup ditakutkan adalah ketika anak-anak kita yang justru dengan tidak sengaja melihat foto-foto bugil artis tersebut. Loh..loh...kok malah penjelasannya melebar ke masalah curhat..Lanjuuttt... :D
   
5. Kita akan mencoba membuat slideshow dengan memakai foto yang ada di friendster. Untuk itu, pada bagian Add Images From, pilih menu Friendster. Masukkan URL dari profile friendster Anda pada kotak Enter Your Friendster URL (Profile or Group). Kemudian klik tombol Get my images. Jika proses tersebut berhasil, maka pembaca akan melihat dibagian bawah telah terdapat foto-foto yang berasal dari friendster Anda. Untuk mengetahui friendster URL Anda, silahkan buka terlebih dahulu profile friendster pembaca. URL pembaca ada pada bagian yang ditunjukkan oleh gambar dibawah ini:
   
   
   Namun, jika pembaca tidak mempunyai akun friendster, pembaca boleh mencoba menu lain. Pada prinsipnya, bagian ini berfungsi memasukkan gambar yang akan kita buatkan slide show albumnya.
   
6. Pada bagian Customize your Design klik menu Styles dan pilih Sliding. Dibagian atas akan terlihat album Anda akan ditampilkan dalam bentuk sliding.
   
   
   Masih pada bagian Customize, klik menu Size yang ada disamping. Nah, disinilah kita perlu menyesuaikan ukuran slide album kita dengan template yang kita gunakan. Sesuailan slide dengan bagian dimana slide album Anda akan dimunculkan. Sebagai contoh kita akan menampilkan slide tersebut pada bagian sidebar blogspot. Jika lebar sidebar blog kita sekitar 300 an pixel, maka ukuran yang proporsional dari slide kita adalah misalkan 300 x 100 px. Maka pada kotak width masukkan nilai 300 dan pada kotak height masukkan nilai 100, kemudian klik tombol Update. Anda juga bisa mengatur tampilan dari slide yang akan kita buat, baik memberikan effect, background, dan lain-lain. Silahkan coba menu-menu customize yang lain.
   
   
7. Jika pengaturan dirasa sudah cukup, silahkan klik tombol berwarna hijau SAVE (get code).
8. Selanjutnya kita akan masuk pada bagian kedua, yaitu Save Slideshow. Pada bagian Slideshow Details, isi dengan isian yang sesuai dengan keinginan pembaca. Setelah itu klik tombol hijau SAVE Slideshow.
   
9. Setelah itu kita akan masuk kebagian Share Slideshow. Pembaca akan melihat sebuah kotak yang berisi kode slide album foto yang baru saja kita ciptakan. Kode tersebutlah yang akan kita sisipkan pada blog atau website kita.

Untuk menambahkan slide album foto pada blog, kita ikuti langkah-langkah berikut:

Bagian 2

1. Masuk ke akun blogger Anda.
2. Pada halaman dasbor, klik link menu Tata Letak.
3. Tambahkan sebuah Gadget dengan mengklik link Tambah Gadget. Pilih jenis HTML/Javascript.
   
   
4. Masukkan kode slide album foto yang telah pembaca dapatkan dari situs www.slide.com tadi (step 9 pada Bagian 1). Kemudian klik tombol Simpan.
   

Sebagai contoh silahkan pembaca lihat disini.
Selamat mencoba, dan jangan lupa ngasi komentar ya, terutama jika pembaca masih bingung dengan langkah-langkah diatas, saya dengan senang hati akan berusaha membantu pembaca sekalian.

»»  read more

How To Show Comment Box Below Post for WP-Polaroid Blogger Template

For you who are using WP-Polaroid Blogger Template on your blog, there is a problem when we want to show comment box under post. I found a broken link comment, so other people can't leave us comment on our posts. Is it a problem? Ho..ho..ho..of course. Without comment box, we can't interect with our blog visitors. Cause of it is some stucture was lose from the template. The function of that structure is to show the comment text box. Here are steps to fix that problem:

1. First, login to your dashboard, click text link Layout, and go to sub menu Edit HTML.
2. Give sign in small box inside text "Expand Widget Templates".
3. Find the structure below:
   
   <div id='backlinks-container'>
   <div expr:id='data:widget.instanceId + "_backlinks-container"'>
   <b:if cond='data:post.showBacklinks'>
   <b:include data='post' name='backlinks'/>
   </b:if>
   </div>
   </div>
   
   
4. Add this structure above the structure which you found in step 3.
   
   <p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>
   <b:include data='post' name='comment-form'/>
   <b:else/>
   <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl'
   expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
   </b:if>
   </b:if>
   </p>
   
   
5. Click SAVE TEMPLATE button

To embed comment box below post, we must do it from blogger draft account, because this feature is still release on Bloger in draft. Blogger in draft is a special version of Blogger where the Blogger try out new features before the Blogger release them to everyone.

1. Go to the link : http://draft.blogger.com to enter Blogger in draft.
2. On your dashboard, click text link: Settings, and then go to sub menu: Comments.
3. On part of Comment Form Placement, chose Embedded below post
4. Click SAVE SETTING button.
   

»»  read more

Membuat Kotak Komentar dibawah Posting

Pada blogspot, fasilitas kotak komentar pada awalnya hanya bisa dimunculkan memalui halaman atau jendela baru, bukan pada halaman posting yang ingin dikomentari tersebut, sehingga terkadang membuat pengunjung menjadi repot karena harus membuka halaman baru jika ingin memberikan komentar. Sebenarnya pada saat itu, kotak komentar bisa dimunculkan langsung dibawah posting, namun untuk melakukannya kita perlu sedikit merombak struktur HTML template kita. Namun, sejak beberapa waktu yang lalu, blogspot telah memberikan fasilitas membuat kotak komentar dibawah posting tanpa harus mengotak-atik struktur template kita. Hal ini tentu sangat bagus sekali terutama bagi kita yang telah mengganti template blogspot dan ingin melengkapi fiturnya sehingga terkesan tidak tanggung-tanggung. Tetapi, untuk saat ini, fasilitas tersebut masih dalam tahap pengonsepan dari blogspot, sehingga untuk mengaktifkan fasilitas tersebut, kita melakukannya melalui halaman Draft.
Untuk itu, kita akan masuk ke halaman http://draft.blogger.com, bukan lagi http://blogger.com. Berikut langkah-langkah setting kotak komentar dibawah posting:

1. Silahkan klik link akun draft diatas untuk masuk ke dasbor pembaca.Klik link menu Pengaturan, kemudian pilih sub menu Komentar.
   
2. Pada bagian "Penempatan Formulir Komentar", pilih opsi "Disemat di bawah entri".
3. Klik tombol SIMPAN SETELAN, kemudian lihat hasilnya.

Jika telah berhasil, maka kita akan melihat kotak penulisan komentar muncul langsung dibawah posting. Namun, berdasarkan pengalaman saya ketika mencoba menempatkan kotak komentar dibawah post tersebut, langkah-langkah diatas terkadang tidak berhasil. Ini mungkin disebabkan template yang sudah dimodifikasi dari yang default. Untuk template yang baru atau belum dilakukan modifikasi template blogspot yang dipakai, kemungkinan besar akan berhasil. Maka saya akan memberikan langkah tambahan agar pekerjaan kita memunculkan kotak komentar dibawah posting tersebut bisa berhasil.

1. Pada dasbor pembaca, klik link menu Tata Letak, kemudian pilih sub menu Edit HTML. Beri tanda centang pada kotak kecil yang ada tulisan Expand Template Widget agar struktur kompleks template kita bisa terlihat.
2. Lakukan terlebih dahulu backup template dengan mengklik link Download Template Lengkap, agar jika terjadi kesalahan dalam melakukan perubahan, bisa mengembalikannya pada keadaan semula.
   
3. Cari bagian dibawah ini:
   
   <p class='comment-footer'>
   <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl'
   expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
   </b:if>
   </p>
   
   
4. Ganti struktur diatas dengan struktur berikut. Setelah itu klik tombol SIMPAN TEMPLATE.
   
   <p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>
   <b:include data='post' name='comment-form'/>
   <b:else/>
   <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl'
   expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
   </b:if>
   </b:if>
   </p>

Semoga langkah-langkah diatas sudah bisa membantu pembaca dalam memunculkan kotak komentar tepat dibawah posting.

»»  read more

Mengganti Template Blogspot

Beberapa rekan saya sering bertanya ketika saya menjelaskan bagaimana langkah-langkah membuat blog di blogspot baik melalui e-book panduan menciptakan blog di blogspot atau belajar membuat blog secara langsung (lisan). Pertanyaan yang secara spontan muncul adalah apakah template blogspot yang kita pakai sekarang bisa diganti dengan yang template blogspot baru?
Ada 2 pilihan yang yang bisa kita lakukan, yang pertama adalah mengganti template blog yang lama dengan template yang telah disediakan oleh blogspot. Sedangkan pilihan kedua adalah mengganti dengan template yang berasal dari luar, baik itu kita desain sendiri atau kita download dari situs-situs penyedia template blogspot gratis atau bayar.
Pilihan pertama bisa dilakukan dengan langhak-langkah berikut:

1. Silahkan Login terlebih dahulu untuk masuk ke akun blog pembaca.
   
2. Pada halaman dasbor, pilih link menu Tata Letak. Dibawah menu tersebut terlihat sub menu Pilih Template Baru yang harus kita klik untuk melihat template apa saja yang tersedia yang bisa kita gunakan.

Secara umum, template-template tersebut sama dengan template yang kita lihat ketika pertama kali menciptakan blog di blogspot. Namun ada beberapa pilihan yang terdapat pada template yang kita pilih, misalnya warna dari desain template blog tersebut.

Pilihan kedua dalam mengganti template tersebut bisa dilakukan dengan langkah sebagai berikut:

1. Karena kita ingin mengganti dengan template yang kita dapat dari luar, maka kita harus mempersiapkan template yang akan kita gunakan. Template tersebut bisa dari hasil desain kita sendiri atau kita download dari situs lain. Namun blog ini sudah menyediakan sebuah free blogspot template yang boleh pembaca gunakan. Silahkan klik disini untuk mendownloadnya.
   
2. Setelah selesai mendownload template tersebut, silahkan masuk ke akun blogspot pembaca, kemudian pilih link menu Tata Letak, lalu klik pada sub menu Edit HTML.
   
3. Sebelum melakukan perubahan pada template blog Anda, ada baiknya pembaca mem-backup terlebih dahulu template yang sedang pembaca gunakan agar jika terjadi kerusakan saat mengganti atau pembaca ingin kembali menggunakan template yang lama, bisa langsung meng-upload-nya kembali.
4. Klik tombol Browse pada kotak "Upload sebuah template dari sebuah file pada hard drive Anda" untuk mencari template yang telah pembaca download pada langkah 1. Setelah itu klik tombol Unggah (upload).

Silahkan lihat perubahannya.
Untuk download template blogspot gratis lainnya atau mendapatkan layout friendster yang cantik dan keren, silahkan buka www.sumbergratis.co.cc

»»  read more

Lebih Jauh Mengenal Layout Blogpot (2)

Postingan ini merupakan bagian ke-2 dari posting yang membahas layout blogpot. Jika dibagian pertama kita membahas sampai pada pembagian layout blog berupa head dan body, maka pada postingan ini kita melanjutkan mempelajari lebih dalam lagi bagaimana isi dari head dan body tersebut dibentuk.
Pertama-tama, silahkan login terlebih dahulu untuk masuk ke akun blogpot pembaca. Pada bagian dasbor, klik menu Tata Letak, kemudian pilih tab submenu Edit HTML. Pembaca akan melihat sebuah kotak yang berisi struktur bahasa pemrograman blog. Pada kotak tersebut kita bisa melihat bagian mana saja yang berada dibagian head dan bagian body. Sebagai contoh saya akan menunjukkan salah satu bagian yang terdapat dibagian body:

<b:section class='sidebar' id='sidebar2' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>

Untuk membuat sebuah elemen pada body dari layout blogspot, baik itu pada header, mainbar, sidebar , maupun footer, terlebih dahulu kita membuat sebuah section sebagai tempat elemen tersebut didesain.
Struktur diatas merupakan struktur bahasa untuk membuat sebuah elemen berupa label yang berfungsi untuk menampilkan label (kategori) dari posting pada blog kita.

• Baris pertama menunjukkan bahwa elemen kategori tersebut ditempatkan pada sebuah section (bagian) dengan id=sidebar2 dan class=sidebar. Sedangkan showaddelement='yes' menunjukkan bahwa pada section tersebut akan terdapat fungsi Tambah Gadget, sehingga kita bisa menambahkan gadget (elemen) baru pada section tersebut.

• Baris kedua menunjukkan gadget yang dibuat pada section tersebut, yaitu berupa widget dengan tipe label dan diberi judul Categories. Tipe menunjukkan jenis widget, sedangkan title menunjukan judul yang kita beri pada widget tersebut.

• Baris ketiga merupakan tag penutup untuk membuat section.

Seperti itulah pembentukan sebuah elemen pada layout blogspot. Lantas, apakah sesederhana itu? Ho..ho..tentu tidak. Sebenarnya masih ada pengaturan-pengaturan yang diberikan pada elemen-elemen tersebut. Coba perhatikan kolom centang yang bertulisakan "Expand Template Widget" yang ada disebelah kanan atas kotak kode-kode tersebut. Silahkan pembaca beri centang pada kolom tersebut. Pembaca akan melihat struktur kode yang berbeda dengan yang sebelum dicentang. Sebenarnya fungsi kode tersebut sama, baik sebelum dicentang maupun sesudah dicentang. Kita hanya memperluas tampilan struktur pembentukan elemen-elemen blog kita. Dengan memperluasnya, kita bisa melihat secara lengkap struktur bahasa dalam memdesain elemen-elemen blog kita. Kita juga bisa melakukan pengaturan-pengaturan lebih detail pada elemen-elemen tersebut.
Mungkin pembaca yang masih baru akan merasa sedikit pusing berhadapan dengan kode-kode tersebut. Itulah salah satu kenikmatan menggunakan blogspot, dimana jika kita tidak mau bersentuhan dengan kode-kode tersebut, maka kita bisa mengatur layout blog kita cukup lewat tab submenu Elemen Halaman. Namun, jika pembaca ingin mempelajari dan mengatur layout dari template yang pembaca gunakan secara lebih detail lagi, maka kita bisa melakukannya melalui tab submenu Edit HTML ini.

»»  read more

Lebih Jauh Mengenal Layout Blogpot (1)

Hampir 3 minggu blog ini tidak ter-update sama sekali. Ujian akhir semester memaksa untuk "nyuekin" halaman-halaman seluas layar komputer ini. Minta maaf ya buat pada pembaca tercinta. Semakin cepat tamat kuliahkan semakin punya banyak waktu untuk membagikan ilmu kepada pembaca sekalian, ya gak? :).
Pada postingan ini kita akan mencoba berkenalan dengan layout blogpot, mempelajari bentuk dan bagian-bagian dalam maupun luarnya. Eiittss..apaan tuh? :).
Bagi pembaca yang sudah mendownload panduan menggunakan blog di blogspot dari blog ini, tentu sudah pernah mengetahui bahwa layout dari template blogspot terbagi atas 4 bagian, yaitu header, sidebar, mainbar, dan footer. Silahkan pembaca buka halaman layout blog pembaca dengan memilih tabmenu Tata Letak pada dasbor akun blogspot pembaca. Seperti pada postingan yang membahas tentang hosting dan domain, dimana kita menganalogikan sebuah website seperti sebuah rumah, maka pada postingan ini layout-layout pada website seperti blog secara umum akan kita ibaratkan seperti denah pada rumah tersebut. Denah sebuah rumah biasanya terdiri dari teras depan, dapur di belakang, ruang tamu, bagian samping kiri atau kanan, dan lain-lain. Denah sebuah website misalnya sebuah blog juga terbagi-bagi seperti denah pada rumah tersebut dan digunakan sebagai tempat menampilkan konten blog kita. Karena layout atau denah sebuah website biasanya berbeda-beda antara yang satu yang lain dan tergantung pada keinginan pemilik website, maka saya akan menjelaskan secara general saja layout atau denah sebuah website. Seperti denah rumah pada umumnya, bagian-bagian website seperti blogspot juga mempunyai fungsi masing-masing. Coba pembaca perhatikan kembali halaman Tata Letak yang telah pembaca buka tadi. Berikut screenshoot halaman Tata Letak :
Beberapa fungsi dari bagian-bagian tersebut diantaranya adalah sebagai berikut:

• Header biasanya berfungsi untuk menampilkan nama, logo, maupun deskripsi dari blog. Informasi tersebut biasanya ditampilkan pada header dengan maksud agar terlihat pada setiap halaman blog. Header diharapkan bisa memberikan gambaran singkat mengenai sebuah blog ketika pengunjung pertama kali membukanya sebelum membaca isi dari blog tersebut.
• Bagian mainbar merupakan bagian utama dari sebuah blog dimana pada bagian inilah postingan kita akan ditampilkan secara berurutan.Pada blogspot baru, mainbar juga bisa berfungsi sebagai tempat menulis komentar dan menampilkan komentar-komentar tersebut.
• Sidebar merupakan bagian blog yang berada di sisi blog sebelah kanan ataupun kiri, bahkan ada juga di sisi atas atau bawah (tergantung template blog yang dipakai). Biasanya sidebar berfungsi sebagai tempat menampilkan elemen-elemen tambahan, misalnya kalender, foto profil, dan lain-lain. Pada blogspot, elemen-elemen tambahan ini disebut sebagai gadget. Kita bisa menambahkan pada blog kita gadget baru yang telah disediakan oleh blogspot. Dibagian side mana sajakah kita bisa menambahkan gadget baru? Gadget bisa ditambahkan jika pada side tersebut terdapat fungsi "Tambah Gadget".
  Link yang ditunjukkan oleh tanda panah merah diatas merupakan link yang berfungsi untuk menambah gadget baru. Karena pada sidebar tersebut terdapat fungsi Tambah Gadget, berarti kita bisa menambahkan gadget pada sidebar tersebut.
  Untuk melakukan penambahan sebuah gadget baru, silahkan klik link tersebut. Maka akan muncul halaman yang berisi list gadget yang telah disediakan oleh blogspot.
  
• Footer merupakan bagian yang terletak dibagian bawah halaman blog. Biasanya elemen ini berfungsi untuk menampilkan lisensi dari blog kita, misalnya copyright, link sumber template, designer template, dan lain-lain.

Penjelasan diatas merupakan gambaran bentuk dan tata letak dari template blog yang kita gunakan jika dilihat dari luar. Bagaimana sebenarnya layout-layout tersebut disusun? Pembaca tentu ingat bahwa sebuah website didesain dengan menggunakan bahasa pemrograman web, dimana digunakan tag-tag yang memberikan instruksi bagaimana sebuah website akan ditampilkan. Pada blogspot, layout yang kita gunakan sebenarnya terdiri dari 2 bagian besar, berupa kepala dan badan. Hal ini bisa pula kita ibaratkan seperti tubuh manusia. Tubuh manusia bisa dibagi menjadi 2 bagian besar, yaitu kepala dan badan (dari leher sampai ujung kaki), dimana kepala merupakan bagian yang berisi informasi yang disimpan di otak dan berfungsi untuk mengatur gerakan badan kita. Sedangkan badan merupakan bagian yang berfungsi sebagai alat untuk melakukan aktivitas. Pada sebuah website seperti halnya sebuah blog, kepala ini disebut sebagai head dan badan disebut sebagai body. Bagian head dibatasi oleh tag <head> dan tag </head>. Sedangkan bagian body dibatasi oleh tag <body> dan tag </body>. Dibagian head inilah kita akan menyisipkan informasi yang akan digunakan untuk mengatur body dari blog tersebut. Salah satunya adalah struktur CSS yang digunakan untuk mengatur tampilan blog kita. Bagi pembaca yang mungkin masih bingung dengan yang namanya CSS, bisa membaca pada postingan yang ini dan yang ini. Nah, body itu sendiri merupakan bagian blog kita yang akan terlihat pada browser. Dibagian inilah kita kita menampilkan header, sidebar, mainbar, dan footer sebagai tempat kita menampilkan konten blog kita.

»»  read more

Bahasa Pemrograman Blogspot

Dari yang pernah disinggung pada postingan sebelumnya mengenai sedikit pengantar tentang website, mungkin sudah bisa memberikan gambaran buat pembaca tentang dasar pembuatan sebuah website itu sendiri yaitu menggunakan sebuah bahasa pemrograman website. Lalu bagaimana dengan blogspot? Blogspot sendiri menggunakan sebuah bahasa pemrograman XML (Extensible Markup Language), yaitu sebuah bahasa markup yang digunakan untuk mendefenisikan dan mendeskripsikan sebuah data. XML bisa dikatakan memiliki persamaan dengan HTML, namun ada perbedaan mendasar dalam penggunaannya. Seperti halnya HTML, XML juga menggunakan tag-tag markup untuk mendeskripsikan (sebagai informasi) sebuah data. Namun, perbedaannya terletak pada tag-tag markup itu sendiri. Jika dalam HTML kita dikenalkan oleh tag-tag yang sudah didefenisikan dan dibakukan terlebih dahulu dan kita hanya boleh menggunakan tag-tag tersebut, maka di dalam XML tidak ada tag-tag baku atau standar dan kita bebas membuat tag-tag sendiri untuk mendefenisikan data-data kita. Contoh bentuk XML bisa dilihat sebagai berikut:

<?xml version="1.0" encoding="UTF-8"?>
<pesan>
<dari>Penulis>/dari>
<untuk>Pembaca</untuk>
<subjek>Datang Lagi</subjek>
<isi>Sering-sering datang lagi ya</isi>
>pesan>

Tag-tag seperti <pesan>, <dari>, dan lain-lain merupakan tag-tag markup yang kita buat sendiri untuk mendefeniskan data-data kita, seperti Penulis, Pembaca, dan seterusnya.
Coba pembaca bandingkan dengan contoh-contoh tag HTML yang diberikan pada pengantar tentang HTML di postingan sebelumnya. Tag-tag markup seperti <table>, <marquee>, dan lain-lain merupakan tag-tag markup yang sudah dibakukan terlebih dahulu dan kita tinggal menggunakannya.
Perbedaan ini sebenarnya juga didasari dari penggunaan bahasa pemrograman itu sendiri. HTML digunakan untuk menampilkan data-data dan membuat bagaimana data itu ditampilkan, sedangkan XML hanya sebatas mendefenisikan dan menggambarkan sebuah data. Jadi, dalam implementasinya, perlu aplikasi untuk mengirim dan menerima, atau menampilkan data-data dalam tag-tag XML itu untuk memberikan informasi dari data-data tersebut.
Saya rasa segitu dulu sedikit pengantar tentang bahasa pemrograman blogspot. Diharapkan bisa memberikan gambaran awal mengenai website dan mengerti tentang blog sebagai sebuah website. Tapi perlu ditegaskan di awal bahwa kita tidak murni menggunakan XML tersebut untuk membangun sebuah blog kita. Tapi HTML yang dikenal sebagai bahasa markup yang sederhana tetap bisa diimplementasikan dalam sebuah blog yang akan kita desain dan gunakan.

»»  read more

Panduan Lengkap Menggunakan Blog di Blogspot

Kita telah belajar bagaimana menciptakan blog di blogspot, maka sekarang saya akan menjelaskan seluk beluk yang ada di dalam blog itu sendiri, karena ada pepatah lama yang mengatakan "tak kenal maka tak sayang". Memang ada benarnya jika kita tidak mengerti cara menggunakan blog di bloggspot ini, maka kita tidak akan menyukainya. Hal ini bisa penulis maklumi terutama ketika mood kita memang lagi down. Saya sendiri pernah mengalamaminya ketika saya mencoba sesuatu tapi saya bingung menggunakannya, alhasil saya jadi malas dan cepat bosan. Ternyata, yang saya coba itu punya manfaat yang besar juga. Baiklah, berikut ini saya paparkan panduan lengkap menggunakan blog di blogger yang telah Anda buat. Namun, karena panduan menggunakan blog di blogspot tersebut sangat panjang menurut saya, maka saya tidak menulis langsung pada blog ini karena bisa memperlambat loading. Pembaca bisa men-download-nya langsung melalui link dibawah ini, sekalian pembaca bisa jalan-jalan pada website saya yang telah saya buat dengan menggunakan sebuah CMS.

Klik Untuk Download Langkah-Langkah Memakai Blogspot Disini

»»  read more

Panduan Membuat Blog di Blogspot

Setelah cukup panjang bercuap-cuap dipengantar tutorial website, sekarang sudah saatnya kita terjun langsung ke TKP (Tempat Kita Praktek).
Saya akan awali dengan memaparkan langkah-langkah membuat blog di Blogspot. Sebenarnya ada banyak provider yang menyediakan tempat buat kita untuk ngeblog, seperti wordpress, multiply, friendster, dan lain-lain. Tentu ada perbedaan dari masing-masing provider terutama fitur yang diberikannya, dan tergantung kita mau milih yang mana. Jika fitur yang kita inginkan ternyata disediakan oleh provider yang satu, tentu kita akan memilih ngeblog disana. Namun, saya tidak akan membanding-bandingkan keunggulan masing-masing provider terkait blognya disini karena kurang etis menurut saya. Toh bagi saya semua blog akan sama saja jika memang tujuannya baik, dan yang pasti tergantung dari diri kita sendiri. Mungkin pembaca bertanya-tanya, lantas kenapa penulis memulai dengan tutorial membuat blog di blogspot?
Pertanyaan bagus. Ya karena salah satu perbedaan blogspot (perbedaan bukan berarti keunggulan lho) adalah kita diperbolehkan melakukan memodifikasi halaman blog kita, baik itu modifikasi template, tulisan, maupun menambah fitur-fitur lain yang kita anggap bagus dan menarik. Tentu hal ini sangat cocok bagi kita yang memang ingin mengembangkan kemampuan per-website-annya dan mau mencoba tantangan berkreasi pada blog sendiri.

Baiklah, berikut langkah-langkah membuat blog di blogspot:

1. Buka alamat www.blogger.com pada browser Anda.
2. Pada bagian sebelah kanan Anda akan menemukan tanda panah yang bertuliskan CIPTAKAN BLOG ANDA.
   
   
   
   Klik tulisan tersebut, dan ikuti langkah selanjutnya.
3. Anda akan masuk pada halaman pembuatan akun Google. Langkah ini bertujuan untuk menciptakan akun yang akan Anda gunakan untuk masuk ke blog Anda. Nah, bagi Anda yang telah mempunyai akun Google baik itu dari Gmail atau yang lainnya bisa langsung menggunakannya. Untuk itu, klik link yang bertuliskan Slogin terlebih dahulu pada bagian atas form.
   
   
   
   Bagi pembaca yang ingin mengetahui cara menciptakan akun Google silahkan klik disini. Sedangkan bagi Anda yang belum mempunyai akun Google silahkan isi form tersebut. Perlu diperhatikan bahwa alamat email yang harus diisi pada form tersebut boleh alamat email dari mana saja, asalkan benar-benar sudah ada. Setelah semuanya diisi, klik tanda panah yang bertuliskan Lanjutkan.
4. Anda akan masuk pada langkah berikutnya, yaitu penamaan blog Anda. Isian Judul Blog merupakan nama blog Anda yang akan Anda buat, sedangkan isian Alamat blog merupakan domain blog atau URL blog Anda yang akan dituliskan pada address bar browser jika ingin mengunjungi blog Anda. Setelah mengisi semuanya, klik lagi tanda panah dengan tulisan Lanjutkan.
5. Langkah selanjutnya yang merupakan langkah terakhir adalah memilih template blog Anda. Template ini merupakan tampilan dari blog Anda. Silahkan pilih template yang sesuai dengan keinginan dan selera Anda. Pasti tidak sedikit diantara pembaca yang merasa kalau template yang ditawarkan disana kurang menarik atau yang lainnya. Tenang saja, template-template tersebut hanya sebagian kecil dari template blogger yang bisa Anda gunakan. Setelah ini kita akan belajar bagaimana mengganti template blogger yang sesuai dengan selera Anda atau memodifikasinya. So, jangan kemana-mana yach :). Pilih terlebih dahulu salah satu template tersebut. Kemudian klik tanda panah dengan tulisan Lanjutkan.
6. Selanjutnya akan muncul halaman pesan yang mengatakan bahwa Blog Anda sudah jadi!. Maka klik tanda panah yang bertuliskan Mulai Blogging.

Oke, akhirnya sekarang Anda sudah memiliki sebuah blog dengan alamat seperti yang Anda isikan pada langkah ke-4 diatas. Setelah mengklik tanda panah dengan tulisan Mulai Blogging, Anda akan masuk pada halaman pembuatan/penulisan postingan yang baru. Halaman itulah yang akan Anda gunakan jika ingin menulis konten yang ingin Anda tampilkan pada blog Anda. Tapi, sebelum kita melangkah kesana, ada baiknya kita kenali terlebih dahulu halaman administrator kita. Pada blogger, halaman administrator atau control panel ini biasa disebut sebagai Dasbor (Dashboard). Perhatikan link dengan tulisan Dasbor dibagian kanan atas.



Klik link tersebut. Anda akan masuk pada halaman dasbor blog Anda. Dari halaman inilah Anda bisa memulai mengelola blog yang telah Anda ciptakan serta mengedit profil Anda. Ada satu hal yang penting untuk Anda ketahui, yaitu Anda boleh memiliki banyak blog pada blogger dengan menggunakan hanya satu akun Google yang telah Anda ciptakan sebelumnya. Asyik bukan? Untuk melakukannya, Anda cukup mengklik link Buat Blog yang ada disebelah kanan, dan Anda akan kembali pada proses pembuatan blog baru.

Selamat mencoba...

»»  read more