Cara Membuat Tabel dalam Berbagai Macam dan Jenis

Terus terang sob,posting ini hanya untuk sobat-sobat yang ingin praktis dalam membuat tabel di blogger blogspot,berikut Cara Membuat Tabel dalam Berbagai Macam dan Jenis

1.Tabel Biasa

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td>belajar membuat tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td align="center">belajar membuat tabel</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal

Contoh:

belajar membuat tabel

Code:
<table width="300" border="6"><tr><td align="center">belajar membuat tabel</td></tr></table>

4.Tabel Biasa dengan 2 (dua) kolom / columns

Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah

Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris kedua</td><td>baris kedua</td></tr></table>

7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

10.Tabel yang terpisah.
Contoh:

satu
kolom satu	kolom dua
baris kedua	baris kedua
dua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (halah!)
Contoh:

Tabel Istimewa

Daftar Gan
No.	Name:
1.	Nama Satu
2.	Nama Dua
3.	Nama Tiga

Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>

Sebenarnya masih banyak gan varian dari tabel ini tinggal modif sendiri aja ya,see you and moga bermanpaat ya :D

Cara Memasang Flickr Foto Slide Show Widget di Blog

Bagaimana Mendapatkan Widget Slideshow dari Flickr?

Sedikit curhat ya gan,sebelum artikel ini dipublikasikan,ada peristiwa lucu yang bikin gw sewot ampe nih keringet di kening ga berhenti ngalir,saking paniknya.
Bagaimana tidak sob,waktu dan biaya ngNet gw yang sangat terbatas (maklum),sedang tuh job harus diselesaikan malem ntu juga dan gw cuman mo bikin gambar or photo slide show dari pic yang dah gw upload dari Flickr.Mondar mandir hampir setengah jam lebih hanya buat cari widget slideshow yang nantinya akan gw pasang di blog.

Ide ini muncul saat gw liat blog temen gw yang dapat nampilin foto slide dari flickr,niatnya pingin ikut-ikutan,eh taunya buat bikin widget slideshow bukanlah sesuatu yang mudah (mungkin krn gw belum ngatri caranya y :D)
Meskipun pada akhirnya,widget yang gw cari sudah gw dpt,tetap saja hati gw yang sebenarnya baik hati ini berhasil dibikin 'mangkel' karena harga widget Flickr ini adalah 5000 rupiah,lha kok bisa? JATAH NGNET GW SOB!!!!!!!!!!! hihihihi

Nah,untuk itu gw ga mau sobat ngerasain apa yg udah gw rasain (chie),so inilah Cara Memasang Flickr Slide Show Widget di Blog

Sebenarnya Flickr sendiri adalah anak perusahaan dari Yahoo,meskipun demikian kini Flickr dapat diakses dengan Google Account milik kita sob,jadi sobat meskipun tak memiliki akun dari Yahoo masih dapat menikmati fitur Flickr ini menggunakan Google akun sobat.

Pertama,sobat register alias daftar ke www.Flickr.Com,dan ikuti seperti gambar dibawah ini (ingat ya sob,ikuti langkahnya jangan ada yang ketinggalan!):

- Lakukan Register


1.

- Pilih akun Google (terserah sobat saja)


2.

- Isi sesuaikan dengan akun Google sobat beserta passwordnya (aman cuy)



- Klik 'Allow' button



- Isi data diri dan klik 'Continue'



- Setelah berhasil melakukan registrasi,klik 'Upload' di sudut kanan atas



- Tinggal klik 'Choose Photos and Videos' untuk mengupload file yang sobat ingin jadikan slide foto flickr widget nantinya.



- Setelah itu,klik 'Upload Photos and Videos' dan tunggu sampai proses selesai.



- Setelah proses selesai,pilih pada menu dropdown 'You' dan pilih submenu 'Your Photostream'



- Lihat sebelah kanan atas,ada icon 'Slideshow' klik icon tersebut.



- Klik 'Share' lalu klik kanan pada kode 'Embed' dan Copy kode tersebut.



- Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript >

Setelah itu letakkan kode yang berhasil sobat copy tadi pada widget HTML/Javascript tersebut,dan simpan.
Kini sobat sudah dapat melihat hasilnya,mudah khan sob? :D

Membuat Streaming Audio / Video Sendiri dari Google Code untuk Blog

Menggunakan Google Code untuk menyimpan File

Seperti yang sudah sobat ketahui jika teman-teman sudah membaca dari artikel blog ini sebelumnya di 'Membuat Link Download dengan Google Code'.Memang beda tema dan beda topik juga gan,namun sebagai langkah awal dalam membuat streaming mp3 sendiri di blogger ini akan sama halnya seperti tutorial dalam menggunakan Google Code di posting beberapa waktu lalu.

Yup,dalam hal ini file yang sudah tersimpan di Google Code (misal file Mp3) dapat kita gunakan dan kita rubah menjadi streaming audio (bisa juga video,tergantung dari jenis ekstensi file) dan langsung dapat kita pasang di blog pribadi miliki kita,keren khan sob?

Mendingan langsung ke TKP aja ya gan,
Pertama,Sobat simak di artikel sebelumnya dalam 'Cara Membuat Link Download dengan Google Code',silakan klik di SINI untuk tutorialnya.

Kedua,sudah sobat ketahui alamat dari url file (mp3 dalam contoh) dalam Google Code yang kita ciptakan,misal yang berhasil saya submit adalah file tentang 'Benarkah bid'ah itu sesat?',lihat screenshot gambarnya ya gan (ini saya ambil dari creenshot posting beberapa waktu lalu):

Nah,setelah url dari file mp3 telah kita dapatkan (cara mendapatkannya seperti tutorial beberapa waktu lalu ya,klik kanan pada file dan pilih 'Copy Link Locations' seperti gambar diatas pent-),kini saatnya kita menerapkannya pada streaming yang akan kita tunjukkan pada pengunjung.

Disini kita sudah mendapat url file yang akan kita jadikan obyek,yakni:

http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3

Perlu diingat sob,syarat dari streaming ini adalah di komputer sobat sudah terinstall Media Player,dan hal ini saya kira sudah terinstall di komputer ya,secara bawaan dari windows gt loh,hihihihi..

Jadi,jika sobat ingin download semisal kajian mp3,mpg atau file berekstensi lain yang disupport media player windows,tak perlu harus menunggu sampai file selesai didownload,tinggal test aja file mp3 nya di widget ini,hehehehehe

Contoh fisik dari streaming audio/video ini sobat bisa lihat seperti di bawah ini (file saya ambil dari Google Code yang telah saya submit beberapa waktu lalu):

Pb:Nah,gimana sob,cukup lama juga ya menunggu streaming bekerja?
Sobat: Tidak juga kok,hanya butuh beberapa detik saja :D

So,yuk cari tahu bagaimana cara membuat streaming sendiri untuk blog di blogspot dan caranya ternyata sangat mudah sob,Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript >

Setelah itu letakkan kode berikut lalu simpan dan lihat hasilnya :D

<embed type="application/x-mplayer2" src="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" name="MediaPlayer" controls="ControlPanel,StatusBar" autostart="true" height="45" width="300"></embed>

Untuk url file: http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3,rubah sesuai dengan alamat url dari file sobat yang sudah teman-teman upload di Google Code.Semoga berhasil dan ingat jangan upload musik gan,haram :D (pingin jadi ustadz sob..)

Sobat:Huh!!,gampang bgt!,tp knp artikelny panjang ky gini ya @#$%#$%

Membuat Slideshow Photo / Foto Berubah-ubah

UPdate! Trik Membuat SlideShow Image Widget for Blogger,Sudah Direvisi! Dijamin Berhasil 100%

SlideShow Image Widget for Blogger

Masih ingat ga sob artikel tentang membuat widget gambar slideshow beberapa waktu lalu? Yup,saya menemukan cara yang singkat mudah dan terlihat 'sempurna' dari script yang diciptakan teman kita ini,saya ambil artikel ini dari blog sahabat di www.khairulumam.com.
Jika widget yang pertama hanya menampilkan gambar dalam ukuran kecil bahkan navigasi slide-nya sedikit cacat karena tidak dapat ditampilkan sempurna disamping widget,lain halnya dengan script slideshow widget for blogger kali ini.

