Cara Menambahkan Yahoo Emoticon Pada Kotak Shoutmix

Bagi anda yang menggunakan kotak chatting milik Shoutmix pasti sudah tidak asing lagi dengan icon-icon mungil seperti ini.


Nah itu adalah icon-icon yang disediakan oleh Shoutmix. Namun bagi anda yang merasa kurang lengkap dengan keberadaan icon-icon tersebut. Anda juga bisa menambahkan sendiri icon-icon yang anda inginkan kedalamnya karena fasilitas penambahan icon sudah disediakan oleh Shoutmix asalkan anda tahu alamat dari icon tersebut.

Berikut adalah cara menambahkan yahoo emoticon pada kotak Shoutmix. Bagi anda yang tertarik silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Shoutmix
2. Klik Smiley pada menu Display

3. Kemudian anda akan masuk kehalaman seperti ini.

4. Masukkan alamat icon yang anda inginkan. Untuk mengetahui alamat yahoo emoticon klik disini. Ambil alamat url icon saja. Sebagai contoh anda ingin menambahkan icon ini


Kodenya:

<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" />

Copy teks yang dicetak tebal lalu pastekan ke kotak "Smiley Image URL". Jangan lupa untuk menghapus teks "http://" pada kotak "Smiley Image URL" terlebih dahulu sebelum anda menambahkan alamat URLnya agar tidak terjadi dobel http://.

5. Masukkan shortcut icon pada kotak "Code". Misalnya, :menari, :dance, dll
6. Setelah itu, klik Add lalu tambahkan lagi icon yang anda inginkan seperti cara diatas.

Catatan:
Untuk basic account hanya diperbolehkan untuk menambahkan 10 emoticon jadi pilihlah 10 icon yang paling anda suka.

7. Jika sudah klik Save Settings. Selesai

Beberapa saat kemudian kotak Shoutmix anda akan muncul icon-icon yang telah anda tambahkan.

Selamat mencoba..!!

Read More

Cara Membuat Teks Dan Link Berkedip

Apakah anda pernah melihat teks berkedip seperti ini?Welcome to my blog

atau mungkin link berkedip seperti ini?Rudd Rocker's

Dan apakah anda tertarik untuk memasangnya di blog Anda? Kalau iya, silahkan ikuti tutorial

Untuk membuat teks dan link berkedip caranya sangat mudah, cukup tambahkan tag <blink> dan </blink> diantara teks atau link yang ingin Anda buat berkedip. Selesai.. Sebagai contoh, saya menuliskan kode dibawah ini.

<blink>Blogger Tutorial</blink>

Maka hasilnya menjadi seperti ini

Blogger Tutorial

Dan

<blink><a href="http://ruddrockers.blogspot.com" target="_blank">Rudd Rocker's</a></blink>

Maka hasilnya:Rudd Rocker's

Catatan:
Ganti tulisan berwarna biru dengan alamat link anda dan tulisan yang dicetak tebal dengan teks yang ingin anda tampilkan

Agar lebih unik dan menarik, anda juga bisa memberikan sedikit atribut pada teksnya contohnya seperti tulisan Welcome to my blog diatas. Property yang saya gunakan pada tulisan Welcome to my blog adalah

<blink style="font-weight: bold; font-family: forte; font-size: 18px; ">Teks atau link anda</blink>
Silahkan ganti jenis font pada font-family, ukuran font pada font-size dan warna font pada color sesuai dengan selera anda. Untuk font-family anda bisa menggunakan semua jenis font yang tersimpan pada komputer anda. Masukkan nama font dengan lengkap maka font tersebut akan muncul.

Selamat mencoba..

Read More

Cara Menambahkan Add a Gadget pada Template Blogger

Seperti yang kita ketahui bahwa Add a Gadget adalah sebuah fasilitas yang digunakan untuk menambahkan widget baru pada template. Sehingga kita bisa menambahkan widget atau kode HTML tertentu pada blog kita

Namun ada sebagian template yang tidak menyediakan fasiltas add a gadget pada bagian tertentu sehingga kita tidak bisa menambahkan widget atau kode HTML pada bagian tersebut.

Sebagai contoh, anda ingin menambah widget pada bagian header namun dibagian tersebut tidak ada Add a Gadget.


Lalu bagaimana caranya? Gampang silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger. Klik Layout -> Edit HTML
2. Cari kode:

<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


atau


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Keterangan:
Maxwidgets: jumlah widget yang bisa ditambahkan
Showaddelement: menampilkan fungsi add a element atau add a gadget.

