cara buat tag cloud (membuat tag berputar / label berputar di blogspot )

Mungkin ada diantara teman yang masih pemula yang senang menghias blog dengan membuat label berputar atau menambah tag berputar ketika pointer mouse diarahkan ke tag atau label tersebut maka tag akan berputar, jika mengklik salahsatu tag akan membuka sebuah halaman sesuai tag bersangkutan. . Biasanya tag cloud ditempatkan di sidebar blog. Anda bisa menambahkan script ke template blogger untuk  menampilkan tag (label) cloud tersebut di sidebar.

Untuk membuat tag cloud berputar
Contohnya bisa dilihat di bawah ini

Untuk memasang tag cloud ke sidebar blog, lakukan prosedur berikut
1. Login ke dashboard
Pilih Tata Letak -> Edit Html


2. Cari kode berikut

<b:section class='sidebar' id='sidebar' preferred='yes'>

Jika menggunakan template blogger designer coba cari kode seperti di bawah ini :

<b:section-contents id='sidebar-right-1'>

Setelah kode di atas masukkan kode berikut

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Simpan template

Jika sukses maka hasilnya akan terlihat seperti berikut label berputar

Catatan,
Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud




Jika ingin mengubah warnanya anda bisa coba ganti beberapa variabelnya
tagcloud", "240", "300", "7", "#ffffff" ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa anda ganti sesuai lebar widget anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain , bisa dilihat disini daftar warna html
3. so.addVariable("tcolor", "0x333333"); dimana , 0x333333 warna teks hitam. warna teks lain yang bisa anda gunakan:

0xffffff : warna putih
0xFF0000FFF : warna merah
0x00FF00: Warna Hijau
0x0FFFF0: warna Kuning
0x00FF0000 : warna biru
0xFFF000 : warna biru muda
0xFFFFFFF : Warna Hitam
0x0FF0FF0 : warna pink

Read More

Cara Mengganti Icon Pada Address Bar

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif

Read More

Cara Mengganti Tulisan Posting Lama Dan Posting Baru Dengan Icon/Gambar

jika belum jelas baca lagi,, atau bisa tanyakan pada saya yang masih newbie ini insya allah saya bantu..

engganti tulisan home –> older Post –> newer post atau tulisan postingan baru –> halaman muka –> postingan lama jika menggunakan bahasa indonesia blogger anda. atau biasa disebut dengan blog page link atau ringkasan adalah cara mengganti blog pager link dengan icon



Ok saya coba kasih petunjuk jika belum tahu dimana letak tulisan home, newer post, older post atau blog pager link ini.. letaknya pada halaman bawah blog anda, atau coba anda lihat gambar dibawah ini
blog pager link sebelum diganti icon

blog pager link setelah diganti icon

Tampil Lebih keren kan jadinya… blog pager link setelah diganti icon.. untuk tau caranya.. ikutin jalan setapak berikut ini hazah,,..
1. login blogger –> tata letak –> edit html –> centang expand widget template

2. cari kode dibawah ini

<span id=’blog-pager-newer-link’>

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + “_blog-pager-newer-link”‘ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>

</span>

</b:if>
<b:if cond=’data:olderPageUrl’>

<span id=’blog-pager-older-link’>

<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + “_blog-pager-older-link”‘ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>

</span>

</b:if>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>

<b:else/>

Fokuskan pada kode yang saya beri warna kuning kalo gak salah maap agak error kalo bedain warna.. he,,.
– data:newerPageTitle = posting baru

– data:olderPageTitle = Posting Lama

– data:homeMsg = Home (halaman Muka)
3. upload icon yang akan digunakan untuk mengganti ketiga kode tersebut.. berrti minimal anda harus upload tiga icon buat mengganti blog pager link ini
ganti kode yang saya beri warna kuning diatas dengan kode dibawah ini dan sesuaikan untuk yang home, older post atau newer post

<img src=’http://URL Hasil Uploadtan Gambar Anda‘/>

