materi 2

Cara Membuat Mp3 Player untuk Blog

1. Pilih warna mp3 player
2. Klik Edit Playlist
masukkan judul dan link url lagu

3. Klik setting
4. copy kan code pada tambah gadget/ html javascript. simpan dan lihat

1.  Cari lagu

2. Pilih lagu lalu klik "Embed"

3. Copy paste kan pada javascript(tambah gadget) kawan~

1. Buka
2. Atur warna
3. Tambah kan lagu
4. Get Code

Cara Memasang/Menyisipkan Video di Blog

1. Pilih video youtube yang ingin anda pasang di blog. Video boleh anda putar dan juga boleh anda matikan, terserah apa yang anda suka.

2. Perhatikan gambar di bawah ini dan lihat dibawahnya video. Silakan klik Bagikan atau Share, kemudian klik Sematkan atau Embed.

3. Setelah itu silakan copy kode embed yang tampak disitu. Lihat gambar atas yang berlatar biru.

* Cara memasang di postingan blog.
1. Buat postingan baru, lalu buka pada menu HTML di kiri atas (bukan Compose).
2. Pastekan kode embed disitu. Agar video berada persis di tengah halaman (tidak dipinggir) maka tambahkan script berikut ini:

<div style="text-align: center;">

Kode embed disini

</div> 

( i ) Contohnya seperti dibawah ini, dan sekalian silakan dicopy secara keseluruhan dan pastekan di blog anda untuk praktek.

Keterangan:

width="560" adalah lebar video dan height="315" adalah tinggi video. Silakan disesuaikan

dengan lebar halaman postingan anda.

3. Silakan dipublish karya anda.

* Cara memasang video di sedebar.

Jika anda ingin memasang video di sidebar, pastekan kode embed di atas pada Gadget HTML

Cara Mendownload Template

Mendownload template sebenarnya sangat mudah. Namun yang menjadi masalah biasanya file hasil download adalah bertype RAR. Padahal untuk dapat diterapkan di blog harus berformat .XML. Nah, bagi Anda yang belum pernah download jangan bingung karena Anda harus ekstrak/mengeluarkan file terlebih dahulu.
1.ketik alamat templates

. Download terlebih dahulu template yang diinginkan
. Ekstrak file download dengan cara:
- Klik kanan file
- Klik Extract File (tentukan folder tujuan hasil extract dan ingat-ingat)

3. Jika sudah berhasil, maka file yang berekstensi .xml atau siap diunggah iconnnya seperti ini:

Menerapkan Template Pada Blog

1. Untuk menerapkan template hasil download pada blog sangat mudah. Silahkan Anda pergi ke dashboard Blogger, khususnya ke bagian Template

2. Pada bagian kanan atas ada tombol Cadangkan/Pulihkan

3. Akan muncul kotak untuk unggah template Anda. Silahkan klik telusuri, kemudian cari file .xml Anda.

4. Klik tombol Unggah

NB: Di kolom pengunggahan ada tombol Unduh Template Lengkap, itu digunakan untuk back-up/simpan template yang sedang Anda pakai  ke komputer. Formatnya akan otomatis menjadi .xml file. Anda bisa gunakan lagi kapan-kapan ketika Anda mau. Jadi, sebelum ganti template sebaiknya di backup dulu kalau-kalau nanti Anda memerlukannya lagi.

Cara Mengganti Slide Foto di Blog

1. Login ke akun Blogger Anda
2. Klik Rancangan atau Tata Letak (layout)
3. Klik Edit HTML
4. Tekan Ctrl + F (dimaksudkan untuk memudahkan pencarian)
5. Ketiklah Title (nama) gambar yang akan diubah pada pencarian.
6. Jika gambar anda mirip dengan gambar berikut serta kalimat yang ada di dalam gambar ini sama, coba ketik title berikut "This Is Featured Post 5 Title" pada kotak pencarian Anda.

