Audio Music Player MP3 Responsive HTML5 untuk Blogger

Friday, December 5, 2014 | komentar

Audio Music Player MP3 Responsive HTML5

Pada umumnya HTML5 mp3 / audio player membutuhkan dua jenis file yaitu mp3 dan Ogg format, akan tetapi pada Audio Music Player MP3 HTML5 Responsive yang sudah sedang saya kembangkan ini hanya membutuhkan satu format (.mp3) file musik saja dan saya membuat widget ini agar dapat mendukung dari free file hosting eksternal milik saya pribadi seperti Dropbox (untuk kedepannya akan saya kembangkan dengan free file hosting yang lebih banyak lagi seperti Mediafire dan 4Shared) dikarenakan saya tidak mau mengandalkan file internal seperti google drive, google site dan lain sebagainya dikarenakan memiliki ruang penyimpanan yang terbatas.


Dalam hal ini Ketika kita upload kedua jenis file musik .mp3 & .ogg maka akan mengkonsumsi lebih banyak ruang. Jadi untuk mengatasi masalah ini beberapa bulan yang lalu saya mengembangkan konsep baru yang saya beri nama “Audio Music Player MP3 Responsive HTML5".

Dalam widget ini & untuk menjalankannya kita hanya perlu format audio mp3 saja, sehingga kita bisa menghemat banyak ruang.

Ok, Mari kita lihat keuntungan menggunakan pemutar musik ini.


Keuntungan Dari HTML5 Music Player Untuk Blogger

1. Mudah untuk menginstal
2. Tidak mempengaruhi kecepatan loading halaman
3. Hanya membutuhkan satu format (.mp3) file musik sedangkan pemutar HTML5 lainnya memerlukan dua jenis file (.mp3 & .ogg)
4. Responsive & dapat digunakan dalam perangkat apapun
5. Dan masih banyak lagi...


Sekarang mari kita lihat LIVE DEMO untuk pemahamannya...

LIVE DEMO
Audio Music Player MP3 Responsive HTML5 Playlist Demo
Oppie Andaresta - The Best Of
Audio Music Player MP3 Responsive HTML5 Single Demo
Kolam Susu - Instrument


Bagaimana Cara menambahkan Ini?
Untuk menambahkan Widget ke blog Anda, Ikuti langkah-langkahnya di bawah ini :


1. Login ke Dashboard Blogger lalu Pilih Blog Anda dan Klik Dropdown
2. Pilih Template Klik Edit HTML
3. Sekarang Cari </head>
4. Tambahkan script di bawah ini sebelum atau diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src='https://googledrive.com/host/0B3XGOZcD9kZMcWstLWlma1VkLVE' type='text/javascript'/></script>


5. Lalu simpan Template Anda.

Menampilkan Audio Music Player MP3 HTML5 Responsive Pada Blog Anda

Sebelum Menampilkannya Kita harus tahu bahwa kita dapat menggunakan widget Audio Music Player MP3 HTML5 Responsive ini ada dalam dua jenis, yaitu :

1. Dengan Menambahkan sebagai Playlist / Daftar Lagu
2. Dengan Menambahkan sebagai file musik tunggal


1. Dengan Menambahkan sebagai Playlist / Daftar Lagu


<div class="erin-player">
<div class="erin-player-inner nano">
<div class="content">
<ol>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
</ol>
</div>
</div>
<div style="clear: both;">
</div>
<audio preload="preload"></audio></div>

Setelah Menambahkan kode di atas Ganti YOUR-MUSIC-FILE-LINK dengan link file musik Dropbox milik Anda

Catatan : Anda dapat meng-host file musik Anda dalam dropbox

Kemudian Ganti MUSIK FILE NAME dengan Nama / Judul Musik Berkas Anda



2. Dengan Menambahkan sebagai file musik tunggal

<audio preload="auto" src="YOUR-MUSIC-FILE-LINK"></audio>


Saya Harap Anda dapat menikmati widget Audio Music Player MP3 Responsive HTML5 ini, Mohon kritik dan juga saran untuk pengembangannya,
Dan jangan lupa untuk berbagi...!!!

NB : konsep ini masih dalam evaluasi pengembangan saya selanjutnya untuk kedepannya akan ada fitur Play, Stop, Next, Previous dan Download Link button.

Salam,
Erinnanto

Stylish Fonts For Facebook

Sunday, October 19, 2014 | komentar

Mengubah teks Facebook Anda menjadi huruf keren dengan converter font!!! Cukup ketik teks Anda dalam kotak lalu tekan "Convert".