Contoh kode blog pager link akan menjadi seperti ini :
<span id=’blog-pager-newer-link’>

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + “_blog-pager-newer-link”‘ expr:title=’data:newerPageTitle’><img src="http://i580.photobucket.com/albums/ss241/nobhita/forward.png’/></a>

</span>

</b:if>
dan begitu pula dengan yang older post dan home ganti dgn url link uploadtan anda..



Tapi Jika anda tidak mau repot2 upload langsung aja ganti semua kode yang saya blokquote diatas dengan kode didalam spoiler ini klik show n copas terus replace kode blog pager link yang saya blockquote diatas smua

Judul Spoiler Anda

<span id=’blog-pager-newer-link’>

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’ expr:title=’data:newerPageTitle’><img border=’0′ src=’http://i580.photobucket.com/albums/ss241/nobhita/back.png’/></a>

</span>

</b:if> <b:if cond=’data:olderPageUrl’>

<span id=’blog-pager-older-link’>

<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><img border=’0′ src=’http://i580.photobucket.com/albums/ss241/nobhita/next.png’/></a>

</span>

</b:if>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img border=’0′ src=’http://i580.photobucket.com/albums/ss241/nobhita/home.jpg’/></a>

<b:else/>

Read More

Periksa Script Mati di Blog

Kecepatan dalam membuka sebuah halaman web/blog (page loading) adalah idaman para peselancar internet. Suata hal yang menjengkelkan apabila waktu yang diperlukan membuka sebuah situs menjadi lama. Kalau pengunjung tidak sabar dia akan meninggalkan halaman tersebut, dan mungkin kapok untuk balik lagi.
Salah satu hal yang mempengaruhi waktu loading page adalah adanya kode-kode script seperti misalnya Javascript. Dibandingkan dengan kode HTML biasa, kode javascript diload oleh browser dengan cara yang berbeda. Kalau kode HTML, kodenya diload secara bersamaan dengan kode-kode HTML lainnya atau paralel. Sedangkan kode javascript tidak seperti itu, dia diload sampai selesai terlebih dulu, baru dilanjutkan dengan loading kode-kode lain setelahnya.

<a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">advertising</a>

Apa artinya? Artinya, bila ada kode script yang memakan waktu loading yang lama, maka tampilan sebuah halaman pun jadi tersendat, sehingga tampilannya menjadi seperti tidak selesai, menunggu script tersebut sampai sepenuhnya selesai dieksekusi. Akibatnya, ya bikin bete…
Penyebab loading time yang lama antara lain kondisi server penyedia script yang sedang down, koneksi ke server tersebut yang lambat, atau malah mungkin situsnya sudah mati.
Ini saya alami contohnya pada layanan statistik yang disediakan oleh Indostats. Saya tidak tahu apakah Indostats ini servernya sedang down, sedang dalam maintenance, atau situsnya yang memang sudah berhenti, atau apa. Sangat disayangkan, padahal saya cukup menyukai layanan ini karena memberikan data statistik kunjungan yang cukup lengkap dengan user interface yang cukup baik.

Akhirnya saya putuskan untuk menonaktifkan script yang disediakan oleh Indostats ini. Saya tidak langsung membuang script ini, dengan harapan mungkin servernya bisa kembali normal.
Buat yang belum tahu, cara menonaktifkan kode javascript cukup mudah, yaitu dengan menambahkan kode <!-- di awal script, dan kode --> di akhir script.

Tips lainnya, script-script yang tidak terlalu penting terutama buat pengunjung seperti misalnya script statistik, sebaiknya ditempatkan di pojok kanan paling bawah, maksudnya supaya proses loading script ini diset paling akhir, sehingga kalau pun terjadi error atau page loading yang lama akibat script tersebut, pengunjung tidak terlalu terganggu untuk membaca artikel dan mendapatkan informasi yang ada di blog.
Inspeksi mendadak

Read More

Tampilkan Gadget Halaman Situs di Desktop dengan Snippage

Snippage logo

