Cara Membuat Tulisan Berjalan (Marquee)

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 saya 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 pembuatannya :

1. Login ke Blogger
2. Kemudian klik Tata Letak dan Elemen Halaman
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 Berjalan

6. Teks berjalan mondar-mandir

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

hasil :

Contoh Tulisan Berjalan

7. 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>

adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL

Demikianlah artikel mengenai Cara Membuat Tulisan Berjalan (Marquee)
Semoga Bermanfaat..

Read More

Cara Membuat Template di Blogger

sumber : http://trik-tips.blogspot.com/2008/02/cara-membuat-template-di-blogger.html

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:

Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat “Tile / Pattern” (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat “tile”
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

 background
 header
 main 
 footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu “Edit HTML”.
2. Trus klik tombol “Brows” untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url(‘http://kendhin.890m.com/template/bg.jpg‘) repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url(‘http://kendhin.890m.com/template/main.jpg‘) repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url(‘http://kendhin.890m.com/template/head.jpg‘) no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url(‘http://kendhin.890m.com/template/foot.jpg‘) repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url(‘http://kendhin.890m.com/template/head.jpg’) no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url(‘http://kendhin.890m.com/template/foot.jpg’) no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

Read More

Cara membuat template css

"Css Template" , inilah yang mungkin akan membuat halaman web kamu akan lebih terlihat indah,cantik dan lebih menarik. Mulanya saya juga masih pusing dengan apa yang namanya css template dan bagaimana cara membuatnya. Semua web yang memuat artikel tentang ini pun aku jelajahi, namun demikian masih saja belum ngerti alias blank.Karena banyaknya web yang telah aku jelajahi, akhirnya aku tarik kesimpulan dan hasilnya web ku pun berubah dengan tampilan css template seperti yang sekarang ini. Nah.... kali ini saya ingin berbagi pengalaman tentang bagaimana cara meng-edit halaman dengan css template di Pertama

Download css template yang masih berbentu file zipdisini. Untuk pertama kali cobalah dengan css templatedengan tampilan yang yang sederhana, agar kamu mudah untuk mengedit file html nya.

Kedua
Biar kamu tidak merasa bingung dan mudah untuk memberikan gambaran, kami sarankan lakukan edit pada sebuah komputer. Ekstrak tema yang telah kamu pilih tadi dan hasilnya ada 4 file yaitu; css,lisensi.txt, images danindex.html. Setelah itu buatlah sebuah folder di wen.ru dengan menamainya sesuai dengan nama tema yang kamu pilih, "sunflower" misalnya. Kemudian Upload file css ( biasanya dinamai "default.css" atau style.css), lisensi.text. Untuk mengupload images ke wen.ru kamu harus buat dulu folder didalam folder "sunflower" tadi dengan menamainya "images" lalu gambar atau foto dari images hasil ekstrak diatas kamu upload satu-persatu ke dalam folder images yg telah kamu buat pada folder "sunflower" pada wen.ru. Untuk " index.html" nya tidak perlu diupload.

Ketiga
Untuk mengedit css mulailah dengan membuka fileimages lalu perhatian dimana images tersebut tersimpan ( alamat url images ). Sebagai contoh css template yang kamu pilih adalah "sunflower".css template. Dan alamat url dari images-nya adalah sebagai berikut;

• http://apa-maumu.wen.ru/sunflower/images/img.01.gif
• http://apa-maumu.wen.ru/sunflower/images/img.02.jpg

dan seterusnya.......wen.ru.

Read More

cara mengganti, merancang dan membuat template blog sendiri di blogspot

Kabar gembira bagi teman-teman blogger yang memiliki blog di situs Blogger (Blogspot), karena sekarang blogger sudah menyediakan fasilitas yang akan memudahkan anda mengganti, membuat dan merancang template blog sendiri dengan sangat mudah dan praktis 

Caranya malah lebih mudah langsung anda coba daripada memahami tutorial ini 

BTW.. bagi yang penasaran, berikut langkah-langkahnya
1. Login di Blogger
2. Pada Dashboard, pilih link Design
3. langkah ini optional, tapi sebaiknya anda backup template lama anda terlebih dahulu, terutama settingan pada meta tag-nya
Cara membackup template ada bermacam-macam : (Sebelumnya klik Design – Edit Html)
#Cara 1 : Pada bagian Edit Html – Klik Download Full Template, lalu simpan pada hardisk/flashdisk anda, anda bisa meng-upload file tersebut bila ingin kembali ke template sebelumnya
#Cara 2 : Pada bagian Edit Html – klik kolom pada Expand Widget Templates(tujuannya supaya widget-widget anda ikut terbackup), lalu copy paste semua code script template di bawahnya dan salin ke file Notepad/Wordpad (pada komputer anda – Start menu – Start Menu – cari aplikasi Wordpad/Notepad)
Setelah proses backup selesai, lanjutkan pada langkah 4
4. Klik Link * Template Designer di sebelah Link Edit HTML
5. Pilih Model Template yang anda suka
6. Ganti Background sesuka anda
7. Pilih model layout sesuai selera atau kebutuhan
8. Sentuhan Akhir, Advanced
pada fasilitas ini anda bisa mengganti model Tulisan (Font) dan juga warnanya, mulai dari font pada Page, Title, Description, link, dsb

Mudah Baaanget  so … Selamat Mencoba !!!

Read More