3. Kalau sudah ketemu, ganti kode diatas dengan kode berikut ini

<div id='header'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
atau

&lt;div id='header-wrapper'&gt;
&lt;b:section class='header' id='header' maxwidgets='3' showaddelement='yes'&gt;

Itu berarti kita bisa menambahkan maksimal 3 widget pada bagian header. Anda bisa mengganti angkanya dengan nilai lain sesuai kebutuhan.

4. Jika sudah, klik Save Template lalu klik Page Element maka hasilnya akan menjadi seperti ini.


Untuk bagian Blog Post cari kode:

<div id='main'>
<b:section class='main' id='main' showaddelement='no'>

Sedangkan untuk bagian Footer cari kode:

<div id='footer'>
<b:section class='footer1' id='footer1' showaddelement='yes'>

Read More

Cara Membuat Banner Berjalan

Sebelumnya saya sudah pernah mengulas tentang cara membuat efek marque untuk teks dan link. Dan sepertinya cara ini cukup menarik karena selain dapat menghemat ruangan blog cara ini juga dapat membuat blog lebih interaktif.Oleh sebab itu, pada kesempatan ini saya akan membahas kembali cara membuat efek marquee namun kali ini yang akan saya bahas adalah efek marquee untuk banner atau banner berjalan. Contohnya seperti ini:




Cara ini sering dipakai oleh pemilik blog atau website yang ingin memasang banyak banner namun terbatas ruangannya. Nah bagi anda yang ingin menggunakan cara ini, gunakan kode dibawah ini pada blog anda:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" bg height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxa5NJ9-tB6o-QsP4j-vkB8vrFqWG3ePjS0Atc8ULqgJVFzKPZuGa8R-jw5sw_attIOMsQW2csoGvT7M9fp4UpARBkvHAqEiWbCDo-LgOyRo7E-zNcIsm5LR-JrTrHSBhg5AHger5ggxD/" /></a>
</marquee>

Ganti tulisan yang berwarna hijau dengan url website yang ingin dituju dan tulisan berwarna merah dengan url banner anda.

Jika anda ingin memasang lebih dari 1 banner. Sebagai contoh anda ingin menambah 1 banner lagi. Tambahkan kode dibawah ini diatas kode </marquee>

&lt;span style=&quot;padding-left: 10px;&quot;&gt;&lt;a href=&quot;http://namabloganda.com&quot;&gt;&lt;img src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxML2oSKtxq_-x6Al00PV_niC3lNWCH8vVlWWN06dY-8kkttBO-aCj_IGjc_lJACthZJvq-gv7RvPAvVn56wXNPRbfq-_0DEhO8jmdCH1hcwW38NEMAOoTgMF7YZU9Qd8uNXM-iAZ5Rum-/&quot; /&gt;&lt;/a&gt;&lt;/span&gt;

Ingat:
Ganti tulisan berwarna hijau dengan url website anda dan tulisan berwarna merah dengan url banner kedua anda.

Jadi susunan kodenya menjadi seperti ini:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxa5NJ9-tB6o-QsP4j-vkB8vrFqWG3ePjS0Atc8ULqgJVFzKPZuGa8R-jw5sw_attIOMsQW2csoGvT7M9fp4UpARBkvHAqEiWbCDo-LgOyRo7E-zNcIsm5LR-JrTrHSBhg5AHger5ggxD/" /></a>
<span style="padding-left: 10px;"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxML2oSKtxq_-x6Al00PV_niC3lNWCH8vVlWWN06dY-8kkttBO-aCj_IGjc_lJACthZJvq-gv7RvPAvVn56wXNPRbfq-_0DEhO8jmdCH1hcwW38NEMAOoTgMF7YZU9Qd8uNXM-iAZ5Rum-/" /></a></span>
</marquee>

Hasilnya:

Begitulah seterusnya jika anda ingin menambah banner lagi. Jika anda ingin mengganti arah gerak banner atau mempercepat gerakan banner silahkan baca artikel cara membuat efek teks marquee karena sudah pernah saya bahas disana.

Selamat mencoba.

Read More

Membuat Link Terbuka Pada Halaman Baru

Pada umumnya, jika kita membuat sebuah link pada blog. Link tersebut akan terbuka pada halaman yang sama. Nah ini tentu akan merugikan kita sebagai pemilik blog karena jika pengunjung mengklik link tersebut maka ia akan meninggalkan blog kita dan menuju ke alamat yang kita rujuk.

