Berbagi Pengetahuan di Internet

Pada Buku tamu Shoutbox yang ada pada blog buat bloggers, ada sobat blogger yang menanyakan "bagaimana cara menambahkan Smileys Icon pada Shoutbox" untuk menjawab dari pertanyaan sobat blogger tersebut. Maka saya membuat postingan tentang cara menambah Smileys Icon di Shoutmix. Cara menambah Smileys Icon di Shoutmix cukup mudah, buat sobat blogger yang belum mengetahui tentang cara penambahannya akan saya jelaskan pada postingan ini:

Jika sobat blogger belum mempunyai icon smiley buat di tambahkan ke shoutmix sobat. anda bisa mencari terlebih dahulu atau mendownload di situs situs emoticon dan smileys icon, atau membuatnya langsung dengan Adobe ImageReady atau software images icon lainnya. kemudian upload Smileys icon tersebut ke hostingan yang biasa di gunakan.

Buat sobat blogger blogspot yang ingin lebih mudah dan ingin download Smileys Icon buat Shoutmix seperti Smileys Icon pada Shoutmix yang di gunakan blog buat blogger (harus login), di bawah ini ada 50-an "Smileys Icon" yang sudah siap pakai untuk Shoutmix anda!!. Buka masing masing url ini untuk memilih Smiley yang akan sobat blogger gunakan. Atau jika anda ingin menyimpan url smileys icon pada spoiler berikut, silahkan simpan url smileys icon ke notepad atau bookmark halaman postingan berikut.

Url Smileys Icon pada Shoutmix yang di gunakan buatblogger.net

Url Smileys

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04211.gif">AddEmoticons04211.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04212.gif">AddEmoticons04212.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04217.gif">AddEmoticons04217.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04218.gif">AddEmoticons04218.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04219.gif">AddEmoticons04219.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04220.gif">AddEmoticons04220.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04221.gif">AddEmoticons04221.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04222.gif">AddEmoticons04222.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04224.gif">AddEmoticons04224.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04225.gif">AddEmoticons04225.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04226.gif">AddEmoticons04226.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04227.gif">AddEmoticons04227.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04228.gif">AddEmoticons04228.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons0423.gif">AddEmoticons0423.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04230.gif">AddEmoticons04230.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04231.gif">AddEmoticons04231.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04232.gif">AddEmoticons04232.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04233.gif">AddEmoticons04233.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04234.gif">AddEmoticons04234.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04235.gif">AddEmoticons04235.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04236.gif">AddEmoticons04236.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04237.gif">AddEmoticons04237.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04239.gif">AddEmoticons04239.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons0424.gif">AddEmoticons0424.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04240.gif">AddEmoticons04240.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04241.gif">AddEmoticons04241.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04242.gif">AddEmoticons04242.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04243.gif">AddEmoticons04243.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04245.gif">AddEmoticons04245.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04246.gif">AddEmoticons04246.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04257.gif">AddEmoticons04257.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04259.gif">AddEmoticons04259.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04260.gif">AddEmoticons04260.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04262.gif">AddEmoticons04262.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04263.gif">AddEmoticons04263.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04267.gif">AddEmoticons04267.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04269.gif">AddEmoticons04269.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04273.gif">AddEmoticons04273.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04274.gif">AddEmoticons04274.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04277.gif">AddEmoticons04277.gif</a>

<a href="http://buatblogger.net/images/Smileys/AddEmoticons04279.gif">AddEmoticons04279.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04283.gif">AddEmoticons04283.gif</a>
<a href="http://buatblogger.net/images/Smileys/AddEmoticons04287.gif">AddEmoticons04287.gif</a>

>>Setelah gambar Smileys sudah lengkap,

>>Buka http://www.shoutmix.com/ atau klik langsung pada buku tamu / Shoutbox anda pada tulisan ShoutMix. buat tutorial menambah Smileys Icon di Shoutmix

>>login dengan account shoutmix anda!, isikan "Shoutbox ID dan Password anda"