Pada saat sistem operasi Windows Vista pertama kali muncul, ada sebuah elemen yang cukup menarik perhatian pada OS yang satu ini, yaitu adanya Windows Sidebar, sebuah kumpulan aplikasi kecil (gadget) yang berada di bagian samping tampilan desktop. Kemudian dikenal juga Google Desktop Gadgets, yang fungsi dan tampilannya mirip dengan Sidebar tersebut. Gadget atau widget pada desktop tersebut bisa berisi informasi jam, kalender, informasi penggunaan CPU komputer, potongan berita internet, dan aplikasi tertentu lainnya.

<a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">advertising</a>

Masih berhubungan gadget atau widget di desktop, ada sebuah aplikasi bernama Snippage yang fungsinya untuk menampilkan halaman situs sebagai gadget di desktop, sehingga akan terlihat seperti aplikasi desktop.

Aplikasi ini pada dasarnya adalah sebuah browser sederhana, dimana kita bisa membuka sebuah halaman situs, hanya saja dengan Snippage ini kita bisa menampilkan bagian tertentu saja dari halaman situs tersebut yang menurut kita menarik atau berguna untuk ditampilkan di desktop, sehingga untuk menampilkannya kembali di desktop kita tidak perlu membuka browser yang biasa kita pakai misalnya Firefox.

Penggunaan Snippage

---

Saat dijalankan pertama kali, akan muncul jendela kecil Snippage. Untuk menampilkan sebuah halaman situs, maksimalkan jendela tersebut dengan klik icon panah di pojok kanan atas, lalu kita ketik alamat situs yang akan kita lihat.

Setelah situs tersebut muncul, kita tentukan bagian mana yang akan kita tampilkan pada desktop, dengan mengatur penempatan dan ukuran kotak potongannya. Selanjutnya klik saja icon bergambar gunting, dan jadilah sebuah potongan tampilan halaman situs berupa gadget di desktop.

Kita bisa menambah gadget dari situs mana pun di internet untuk ditampilkan di desktop. Untuk menambah gadget, klik saja tanda plus di pojok kanan atas. Misalnya kita ingin menampilkan halaman Google, tapi hanya kotak pencariannya saja supaya kita bisa menggunakannya langsung di desktop. Caranya sama seperti di atas, masuk ke halaman Google, kemudian kita tentukan kotaknya, dan klik gambar gunting, maka jadilah kotak kecil pencarian Google di desktop kita.

Semua link yang kita klik dan juga hasil pencarian Google pada gadget Snippage ini akan ditampilkan pada jendela baru di browser default komputer kita, misalnya Firefox.

Download Snippage

---

Snippage adalah sebuah software cross-platform yang berjalan menggunakan engine Adobe AIR (Adobe Integrated Runtime) sehingga untuk menginstall dan menjalankan aplikasi ini kita perlu terlebih dulu install Adobe AIR di komputer kita. Adobe AIR adalah sebuah software untuk menjalankan aplikasi web di desktop, dan bersifat cross-platform yang bisa diinstall di komputer Windows, Linux dan Mac OS X.

Download Adobe AIR
Download Snippage

Semoga berguna .

Read More

cara setting pengaturan setting blog

Setelah para sobat New Blogger membuat blog untuk yang pertama kalinya, maka perlu untuk melakukan pengaturan blog agar blog bisa dikenali oleh mesin pencari (search engine) seperti Google, Yahoo, Msn dan sejenisnya.
Terlebih duluh masuklah (login) ke www.blogger.com dengan user-name dan password milik anda hingga muncul Dashboard Blogger.

Perlu diperhatikan, dengan satu account blogger yang anda miliki anda bisa membuat lebih dari satu blog yang akan tertampil semua di Dashboard Blogger seperti punya Mas Don ini.


Kemudian pilihlah Menu Pengaturan (Setting) pada Judul Blog yang akan di-setting maka akan terlihat seperti yang punya Mas Don ini :


Tidak semua menu Pengaturan yang ada akan dibahas. Mas Don pilih yang sekiranya penting aja. Selanjutnya silahkan membaca sendiri keterangan di sebelah kanan setiap option (pilihan) yang ada.

Dasar