Anda tentu tidak maukan pengunjung meninggalkan blog anda? Nah untuk mengatasi masalah tersebut anda bisa membuat link terbuka pada halaman baru. Jadi jika pengunjung mengklik link yang kita tunjukkan. Ia tidak akan meninggalkan blog kita dan disamping itu alamat yang kita tunjuk juga bisa terbuka.

Untuk membuat link seperti itu caranya sangat mudah. Anda cukup menambahkan target="_blank" pada link yang ingin kita tautkan.

Sebagai contoh saya ingin menautkan sebuah link dengan teks Rudd Rocker's ke alamat http://ruddrockers.blogspot.com

maka kodenya adalah seperti ini

<a href="http://ruddrockers.blogspot.com">Rudd Rocker's</a>

Nah agar linknya terbuka pada halaman baru, tambahkan kode target="_blank"

<a href="http://ruddrockers.blogspot.com" target="_blank">Rudd Rocker's</a>

Maka hasilnya menjadi seperti ini:

Rudd Rocker's

Silahkan klik link diatas untuk melihat hasilnya. Selamat mencoba. pada link seperti contoh dibawah ini

Read More

Cara Membuat Text Area dengan Fasilitas Select All

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat kotak yang contohnya seperti dibawah ini:

Tulis text ataupun kode yang mau anda tampilkan disini

Kotak ini biasa digunakan untuk menyimpan kode, teks atau link untuk dicopy oleh pengunjung. Nah bagi anda yang ingin mencobanya caranya sangat mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Keterangan:
Teks yang dicetak merah merupakan teks yang muncul pada kotak. Silahkan ganti dengan teks atau kode yang ingin anda tampilkan.
center menunjukkan posisi kotak ditengah. Jika anda ingin meletakkan dikiri maka ganti dengan left atau right jika anda ingin meletak disebelah kanan
width merupakan lebar kotak dan height merupakan tinggi kotak. Silahkan diganti sesuai kebutuhan.


Membuat kotak teks/text area dengan fasilitas Select All
Tadi kita sudah membahas tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all.

Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area.

Nah agar lebih jelas silahkan anda klik tombol Select All yang ada dibawah ini

Tulis text ataupun kode yang mau anda tampilkan disini

Ok uda jelaskan. Pingin mencobanya? Klu iya silahkan ikuti petunjuk dibawah ini

Untuk membuat text area dengan tombol Select All berada diatas seperti dibawah ini.

Tulis text ataupun kode yang mau anda tampilkan disini

Tambahkan kode ini ke blog anda

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></p></form>

Jika anda ingin membuat text area dengan tombol Select All berada dibawah seperti contoh dibawah ini

Tulis text ataupun kode yang mau anda tampilkan disini

Maka gunakan kode ini

<form name="copy"><div style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div><p align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></p></form>

Keterangan:
- Teks yang dicetak tebal merupakan nama tombol. Anda bisa menggantinya dengan nama lain.
- Teks berwarna merah adalah teks muncul didalam kotak. Silahkan diganti dengan teks atau kode anda.

Selamat mencoba..

Read More

Cara Menghilangkan Angka Pada Label

Secara default, jika kita memberi label atau kategori pada postingan maka secara otomatis halaman blog kita akan muncul nama label yang telah kita berikan beserta angka yang menunjukkan jumlah postingannya.

Jadi semakin banyak jumlah postingan yang berlabel sama maka angkanya juga ikut bertambah. Contohnya seperti gambar dibawah ini:


Dengan adanya angka pada label maka pengunjung bisa tahu sudah berapa banyak jumlah postingan pada label tersebut. Namun ada sebagian blogger yang tidak suka dengan keberadaan angka ini karena menurutnya angka ini bisa mengurangi estetika blog.

Nah bagi anda yang ingin menghilangkan angka pada label, caranya sangat mudah.

1. Login ke Blogger. Klik menu Design->Edit HTML

2. Lalu beri centang pada "Expand Template Widget"

3. Cari kode (<data:label.count/>)

4. Jika sudah ketemu, hapus kode tersebut lalu klik Save template

5. Selesai. Klik View Blog untuk melihat hasilnya


Update: Saat ini blogger.com telah menambahkan opsi untuk menghilangkan angka dalam widget label. Sehingga bagi anda yang ingin menghilangkan angka pada widget label anda, cukup hilangkan centang pada "Show number of post per label" maka angkanya akan hilang.

Read More