>>Setelah ada pada halaman "settings.php"

>>Pilih "Display" - kemudian klik "Smileys"

>>Kemudian centangkan pada bagian seperti ini

Use the default smileys set shown above

>>Masukan url Smiley tadi pada form "new" kemudia isikan "Code" dan "optional"

>>Ulangi lagi pengisian form ini untuk menambahkan Smiley icon yang lainnya.

>>Setelah url smiley yang sudah anda masukan sampai 10 smiley, Klik tombol "Save settings".

>>Jika anda menggunakan ShoutMix Free / Gratisan.
Anda hanya dapat menambahkan 10 smiley pada Shoutbox anda.

>>Untuk anda yang ingin menambahkan sampai ratusan smileys,  tambahkan juga "$" anda kepada "Shoutmix" atau upgrade ke shoutmix premium

>>Penambahan Settingan Smileys Pada Buku Tamu Shoutmix sudah selesai.

>>Selamat mencoba!!!!!!!

Postingan ini update dari postingan 09/08/09, 06:45, mohon maaf untuk komentar sobat blogger pada postinagn Menambah Smileys Icon di Shoutmix sebelumnya di hapus.

Tutorial berikut ini adalah tutorial buat menjelaskan tentang fungsi dasar kode padding dan margin. Kode padding dan margin adalah kode css yang berfungsi untuk membuat perintah jarak atau space kode html  Fungsi padding dan margin tepatnya untuk widget dan gadget content antara border widget satu dan border widget lainnya. kedua kode diatas untuk membuat jarak widget di template blogger caranya bisa dengan menggunakan padding atau menggunakan margin.

Padding adalah jarak atau space widget yang mengarah ke widget bagian dalam, kode padding yang digunakan pada widget bagian luar.Sedangkan margin adalah kode yang berfungsi untuk membuat jarak ke bagian luar widget kode margin di pasang di bagian dalam widget. Untuk lebih jelasnya tentang padding dan margin perhatikan gambar berikut.

Padding, Margin Css

Contoh gambar diatas misalnya seperti berikut:
Garis border warna merah adalah kode widget, dan warna biru kode widget.content.
Untuk membuat jarak widget seperti gambar diatas dengan menggunakan fungsi padding adalah kode padding di simpan pada kode widget, sedangkan untuk menggunakan fugsi margin kode margin di simpan pada kode widget.content.


Dari contoh diatas kiranya cukup jelas untuk mengenal padding dan margin, selanjutnya adalah mengenal satuan padding dan margin, untuk satuan padding dan margin bisa dengan menggunakan dua cara diantararnya Statik dan Relatif. Tutorialnya seperti di bawah ini

1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
* auto-- tersesuaikan secara otomatis
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Pada postingan ini akan mencoba menjelaskan dengan menggunakan "px"

Contoh Padding:

Contoh 1={padding:10px 5px 8px 6px ;}

Urutan angka dalam satuan "px" pada padding diatas memiliki arti "atas - kanan - bawah - kiri"

Contoh 2=Bila diuraikan menjadi seperti:
{padding-top: 10px ; /* jarak dengan garis pinggir atas */

padding-right: 5px; /* jarak dengan pinggir kanan */

padding-bottom: 8px ; /* jarak dengan pinggir bawah */

padding-left: 6px; /* jarak dengan pinggir kiri */}
Contoh 3= {padding:10px 5px } artinya:
{padding-top,padding-bottom:10px

padding-right,padding-left:5px}
Contoh 4= {padding:10px auto } artinya: sama dengan contoh 3

Contoh 5= {padding:10 auto 10 } artinya: sama dengan contoh 3
{padding-top: 10px ;

padding-right: auto;

padding-bottom: 10px ;

padding-left: auto; }
Inti kode kode di atas dasarnya sama

Sedangkan untuk Contoh margin caranya sama seperti contoh contoh padding, hanya mengganti padding dengan margin.

Selamat mencoba!!!