1. Judul → isi dengan judul blog anda. Contoh : Sang Rajawali
2. Uraian → isi dengan deskripsi blog anda. Contoh : Situs blog personal yang sarat dengan artikel seni, budaya, filsafat, religi, mistik, humaniora, politik praktis, teknologi
3. Tambahkan blog Anda ke daftar kami? → pilih ya agar setiap posting selalu masuk di daftar Blogger.com.
4. Biarkan mesin pencari menemukan blog Anda? → pilih Ya
5. Konten Dewasa? → Pilih tidak. Jika pilih ya berarti blog anda dianggap blog untuk dewasa (blog porno). Jangan deh.
6. Tampilkan Mode Compose untuk semua blog Anda? → pilih Ya
7. Aktifkan transliterasi? → Sebaiknya pilih Tidak

Publikasikan

1. Alamat Blog*Spot → isi dengan nama blog anda. Contoh : sang-rajawali. Biasanya alamat yang tercantum secara otomatis adalah alamat blog anda. Sebaiknya tidak diubah.

Format

1. Tampilkan → pilih angka posting yang ingin anda tampilkan. Contoh : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman muka blog anda adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown. Tampilan posting yang terlalu banyak akan membuat ketidaknyamanan visitor (pengunjung) blog anda.

Komentar

1. Komentar → pilih tampilkan, agar artikel anda dapat dikomentari oleh pengunjung
2. Siapa yang Bisa Berkomentar ? → Pilih Siapa pun - termasuk Pengguna Anonim. Ini dimaksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
3. Format Timestamp Komentar → pilih format jam yg singkat. Contoh: 8.00 PM.
4. Tampilkan komentar dalam sebuah window popup? → pilih Ya. Supaya ketika di klik oleh visitor, halaman blog anda tidak tertimpa halaman komentar.
5. Aktifkan moderasi komentar? → Sebaiknya pilih Tidak
6. Tampilkan verifikasi kata untuk komentar? → pilih Ya. ini dimaksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
7. Tampilkan gambar profil dalam komentar? → pilih Ya. Supaya gambar komentator yg punya id blogger dapat menampilkan fotonya.
8. Email Pemberitahuan Komentar → isi dg alamat email anda, ini dimaksudkan agar setiap ada yang berkomentar pada artikel anda langsund dikirim ke email anda sebagai pemberitahuan.

Arsipkan

1. Frekuensi Arsip → pilih Bulanan.
2. Aktifkan Halaman Posting? → pilih Ya.

Feed Situs

1. Izinkan Feed Blog → pilih Penuh.
2. Posting URL Pengubahan Arah Feed → Isi dengan alamat feed pengganti seperti alamat feed dari feed burner. Jika belum punya sebaiknya kosongkan saja.
3. Footer Feed Posting → Diisi dengan kode iklan yang anda punya, misalnya kode iklan dari Google adsense. Jika belum punya sebaiknya dikosongkan saja.

Wahhh capek....ngopi dulu ....

Insya Allah nanti akan kita lanjutkan ke materi selanjutnya ....

Read More

cara-membuat-daftar-link-link-list

Link List adalah Daftar Link yang biasa anda kunjungi atau link yang menjadi favorit anda. Sebenarnya blogger.com telah menyediakan gadget untuk ini, yaitu pada saat anda menambahkan sebuah elemen dengan meng-klik Tambah Gadget pada salah satu elemen halaman anda di menu Tata Letak (Lay-out). Pada Saat muncul window Tambahkan Gadget anda tinggal memilih gadget Link List (Daftar Link). Setelah itu tinggal mengisi link yang akan anda tampilkan.
Di sini akan dibahas cara lain untuk membuat Daftar Link versi blogger

Biasanya, para blogger menggunakan blogroll untuk membuat Daftar Link. Wah apa lagi nih blogroll ? Blogroll biasanya juga disebut sebagai Link Exchange atau tukeran link. Jadi blogroll biasanya digunakan untuk menampilkan alamat link dari situs lain, walau bisa digunakan untuk keperluan yang lain (kalo udah ngerti .....).

