Just Share All For Free

Cara Membuat Image Slide Show Dengan Bermacam Efek

Labels: Blog, Gadget, Tips N Trik, Tutorial

Pernahkah anda mengunjungi suatu blog atau website yang pada halaman Blog ataupun website mereka terdapat tampilan image slide show. salah satu contohnya bisa anda lihat image slide show yang ada pada bagian atas blog saya ini.

Sekarang pertanyaannya adalah bagaimana caranya kita membuat image slideshow tersebut?

Untuk membuat image slideshow tersebut caranya tidaklah begitu susah, pada postingan kali ini saya akan menjelaskan bagaimana cara kita untuk membuatnya. tapi sebelum ke inti pembuatannya, ada baiknya bila kita memahaminya terlebih dulu tentang efek marquee.

Marquee adalah kode HTML yang befungsi untuk membuat object seperti gambar ataupun teks menja bergerak atau berjalan. Ada beberapa efek marquee yang bisa kita buat seperti: gambar/teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai ke tahap pembuatan, mari kita pelajari dulu fungsi dari masing-masing atributes tersebut.

Beberapa attributes yang sering digunakan dalam marquee yaitu sebagai berikut :

1. Behavior : yaitu untuk mengatur gaya gerakan pada gambar taupun teks. biasanya ada 3 gaya gerakan yang bisa digunakan yaitu :

Alternate : yaitu untuk menggerakan gambar atau teks secara bolak-balik
Slide : yaitu untuk menggerakan gambar atau teks berjalan ke satu arah sekali saja
Scroll : yaitu untuk menggerakan gambar atau teks ke satu arah secara kontinu

2. Direction : yaitu untuk mengatur arah gerakan gambar ataupun teks.biasanya ada 4 arah gerakan yang bisa kita digunakan yaitu :

Up : Untuk menggerakan gambar atau teks bergerak keatas
Down : Untuk menggerakan gambar atau teks bergerak kebawah
Left : Untuk menggerakan gambar atau teks bergerak kekiri
Right : Untuk menggerakan gambar atau teks bergerak kekanan

4. Face : Untuk mengatur jenis font / teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda.

5. Width : Untuk mengatur ukuran panjang atau Lebar ruangan gambar/teks dalam satuan pixel.

6. Height : Untuk mengatur ukuran Tinggi ruangan gambar/teks dalam satuan pixel

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background anda gunakan"transparent"

8. Scrolldelay : Untuk mengatur ukuran waktu tunda gerakan dalam satuan per mili detik

9. Scrollamount : Untuk mengatur ukuran kecepatan gerakan dalam satuan pixel.

10. Loop : untuk mengatur ukuran jumlah pengulangan.

Itulah beberapa attributes yang sering digunakan untuk membuat efek marquee atau untuk membuat gambar atau teks berjalan. Berikut ini saya akan memberikan beberapa contoh efek dari marquee:

Contoh 1: Gambar atau teks berjalan bolak-balik secara horizontal

Welcome To My Blog

Kodenya adalah :
Untuk Teks Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">
<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" scrollamount="5" scrolldelay="10" transparent="" width="300px">
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Catatan : Semua teks yang dicetak tebal dengan warna merah di atas bisa anda ganti sesuai dengan yang anda inginkan, dan untuk menambah gambar pada image slide show anda cukup mengcopy kode
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /> dan pastekan sebelum kode </marquee>.

Masukan Link anda disini : yaitu Link yang anda inginkan jadi ketika gambar itu di klik akan terbuka sebuah alamat yang dituju, misalnya link posting anda,blog atau yang lainnya. kalau dirasa tidak perlu, tidak dirubah atau di hapus juga tidak apa-apa.

Masukan Link gambar anda disini: yaitu Link gambar dari image hosting anda.

Contoh 2: Gambar atau teks berjalan kekanan secara continue

Welcome To My Blog

Kodenya adalah :

Untuk Teks Slideshow:

<marquee behavior="scroll" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

Contoh 3: Gambar atau teks berjalan bolak-balik secara vertikal:

Welcome To My Blog

Kodenya adalah :

Untuk Teks Slideshow:

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

Contoh 4: Gambar atau teks berjalan dengan efek bounce atau zig zag

Welcome To My Blog

Kodenya adalah :

Untuk Teks Slideshow:

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px"><marquee behavior="alternate" direction="left" scrollamount="5" scrolldelay="10">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

Contoh 4: Gambar atau teks berjalan dan berhenti dengan mouse

Welcome To My Blog

Kodenya adalah :

Untuk Teks Slideshow:

<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

Gambar ataupun teks pada slideshow diatas akan berhenti bila mouse anda digerakan tepat diatasnya dan akan berjalan kembali bila mouse anda digerakan menjauhi slideshow tersebut.

Ok, mungkin hanya beberapa contoh saja yang bisa saya berikan pada postingan kali ini. silahkan anda paraktekkan contoh yang saya berikan tersebut pada gadget HTML page element anda. mohon maaf bila ada kekurangan dalam postingan saya kali ini. semoga bermanfaat dan salam blogger mania.

Membuat kotak teks/text area dengan fasilitas tombol Select All