Widget ini terkesan lebih professional membuat kami ingin membagikan informasi ini pada teman-teman.
Bentuk fisiknya sobat bisa lihat di SINI.

Nah,ini juga salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis (jadi tak perlu menggunakan tombol geser,etc).

Itulah mengapa artikel kali ini saya beri judul Membuat Slideshow Photo / Foto Berubah-ubah dalam Membuat SlideShow Foto Widget #2 sebagai penyempurnaan dari widget sebelumnya di membuat slideshow jquery di postingan beberapa waktu lalu.
Oke sob,kita intip yuk bagaimana cara membuat widget slide show pada gambar / image / pictures ini.

Langkah dan Cara Membuat Slide Show Photo Widget for Blogspot

Pertama,sobat pergi ke pasar (hush!!!!) maksud kami pergi ke Dashboard > Tata Letak > Edit HTML > Contreng Expand Widget Templates (lihat gambar)

(1)


(2)


(3)

Cari kode <head> (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat dibawahnya letakkan kode script berikut ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Ket: kode berwarna merah adalah kode yang sobat bisa ganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain sobat otak-atik aja sendiri ya :D

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<ul class="slideshow">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2sk0W1XtdzztFBZ81sGMlP_CZNxeAGzekIe9-msb616Ugrz7YX7KTmHB2Ktb0eZZKb83hIfktqFQmKMRD73cPg8z9pHB9jrehFyOMphwCe_m9faRDnl7qTZUIO8ZPAASKdHaeV-G1_o/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2sk0W1XtdzztFBZ81sGMlP_CZNxeAGzekIe9-msb616Ugrz7YX7KTmHB2Ktb0eZZKb83hIfktqFQmKMRD73cPg8z9pHB9jrehFyOMphwCe_m9faRDnl7qTZUIO8ZPAASKdHaeV-G1_o/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECdMozpgwn4ulh58yrnrC86N6151JqK9pi5RVZnrhnZ-xcLCWKnGv3nAkJ-5N173NbvXbPsnir2Si1TC8GgR8DwNDDJvo3o31hxrwRFEySs66jbmMGU8HPMYiXMUT3TozT7P9780Ww_A/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECdMozpgwn4ulh58yrnrC86N6151JqK9pi5RVZnrhnZ-xcLCWKnGv3nAkJ-5N173NbvXbPsnir2Si1TC8GgR8DwNDDJvo3o31hxrwRFEySs66jbmMGU8HPMYiXMUT3TozT7P9780Ww_A/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43DlkMgGUVp6C6F15dME7PQbtWjZwnSEb2eefMrvQb3iONMxOP1asW6QYU25eluc2QmD2xq-X7RKtW5GumulbAGiRQTxzFYJ7LavqmJRaudONXabUffyRRkLJlTy9TJbZoy7ZdwX5xg4/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43DlkMgGUVp6C6F15dME7PQbtWjZwnSEb2eefMrvQb3iONMxOP1asW6QYU25eluc2QmD2xq-X7RKtW5GumulbAGiRQTxzFYJ7LavqmJRaudONXabUffyRRkLJlTy9TJbZoy7ZdwX5xg4/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZBP1Dpfot0lhR3rfRhZWWR2ztKoViV2GRBImWe3aRPvdtFMdzoQXlxy3TYB90TWd6taHiFzIbvhSUxgR35mlE-3YkFhvFbUzD2MLoUWIFZd_OWaXqvtjQwsFf8dr7q4xbgnyW6-kl5E/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZBP1Dpfot0lhR3rfRhZWWR2ztKoViV2GRBImWe3aRPvdtFMdzoQXlxy3TYB90TWd6taHiFzIbvhSUxgR35mlE-3YkFhvFbUzD2MLoUWIFZd_OWaXqvtjQwsFf8dr7q4xbgnyW6-kl5E/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Simpan dan lihat hasilnya,mudah singkat dan menarik khan sob?

Sebagai kata terakhir gan,kami Pelajaran Blog menyampaikan rasa Terima kasih buat pihak-pihak yang terkait,i love you full guys! :D

Trik Membuat Slide Show Foto Widget #2

YouTube Blogger Template - BloggerTube - YouTube Style Bloger Templete

Kelebihan BloggerTube - Youtube Style Blogger Template

Tidak meniru 100% dari template yang digunakan oleh YouTube,namun sekilas jika kita melihat dari segi performence-nya ada kesamaan face / tampilan design-nya.
Adalah BloggerTube Blogger Template mengusung blogger template Youtube Style,kita semua tahu hal ini tidak akan sampai melanggar hukum kecuali jika kita menerapkannya 100% seperti YouTube dan mengklaimnya sebagai hasil dan hak cipta sendiri apalagi memperdagangkannya.

Sedang di sini pun yang akan dibahas tidak 100% menjiplak dari YouTube,namun kelebihannya adalah lebih enak dilihat dan sangat pas diterapkan jika kontent blog berisi lebih banyak menggunakan streaming video.
Contoh fisiknya atau demonya,sobat bisa lihat di salah satu blog teman kami di SINI,dengan catatan jika dari pihak yang menciptakannya sudah menghapus file-file yang didalamnya (seperti javascriptnya,icon-nya,dll) maka template ini tidak akan bekerja dengan yang semestinya.

Bagaimana Cara Menginstall BloggerTube - YouTube Blogger Template?

Pertama,sama dengan langkah dan cara mengganti template blogger menjadi WikiPedia Style Blogger Template pada beberapa hari yang lalu,ikuti instruktur tersebut sampai dengan selesai.

Kedua,Setelah template blogger anda sudah berhasil dikonvert menjadi 'Youtube Style',modofikasilah beberapa nama-nama yang sekiranya anda tidak butuhkan,caranya dengan Pergi ke Tata Letak lalu pilih Edit Html dan contreng Expand Widget Templates lalu gunakan Ctrl+F pada keyboard untuk merubah nama mana yang akan sobat ganti.

Teknik merubah nama ini bisa gunakan trik seperti (ini hanya contoh merubah isi template aja ya gan):

-Lihat blog dan lihat nama mana yang ganjil dan akan sobat ganti:

-Pergi ke Tata Letak lalu pilih Edit Html dan contreng Expand Widget Templates lalu gunakan Ctrl+F pada keyboard untuk merubah nama mana yang akan sobat ganti tersebut.

Di atas hanyalah trik cara mengganti isi template atau merubah tulisan pada template yang ingin kita rubah sesuai dengan keinginan kita masing-masing.

Ketiga,jika template sudah sesuai dengan keinginan,kini saatnya untuk mengatur agar hasil pencarian nanti dapat menampilkan screenshot videonya.

Caranya,setiap melakukan posting baru,pastikan sobat meletakkan kode berikut:
Misal sobat ingin meletakkan video dari youtube dengan url seperti dibawah ini (untuk cara meletakkan/memasang video youtube ke blog bisa sobat baca tutornya di sini)

gb.screenshot

Perhatikan ya gan url yang diberi tanda lingkar tersebut,itulah yang nantinya akan dimasukkan dalam posting kita.
Cara menerapkannya seperti ini:
1.Saya akan posting tentang video di url

http://www.youtube.com/watch?v=sLLCAmr8vjs

2.Saya akan meletakkan kode berikut untuk menampilkannya di blog

<embed src="http://www.youtube.com/v/sLLCAmr8vjs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>

3.Saya akan menempatkan kode berikut setelah kode diatas (kode berikut berfungsi untuk memperlihatkan screenshot video yang bersangkutan seperti gb.screenshot diatas:

<img src="http://i2.ytimg.com/vi/6chUPd4XSrw/default.jpg" />

Ket:kode sLLCAmr8vjs saya ambil dari sumber video tersebut.

Bagaimana sob,penasaran ingin mencoba template tersebut? klik di SINI ya untuk download file.Semoga bermanfaat dan sampaikan saran dan kritik sobat di Facebook Fan Page kami ya :D

Menambahkan Gambar di Samping Judul Post

Memasang Icon Gambar Sebelum Entri Posting

Gambar Icon disamping Judul Posting - Sengaja saya lakukan dua posting malam ini sob,pasalnya ada sahabat kita yang menanyakan bagaimana sih menambahkan/memasang/meletakkan/membuat icon gambar sebelul entri atau judul postingan

Memang meletakkan script atau bahasa html pada template blogger (halaman edit html dengan contreng exspand widget templates) yang biasa kita lakukan,akan tidak bekerja jika terjadi kesalahan meskipun hanya kesalahan kecil dalam menuliskan 'tanda petik,garis miring sebagai penutup dalam bahasa html,dan lain sebagainya.

Oleh karenanya,kode yang akan kita tempatkan pada halaman tersebut harus benar-benar fix tanpa ada kesalahan,biasanya yang sering terjadi adalah kesalahan pada tanda petik.
Berikut ini sob adalah tutorial cara menambahkan icon gambar sebelum entri posting pada blogger yang sebenarnya pernah juga saya sharing di posting 'cara meletekkan gambar sebelum judul posting' beberapoa waktu lalu.Insya Allah,cara ini 100% bekerja.

Langkah Memasang Icon Gambar Sebelum Entri / Judul Posting

Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut.

Contoh,alamat URL gambar yang saya punya:

---

http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif

---

Rubahlah menjadi seperti ini:

---

<img src='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif'></img>

---

Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi.

---

Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah!

Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Contreng Expand Widget Templates,lalu cari kode berikut :

---

<a expr:href='data:post.url'><data:post.title/></a>

---

Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis!

Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut.

Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini :

---

<a expr:href='data:post.url'>
<imgsrc='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif'></img>
<data:post.title/></a>

Semoga bermanfaat,dan maklum atas repost ini ya sob :D

Cara Membuat Sub Menu Navigasi Ber-Gambar

Navigasi Menu Box dengan Gambar

Sama seperti halnya membuat menu navigasi horizontal dengan sub menu vertikal pada posting beberapa waktu lalu,namun kali ini hanya merubahnya dalam bentuk sebuah sub menu bergambar dari menu navigasi pada blog dari www.blogger.com.
Pada dasarnya,kita hanya menyelipkan sebuah image / obyek gambar yang ingin ditampilkan sebagai pengganti tulisan dalam link-link yang ada dalam sub menu navigasi.
Hasilnya akan seperti ini (arahkan mouse pointer pada box menu dibawah ini:

• Home
• Join Us
  • 
  • 
• Other

Dengan demikian hal ini kita masuk dalam sesi menghias blog (tumben nih penulis pake bahasa formal,takut dibaca ma presiden RI ya,:p) hehe

Jika hanya mengombinasikannya dengan artikel 'membuat menu navigasi' yang lalu,hasil yang akan kita dapat tidak akan sesuai dengan apa yang kita inginkan,ini karena pengaturan jarak,background dan lebar serta tinggi dari box menu akan berbeda.

Berikut penjelasan lebih rincinya,dan dari cara ini nanti sobat dapat menenetukan dan memodifikasinya sendiri sesuai dengan selera masing-masing.

Langkah Membuat Sub Menu Navigasi dengan Bergambar

Pertama,sobat tentukan dahulu gambar yang akan ditampilkan dalam sub menu navigasinya,ini dapat dilakukan dengan dua cara dan sobat bisa pilih cara mana yang mudah bagi agan-agan,yakni:

1.Membuat gambar dengan software semacam dreamweaver,lalu upload gambar ke posting untuk mendapatkan url alamat dari gambar tersebut.

2.Bisa menggunakan gambar yang sudah ada yang sobat inginkan,misal dari hasil pencarian gambar di Google (tapi cara ini tidak efektif,karena saat situs yang kita ambil url obyek gambarnya sudah mengahapus obyek mereka(yang kita ambil url-nya) otomatis gambar di blog milik kita juga akan terhapus.

Dari dua langkah diatas,saya misal pilih no 1,dengan cara,saya punya gambar yang ada di komputer saya lalu saya upload ke posting setelah itu klik kanan pada gambar dan pilih 'view image' dan kita sudah dapat url gambar tersebut dan lakukan copy.

Kita sudah mendapatkan url dari alamat gambar (facebook button) yang ingin kita tempatkan pada submenu navigasi nantinya,yakni:

http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG

Nah setelah itu,jika sobat menginginkan lebih dari satu gambar lagi dalam submenu(yang kami pakai dalam artikel ini adalah dua gambar),sobat bisa lakukan dengan langkah seperti cara diatas,misal saya ingin menambahkan gambar url dari twitter button pent-),dan saya telah mendapatkannya yakni:

http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG

Dari langkah pertama ini kita sudah mendapatkan dua url gambar yang nantinya akan kita tempatkan pada submenu navigasi.

Kedua,seperti pada membuat menu navigasi horizontal dengan submenu vertikel di posting beberapa waktu lalu,kita akan menggunakannya dengan cara yang sama,ikuti langkah selanjutnya ya sob:

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.
  
  
  Gb.1
  
  
• Selanjutnya pilih tab Edit Html (Gb.2).
  
  
  Gb.2
  
  
• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).
  
  
  Gb.3
  
  
• Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.
  
  #NavbarMenu{background:#ffffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; text-transform:capitalize border-bottom:1px solid #666;}
#NavbarMenu{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:capitalize; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#ffffff; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#222222; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia,;}
#nav li li a:hover, #nav li li a:active{background:#ffffff; color:black; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
  
  
• Setelah itu Simpan Templates.
• Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
• Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)
  
  
  Gb.4
  
  Gb.5
  
  
• Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.
  
  <ul id='nav'>
<li><a href='http://nama_blog_anda.blogspot.com/' title='Home'>Home</a> </li>
<li><a href='http://nama_blog_anda.blogspot.com/'>Join Us</a>
<ul>
<li><a href='http://id-id.facebook.com/pages/Pelajaran-Blog/289839067320' title='Facebook'><img alt='facebook' height='100%' src='http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG' title='facebook' width='100%'/></a> </li>
<li><a href='http://twitter.com/mrpujiajadeh' title='Twitter'><img alt='twitter' height='100%' src='http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG' title='twitter' width='100%'/></a> </li>
</ul> </li>
<li><a href='#' title='Other'>Other</a> </li>
</ul>
  
  
• Lalu simpan,selesai dan lihat hasilnya :D

Kode Warna Html / Html Code of Color

Kode Warna dalam Bahasa Html

Sengaja artikel ini saya ambil dari situs di http://camex.wen.ru/Sampel/Warna.html untuk sekedar berbagi saja,mengingat para blogger pemula yang belum mengetahuinya namun nyasar di blog sederhana ini,maka dengan senang hati kami mempublikasikannya kembali di sini.

Seperti yang sudah kita ketahui ya sob,kode kode warna dalam bahasa html sangatlah banyak,maka jika dibuat dengan tabel seperti yang dilakukan teman kita ini sangat membantu sekali.
Mungkin beberapa waktu lalu di posting Kode kode Html belum sempat saya bahas masalah ini,dan inilah waktu saya ingin bagikan informasi html warna ini.

Saya yakin bahwa pembuat tabel ini sangat teliti dan ini jasa yang tidak sembarangan untuk di duplikat,kendati demikian tanpa mengurangi rasa hormat saya kepada pihak yang terkait,saya lampirkan tabel warna beliau di posting kali ini.Semoga membantu ya sob.

Contoh penggunaan dari kode html warna ini cukup melihat notasinya tepat berada di tabel warna yang dimaksudkan.
Misal,saya ingin menulis 'Belajar Kode Warna Html' dengan warna merah,maka saya akan menuliskannya bisa dengan dua cara,yakni:

Saya akan menulis posting dengan metode Edit Html bukan Compose,lihat gambar:

1.Saya bisa menulikannya seperti ini:

<span style="color:red;">Belajar Kode Warna Html</span>

2.Saya bisa menggantinya dengan menggunakan bahasa warna html dari merah,llihat tabel,kode html dari merah adalah #FF0000,jadi saya bisa menuliskannya seperti ini:

<span style="color:#FF0000;">Belajar Kode Warna Html</span>

Dan,inilah tabel kode warna untuk bahasa html:

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

Membuat Related Post dengan Read More

Cara Menciptakan Related Post jQuery beserta Read More-nya

Sudah banyak tutorial bagaimana cara membuat related post / artikel yang berhubungan,entah itu menggunakan type 'default' dari www.blogger.com (yang bisa sobat ciptakan dengan menggunakan url feed) maupun dengan type jQuery yang dapat menampilkan Tumbnails Related Post (preview gambar) dan Javascript related post widget seperti yang sudah pernah kami share beberapa waktu lalu.

Adalah Related post dengan read more atau sebuah tumbnail related post disertai dengan read more atau baca selengkapnya pada blogger akan menjadi tema posting malam ini.
Untuk bentuk fisik,sobat bisa lihat gambar seperti dibawah ini:

Lihat demonya di sini

Tapi perlu diingat ya sob,widget yang akan kita ciptakan ini bukan widget 'artikel yang berkaitan' tapi 'related post / artikel terbaru'.So,artikel yang akan kita posting ini hanya akan menampilkan beberapa posting terbaru sobat (sobat bisa menentukan berapa jumlah posting yang akan ditampilkan) bukan menampilkan artikel yang berkaitan / berhubungan.

Yang menarik adalah widget ini dapat menampilkan 'read more' atau 'baca selengkapnya' pada tiap-tiap related post,menarik bukan?
Untuk caranya sangat mudah sob,tinggal pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:

[1]


[2]


[3]

Dan letakkan kode berikut disana:

<div id="bp_recent"></div><div class="bp_footer"></div>
<script style='text/javascript' src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostspelajaranblog.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'Read More';
</script>
<script src='http://geliat-bisnis.blogspot.com/feeds/posts/summary?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

**
Untuk kode yang bercetak warna merah 5 gantilah dengan jumlah relate posting yang akan ditampilkan,sedangkan geliat-bisnis.blogspot.com gantilah dengan nama blog sobat.

Simpan template,dan lihat blog sobat sekarang :D

Cara Membuat Link Download dengan Google Code

Cara Menggunakan File Hosting Gratis Google Code

Beberapa hari lalu ada sahabat kami yang menanyakan bagaimana cara menggunakan google code file hosting gratis ini,nah sebagai bahan posting kali ini saya menggunakannya dengan salah satu manfaat dari file hosting gratis ini,yakni membuat link download untuk blogger

Namun selain dapat digunakan sebagai sarana untuk menempatkan sebuah file di komputer kamu yang ingin kamu share,Google Code juga mampu digunakan untuk fungsi javascript,php dan lain sejenisnya.Namun disini kita akan coba sharing bagaimana menggunakan file hosting gratis google code untuk membuat link download.

Daripada banyak teori kepala malah tambah pusing,yuk dimari kita sama-sama cari tahu langkah dan cara membuat link download di blogger dengan google code.

Contoh fisik akan seperti ini sob:

Belajar membuat link download:

Silakan klik di sini

Nah,gimana sob? ingin mencobanya? yuk ikuti langkah berikut ya gan :D

Cara Mudah Membuat Link Download

Pertama sobat daftar di code.google.com,jika dah punya account di GMail tinggal daftar aja dengan email atau account google sobat,jika dah berhasil login,sobat nantiu akan lihat tampilan seperti ini dan klik aja Project Hosting,lihat gambar:



Selanjutnya nanti akan tampil halaman baru klik aja 'Project Hosting on Google Code',lihat gambar gan:





Kemudian,sobat akan dihadapkan halaman seperti gambar berikut,dan isi form sesuai dengan permintaan dan hal-hal seputar file yang akan sobat download(gunakan huruf kecil aja ya),lalu klik Create Project:



Project sobat sudah berhasil dibuat,klik 'Downloads' untuk mulai meng-upload file,lihat gambar gan:



Setelah itu sobat akan dihadapkan halaman seperti berikut,klik tombol 'New Download',lihat gambar:



Nanti sobat akan dihadapkan form seperti gambar berikut,isilah form sesuai dengan kriteria file sobat yang akan di upload,lihat gambar:



Dan tada!!! file anda telah berhasil anda upload dengan tampilnya halaman seperti dibawah ini,klik file untuk melihat statusnya,lihat gambar:



Sebagai langkah terakhir,sobat klik kanan pada file seperti gambar dibawah ini dan klik 'Copy Link Location',lihat gambar:

Nah,setelah sobat melakukan langkah-langkah diatas,sekarang sobat sudah memiliki url dari file yang baru saja sobat upload dari mengcopy lokasi file,pada tahap ini saya mendapatkan url file seperti ini:

http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3

Yup,itulah url link yang sobat dapat gunakan dalam tutorial membuat link download kali ini,nah cara menggunakannya pada posting or Html widget gunakan kode berikut:

<a href="nama_url_link" target="_blank">nama file (terserah sobat ya)</a>

contoh:

<a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Benarkah Bid'ah itu Sesat?</a>

Semoga berhasil dan semoga bermanfaat ya sob :D,

Cara Memasang Lagu / Musik / Cara Pasang Mp3 di Blog

Cara Mudah Memasang Lagu / Musik / Streaming Mp3 di Blog

Akhirnya,hari ini saya dapat meluangkan waktu lagi buat ngeluarin unek-unek yang selalu menghantuiku (cyakellahhh..),bener sekali sob,jika beberapa waktu lalu sempet posting masalah membuat streaming mp3 di facebook kali ini cuman mau sharing bagaimana cara pasang atau memasang lagu,musik atau file mp3 dari komputer kamu supaya nanti setiap buka blog pengunjung langsung dapat mendengarkan file musik / lagu / mp3 [streaming] di blog kamu tanpa harus menekan tombol play.

Yup,cara pasang lagu otomatis di blog adalah tema malam ini sob,bagi yang sudah pada tahu ya lewatin aja deh posting kali ini,tapi bagi sobat-sobat yang pingin tahu bisa simak ya tutorial cara pasang musik otomatis di blog ini,OK?

Berhubung sebagian ulama (kita hidup ga lama sob) ada yang mengharamkan musik atau lagu (bisa baca di sini) so,kita ambil aja file mp3 berbentuk kajian ya :D (no sara,itung-itung biar dapet pahala pent-)

Langkah Cara Pasang File Mp3 di Blog secara Otomatis (Auto Play)

Pertama sobat siapkan dulu file mp3 yang akan diletakkan di blog agar nantinya setiap pengunjung membuka halaman blog sobat bisa langsung dengerin dan ga pake tekan tombol Play.
Letakkan file di folder mana saja (bisa di My Document or yang laen)di kompi kamu,misal nama filenya 'siapa bilang bid'ah itu sesat.mp3'

Selanjutnya,sobat kunjungi situs www.toofiles.com dan lakukan Register seperti gambar di bawah ini:

Setelah itu ikuti instruktur aja sob,lihat gambar ya:



Selanjutnya kunjungi email sobat dan lakukan aktivasi disana,lihat gambar ni:



Nah,nanti sobat akan dibawa ke halaman situs www.toofiles.com lagi untuk login ulang disana,setelah sobat berhasil masuk (Log In) sobat klik aja tab 'Home' dan sobat pilih Audio,lihat gambar:



Setelah itu akan tampil halaman seperti dibawah ini sob,cari file yang sudah sobat siapkan tadi lalu klik 'Upload',lihat gambar:



Selanjutnya,setelah proses upload selesai klik aja gan link untuk menampilkan kode html-nya,setelah itu copy kode tersebut,lihat gambar:



Selanjutnya letakkan kode tersebut di halaman widget sobat,caranya pergilah ke Dashboard lalu pilih Tata Letak selanjutnya klik tulisan 'Add a Gadget' [1] lalu pilih Html/Javascript [2],lihat gambar:


1.


2.

Lalu letakkan kode yang berhasil sobat copy,lalu paste ke gadget tersebut,Simpan dan Selesai :D Moga bermanfaat ya gan,see you and keep post!