Loh mengapa mesti menampilkan alamat link orang lain ? Apa ndak rugi ? Begini. Dengan menampilkan alamat link orang lain maka ikatan antar para blogger akan semakin erat dan semakin luas. Ada kemungkinan besar alamat link kita juga akan dipasang di blog atau situs yang lain. Walhasil, akan dapat meningkatkan rank blog kita pada search engine kayak Google dll.

Langsung saja yach .....blogroll bisa digunakan untuk menghemat tempat di blog. Titik.

1. Blogroll dengan block area

1. Tambahkan elemen baru pada salah satu elemen halaman anda. Pilih gadget HTML/Javascript.
2. Salin kode berikut ke elemen halaman yang baru ditambahkan :
   
   
   <div style="border: 1px solid #000000; background:#E0F8F7;color:#000000;
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

<a href=”http://blog-indonesia.com” target=”new”>www.blog-indonesia.com</a><br/>
<a href=”http://www.blogoholic.info” target=”new”>Forum Blogger</a><br/>
<a href=”http://photobucket.com” target=”new”>Photobucket.com</a><br/>
<a href=”http://www.polnes.ac.id” target=”new”>www.polnes.ac.id</a><br/>

</div>
   
   
   Keterangan :
   
   1. border : 1px → ukuran ketebalan garis border. Angka 1 bisa diganti sembarang jika mau.
   2. solid → style garis border. Jika mau diganti bisa menggunakan dotted (........) atau dashed (------).
   3. #000000 → kode HTML untuk warna garis yang digunakan.
   4. background:#E0F8F7 → mengatur warna latar belakang kotak/blok area. Silahkan diatur sendiri.
   5. color:#000000 → mengatur warna tulisan. Silahkan diatur sendiri.
   6. Kode width:200px dan height:200px → ukuran lebar dan tinggi kotak/blok area. Silahkan diatur sendiri.
   7. text-align:center → perataan tulisan. Bisa diganti dengan left (rata kiri), right(rata kanan), atau justify(rata-rata).
   8. Alamat link yang warna merah tinggal anda ganti dengan daftar link anda sejumlah yang anda mau.
   9. Kode <br/> → untuk ganti baris, biar rapi gitu loh.
3. Simpan. Selesai.

Kayak gini nih hasilnya :

www.blog-indonesia.com

Forum Blogger

Photobucket.com

www.polnes.ac.id

Sekarang coba height kita kurangi jadi 100px, begini nih hasilnya :

www.blog-indonesia.com

Forum Blogger

Photobucket.com

www.polnes.ac.id

2. Blogroll dengan Marquee

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>
Caranya :

1. Tambahkan elemen baru pada salah satu elemen halaman anda. Pilih gadget HTML/Javascript.
2. Salin kode berikut ke elemen halaman yang baru ditambahkan :
   
   
   <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" ><code>
<a href=”http://blog-indonesia.com” target=”new”>www.blog-indonesia.com</a><br/><br/>
<a href=”http://www.blogoholic.info” target=”new”>Forum Blogger</a><br/><br/>
<a href=”http://photobucket.com” target=”new”>Photobucket.com</a><br/><br/>
<a href=”http://www.polnes.ac.id” target=”new”>www.polnes.ac.id</a><br/><br/>

</marquee>
   
   Keterangan :
   
   1. scrollamount="angka" → mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya
   2. direction="left/right/up/down" → Mengatur arah gerakan teks
   3. width=”100%” → marquee menggunakan lebar sebesar 100% dari tempat dimana perintah ini diletakkan
   4. Alamat link yang warna merah tinggal anda ganti dengan daftar link anda sejumlah yang anda suka.
   5. Kode <br/><br/> → supaya spasi antar alamat link biar agak lebar. Supaya indah gitu loh.
3. Simpan. Selesai.

Kayak gini nih hasilnya :


www.blog-indonesia.com


Forum Blogger


Photobucket.com


www.polnes.ac.id

Anda juga bisa meletakkan blogroll marquee pada blok area dengan cara :

<div ..........>

<marquee .........>

Daftar link

</marquee>