7. Setelah ketemu Anda dapat mengganti kalimat maupun gambarnya. 
8. Ganti url gambar slide template Anda dengan gambar yang Anda inginkan, cara mudah, Anda Upload terlebih dahulu gambar Anda pada website misal di Picasa, Flickr, maupun Photobucket. Selanjutnya copy url-nya dan pastekan pada url gambar yang anda temukan tadi.
9. Setelah pengeditan selesai Klik Simpan/Save

Catatan : 

• Usahakan gambar yang Anda upload sama ukurannya dengan gambar sebelumnya
• Untuk melihat ukuran gambar sebelumnya, Anda dapat meng-copy url gambarya dan mempastekannya di tab (jendela) baru berowser Anda.
• Setelah itu simpan dan lihat resolusi (ukuran) gambar tersebut. 
• Untuk memudahkan dalam pengeditan Lihat gambar berikut.

Cara Membuat Menu Dropdown di Blog

Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.

  Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.

  Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.

  http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.

  Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.

  Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.

·         Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

 Memasang Menu di Widget atau Gadget

  Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letak di blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.

  Copy semua kode di Notepad tadi dan Pastekan semua kode ke Gadget HTML/JavaScript. Dan Simpan.

  Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.

  Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.

  Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah :

  Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Dan Save Template.

  Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.

  Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.

  Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

Cara lain dengan memasukan kode css dan html di template blog

  Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.

  Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.

  Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.

all materi uas

Cara membuat MP3 Player di BLOGGER

pada artikel ini saya akan membahas Cara membuat MP3 Player di BLOGGER
untuk menambah widget mungkin widget yang satu ini boleh anda pakai, karena bisa membuat Pengunjung tidak bosan karena dengan mendengar lagu yang enak di dengar, dengan Fungsi bisa tidak langsung Play dan ada juga yang AutoPlay langsung saja TUTORIALnya :

kali ini Cara membuat MP3 Player di BLOGGER dengan menggunakan SCMPlayer

1. klik link : SCMPlayer
2. setelah muncul Website nya
3. terdapat gambar pilihan seperti gambar di bawah ini :

 kamu pilih mana yang menurutmu bagus ^_^


4. lalu setelah di pilih, klik menu yang Edit PlayList seperti gambar berikut :

Isi SongTitle dengan Nama Lagunya, dan Song URL, URL Lagu nya
5. setelah di isi semua, lalu pilih menu Configure Setting seperti gambar berikut :

-AutoPlay : Otomatis Memutar Video Centang bila ingin Otomatis Memutar Video, dan sebaliknya bila tidak ingin Otomatis Memutar Video atau Manual Play tidak usah di Centang
-ShufflePlayBack : Mengacak lagu yang di putar jadi secara acak lagu mana yang di putar tidak berurutan nomor ,  seperti diatas bila ingin di centang untuk Mengacak Lagu yang di putar , bila tidak ingin di acak tidak usah di centang
-DefaultVolume : DefaultVolume untuk mengatur Suara lagu 
-RepeatMode : Pilih sendiri( Bila ingin di ulangi diamkan saja )
-PlacementOfPlayerBar : "Top" Untuk posisi Mp3Player di atas dan "Bottom" untuk posisi Mp3Player di bawah
-ShowPlayListByDefault : Centang bila ingin menampilkan PlayList nya juga
-Lalu Click DONE !
setelah diClick akan muncul Kode Mp3Player

untuk Cara Memasang nya :

 TATA LETAK ==> ADD GADGET ( TAMBAH GADGET ) ==> HTML/JAVASCRIPT ==> Enter atau OK

Cara Memasang/Menyisipkan Video di Blog

1. Pilih video youtube yang ingin anda pasang di blog. Video boleh anda putar dan juga boleh anda matikan, terserah apa yang anda suka.

2. Perhatikan gambar di bawah ini dan lihat dibawahnya video. Silakan klik Bagikan atau Share, kemudian klik Sematkan atau Embed.

3. Setelah itu silakan copy kode embed yang tampak disitu. Lihat gambar atas yang berlatar biru.

* Cara memasang di postingan blog.
1. Buat postingan baru, lalu buka pada menu HTML di kiri atas (bukan Compose).
2. Pastekan kode embed disitu. Agar video berada persis di tengah halaman (tidak dipinggir) maka tambahkan script berikut ini:

