Cara Membuat Efek Teks Tulisan Berjalan (Marquee) di Blog

Cara Membuat Efek Teks Tulisan Berjalan (Marquee) di Blog - Artikel ini merupakan panduan dasar dalam memberikan pernak-pernik untuk sebuah blog. Teks tulisan berjalan termasuk beberapa pernak pernik yang sering digunakan untuk memberikan tampilan beda untuk sebuah teks atau tulisan bahkan artikel pun bisa dibuat berjalan. Teks tulisan berjalan di blog biasanya disebut dengan Marquee. Jika diartikan dengan fungsinya, marquee tidak memiliki keterkaitan karena arti dari marquee sendiri adalah Tenda Besar dan bukan teks tulisan berjalan. Mungkin marquee merupakan bahasa pemograman yang memiliki arti teks tulisan berjalan, tapi entahlah yang penting yang saya tahu marquee memiliki fungsi agar teks tulisan didalam blog memiliki efek bergerak atau berjalan.

Teks tulisan berjalan atau marquee biasanya ditempatkan dibagian atas atau bawah blog dan sedikit sekali yang memasangnya dibagian sidebar atau bagian kanan kiri blog. Membuat tulisan teks berjalan dengan fungsi marquee ini memiliki beberapa efek kriteria atau karakteristik dalam tampilannya. Seperti efek berjalan secara umum, berjalan dengan efek berkedip, dan berjalan dengan efek berhenti jika disorot dengan kursor. Beberapa efek tersebut bisa anda lihat seperti Demo berikut ini

Tek Tulisan Berjalan Dari Kanan Ke Kiri
Tek Tulisan Berjalan Dari Kiri Ke Kanan
Tek Tulisan Berjalan Dari Kiri Ke Kanan Berkedip

Lalu bagiamana cara membuat tek tulisan berjalan di blog dengan beberapa efek selain seperti pada Demo yang saya pasang diatas? Untuk membuat efek marquee pada tulisan teks di blog, silahkan pilih beberapa efek teks tulisan berjalan berikut ini

Kode :

<marquee direction="left" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Kanan Ke Kiri</marquee>

Kode :

<marquee direction="right" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Kiri Ke Kanan</marquee>

Kode :

<marquee direction="right" scrollamount="2" align="center"><blink>Teks Tulisan Berjalan Dari Kiri Ke Kanan Berkedip</blink></marquee>

Kode :

<marquee direction="left" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Kiri Ke Kanan</marquee>

Kode :

<marquee direction="right" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Kanan Ke Kiri</marquee>

Kode :

<marquee direction="down" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Atas Ke Bawah</marquee>

Kode :

<marquee direction="up" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Bawah Ke Atas</marquee>

Kode :

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Atas Ke Bawah</marquee>

Kode :

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

Kode :

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

Kode :

<marquee onmouseover="this.stop()" onmouseout="this.start() " scrollamount="2" direction="up" width="100%" height="100" align="center">Teks Tulisan Berjalan Berhenti Jika Disorot oleh Kursor Mouse</marquee>

Kode :

<marquee onmouseover="this.stop()" onmouseout="this.start() " scrollamount="2" direction="right" width="100%" height="100" align="center"><a href="/">Teks Tulisan Berjalan Dengan Link Url</a></marquee>

Keterangan :
Direction : Mengatur arah gerakan teks (left, right, up dan down)
Scrollmount : Mengatur kecepatan gerakan. semakin tinggin nilainya semakin cepat
Align : Mengatur posisi teks (left, right, center, justify)
Behavior : Mengatur gerakan teks (scroll, slide, alternate)

Setelah anda memilih atau membuat efek tek tulisan sendiri, untuk memasangnya didalam blog, silahkan salin saya kode-kode yang telah saya tulisa diatas.
Anda bisa memasang efek teks tulisan berjalan tersebut dimanapun yang anda inginkan termasuk didalam postingan atau didalam artikel blog anda. Suka-suka andalah mau dipasang dimana, okey? Jika ada pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini Cara Membuat Teks Tulisan Berjalan (Marquee) di Blog

Read More..

Cara Membuat Animasi sasuke berlari Di Bagian Bawah Blog adalah sebagai berikut ini:

Cara Membuat Animasi sasuke berlari Di Bagian Bawah Blog adalah sebagai berikut ini:

1. Silahkan anda>> "Masuk atau Login" ke blogger.com menggunakan akun anda.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/Javascript. Jangan di beri judul

.

3. Kemudian silahkan anda masukkan Kode Script di bawah ini ke dalam kotak Konten HTML/Javascript.

       Animasi Sasuke Berlari

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://th217.photobucket.com/albums/cc54/ivandra79/Naruto/th_SASUKE_GIF.gif" style="cursor: pointer;" /></a></marquee></div>

KETERANGAN:.

• Kode berwarna BIRU adalah Kode Alamat URL Image atau gambar. Bisa anda ganti dengan Alamat URL Image atau gambar milik anda sendiri.

• Kode warna PINK (direction="right") adalah Kode Marquee berjalan dari kiri ke kanan. Silahkan di hapus, Jika anda ingin merubah arah dari kanan ke kiri.

• Kode warna MERAH (scrollamount="7") adalah Kode Marquee Kecepatan Berjalan atau melintas. Silahkan anda atur nilainya sesuai dengan keinginananda

Read More..

Cara Membuat Animasi Cursor Di blog

