CARA MENDESAIN BLOG

                                    CARA MENDESAIN BLOG AGAR TAMPAK KEREN

       iNI tentang pengalaman saya waktu membuat blog... ada satu persyaratan untuk melihat postingan ini jangan hanya mengcopypaste/copas


Yang pertama 

1. Cara Membuat Teks Bergerak di Blog

   Cara Membuat Teks Bergerak di Blog – Cara menjadikan teks di blog bergerak atau cara membuat teks marquee.

   

   Cara membuat teks bergerak merupakan salah satu langkah desain blog yang biasanya dilakukan untuk tek-teks atau kalimat-kalimat yang penting, misalnya ucapan selamat datang, iklan atau judul bagian-bagian tertentu dari blog. Baca juga artikel untuk mempercantik dan mendesain blog berikut: cara membuat judul widget berada di tengah sidebar. Oke, kembali ke permasalahan, Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini ade mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

   
   Note: yang akan saya bahas ini merupakan tulisan berjalan biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.
   
   berikut cara menjadikan teks di blog bergerak:

   1. Login ke Blogger.
   2. Klik Tata Letak.
   3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget.
   4. Lalu pilih HTML/JavaScript.
   5. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini:

   
   1. Teks berjalan dari kanan ke kiri
   
   Kode:
   

   <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

   Hasil:
   
   Contoh Tulisan Berjalan
   
   2. Teks berjalan dari kiri ke kanan
   
   Kode:
   

   <marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

   Hasil:
   
   Contoh Tulisan Berjalan 
   
   3. Teks berjalan bolak balik
   
   Kode:
   

   <marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

   Hasil:
    Contoh Tulisan Berjalan 
   
   4. Teks berjalan dari atas ke bawah
   
   Kode:
   

   <marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

   
   Hasil:
   
    Contoh Tulisan Berjalan 5. Teks berjalan dari bawah ke atas
   
   Kode: 
   

   <marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

   
   Hasil:
   
   Contoh Tulisan Berjalan6. Teks berjalan mondar-mandir
   
   Kode:
   

   <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

   
   Hasil:
   
   Contoh Tulisan Berjalan7. Teks berjalan zig-zag nembus
   
   Kode:
   

   <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

   
   Hasil:
   
   
   
   
   
   
   
   
   
   
   
   
   
   Contoh Tulisan Berjalan 8. Teks berjalan zig-zag mantul
   
   Kode: 
   

   <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

   Hasil:
   
   
   
   
   
   
   
   
   
   
   
   
   Contoh Tulisan Berjalan Langkah Selanjutnya adalah mengganti tulisan
   

   Contoh Tulisan Berjalan

   dengan tulisan atau kata-kata yang anda inginkan.
   
   Ket :
   # direction="left/right/up/down" --> Mengatur arah gerakan teks.
   
   # scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
   
   # behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
   ~> Scroll --> teks bergerak berputar
   ~> Slide--> teks bergerak sekali lalu berhenti
   ~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
   
   # Fungsi dari :
   

   <center> ............. </center>

   
   

   Cara Membuat Tulisan Berjalan (Marquee)

   

   Bagaimana cara membuat tulisan berjalan? Tulisan atau teks berjalan atau running textini biasa juga kita sebut marquee, karena untuk membuatnya menggunakan kode marquee. Tulisan ini bisa membuat blog anda terlihat lebih menarik bagi pengunjung.

   
   

   Untuk membuat tulisan berjalan atau Marquee ini sebenarnya sangat mudah. Kali ini kita akan mencoba membuat beberapa jenis marquee, agar lebih banyak variasi yang bisa anda pilih. Terlebih dulu kita akan belajar membuat kodenya, lalu belajar cara memasangnya pada blog....

   
   Kode dasar untuk membuat marquee atau teks berjalan adalah....
   

    <marquee>TULISAN YANG AKAN BERGERAK</marquee>

   
   Kode di atas akan terlihat seperti ini:
   TULISAN YANG AKAN BERGERAK
    
   

   Tapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut....

   
   kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
   Contoh kode marquee:
   

   <marquee scrolldelay="500">RUNNING TEKS DELAY 0,5 DETIK</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   RUNNING TEKS DELAY 0,5 DETIK
   
   kode loop="angka|-1|infinite" digunakan untuk mengatur pengulangan atau repetisi dari marquee
   Contoh:
   

   <marquee loop="3">MARQUEE BEROTASI 3 KALI SAJA</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   MARQUEE BEROTASI 3 KALI SAJA
   Keterangan: Setelah 3 kali teks akan hilang.
   
   kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
   Contoh kode:
   

   <marquee width="50%">MARQUEE LEBAR 50 PERSEN</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   MARQUEE LEBAR 50 PERSEN
   
   kode bgcolor="warna" digunakan untuk memberikan warna latar pada marquee jika diperlukan
   Contoh kode marquee:
   

   <marquee bgcolor="yellow">RUNNING TEXT LATAR KUNING</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   RUNNING TEXT LATAR KUNING
   
   
   kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
   Contoh kode:
   

   <marquee title="BISA TERBACA PESANNYA">TEKS BERJALAN DENGAN PESAN</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   TEKS BERJALAN DENGAN PESAN
   Keterangan: Taruh kursor mouse pada jalur dan bukan pada teks untuk membaca pesan
   
   kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
   Contoh kode:
   

   <marquee scrollamount="14">MARQUEE SPEED 14!!!</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   MARQUEE SPEED 14!!!
   
   kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan running text
   Contoh kode:
   

   <marquee direction="right">MARQUEE BERGERAK KE KANAN</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   MARQUEE BERGERAK KE KANAN
   
   kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan
   Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
   Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
   Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
   Contoh kode:
   

   <marquee behavior="alternate">MARQUEE BERGERAK BOLAK-BALIK</marquee>

   Hasilnya akan terlihat seperti di bawah ini:
   MARQUEE BERGERAK BOLAK-BALIK
   

   Sekarang kita akan coba membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun dan oleh karena itu kita perlu menambah kode height untuk membuat ruang pergerakan teks;
   Contoh kode:
   

   <marquee direction="down" height="100">MARQUEE BERGERAK KE BAWAH</marquee>

   Hasilnya...
   MARQUEE BERGERAK KE BAWAH
   
   Lalu bagaimana caranya membuat tulisan ini berhenti jika dilintasi kursor mouse?
   Mudah, silahkan tambahkan kode
   

   onmouseover="this.stop()" onmouseout="this.start()"

   Contoh kodenya seperti berikut:
   

   <marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">MARQUEE BERGERAK BOLAK-BALIK</marquee>

   Tampilan akhir akan terlihat seperti berikut....
   MARQUEE BERGERAK BOLAK-BALIK
   Keterangan: Silahkan lintaskan kursor pada jalur ataupun teks untuk menghentikan pergerakan
   
   Bisakah Marquee diberi link? 
   Tentu saja, sebagai contoh lihat kode berikut:
   <marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
   <a href="http://trikmudahseo.blogspot.com/2012/09/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
   </marquee>  
   Tampilan akhir akan terlihat seperti berikut....
   
   CARA MEMBUAT TULISAN BERJALAN (MARQUEE)
   
   Demikianlah berbagai ragam cara untuk membuat teks berjalan. Mudah-mudahan ini bisa menjadi alternatif bagi anda dalam menghias blog menjadi lebih menarik. Silahkan bereksperimen untuk meramu kode-kode di atas.
   
   Lalu bagaimana cara memasang kode-kode ini?
   Saudara bisa memasang kode yang sudah dibuat pada dua tempat, yaitu widget dan artikel:
   Untuk memasang pada widget silahkan ikuti langkah berikut:
   

   • Buka menu Tata Letak / Layout
   • Klik Tambah Gadget
   • Pilih gadget HTML/JAVASCRIPT
   • Masukkan kode yang sudah dibuat
   • Simpan perubahan pada gadget

   Untuk memasang pada artikel ikuti langkah berikut:
   

   • Saat menulis artikel masuk ke mode HTML
   • masukkan kode HTML marquee saat berada di mode ini
   • Kembali ke mode Compose untuk melihat apakah posisi teks sudah benar
   • Klik PRATINJAU untuk melihat versi web aktif

   Ok, sekarang anda sudah tahu cara membuat dan memasangnya. Berarti saudara sudah bisa bereksperimen sendiri untuk menghias blog menjadi lebih menarik.... Jadi sekian dulu artikelnya, terima kasih sudah mampir...

CARA MENDESAIN BLOG 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share 'CARA MENDESAIN BLOG' On ...

Anda baru saja membaca artikel yang berkategori dengan judul CARA MENDESAIN BLOG. Anda bisa bookmark halaman ini dengan URL http://anak-gaul-indonesia.blogspot.com/2013/02/cara-mendesain-blog.html. Terima kasih!

Ditulis oleh: Unknown - Saturday, 16 February 2013