Gnews Indonesia

BUTTON OR SHOW SPOILER

Written By cindi on Kamis, 30 April 2009 | 06.44

Penataan Artikel di website atau blog adalah hal yang biasa - biasa saja, atau point yang kesekian untuk hal - hal yang penting dalam dunia blogging. Tergantung seni dari penulis itu sendiri. Karena menurutku menulis itu adalah Seni, dan seni perlu ada kaidah atau nilai tambah buat menambah manisnya gaya tulisan kita, biar terkesan lebih unik dan ngga membosankan pengunjung. Wah.. kaya penulis tenar aja nih. hehehe.. Dengan melihat fenomena setiap Artikel di website, artikel yang panjang sering membuat pengunjung bete alias ogah membaca semuanya dari A sampai Z. Paling bentar hanya paragraf Awal sama paragraf akhir. Bukannya ngga boleh dan melarang artikel yang panjang. Ibarat Anda naik mobil melakukan perjalanan panjang, kalo ngga ada istirahatnya pasti bete

Istirahat yang aku maksudkan dan di sinkronkan dalam sebuah artikel adalah sebagai tampilan sambil lalu, Siaran - siaran di TV aja ada iklannya kok, begitupun dengan menulis. Maksudnya apa ya..? Dalam menulis dapat kita selingi dengan tampilan - tampilan yang atraktif, misal penambahan gambar, efek suara, Efek Marquee, atau blogroll untuk tulisan artikel yang panjangnya 2 km. hehehe.. Di artikel ini, aku ingin membagikan trik menulis dengan efek tombol. Tombolnya bukan untuk suatu link, yang di klik trus terbuka halaman baru. Tombol disini fungsinya untuk memperindah dan menata artikel yang panjang. Apalagi kalo tulisan Anda penuh dengan sensasi yang mengundang rasa penasaran dari pengunjung, dengan menambahkan efek tombol yang ada di bawah ini, di jamin artikelnya lebih menarik dan tertata bagus.

A. KODE TOMBOL YANG PERTAMA

Efek ini ngga di lengkapi dengan kode untuk menutupnya kembali. Aku dapatkan dari sumbernya, memang sudah begini tampilannya. Jika ada yang ingin menambahkan kode HTML nya atau yang hebat utak atik Kode HTML silahkan di edit dan infokan ke aku ya..?

<div style="border: 1px inset #00000; padding: 5px;"><div style="text-align: center;"><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler."><span style="font-size:100%;color:#000000;"><b>"Kata Kata Tombolnya"</b></span></button></div><div id="spoiler" style="display: none;"><blockquote>
Kata Kata Atau Gambar Yang Mau Disembunyikan, letakkan disini...
</blockquote></div></div>

Stylenya dapat Anda edit sesuai selera Anda, Di posisi mana tombol ini, tampilan border, warna, perintah dalam tombolnya dan lain sebagaiya. Save aja kodenya biar Anda ngga bolak balik lagi ke blog ini. Hehehe.. Atau simpan kodenya di Notepad PC Anda. Contoh Tombolnya seperti di bawah ini.

B. KODE TOMBOL YANG KEDUA

Tombol ini selain di lengkapi dengan kode pembuka tombol dilengkapi juga dengan tombol penutupnya, lebih mantap kayaknya dari yang pertama. Kode HTML nya sebagai berikut...

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Teks atau Gambar letakkan disini
</span></div></div></div></div></div>

Wah.. lebih banyak kodenya ya..?? Dan lebih ribet kayaknya. Silahkan Anda edit sesuai selera Anda, wong kode ini bukan ciptaanku kok.. hehehe. Contoh tombolnya seperti di bawah ini.

Sumber dari kedua kode ini aku sudah lupa.. Benar - benar lupa. Mohon maaf bagi yang menciptakan tombol ini. Swear aku lupa linknya, cos kode ini langsung di save di notepad. Maaf ya.? Namanya juga berbagi. Aku juga ngga mengklaim bahwa kode ini lisensenya aku toh.? Harus diakui bahwa kode ciptaan Anda sangat berguna buat sobat - sobat yang membutuhkannya. HAPPY BLOGGING

06.44 | 0 komentar

ULEAD GIF ANIMATOR 3

Written By cindi on Minggu, 26 April 2009 | 08.46

Sebuah blog atau website tak lepas dari yang namanya banner. Bentuk banner ini pada prinsipnya menyajikan iklan dalam bentuk image ke halaman website. Banner biasanya dibuat dalam berbagai macam ukuran dan berformat ekstention Gif, Jpg, Png dengan menggunakan kode – kode JavaScript atau berupa objek multimedia dengan teknologi seperti Silverlight, Java, Shockwave, atau Flash. Kadang pula sering ditambahkan animasi dan suara untuk memaksimalkan tampilan banner di website. Ada rumor yang beredar, tak selamanya selebritis itu harus cantik dan tidak selamanya pula sebuah banner harus beranimasi. Tapi, guna meningkatkan hit sampai tingkat tertentu, gunakanlah banner beranimasi. Ngga percaya? Silahkan anda kunjungi portal – portal besar dan perhatikan bagaimana cara mereka memancing ”tikus-tikus digital” untuk masuk perangkap iklan mereka. Tentunya tak lepas dari peran sebuah banner beranimasi.