Bosen dengan tampilan cursor biasa di website atau di blogger ini disini saya berbagi cara membuat memasang animasi cursor keren buat percantik blogger atau website anda ada banyak macam-macam animasi cursor untuk diblog saya tinggal anda pilih sesuai selera anda atau anda sukai langsung saja caranya  :

Cara untuk tampilan blogger lama :
1.Login ke blogger anda
2. Pilih Rancangan
3.klik Tambah Gadget Html/JavaScript
4.Copy & paste kan kode html mouse yang diinginkan di bawah ini
5.Terakhir Simpan 

Cara untuk tampilan blogger baru :
1.Login ke blogger anda
2. Pilih Laman
3.Pilih Tata Letak
4.klik Tambah Gadget Html/JavaScript
5.Copy & paste kan kode html mouse yang diinginkan di bawah ini
6.Terakhir Simpan 

Spongebob

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1107.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="SpongeBob SquarePants"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="SpongeBob SquarePants" style="position:absolute; top: 0px; right: 0px;" /></a> 

Mr.Crab

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1104.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="SpongeBob SquarePants Mr. Krabs"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="SpongeBob SquarePants Mr. Krabs" style="position:absolute; top: 0px; right: 0px;" /></a>

Bird

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-9/peo1020.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Catching Fire"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Catching Fire" style="position:absolute; top: 0px; right: 0px;" /></a>

Mouse Pelangi

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur18.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur18.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Wavy Tail"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Wavy Tail" style="position:absolute; top: 0px; right: 0px;" /></a> 

Cartoon

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-15/gam1440.ani), url(http://cur.cursors-4u.net/games/gam-15/gam1440.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Toad Jumping Up and Down"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Toad Jumping Up and Down" style="position:absolute; top: 0px; right: 0px;" /></a>

Fire Guitar

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-15/gam1440.ani), url(http://cur.cursors-4u.net/games/gam-15/gam1440.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Toad Jumping Up and Down"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Toad Jumping Up and Down" style="position:absolute; top: 0px; right: 0px;" /></a>

Love

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-6/hol512.ani), url(http://cur.cursors-4u.net/holidays/hol-6/hol512.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Valentine's Day Pumping Heart"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Valentine's Day Pumping Heart" style="position:absolute; top: 0px; right: 0px;" /></a>

Peace

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-8/sym714.ani), url(http://cur.cursors-4u.net/symbols/sym-8/sym714.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Different Types Of Peace Symbol"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Different Types Of Peace Symbol" style="position:absolute; top: 0px; right: 0px;" /></a>

Angel

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-9/too917.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Cute Tinkerbell"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Tinkerbell" style="position:absolute; top: 0px; right: 0px;" /></a>

Icon Moon

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur945.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur945.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Batman Begins - Diagonal Resize 2"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins - Diagonal Resize 2" style="position:absolute; top: 0px; right: 0px;" /></a>

vegeta dragon ball

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-7/ani634.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Vegeta - Dragonball Z 2"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Vegeta - Dragonball Z 2" style="position:absolute; top: 0px; right: 0px;" /></a> 

superman

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-8/too702.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Superman"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Superman" style="position:absolute; top: 0px; right: 0px;" /></a> 

samurai x

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-1/cloud_strife.ani), url(http://cur.cursors-4u.net/special/spe-1/cloud_strife.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Final Fantasy 7 Cloud Strife"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Final Fantasy 7 Cloud Strife" style="position:absolute; top: 0px; right: 0px;" /></a>

monkey

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-2/nat192.ani), url(http://cur.cursors-4u.net/nature/nat-2/nat192.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Cute Rocking Baby Monkey"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Rocking Baby Monkey" style="position:absolute; top: 0px; right: 0px;" /></a>

I love her

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-5/spe445.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="I Love Her"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="I Love Her" style="position:absolute; top: 0px; right: 0px;" /></a> 

I love him

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-5/spe444.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="I Love Him"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="I Love Him" style="position:absolute; top: 0px; right: 0px;" /></a>

 


lihat hasilnya cursor animasi sudah ada di blogger anda

Selamat Mencoba & Semoga bermanfaat ,follow twitter aku & klik like fanspage programm komputer ya

Read More..

Cara Upload File ke Blog

Bagi anda yang baru pertama kali masuk ke google docs, maka anda harus setuju dengan peraturan yang di buat oleh google. Sudah punya account google? mari kita serbu google docs.

Langkah 1 : upload file ke google docs.

1. Silahkan login ke http://docs.google.com dengan account gmail anda.
2. Klik tab Upload yang berada di sebelah kiri atas layar monitor anda.
3. Klik tombol browse… di bawah tulisan Browse your computer to select a file to upload:
4. Masukan file yang ingin anda upload (word, excel, power point).
5. Klik tombol Upload File yang ada di sebelah bawahnya.
6. Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
7. Jika sudah terupload, anda bisa mengeditnya jika mau. yaitu dengan mengeklik dokumen yang telah terupload pada menu My drive.
8. Kemudian pilih share
9. Maka muncul menu sharing settings.
10. Copy link to share ke notepad atau text editor lainnya.
11. Done
15. Silahkan di close saja window nya.
16. Silahkan anda sign out dari google docs jika mau.
17. Selesai.

Langkah 2 : posting kode google docs ke blogger.

1. Silahkan login ke blogger dengan ID anda.
2. Klik Posting Baru.
3. Silahkan anda buat postingan yang anda inginkan.
4. Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang compose)
5. Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
6. Klik Tombol MEMPUBLIKASIKAN POSTING.
7. Silahkan lihat hasilnya.
8. Selesai.

Read More..