MENU BERJALAN / MARQUEE

Menu teks berjalan atau disebut Marque berguna untuk menarik perhatian pengunjung blog. Bisa di-isi dengan apa saja sesuai keinginan kita, bisa iklan, tukar link, ataupun informasi mengenai isi blog kita. Terserah anda.
Kali ini saya akan bahas secara detail masalah menu berjalan ini, kupas tuntas lah.
Biar yang belum mudeng/pemula bisa mengerti tuntas-tas.
Untuk itu masuk sign in di blog dan klik menu Layout.
Klik Add a Gadget, pilih dan klik HTML/Javascript.
Masukkan Script seperti contoh di bawah.

1. Standar menunya/script sebagai berikut : (normal)
Gambar 1 (Menu Scroll ke Atas)

<marquee onmouseover="this.stop()" align="center" direction="up" width="100%" height="160" scrollamount= "2" onmouseout="this.start()">Ini Contoh Pertama, dari http://tutorialblog-sg.blogspot.com<br /><br />Terima kasih.<br /><br />Kasih Komentar Kalau Suka<br /></marquee>

Kalau nanti dilihat maka hasilnya seperti ini :

Ini Contoh Pertama, dari http://tutorialblog-sg.blogspot.com

Terima kasih.

Kasih Komentar Kalau Suka


2. Pengertian Istilah Dasar Script
onmouseover="this.stop()" ==> maksudnya kalau mouse kita bergerak mengarah ke text, maka text akan berhenti/stop agar bisa dibaca gitu.

onmouseout="this.start()" ==> maksudnya kalau mouse tidak dalam area teks maka teks akan mulai bergerak.

direction="up" ==> maksudnya arah gerak teks ke atas, bisa diganti Left/Right/Down.

scrollamount="2" ==> maksudnya angka pengatur kecepatan gerak teks, bisa diganti antara 1 s/d 10 ( 1 lambat, 2 normal, 3 dstnya makin cepat) Gunakan angka 1/2/3 saja cukup.

align="center" ==> maksudnya baris teks letaknya di tengah, bisa diganti Left/Right/Justify

width="100%" ==> maksudnya lebar area teks, bisa diganti dengan angka pixel, misal 220 atau 90%, terserah, sesuaikan dengan lebar sidebar anda.

height="160" ==> maksudnya tinggi area teks dalam pixel, sesuaikan juga dengan ketinggian teks yang akan di masukkan. Bisa juga pakai 100%.

TAMBAHAN<br /> ==> untuk line break = Enter = ganti baris = 1 baris row dan bgcolor="#XXXXXx" untuk memberi warna background, misalkan Kuning =#ffff00

Untuk Contoh warna lihat Kode Warna Dalam HTML

3. Contoh Marque Gerak dari Kanan ke Kiri(Lambat)

<marquee onmouseover="this.stop()" align="Left" direction="left" width="460" height="20" scrollamount= "1" onmouseout="this.start()">Ini Contoh Kedua, dari http://tutorialblog-sg.blogspot.com<br /><br/><br />Mudah dan Jelas bukan??<br /><br/><br />Kasih Komentar Dong<br /></marquee>

Kalau nanti dilihat maka hasilnya seperti ini :
Ini Contoh Kedua, dari http://tutorialblog-sg.blogspot.com Mudah dan Jelas bukan?? Kasih Komentar Dong!



Mudah dan jelas banget-kan. Selamat berkreasi.

View/Read More...»»

TIPS BUAT READ MORE Di BLOG

Tips Singkat dan Mudah membuat Read More di Postingan Blog
Sebenarnya saya pribadi kurang suka tips ini tetapi kalau tulisan sudah panjang dan banyak tambahan gambar maka agak merepotkan mengatur lay out tampilan blog. Maka dari itu putar 180 derajat jadi di-pake deh.... he..he..he...
Nah tutorial membuat perubahan Read More yang singkat dan jelas akan saya paparkan di bawah ini karena mungkin masih ada pemula seperti saya yang masih bingung dan merasa kurang jelas.
Lanjut langsung ke bahasan saja.
Setelah login blog, biasa masuk ke Layout - kemudian Edit HTML.
1. Backup dulu Template dengan menu Download Full Template di atas. Simpan.
2. Check/Centang Expand Widget Templates.

kemudian

3. Scroll ke bawah agak tengah cari kalimat

<div class="'post-body"> dan tepat dibawahnya sisipkan script Pertama sbb : <b:if cond="'data:blog.pageType"><br /><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style> Kemudian pas setelah sisipin script di atas ada kalimat sbb : <data:post.body/> Tepat di bawahnya sisipkan script ke Kedua sbb : <a href="'data:post.url'">Baca Selanjutnya.. »»</a></b:if>

Lihat gambar Penjelasan yang sangat jelas step by step.

4. Masukkan kode script ke1 ini tepat di bawahnya.


5. Setelah menyisipkan script pertama tadi, sisipkan script ke 2 ini.
Lihat gambar.

6. Selesai sudah, klik Save Template, kalau perlu back up lagi buat cadangan.
7. Selanjutnya siapkan script ini dan save dengan format txt pakai notepad.
8. Mulai sekarang setiap mau membuat postingan/tulisan maka wajib melakukan pengaturan postingan dengan membagi 3 bagian penting tulisan, yaitu Judul dan Kata Pengantar awal, Isi Tulisan, terakhir penutup/kesimpulan. Atau kalau mau disingkat bisa menjadi 2 bagian : kata pengantar dan isi saja juga boleh. Misalkan begini contohnya :