Nah, bagi yang senang modifikasi banner animasi, aku bagikan software Ulead Gif Animator 3 untuk membuat banner animasinya. Dijamin, Anda ngga harus duduk berjam – jam dalam memodifikasi banner. Cukup 5 menit saja, banner cantik dapat di modifikasi dan di selesaikan dengan sangat kreatif. Ulead Gif Animator 3 ngga hanya dapat memodifikasi 1 ukuran banner saja. Semua ukuran dapat di buat. Trus lebih menarik lagi ngga hanya banner saja, semua atribut dalam website atau blog dalam bentuk gambar dapat di buat dan di modifikasi dengan Ulead Gif Animator 3. Berikut cara sederhana menggunakan software ini.

Misal kita buat banner link download sederhana, link download berupa tulisan tanpa menggunakan gambar. Ukurannya disesuaikan dengan selera kita atau ukuran tempat banner pada blog kita. Yang pertama harus kita lakukan adalah mencari gambar atau tulisan dalam format ekstention gif. Kalau pun Anda ingin berkreasi dengan desain Anda sendiri tapi ngga paham menggunakan software photoshop atau software editing gambar lainnya, gunakan saja microsoft word, autoshape, word art dan paint. Ngga ada rotan akar pun jadi.

Contoh : kita buat format gambar untuk link download Ulead Gif Animator 3 secara manual tanpa menggunakan software. Dengan variasi warna merah, hitam dan putih. Setelah kita tentukan style, ukuran dan warnanya kita copy ke paint dan simpan dengan file ekstention gif.

Hasilnya seperti ini :

Contoh Gambar 1

Contoh gambar kedua kita desain seperti langkah pertama tadi dengan menggunakan variasi warna yang sama, hanya kita tambahkan kata dari word art agar sedikit beda. Namanya saja gambar bergerak atau animasi, jadi tiap desain rangkanya harus di bedakan, minimal kalo ngga ingin merubah atau menambah gambarnya, warnanya saja yang di rubah. Misal kita tambahkan kata“KLIK DISINI”. Copy ke paint, simpan dalam format gif dan hasilnya seperti ini :

Contoh Gambar 2

Langkah selanjutnya kita buka sortware Ulead Gif Animator 3. Pada saat membukanya, akan ada jendela yang terbuka seperti ini

Klik blank animation atau tombol closenya. Atau beri centang di "Do not show this dialog box next time". Dengan kata lain abaikan saja halaman tersebut. Lalu pada halaman stand by Ulead Gif Animator 3 ada tombol – tombol editing seperti gambar berikut

Kita ambil langkah pintasnya ya..? Yang di tunjuk dengan anak panah diatas adalah tempat kita untuk mengupload gambar yang telah kita edit sebelumnya. Upload kedua gambar tersebut atau semuanya jika kita membuat gambar lebih dari dua rangka. Gambarnya akan tersusun dalam ulead gif animasi sesuai urutan upload gambar yang telah kita lakukan.

Jika kursor kita klik ke baris pertama, 0:Global information, kita dapat merubah background color dan logical screen. Kalau ukuran kedua gambar sudah sama waktu pertama kita mengeditnya, kita centang saja kolom Automaticnya.
Lanjut kita klik ke baris, 1:Gambar 1.GIF. Kita dapat menentukan delay (1/100th of a second), yakni lamanya waktu yang di butuhkan oleh masing – masing gambar untuk play. Misal kita beri nilai 50 untuk masing – masing gambar. Jadi delay waktu yang di tentukan pada Gambar 1 ditentukan sama juga pada Gambar 2.

Sebelum kita save pada langkah terakhir kita preview terlebih dahulu pada tombol Start Preview.

Kalo sudah di rasa pas desainnya, pilih Save. Jadi deh Banner animasi sederhana modifikasi Anda sendiri. Hasilnya seperti pada gambar di bawah ini. Menarik ngga.? Ngga harus berjam – jam memodifikasi banner Anda. Ngga perlu punya keahlian dalam membuat gambar dari photoshop. Silahkan di klik aja tombolnya untuk mendownload software Ulead Gif Animator 3, dan selamat berkreasi mendesain banner animasi Anda.

08.46 | 0 komentar

GALERY BLOGGER AWARDS

Written By cindi on Jumat, 24 April 2009 | 19.12

Kemarin sudah mereview Link - Link Partner BLOG ANAK BANGSA, kali ini hal yang sama pun aku lakukan. Mereview kembali perjalanan Awards blog ini dari Sobat dan untuk Sobat.. Wah, jadi kayak mottonya orang senayan nih, dari rakyat untuk rakyat. Review ini di buat dengan maksud menyemangati perjalanan setahun aku dalam ngeblog.. xixixi.. kayak yang udah T.O.P aja. Ngga ada salahnya deh.. biar koleksi awardsku akan terkenang tuk selama-lamanya. Oh iya, Setahun aku dalam ngeblog, bukan di BLOG ANAK BANGSA ini. Intip aja artikelku yang pertama di sini. Sebuah blog yang aku buat untuk mengarsipkan segala kegiatan yang ada di kantorku. Smoga domainnya bisa cepat di ganti deh.. Amin.

Langsung ke Review nya yah..? Nih Awards dari sobat semua, JIka ada yang merasa pernah memberikan, dan ngga sempat atau aku lupa mengambilnya, silahkan konfirmasi di sini. Nanti aku update. Dan selanjutnya awards - awards pemberian sobat semua, akan terposting dihalaman ini. Awards paling atas adalah awards yang terbaru, jadi cara melihatnya dari bawah ke atas.

Silahkan Buka Lemari Awardsnya, Jangan lupa tutup kembali ya..?