<div style="text-align: center;">

Kode embed disini

</div> 

( i ) Contohnya seperti dibawah ini, dan sekalian silakan dicopy secara keseluruhan dan pastekan di blog anda untuk praktek.

Keterangan:

width="560" adalah lebar video dan height="315" adalah tinggi video. Silakan disesuaikan

dengan lebar halaman postingan anda.

3. Silakan dipublish karya anda.

* Cara memasang video di sedebar.

Jika anda ingin memasang video di sidebar, pastekan kode embed di atas pada Gadget HTML

Cara Mendownload Template

Mendownload template sebenarnya sangat mudah. Namun yang menjadi masalah biasanya file hasil download adalah bertype RAR. Padahal untuk dapat diterapkan di blog harus berformat .XML. Nah, bagi Anda yang belum pernah download jangan bingung karena Anda harus ekstrak/mengeluarkan file terlebih dahulu.
1.ketik alamat templates

. Download terlebih dahulu template yang diinginkan
. Ekstrak file download dengan cara:
- Klik kanan file
- Klik Extract File (tentukan folder tujuan hasil extract dan ingat-ingat)

3. Jika sudah berhasil, maka file yang berekstensi .xml atau siap diunggah iconnnya seperti ini:

Menerapkan Template Pada Blog

1. Untuk menerapkan template hasil download pada blog sangat mudah. Silahkan Anda pergi ke dashboard Blogger, khususnya ke bagian Template

2. Pada bagian kanan atas ada tombol Cadangkan/Pulihkan

3. Akan muncul kotak untuk unggah template Anda. Silahkan klik telusuri, kemudian cari file .xml Anda.

4. Klik tombol Unggah

NB: Di kolom pengunggahan ada tombol Unduh Template Lengkap, itu digunakan untuk back-up/simpan template yang sedang Anda pakai  ke komputer. Formatnya akan otomatis menjadi .xml file. Anda bisa gunakan lagi kapan-kapan ketika Anda mau. Jadi, sebelum ganti template sebaiknya di backup dulu kalau-kalau nanti Anda memerlukannya lagi.

Cara Mengganti Slide Foto di Blog

1. Login ke akun Blogger Anda
2. Klik Rancangan atau Tata Letak (layout)
3. Klik Edit HTML
4. Tekan Ctrl + F (dimaksudkan untuk memudahkan pencarian)
5. Ketiklah Title (nama) gambar yang akan diubah pada pencarian.
6. Jika gambar anda mirip dengan gambar berikut serta kalimat yang ada di dalam gambar ini sama, coba ketik title berikut "This Is Featured Post 5 Title" pada kotak pencarian Anda.

7. Setelah ketemu Anda dapat mengganti kalimat maupun gambarnya. 
8. Ganti url gambar slide template Anda dengan gambar yang Anda inginkan, cara mudah, Anda Upload terlebih dahulu gambar Anda pada website misal di Picasa, Flickr, maupun Photobucket. Selanjutnya copy url-nya dan pastekan pada url gambar yang anda temukan tadi.
9. Setelah pengeditan selesai Klik Simpan/Save

Catatan : 

• Usahakan gambar yang Anda upload sama ukurannya dengan gambar sebelumnya
• Untuk melihat ukuran gambar sebelumnya, Anda dapat meng-copy url gambarya dan mempastekannya di tab (jendela) baru berowser Anda.
• Setelah itu simpan dan lihat resolusi (ukuran) gambar tersebut. 
• Untuk memudahkan dalam pengeditan Lihat gambar berikut.

Cara Membuat Menu Dropdown di Blog

Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.

  Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.

  Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.

  http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.

  Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.

  Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.

·         Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

 Memasang Menu di Widget atau Gadget

  Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letak di blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.

  Copy semua kode di Notepad tadi dan Pastekan semua kode ke Gadget HTML/JavaScript. Dan Simpan.

  Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.

  Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.

  Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah :

  Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Dan Save Template.

  Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.

  Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.

  Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

Cara lain dengan memasukan kode css dan html di template blog

  Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.

  Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.

  Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.