Cara Memasang Auto Readmore Versi Baru

Untuk anda para blogger mungkin sudah tak asing lagi dengan tulisan Readmore, selengkapnya dan sejenisnya yang ada pada postingan. kali ini saya akan membahas tentang bagaimana caranya membuat Readmore versi terbaru pada postingan. Readmore versi terbaru kali ini memang agak berbeda dengan Readmore versi terdahulu.

Cara Memasang Shoutbox Di Blogger

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang 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.

Cara Memasang Widget Mp3 Player pada Blog

Widget Mp3 Player ini mungkin akan sangat bermanfaat sekali bagi anda yang gemar mendengarkan musik. khususnya bagi para blogger mania yang pecinta musik. mungkin orang- orang sudah terbiasa mendengarkan musik melalui radio, Hp, tape dan lain sebagainya. sekarang bagaimana bila kita mendengarkan musik tersebut melalui blog kita sendiri, bisa jadi juga dengan adanya widget mp3 player pada blog anda ini.

Template 3D Dengan Slide Show Ala Zigmag Primuz

Template ini hampir sama dengan template Transformers yang sebelumnya saya buat. tapi yang membedakan template ini adalah dengan adanya Slide show bergaya Zigmag Primuz, dimana kita bisa menampilkan sebagian postingan kita atau biasa disebut Post summary kedalam tampilan slide show tersebut. selain itu kita bisa menampilkan gambar yang ada dalam postingan kita.

Cara Membuat Image/Teks Slide Show Dengan Berbagai Efek marquee

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:

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

Untuk Image slideshow :

<marquee behavior="scroll" 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>

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

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="up" height="100px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

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

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

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="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 :

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

Contoh 4: Gambar atau teks berjalan dan berhenti dengan mouse

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" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" onmouseout="this.start()" onmouseover="this.stop()" 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>


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.

5 comments:

budikerenz September 25, 2010 at 11:04 PM  

thakns gan infonya, sangat membantu.

budikerenz September 25, 2010 at 11:05 PM  

thanks gan infonya, sangat membantu.

Unknown June 6, 2012 at 10:18 AM  

makasih gan infonya.. btw mau tanya nih gan.. d blog saya slide show klu ke "HOME" g bergerak2 tuh.. padahal ada 3 gambar d st.. cuman satu yg tampil..yg 2 nya g nongol2 gan.. mohon pencerahannya..

Anonymous,  July 5, 2012 at 6:02 AM  

bagus banget sob, happy blogging


ShoutMix chat widget

Free Wallpaper|Blog Tutorial|Tips & Trik|SEO|Widget

  © Free Blogger templates The Robotic by Kang Oemar templates 2009

Kembali Ke : ATAS