TIPS CARA MEMBUAT READ MORE DI POSTINGAN BLOG. Kata pengantar ini hanya sebagai pembuka dan bisa di isi apa saja. Yang penting sewaktu akan melakukan penggalan kalimat postingan harus di lihat apakah enak di baca dan membuat para pembaca lebih tertarik / penasaran untuk membaca lebih lanjut. Seperti<div class="fullpost"> Sisanya setelah script fullpost di atas adalah inti dari postingan tersebut. Jadi usahakan gambar atau kalimat tidak terputus begitu. Enak di baca, enak dilihat, gak enak dimakan ya. Terakhir kalau sudah tidak ada lagi yang mau ditulis ditutup pakai ini.</div>

9. Beres deh. Mudah bukan. Kalau bisa mudah ngapain dibuat susah.

View/Read More...»»

RAHASIA SCRIPT TUKAR LINK LEBIH HIDUP Dengan DROP DOWN MENU

MEMBUAT TUKAR LINK LEBIH HIDUP
Selama ini Kolom Tukar Link di Sidebar hanya statis saja, maka kali ini saya akan memberikan bahasan Rahasia cara membuatnya.
Seperti biasa pertama-tama masuk dahulu ke Layout, klik Add a Gadget di sidebar.
Cari HTML/Javascript dan klik.

Masukkan kode berikut ke dalam HTML :

<div style="border: 1px solid rgb(130, 230, 170); overflow: auto; width: 198px; height: 100px;"><ul><li><a href="http://Tutorialblog-sg.blogspot.com/">Tutorial Membuat Blog</a></li><li><a href="http://nvidia-nb-driver-moded.blogspot.com/">Nvidia Mobile Modif</a></li><li><a href="http://VISTA-SG.blogspot.com/">Windows Vista Tips Tweak</a></li></ul></div>

Klik SAVE dan Selesai.

TIPS Perubahan Script
1. border: 1px ---> ini bisa diganti angkanya misal 3px atau 10 px.
Semakin besar angka maka Frame Border akan semakin tebal.

1px solid rgb(130, 230, 170); overflow: auto; width: 198px; height: 100px;

2. warna : (130, 230, 170) bisa anda ganti eksperimen untuk warna border
misalkan diganti (0, 0, 0) kalau mau hitam saja atau (0, 200, 0) atau (10, 10, 180)
dan lihat saja hasil perubahan warnanya. Sesuaikan dengan warna latar blog anda.

3. width: 198px; height: 100px
Ukuran width = Lebar Frame dan height = tinggi Frame
Ini bisa dirubah sesuaikan dengan ukuran Lebar Sidebar anda.
Standar minimum 170 x 70px sudah cukup minimal untuk dibaca.
Karena Tinggi 70 px bisa memuat 3 baris Link.
Terserah anda mau memakai ukuran berapa yang penting tidak terlalu kecil dan dipaksakan.

4. Sekarang memasukkan Link dari teman/blogger lainnya, standarnya seperti ini, perhatikan contoh kalimat Script dibawah :

<li><a href="http://Tutorialblog-sg.blogspot.com/">Tutorial Membuat Blog</a></li>

http://Tutorialblog-SG.Blogspot.com/ ---> Bisa anda ganti dengan URL blog lain
Tutorial Membuat Blog ---> Bisa anda ganti dengan Deskripsi dari Blog tersebut
Misalkan menjadi ini :

<li><a href="http://NAMA_BLOG_ORG.blogspot.com/">CARA TUKAR LINK RAHASIA JELAS</a></li>

Jadi setiap kali anda mau menambah alamat URL bog lain untuk tukaran link, masukkan kalimat script ini secara lengkap, tinggal merubah saja alamat URL dan deskripsinya.

Nah Tutorial Cara menambah LINK sudah selesai.

Sekarang Bagaimana membuat Script Tukar Link tersebut menjadi Hidup dan tidak Monoton istilahnya.
Begini.
Script Tukar Link di atas bisa kita rubah supaya nantinya pada saat Mouse kita mengarah ke kalimat link tersebut, akan muncul DESKRIPSI url yang bisa lebih panjang sesuai kemauan kita, juga hurufnya bisa di pertebal/bold.
Lihat contoh Script di atas yang sudah dirubah sebagai berikut :

Contoh:

<div style="border: 1px solid rgb(0, 0, 100); overflow: auto; width: 204px; height: 100px;"><ul><li><a href="http://TutorialBlog-SG.blogspot.com" title="TUTORIAL Tentang Cara Membuat BLOG di Blogspot/Blogger secara Lengkap dan Rinci - mudah bagi Pemula"><strong>Tutorial Blogger SECRET</strong></a></li><li><a href="http://Indo-SG.Blogspot.com" title="Tentang Indonesia, Macam2, Hot, Music, Artis, gado-gado, dari Entertain, Bisnis, Business, Money, Uang, Saham, Forex, Finance, Komputer, Joke, Lucu, Cerita, Software, Download, Buka-bukaan, General....all in one Gosip Blogspot.com Blogger"><strong>INDO HOT BLOG</strong></a></li></ul></div>

OK perhatikan salah satu kalimat script paling atas ini :

<li><a href="http://isiURL-NAMA-BLOG-ANDA" title="isi-DESKRIPSI NAMA BLOG ANDA Di Blogspot"><strong>JUDUL BLOG ANDA SINGKAT</strong></a></li>

Terlihat ada penambahan TITLE = untuk men-deskripsikan apa isi blog & url anda, sehingga saat Mouse mengarah ke Link tersebut akan muncul tulisan title tersebut.
Dan (strong) untuk menebalkan Huruf.
Hasilnya bila mouse menuju ke Link akan seperti gambar di bawah ini.
Selesai.
Bagaimana pendapat pembaca, jelas, dan rinci, mudah dipahami kan.

View/Read More...»»