Labels: Blog, Tips N Trik, Tutorial

Mungkin anda pernah berkunjung ke suatu blog ataupun website dimana pada halaman blog ataupun dalam postingan mereka terdapat sebuah text area dengan fasilitas select all. Contohnya seperti pada gambar dibawah ini.

Sekarang pertanyaannya adalah bagaimana kita bisa membuat kotak area seperti itu, untuk membuat kotak area dengan fasilitas select all tersebut caranya adalah seperti keterangan berikut ini.

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat sebuah kotak ataupun bidang dimana dalam kotak tersebut bisa kita masukan beberapa text yang kita inginkan, contohnya seperti dibawah ini:

Kotak ini biasa kita gunakan untuk mengisi beberapa kata, kode-kode pada postingan maupun untuk membuat kotak link exchange. bagi anda yang ingin membuat sebuah kotak seperti tersebut caranya sangatlah mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog ataupun postingan anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:3px">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></div>

Keterangan :

- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.

- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.

- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Membuat kotak teks/text area dengan fasilitas tombol Select All

Tadi yang kita bahas adlah tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area tersebut, sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut. Contohnya seperti dibawah ini, coba anda tekan tombol select all yang ada dibawah ini.maka semua teks yang ada dalam kotak tersebut akan terhighlight atau terblok semua dengan mudah.

Untuk membuat teks area dengan tombol select all seperti diatas caranyan adalah seperti berikut, copy semua kode dibawah ini ke blog ataupun postingan anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: Center;"><textarea style="padding: 3px; Width: 300px; Height: 50px;" name="txt">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></p></form>

Keterangan:
- Teks yang dicetak tebal dan berwarna merah adalah teks yang muncul pada tombol. Silahkan anda bisa menggantinya dengan nama lain, misalnya pilih semua, copy semua ataupun yang lainnya.
- Teks berwarna biru adalah teks muncul didalam kotak. Silahkan anda ganti dengan teks ataupun kode yang ingin anda tampilkan dalm kotak tersebut.
- Teks yang di cetak tebal dan berwarna hitam seperti Center, Width dan Height. silahkan anda ganti juga sesuai keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan fasilitas tombol select all ini. semoga bermanfaat dan salam blogger mania.

Cara Membuat Widget Shoutbox di Blogger

Labels: Blog, Gadget, Tips N Trik, Widget

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawa ini.

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox dengan style yang anda pilih tadi pada blog anda

5. Untuk memasang shoutbox pada blog anda yaitu dengan cara, klik Go to my control panel now” setelah itu pada bagian menu Quick Start anda klik Get Codes untuk mendapatkan code widgetnya. seperti pada gambar seperti dibawah ini.

6. Setelah anda klik Get codes kemudian anda pilih Place Shoutbox on webpage. Terus Copy semua kode HTML yang ada dalam kotak Generated Codes.

7. Setelah anda copy semua kode tersebut anda bisa pastekan dulu kode tersebut untuk sementara ke notepad, microsoft word dsb.

8. Login ke blogger terus klik Layout dan klik page element untuk menambah widget baru pada blog anda dengan cara klik add a Gadget terus anda pilih yang HTML/JavaScript. Seperti pada gambar dibawah ini :

9. Setelah itu anda paste kan semua kode shoutbox yang anda dapatkan sebelumnya seperti contoh pada gambar dibawah ini.

10. Klik save dan setelah itu maka proses pembuatan widget shoutbox anda telah selesai. Untuk melihat hasilnya anda tinggal klik view blog. Gampang kan hehehe….

Ok Cukup sekian dulu postingan saya tentang cara membuat ataupun memasang shoutbox di blogger kali ini. Semoga bermanfaat dan salam blogger mania.

Panduan Cara Memasang Donasi Paypal Button di Blog

Labels: Blog, Gadget, Tips N Trik, Tutorial

Panduan Cara Memasang Donasi Paypal Button di Blog

Pada posting kali ini saya akan menjelaskan bagaimana caranya memasang ataupun menambah Button Donasi Paypal pada halaman Blog. Bila anda telah memiliki account paypal maka anda sudah dapat memasukan atau menambahkan Button Donasi Paypal ke halaman Blog anda. jika anda belum memiliki account paypal maka anda harus daftar terlebih dulu. untuk mendaftar dan memiliki account paypal anda bisa klik disini. cara untuk menambahkan Button Donasi Paypal adalah sebagai berikut :

1. Login ke paypal dengan memasukan Email paypal anda.

2. Setelah itu anda klik 'Merchant Services' tab Pada bagian atas halaman seperti pada gambar dibawah berikut :

3.Gerakan mouse anda dan klik "Donation" pada tampilan menu disebelah kanan

4. Setelah anda klik donation maka akan melihat menu drop down yang isinya terdapat beberapa pilihan seperti product, servis, subcription & recurring billing, donations, dan gift certificates. anda cukup pilih saja yang donations.

5. Setelah itu anda klik create Button pada bagian bawah halaman.

6. Setelah anda klik create Button maka akan tampil halaman seperti pada gambar dibawah ini. dan yang anda harus lakukan yaitu cukup mengcopy semua code HTML nya.