11 Desember 2010

Cara Menambah Widget HTML, CSS dan Javascript di Blog

Pemberian judul seperti di atas dimaksudkan untuk menegaskan bahwa dalam panduan blogger ini sekaligus mengungkap tentang cara menambahkan widget yang disediakan blogspot dan sekaligus bagaimana melalui penambahan widget ini kita menyimpan kode html, kode css dan javascript baru guna menambah fungsi dan kelengkapan blog seperti misalnya untuk membuat menu, image gallery, cursor animasi, Javascript scroll to top controll, colorfull scroller box, document text sizer, zoom image, javascript atau css tooltip, pasang jam digital atau analog, highlight text/code serta beberapa kelengkapan blog lainnya.

Penambahan widget di blogger atau yang dikenal juga sebagai blogspot dilakukan melalui halaman elemen blog yang disebut sebagai Page Element/Elemen Laman. Untuk sampai di halaman tersebut tentunya kita harus login terlebih dahulu di blogger. Oke, untuk mempercepat tutorial ini kita langsung lakukan langkah-langkah penambahan widget.

Cara menambah widget, kode HTML, kode CSS dan Javascript di blogspot:
1. Login ke blogger: Gunakan User Name/Alamat Email dan Password/Sandi.

2. Dasboard/Dasbor: Setelah login dilakukan, sobat akan memasuki halaman Dasboard/Dasbor yang di dalamnya terdapat beberapa link yang disediakan untuk menuju beberapa halaman pengaturan blog. KLIK link Layout/Tata Letak. Tunggu beberapa saat hingga halaman baru (Tata Letak/Rancangan) terbuka.

3. Layout/Tata Letak/Rancangan: Dari link Tata Letak/Rancangan ini sampeyan akan di bawa langsung ke Page Element/Elemen Laman. Ada tiga buah link pada Tata Letak
  • Page Element/Elemen Laman: Ditandai dengan adanya beberapa blok (kotak/kolom) penyusun blog yang terdiri dari Header (Atas), Main (tengah), Footer (bawah) dan Sidebar yang terletak di samping kanan, samping kiri atau bisa juga di samping kanan dan di samping kiri. Jumlah kolom sidebar tergantung desain blog. Ada yang menggunakan satu sidebar dan ada yang menggunakan lebih dari satu sidebar. Melalui blok/kolom yang bergaris putus-putus dengan tulisan Add Gadget/Tambah Gadget, pengguna blog akan dibawa ke halaman penambahan widget.
  • Edit HTML: Untuk melakukan penambahan atau pengurangan Kode HTML (termasuk kode css) dan Javascript (merubah desain-modifikasi Blog).
  • Perancang Template Baru: Penggunaan template baru blogger yang disebut sebagai blogger dalam konsep.

4. Page Element/Element Laman: KLIK 'Add Gadget/Tambah Gadget'. Tunggu beberapa saat hingga window baru yang bertitle 'Tambahkan Gadget' terlihat sempurna.

5. Tambahkan Gadget: Pada window baru ini sobat mempunyai banyak pilihan penambahan widget.
  • Widget Bawaan Blogger: Tinggal pilih widget yang hendak ditambahkan dengan cara KLIK pada gambarnya atau teks yang menyertai gambar (di sebelah kanan gambar). Beberapa Widget yang tersedia diantaranya : Laman (Halaman Baru yang disediakan blogger), Pengikut (Follower), Kotak Penelusuran (Search Box), HTML/Javascript, Teks (Text), Gambar, Tampilan Slide (Image Slider), Baris Video, Polling, Daftar Blog, Daftar Link, Daftar, Feed, Newsreel, Label, Tautan Berlangganan, Logo, Profile, Arsip Blog (Archive) dan Header Halaman.
  • Widget HTML/Javascript: Dari sekian banyak penambahan widget, hanya melalui HTML/Javascript inilah kita bisa menambahkan kode html,css dan javascript yang berasal dari luar. Seluruh widget bawaan blogger merupakan kode yang tidak bisa dirubah/modifikasi melalui box di penambahan widget. Bila dinginkan beberapa perubahan, untuk melakukannya hanya bisa dilakukan lewat halaman 'Edit HTML' dan itupun hanya beberapa bagian kode saja.

6. Penambahan Kode Baru: Ketika sobat ingin menambahkan kode html, css atau javascript baru, silahkan KLIK 'HTML/Javascript'. Tunggu hingga terlihat box penambahan widget kode html/javascript dengan tulisan Mengkonfigurasi HTML/JavaScript.

7. Paste: Masukkan kode html dan javascript yang ingin ditambahkan ke dalamnya. Beri nama penambahan widget tersebut (bagian atas). Karena tampaknya untuk saat ini setiap penambahan widget harus diberi nama, apabila sampeyan mau membuat judul/nama widget tak terlihat di blog, silahkan tulis namanya dalam bentuk kode html seperti misalnya:  . Dengan kode tersebut nama widget tak akan terlihat sama sekali sehingga tidak mengganggu penampilan blog.

8. SAVE/Simpan: KLIK 'SAVE/Simpan', kemudian lihat hasilnya dengan membuka blog.

4 komentar:

  1. Oke...
    sselamat nge-blog dan artikel yang bagus juga nih.

    BalasHapus
  2. thanks gan, dah mampir di blog saya. happy blogger yah.

    BalasHapus
  3. Salam kenal gan....newbee bru mw mempelajari cara bloger.....masih bingung untuk mendesain blog nih....klo bersedia mau nih dikasih tau cara2 nya gan....hehehe....

    Saya pengen bikin diblog saya seperti punya agan, cara buat halaman2 (Home-Profil-Firmware-Trick Jumper-Trick Blogging-Tukeran Link)sperti punya agan yg diatas tuh gmn ya gan....apa bawaan dari template atau edit sendiri ya....

    Thanx,

    BalasHapus
  4. @ berkah-cellular...
    sebetulnya sy jg kurang faham utak-atik tampilan blog gan, semua tampilan blog ini 100% murni bikin sendiri, silahkan search di google gan, banyak situs tutorial blogging di sana, atau bs berkunjung ke blogernas, dsb.

    BalasHapus

Buat para pengunjung blog SHARE-reparasi phonsel, jika tak letih tangan, silahkan ketikkan komentar atau memberi kritik dan saran tentang artikel di atas..!! saran dan kritik dari sobat bisa menjadi masukan bagi saya agar blog ini lebih baik lagi kedepannya. (Tapi jangan yang bersifat 'SPAM' yah...!!!). Komentar sobat akan muncul setelah melalui proses moderasi.