</div>

Gampang kan ?

3. Blogroll dengan Tabel

1. Tambahkan elemen baru pada salah satu elemen halaman anda. Pilih gadget HTML/Javascript.
2. Salin kode berikut ke elemen halaman yang baru ditambahkan :
   
   
   <table border="3" width="200" height="200" cellpadding="2">
<tr>
<td align="left">

Daftar link ……(atau kode marquee juga bisa)

</td>
</tr>
</table>
   
   Keterangan :
   
   1. Kode <tr> → untuk mendefinisikan baris, sedangkan <td> → untuk kolom. Kode <td alig=”left”> → tulisan ditampilkan rata kiri. Anda bisa atur sendiri.
   2. Daftar link → anda tinggal menuliskan daftar link anda, atau menggunakan kode marquee seperti di atas.
3. Simpan. Selesai.

Kayak gini nih hasilnya.

www.blog-indonesia.com Forum Blogger Photobucket.com www.polnes.ac.id

Waah kopinya mulai dingin ...nyruput kopi dulu yach ...

Insya Allah nanti akan kita lanjutkan ke materi selanjutnya

Read More

Membuat Teks Berjalan (Marquee)

Sebelumnya nggak pernah kepikiran untuk bikin tips seperti ini kalo saja Iman my little brother nggak minta bikinin tutorial marque. Sebenarnya saya ragu, bener nggak seorang yang pinter blog seperti Iman yang mempunyai template bagus minta saya bikinin tutorial marquee? Lagian bahasa html memang paling rawan untuk orang seusia saya, masih hijau lumut Tapi ya apa salahnya sih sekedar berbagi, yang jelas ini bukan tutorial lho, hanya sekedar tips memaksimalkan kemampuan, keindahan serta teks pada postingan atau pun sidebar blog Anda.
Apa itu Marquee?
Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat marquee menurut semantik sepertinya ga ada hubungan dengan teks berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya ^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui “tenda” tersebut orang lalu lalang berjalan.
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks. Sengaja marquee-marquee di bawah ini saya beri title mulai marquee 1.0 sampai 3.0.3, tidak ada keistimewaan dari penamaan tersebut, hanya untuk memudahkan saya dalam memberi penjelasan. Plus tambahan saya sertakan kode html yang diperlukan, Anda tinggal mengganti teks yang ada dalam kode tersebut “Teks Anda”.
Marquee 1.0
Marquee adalah teks berjalan lho
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).

Tag Html
<marquee>Teks Anda</marquee>

Marquee 1.0.1
Marquee adalah teks berjalan lho
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari perjalanannya yang panjang.

Tag Html
<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 1.0.2
Marquee adalah teks berjalan lho
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya; dari kiri ke kanan, contoh dengan teks arabic:
مرقو ادلح تيكس برجالان

Tag Html
<marquee direction="right">Teks Anda</marquee>

Marquee 2.0
Marquee adalah teks berjalan lho
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti David Coperfield marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata.

Tag Html
<marquee behavior="alternate">Teks Anda</marquee>

Marquee 2.0.1
Marquee adalah teks berjalan lho
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif
Marquee adalah teks berjalan lho

Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>

Marquee 2.0.2
Marquee adalah teks berjalan lho
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika Anda arahkan mouse pada teks maka dia akan berhenti.

Tag Html
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 3.0
Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0 Dia adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas (up) . Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup Anda.

Tag Html
<marquee direction="up">Teks Anda</marquee>

Marquee 3.0.1
Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita kasih on mouse stop/start juga.

Tag Html
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>

Marquee 3.0.2
Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.
Tag Html

<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Anda</marquee>

Marquee 3.0.3
Marquee adalah teks berjalan lho #7
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #1

Marquee 3.0.3 Pengembangan juga dengan arah berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.

Tag Html
<marquee direction="down" width="100%" height="100">Teks Anda</marquee>

Demikian tips sederhana ini, silahkan Anda coba….! Jika ingin manambahkan marquee yang lain silahkan tulis komentar.
Keep Blogging ^_^

Read More