Anda akan melihat teks diubah menjadi masing-masing font stylish yang dapat Anda gunakan di Facebook Timeline maupun chat. Cukup copy teks yang Anda sukai dan kemudian paste di status, komentar ataupun pesan chat Facebook anda! Ini menjadi sangat mudah dan menyenangkan…



Nikmati koleksi font keren dan membuat plain teks lama Anda menjadi sesuatu yang menyenangkan dan Menakjubkan.
Generator Font mengubah font yang biasa Anda ke salah satu font yang luar biasa. Jika Anda ingin menghasilkan teks yang stylish dan keren, menelusuri koleksi ErinGoBlog pilihan font dan memilih salah satu yang sesuai dengan suasana hati Anda! Anda dapat memilih font baru untuk memiliki pesan postingan menyenangkan dan komentar diFacebook anda!!!


Seperti yang Anda lihat dari pilihan font yang berbeda, Saya telah menyertakan pilihan stylish font yang keren tentunya. Kirim [̲̅b̲̅][̲̅o̲̅][̲̅x̲̅][̲̅e̲̅][̲̅d̲̅] text, a ♥l♥o♥v♥e ♥m♥e♥s♥s♥a♥g♥e untuk kekasih Anda atau untuk berbagi ndsıpǝ poʍu (upside down) Luangkan waktu Anda untuk memilih font yang saya sediakan.

(((((INDAHNYA BERBAGI)))))

Salam,
Erinnanto

Cara Membuat DP BBM Sendiri Menggunakan Photoshop (Basic Level)

Friday, October 3, 2014 | komentar (1)

Cara Membuat Animasi DP BBM Sendiri Menggunakan Photoshop (Level Dasar)

Kali ini saya akan memberikan tutorial mengenai bagaimana cara Membuat DP (Display Picture) untuk BBM (Blackberry Messengger), mungkin anda sudah bisa dengan mudah membuat atau memasang sebuah tampilan DP untuk BBM milik anda dengan format JPG,
Atau selama ini kita sudah banyak melihat berbagai macam jenis dan tampilan DP BBM mulai dari DP BBM kata mutiara, DP BBM bergerak, DP BBM Kocak dan sebagainya.


Banyak juga yang menanyakan bagaimana cara membuat DP BBM animasi format gif. Terkadang kalau kita melihat DP BBM milik teman kita dengan bentuk gambar animasi kita merasa ingin ikut menampilkan DP Animasi pada Profil BBM kita sendiri.
Kalau selama ini kita hanya sebagai “pemakai’ animasi DP BBM kreasi dari orang lain, nah sekarang saatnya kita akan membuat animasi DP BBM dengan bentuk Gambar Animasi atau format GIF karya kita sendiri tentunya dengan menggunakan photoshop.

Satu hal yang perlu di ingat sebelum anda membuat sebuah DP Gambar Animasi untuk BBM anda harus tahu bahwa Ukuran sebuah Gambar animasi untuk BBM tidak boleh lebih dari 32kb.

