11.27.2011

Cara Membuat Halaman Blogroll


Halaman blogroll atau tukar link dilengkapi dengan screenshoot image dari blog yang bersangkutan bagaimana cara membuatnya?
Begitulah ada yang tanya ke saya, lha terus saya tanya siapa? hihihi.. baiklah yang belum tahu caranya boleh ikuti cara sederhana dibawah ini, karena sebenarnya membuat halaman blogroll with thumbnail image cukup mudah, yang perlu itu justru adalah bagaimana agar tampilan halaman blogroll bisa menjadi bagus dan rapi, untuk urusan ini maka pengetahuan CSS akan sangat berperan. Misalnya saja seperti dibawah ini:
Contoh 1:
Diatas itu contoh yang simple, kalau ingin lebih lengkap dan rinci bisa seperti dibawah ini:
Contoh 2:
Gudang InformasiBlog: Gudang Informasi
Author: Albri
Description: Informasi Dalam Gudang, tapi gudangnya masih kosong hehe
URL: http://ayomaju.com/
Download Mp3Blog: Download Mp3
Author: Paijo
Description: Gudang lagu, mp3 gratis, review musik, lirik dan cord gitar dan piano
URL: http://music.wongduro.com/
CatatankuBlog: Catatanku
Author: Albri
Description: Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar
URL: http://www.albri.info/
Cerita AnakBlog: Cerita Anak
Author: Tukang Dongeng
Description: Cerita anak yang dapat didownload menjadi ebook, cerita klasik, cerita teladan, cerita Islami dan cerita lainnya
URL: http://alkisah.ateonsoft.com/
Banyak sekali model yang bisa dikembangkan, sebagai dasar mungkin perlu juga referensi tutorial HTML, dan halaman blogroll itu akan Anda Banget..!
Gambar otomatis keluar dan untuk itu silahkan mendaftar di Thumbshots. Tanpa mendaftar sebenarnya sudah bisa bekerja, namun saya anjurkan mendaftar saja agar sopan :) . Dan yang pasti halaman yang menampilkan thumbnails sisipkan link ke Thumbshots, selain sebagai ucapan terima kasih, juga agar layanan tidak akan berhenti untuk blog Anda.
Format pemanggilan Thubmnail adalah seperti dibawah ini:
<img src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" />
Ganti warna merah diatas dengan URL Blog yang diinginkan. Format gambar diatas adalah kode standar, untuk lebih baiknya berikan atribut seperti pernah saya tulis di caraMengoptimalkan pemasangan gambar di blog.
Bisa untuk semua jenis blog?
Tentu saja bisa, kalau wordpress dan ingin tanpa plugin buat saja di halaman staticnya begitu juga dengan blogspot, bisa dibuat dalam postingan atau di halaman static.
Bisakah dipasang di sidebar?
Bisa, namun kalau terlalu banyak maka loading blog akan menjadi berat, so kalau dipasang di sidebar, sebaiknya maksimal 4 saja dan sesuaikan dengan templatenya, biasanya ini adalah daftar blog lain kita, sebagai promosi.
Karena model tergantung selera, maka silahkan dibuat sendiri, namun yang masih kesulitan maka dibawah ini adalah bentuk code untuk dua contoh diatas, boleh dipelajari untuk dikembangkan, atau sebagai contoh saja sebagai referensi belajar.
Kode Contoh 1:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" align="center"><a href="http://ayomaju.com/"><strong>Gudang Informasi</strong></a></td>
<td width="25%" align="center"><a href="http://music.wongduro.com/"><strong>Download Mp3</strong></a></td>
<td width="25%" align="center"><a href="http://www.albri.info/"><strong>Catatanku</strong></a></td>
<td width="25%" align="center"><a href="http://alkisah.ateonsoft.com/"><strong>Cerita Anak</strong></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://ayomaju.com/"><img border="0" alt="Gudang Informasi" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://music.wongduro.com/"><img border="0" alt="Download Mp3" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://music.wongduro.com/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://www.albri.info/"><img border="0" alt="Catatanku" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://alkisah.ateonsoft.com/"><img border="0" alt="Cerita Anak" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://alkisah.ateonsoft.com/" width="120" height="90" /></a></td>
</tr>
</table>
<style><!-- /*ini untuk CSSnya, silahkan di oprek*/
img.float-left {margin: 5px 10px 10px 0px;}
img.gambarbertepi {padding:5px; border:1px solid #ccc; background:#f0f0f0;}
img.gambarbertepi:hover {background:#fff;}
--></style>
Kode Contoh 2:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px;">
<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Gudang Informasi" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://ayomaju.com/">Gudang Informasi</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Informasi Dalam Gudang, tapi gudangnya masih kosong hehe<br />
<strong>URL:</strong> http://ayomaju.com/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;"><img border="0" alt="Download Mp3" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://music.wongduro.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://music.wongduro.com/">Download Mp3</a> <br />
<strong>Author:</strong> Paijo <br />
<strong>Description:</strong> Gudang lagu, mp3 gratis, review musik, lirik dan cord gitar dan piano<br />
<strong>URL:</strong> http://music.wongduro.com/</td>
</tr>
<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Catatanku" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://www.albri.info/">Catatanku</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar<br />
<strong>URL:</strong> http://www.albri.info/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;"><img border="0" alt="Cerita Anak" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://alkisah.ateonsoft.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://alkisah.ateonsoft.com/">Cerita Anak</a> <br />
<strong>Author:</strong> Tukang Dongeng <br />
<strong>Description:</strong> Cerita anak yang dapat didownload menjadi ebook, cerita klasik, cerita teladan, cerita Islami dan cerita lainnya<br />
<strong>URL:</strong> http://alkisah.ateonsoft.com/</td>
</tr>
</table>
<style><!-- /*ini untuk CSSnya, silahkan di oprek*/
img.float-left {margin: 5px 10px 10px 0px;}
img.gambarbertepi {padding:5px; border:1px solid #ccc; background:#f0f0f0;}
img.gambarbertepi:hover {background:#fff;}
--></style>
Untuk pengulangan kebawah jika daftar blog banyak, ulangi saja dari tanda warna merah(kode <tr> sampai </tr>). Pengulangan adalah satu baris record tabel kalau masih belum ada isinya cukup diisi dengan &nbsp; contoh dibawah ini (perhatikan warna merah):
<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Catatanku" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://www.albri.info/">Catatanku</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar<br />
<strong>URL:</strong> http://www.albri.info/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;">&bsp;</td>
</tr>
Maksud tidak ada isinya adalah misal ada 3 blog, maka dari contoh diatas, ‘kan menjadi tidak penuh, maka yang kosong itulah ditambah kode &nbsp; dan selalu ditengah kode <td> dan</td>. Kode warna hijau adalah CSS, atau style, tentu sesuaikan dengan selera Anda.
Semoga bermanfaat.

11.26.2011

Tutorial Membuat Game Flash Sederhana ( PiNg pOnG )


Game ini sangat sederhana dan masih banyak kekurangannya jadi maklumilah, langkah-langkahuntuk membuat game flash ini adalah :
1. Sudah pasti masuk ke macromedia flashnya terlebih dahulu.
2. Membuat layer yang diberi nama (nama terserah anda tetapi saya menggunakan nama Menu) untuk tampilan menu game.
3. Kita buat tombol menu menu untuk mainnya.
4. Lalu kita beri script tombol tersebut :
on (release) {
play();
}
5. Menggambar atau menghiasi tampilan menu supaya terlihat menarik, seperti gambar
dibawah ini.
6. Lalu kita buat layer agar framenya dapat diam dan bisa melanjutkan ke frame lain dengan menekan tombol menu tadi yaitu dengan menambahkan script di layer tersebut dengan script :
stop();

7. Setelah itu buat layer dan frame baru untuk isi gamenya.
Bisa frame tersebut diberi gambar kembali dengan gambar yang anda inginkan agar menarik. 
8. Setelah itu buat layer kembali untuk membuat bola dengan nama layer bola.
9. Setelah itu gambar bola nya.

10. Lalu beri script dengan menekan tombol F9 di bola nya, dengan script di bawah ini :
onClipEvent (load) {
kecepatanx = 20;
kecepatany = 20;
} 
onClipEvent (enterFrame) {
_x += kecepatanx;
_y += kecepatany;

11. Setelah itu buat 2 layer kembali untuk membuat temboknya dengan nama tembok kanan dan tembok kiri supaya bolanya dapat memantul.
12. Setelah di buat temboknya beri script ke duanya dengan script :
onClipEvent (enterFrame) {
if (hitTest(_root.bola)) {
_root.bola.kecepatanx = -_root.bola.kecepatanx;
} 
}
13. Setelah itu buat layer kembali untuk menu restart apabila bola sudah tidak ada, disini
kita buat tombol restart.
14. Setelah dibuat lalu di beri script :
on (release) {
gotoAndPlay(1)
}
15. Setelah itu buat layer lagi untuk menstop framenya dan akan berpindah dengan menekan tombol restart tadi.
16. Dan jadilah tampilan dalam gamenya seperti ini.

Begitulah cara membuat game flash PiNg pOnG ini mudah bukan, tapi masih banyak yang perlu di perbaiki dari game ini. Untuk mencoba gamenya tekan Ctrl+Enter.
“Selamat Mencoba”


Klik Disini untuk di Download 

Membuat Flash Animasi untuk Pemula


Judul:Membuat Flash Animasi untuk Pemula
Penulis:Komarudin Surya
Copyright:Suryatekno © 2008
Aturan:
Tutorial ini boleh Anda Copy hanya untuk kepentingan Pribadi. Tidak boleh diperjual-belikan, atau dimanfaatkan untuk kepentingan Komersial. Pengutipan atau pemindahan sebagian atau keseluruhan materi ke situs ataupun Media Lain, tidak di ijinkan dengan alasan apapun tanpa seijin dari Penulis cq: Komarudin Surya.
P E N D A H U L U A N
Flash adalah suatu sotware yang digunakan untuk membuat sebuah animasi. Dengan flash kita dapat membuat tampilan website atau komputer kita menjadi hidup. Tidak mudah untuk mempelajari flash, selain diperlukan imajinasi juga diperlukan pemahaman mengenai SCRIPT. Bisa saja kita membuat sebuah animasi tanpa menggunakan script tapi file yang dihasilkan menjadi besar, hal itu mempengaruhi loading atau pemuatan data di workstation atau client.
Selain flash kita juga bisa membuat sebuah animasi dengan Compuserver file, biasanya file ini berakhiran GIF, Untuk pengguna windows, microsoft menggunakan mesin animasi tersendri yang disebut Active X. Selain itu ada juga bahasa pemrogaman yang khusus untuk membuat sebuah animasi misalnya JAVA APPLET. bahkan jika anda mahir dalam sebuah pemrogaman seperti C, Pascal, Visual basic dan masih banyak lainnya, dapat membuat sebuah animasi.
Pada tutorial kali ini SSC menginginkan Anda sebagai pengguna Situs ini, agar mengetahui teknik membuat flash animation dengan cara yang sederhana dan mudah. Untuk itu saya membuat tutorial ini untuk Anda.
Ok mari kita mulai tutorial ini, tapi sebelumnya Anda harus menyiapkan bahan-bahan untuk tutorial ini. Apa saja bahan-bahan nya, simak yang baik jangan sampai terlewatkan satu bahanpun.
  1. Software Utama untuk membuat animasi flash yaitu Sothink SWF Quicker yang bisa Anda download secara gratis di http://www.sothink.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya.
  2. Software untuk edit gambar atau photo seperti Adobe photoshop CS, kalau tidak ada pakai Program Paint yang ada di windows juga bisa.
  3. Flash player 7.0 yang bisa didownload di http://www.macromedia.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya.
  4. Microsoft Internet Explorer 6.0, FireFox 1,5 atau Opera 8.0 untuk melihat hasil publish dari file *.swf di Browser.
  5. Alat tulis antara lain kertas dan pulpen.
  6. Kopi satu gelas kalau anda suka kopi, kalau nggak suka, susu juga boleh, atau teh manis bagaimana.?,. Pokoknya terserah Anda sajalah hehehe 
Bagaimana., sudah siap bahannya.? Kalau belum tunda aja tutorial ini untuk besok, kalau sudah mari kita lanjutkan. Oo ada yang tanya, kenapa pakai sothink swf quicker, kenapa nggak pakai macromedia flash mx atau program-program yang disebutkan diatas seperti bahasa C atau visual basic gitu ?. Wew.., Tutorial untuk program itu belum diizinkan oleh SPC untuk dipublikasikan jadi yah nrimo aja deh, kan baru belajar nanti kalau sudah mahir mungkin SPC akan menurunkan tutorial mengenai program-program tersebut.
Setelah anda download program dari sothink, sekarang Anda membutuhkan program untuk mengekstrak file hasil download tersebut dengan WINZIP atau WINRAR, tempatkan hasil exstrak file tersebut pada sebuah direktory lain setelah itu instalasi program sothink pada komputer Anda, caranya gampang tinggal klik dua kali file SETUP.EXE hasil download dan klik YES aja terus kalau nggak mau pusing pada proses instalasi. Tapi perlu Anda perhatikan dan camkan baik-baik bahwa software tersebut cuma gratis untuk ujicoba saja selama 30 hari, setelah 30 hari pakai software itu tidak bisa dipakai lagi, kalau Anda menginginkan dipakai terus Anda harus membeli licence software nya.
Sudah di install.., Ok sekarang anda klik dua kali icon sothink swf quicker yang ada didesktop setelah itu akan ditampilkan licence software dan peringatan masa uji coba software tersebut klik aja tombol CONTINUE bila masa uji coba software yang Anda Install masih Aktif (30 hari). Setelah masuk ke program maka akan ditampilkan pilihan untuk membuat animasi dari template antara lain : Blank Document, Album, Banner, Navigation button dan Presentasi. Dengan menggunakan template Anda tidak perlu pusing-pusing untuk membuat animasi yang ada, tapi bila Anda orang yang kreatif dan menginginkan animasi tersebut adalah hasil buatan Anda sendiri maka Anda pilih saja Blank Document.
Setelah Anda pilih Blank Document pada menu template maka akan ditampilkan program utamanya seperti gambar dibawah ini.

Tampilan Program Sothink swf quicker
P R O Y E K   P E R T A M A
Saya tidak akan menerangkan mengenai fungsi tombol-tombol yang ada pada program tersebut satu persatu ( terlalu lama dan tidak mendidik kreativitas ) , karena nanti juga Anda akan terbiasa dengan tombol-tombol tersebut disamping itu, nanti akan disinggung juga pada latihan-latihan kita.
Mari kita mulai pada proyek pertama. Klik File -- Save -- ketik " latihan 1 " -- save. maka dibagian atas program yang tadinya ada kata untitled jadi latihan 1. Setelah di save Anda klik tombol anak panah berwarna biru lalu Anda klik tombol LINE ( gambar pincil disebelah kanan atas yang ada pada menu shape ) ganti nilainya jadi 2 dengan warna hitam, lalu klik tombol FILL dibawahnya rubah jadi solid dengan warna Orange. Setelah itu klik tombol lingkaran yang ada pada menu sebelah kiri. Tempatkan kursor bertanda + di KANVAS lalu drop kursor itu terserah Anda, tapi jangan besar-besar sedang aja. maka akan terlihat sebuah lingkaran berwarna Orange dengan garis pinggir (Out Line) berwarna hitam. Ini dapat Anda rubah sesuai selera Anda mau merah, putih, hijau atau apapun itu tergantung selera Anda saja, kenapa saya suruh berwarna Orange yah karena saya suka warna orange, kenapa nggak yang lain yah karena saya tidak suka warna yang lain itu saja.
Setelah membuat ligkaran, sekarang Anda coba coba sendiri fungsi dari RECTANGEL dan sebagainya. coba-coba saja tidak akan terjadi apa-apa. kalau anda tidak suka dengan setingan pertama, Anda dapat menekan tombol back yang berada pada bagian atas menu, maka setingan yang sebelumnya anda buat akan kembali lagi. Gampang kan.
Kita kembali lagi, nah lingkaran yang Anda buat tadi sekarang sudah disimpan pada Library. Bila pertama kali Anda menjalankan program ini maka akan ada keterangan berwarna kuning yang menerangkan bahwa hasil kerja Anda tadi telah masuk di library ( Panel sebelah kanan bawah ). Lingkaran itu sekarang bisa Anda Hapus dengan cara mengklik lingkaran tersebut lalu menekan tombol DEL pada keyboard, bisa juga dengan klik kanan mouse dan pilih DELETE. Anda tidak usah khawatir dengan hilangnya lingkaran yang dengan susah payah Anda buat tadi, karena setelah disimpan pada library lingkaran tersebut dapat Anda panggil kembali caranya, klik shape yang ada pada library maka dibagian atas library akan ditampilkan bentuk lingkaran yang Anda buat tadi. Sekarang Anda klik dan tahan dengan tombol kiri mouse, lalu bawa lingkaran tadi ke CANVAS. Maka Lingkaran yang baru saja Anda Buat lalu dihapus akan kembali lagi, ini penting untuk Anda ingat karena nantinya kita akan banyak memanfaatkan fungsi library ini, agar dapat mudah Anda kenali jenis dari library yang dibuat, Anda dapat mengganti namanya dengan cara mengklik kanan tombol mouse pada file yang ada dilibrary lalu pilih RENAME gantilah dengan nama sesuai selera Anda, contoh : ganti namanya dengan lingkaran1.
Sampai disini saya rasa Anda sudah mengerti mengenai pembuatan bentuk lingkaran, kotak atau persegi lima dan sebagainya, kalau belum Anda coba-coba sendiri saja, sengaja tidak saya beritahukan kepada Anda biar Anda jadi kreatif dan tidak menelan mentah-mentah apa yang saya paparkan disini.
Langkah berikutnya yaitu bagaimana caranya membuat lingkaran yang baru saja Anda buat itu dapat bergerak seperti contoh dibawah ini.


Contoh Animasi yang dibuat oleh sothink SWF Quicker
Contoh diatas dibuat dengan sothink swf quicker termasuk banner yang ada dibagian atas halaman ini juga dibuat dengan software yang sama bahkan bila Anda ingin contoh yang lebih rumit Anda bisa klik tombol presentasi yang ada pada Menu, bagaimana kreatif kan..!, saya tunjukan itu agar Anda bersemangat dalam mengikuti tutorial ini dan tidak ragu-ragu lagi berlatih flash dengan software ini, sebab bila Anda sudah menguasai sothink swfquicker maka Anda juga akan mudah mempelajari Software Flash apapun seperti Flash MX, Swish, dan Antechinus. OK !.

zombie Football Game

Tau game Zombie Football game? silahkan yang mau main disini ^_^
NB:game ada dibagian bawah blog scroll aja ke bawah biar bisa main

klo yang mau scirpt HTML game Zombie Football.....silahkan di copy aja

<embed src="http://content.funny-base.com/games15/death-penalty.swf" type="application/x-shockwave-flash" width="600" height="460"></embed><a href="http://www.theblogfullofgames.com/">Blog Games</a>

paste code tadi di : Desain - Rancangan - Elemen Laman - Tambah Gadget (terserah mau taruh dimana gadget nya) - Tambah HTML/JavaScript paste kan di kolom ke-2 klik simpan lalu klik simpan lagi pada bagian rancangan lalu liat hasil nya pada liat blog have fun ^_^

Memasang Musik Player Pada Blog

Bagi anda penggemar musik. Memutar lagu melalui HP, Mp3 player ataupun komputer mungkin sudah biasa. Tetapi bagaimana jika memutar musik melalui blog?

Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Ada banyak layanan seperti ini yang tersedia di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus yakniMusik-live dan eSnips. Kedua musik player ini masing-masing memiliki kelebihan dan kekurangannya. Sehingga silahkan anda tentukan sendiri mana yang lebih bagus.

1. Musik-Live
musik live
















Kelebihan:
- Lagu sudah tersedia, tinggal pasang
- Banyak model skin yang bisa anda pilih

Kelemahan:
- Tidak bisa upload lagu sendiri


2. eSnips
esnips















Kelebihan:
- Bisa upload lagu dari komputer
- Tersedia lagu yang bisa anda putar

Kelemahan:
- Hanya 2 model skin yang bisa dipilih
- Tampilannya kurang menarik

Nah itulah kelebihan dan kelemahannya masing-masing. Silahkan anda tentukan mana yang lebih cocok dengan kebutuhan anda. Agar lebih jelas anda bisa lihat demo Musik-live disini dan eSnips disini.

Kalau sudah menentukan musik player kesukaan anda, berikut adalah langkah-langkah pemasangannya:

A. Musik-Livet.Net

1. Kunjungi http://musik-live.net/ lalu klik Skin Mp3 Player
2. Pilih tampilan player yang anda inginkan. Untuk melihat tampilannya klik Preview Skin
3. Copy kode dalam kolom 'Embed code' lalu buka blogger. Klik menu Design ->Page Elements
4. Paste kode tersebut ke menu HTML/ Javascript
5. Selesai.

Diatas adalah cara memasang musik player dengan lagu yang telah disediakan. Jika anda ingin memilih sendiri lagunya. Berikut caranya:

1. Pada halaman Musik-Live, cari lagu favorit anda dengan kotak pencari.
2. Lalu klik Play & Embed code untuk menampilkan kodenya
3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda. Selesai

Catatan: 
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.



B. eSnips

1. Kunjugi http://www.esnips.com/. Untuk bisa memanfaatkan fasilitasnya anda harus signup terlebih dahulu. Jika sudah, sign-in ke akunnya.

2. Klik Upload Files lalu klik Select Files

3. Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalauPrivate anda tidak bisa menambahkan lagunya kedalam playlist.

4. Jika sudah klik Upload Now

5. Tunggu hingga proses upload selesai.

6. Jika sudah klik menu Folder. Pilih folder dimana anda menyimpan menyimpan lagunya

7. Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist
esnips add to quicklist
8. Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widgets

esnips create playlist
9. Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.

esnips widget

10. Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save

11. Selesai. Silahkan lihat hasilnya.

Jika ukurannya tidak pas anda bisa mengatur ukurannya dengan mengedit nilaiwidth-nya pada kodenya masing-masing. Selamat mencoba..

Fiuhh.. penat. Akhirnya selesai juga hasil eksperimen selama 3 hari. senyumkenyit