Langkah-langkah Pembuatanya :
  • Buka Program Adobe Photoshop versi apa saja dalam tutorial kali ini saya menggunakan Photoshop CS3, setelah itu buatlah sebuah layer baru dengan ukuran 250 pixel x 250 pixel , anda juga bisa membuat dengan ukuran lain, asalkan harus berbentuk persegi atau sama sisi. Diusahakan jangan melebihi 250 pixel untuk animasi yang berat, ini bertujuan supaya Gambar Animasi tidak melebihi dari kapasitas 32kb.  




  • Selanjutnya Buatlah sebuah tulisan sesuai dengan keinginan anda sendiri, sebagai contoh saya akan membuat sebuah tulisan  "MEMBUAT DP BBM SENDIRI"   


  • Tulislah Satu Persatu untuk bisa dijadikan sebuah Gambar animasi, sebenarnya dengan menulis secara keseluruhan tanpa dipisahkan juga bisa, tetapi pada tutorial kali ini saya akan memberikan contoh tulisan yang dipisahkan antara satu hurup dengan hurup yang lainnya. 

  • Selanjutnya untuk merubah tulisan tersebut menjadi sebuah Gambar Animasi, anda harus mengaktifkan  Tab Animation pada Adobe Photosop anda, caranya : pada Bar Area, klick Windows ==> Animation,  maka akan muncul Tab Animation seperti pada gambar dibawah.





  • Langkah selanjutnya hilangkan "Indicates Layer Visibility" Gambar mata pada Layer disebelah kanan (lihat gambar) maka seleruh tulisan yang sudah kita buat akan disembunyikan.

  • Tahap Selanjutnya pada Tab Animation disebelah bawah, buatlah duplicate Layer dengan cara mengklick "Duplicasted Selected Frame" yang ada pada Tab Animation.  Setiap Anda menambahkan Frame baru pada Area Animation, munculkan kembali Hurup anda satu per satu dengan cara memunculkan kembali Gambar Mata yang telah anda sembunyikan tadi. tetapi disini anda harus mengaktifkan tulisan satu per satu atau hurup perhurup, karena pada tutorial ini saya telah memisahkan antara hurup dengan hurup yang lainnya. (lihat gambar dibawah ini) 



  • Ingat : Satu kata atau satu hurup untuk satu Frame, Satu Frame pertama munculkan Gambar mata pada tulisan "M" selanjutnya buat lagi duplicate Frame kedua dan munculkan gambar mata pada hurup "E", buat lagi Frame ketiga dan munculkan gambar mata pada tulisan "M" begitu seterusnya sampai tulisan tersebut muncul semuanya. (untuk lebih jelasnya silahkan lihat gambar diatas)
  • Perlu juga diingat beri jeda atau durasi pergantian frame yang satu ke frame yang selanjutnya tergantung kebutuhan, (untuk lebih jelasnya silahkan lihat gambar dibawah)

  • Nah sekarang Gambar Animasi sudah bisa kita lihat hasilnya dengan cara mengklick tombol "Play" pada Tab Animation  (Lihat gambar dibawah)
  • Langkah terakhir simpanlah Gambar Animasi yang telah kita buat dengan cara menyimpannya untuk Website, jangan menyimpan pada "Save As" karena ukuran gambarnya akan menjadi besar. Cara penyimpannya bisa kita lakukan dengan langkah berikut :
    Klick File ==> Pilih Save For Web    (lihat gambar)

  • Rubahlah formatnya menjadi GIF untuk previewienya anda bisa mengklick tombol "play" kalau dikira sudah cukup silahkan klick tombol "Save" (lihat gambar)

HASIL AKHIR :



Nah sekarang anda bisa membuat sendiri sebuah Gambar Animasi untuk Kontak DP BBM, bagamaimana mudah bukan?  anda bisa memodifikasi atau membuat sebuah gambar Animasi sesuai dengan keinginan anda sendiri, contoh diatas merupakan contoh sederhana tingkat dasar dalam membuat sebuah Gambar Animasi Untuk kontak DP BBM (Blackberry Messengger) milik kita sendiri.

Iwan Fals - Cikal (Full Album) 1991

Sunday, August 17, 2014 | komentar

Dibawah bendera Indo Music Box pada 1991 Iwan Fals meluncurkan album berjudul Cikal. Cikal adalah nama putri Iwan Fals yang ke dua yang bernama lengkap Annisa Cikal Rambu Basae.

Namun jangan dikira album ini isinya puji-pujian kepada anak dengan bahasa yang sederhana, lirik dalam album ini begitu dalam dan berat, kental nuansa seni tingkat tinggi.
Pendukung dalam album juga bukan musisi sembarangan, ada Gilang Ramadan, Cok Rampal, Totok Tewel, Embong Rahardjo, Mates dan Mahesa Ibrahim. Musik yang ditampilkan jauh berbeda dengan album Iwan sebelumnya, aroma flute dan perkusi terasa jelas disini.
Album ini menjadi salah satu album yang paling dicari penggemar Iwan Fals karena sudah jarang ada di toko kaset.



Selamat Menikmati

((((( INDAHNYA BERBAGI )))))

Salam,
Erinnanto

DP BBM Edisi 17 Agustus

Thursday, August 14, 2014 | komentar

Kumpulan gambar animasi bergerak DP BBM edisi 17 Agustus 2014 Memperingati hari kemerdekaan Hut RI ke 69, Sesudah sekian hari yg kemudian Indonesia lakukan pemilihan presiden atau pilpres 2014 dengan cara langsung antara Jokowi-JK serta Prabowo-Hatta, saat ini waktunya warga Indonesia merayakan hari kemerdekaan Indonesia yg sebentar lagi menginjakkan usia yg ke 69 di tgl 17 Agustus 2014.


DP BBM Edisi 17 Agustus










Semoga Bermanfaat


((((( INDAHNYA BERBAGI )))))


Salam,
Erinnanto

 
Support : ErinGoBlog | Johny Template | ErinGoBlog On Facebook
Copyright © 2011. ErinGoBlog - All Rights Reserved
Template Created by Creating Website Published by ErinGoBlog
ErinGoBlog Protection by DMCA.com