Sitemap - Cara Mudah Cari Apa Yang Korang Nak Cari Part 2

Ini lanjutan kepada tips SiteMap yang aku kongsi 7 tahun lepas hahahahah lamanya. Bukan apa, yang dulu tu ok tapi bila satu cerita ada 3-4 label, senarai yang keluar hambek ko – meleret leret dan berulang ulang link cerita tuh.

Yang ni aku jumpa di blog Cara Awesome yang bestnya cuma label je

yang muncul. Senarai entri keluar bila kita klik pada label yang diingini. Nampak lebih kemas.

Di bawah ni aku beri jugalah kodingnya:

<style type='text/css' scoped='scoped'> #sidebar-wrapper{display:none!important}#main-wrapper{width:98%!important}#show-cat{float:left;margin:0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #e6e6e6}#show-cat ul{margin:0;padding:0}#show-cat ul li{list-style-type:none;margin:0;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #e6e6e6}#navi-cat a:hover{color:#ccc!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#333;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#ddd;color:#aaa}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;padding:10px;}#show-post a:hover{color:#07ACEC}#show-post a{font-weight:normal}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}.post-body ul{margin:0!important}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}} </style> <div id='show-cat'></div> <div id='show-post'> <script type='text/javaScript'> var cat_home='http://empayarutama.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#232531!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script></div> <div style="clear:both;"></div>

Nota ringkas:
Warna Merah tu MESTI ditukar dengan nama blog korang
Warna Biru tu ikut sukalah – ikut kesesuaian belog dan sesedap mata memandang hehe

Haaa sebab apa aku beri kodingnya? Sebab bila dah dicopy paste ke dalam html page; dan ejas sana sikit sini sikit – SiteMap tu macam tak nak keluar. Aku cuba banyak kali dah.

Saranan aku – copy coding ke dalam NotePad / WordPad dulu; ejasler mana yang nak diejas kendian baru pastekan ke dalam html page dan save/publish. Kalau tak puashati dengan paparannya; ejas lagi guna yang dah siap dicopy/ejas dalam NotePad / WordPad tadi tuh. Buat berulang kali sampai korang puashati hasilnya.


Buleh jadi punyalah, kita buat dia kannnnn....

Cerita seterusnya »

Jimat Ruang Entri Menggunakan JavaScript

Kali ini aku cuba kongsi pemasangan slide dalam entri dengan guna hanya satu simple javascript sahaja; tidak seperti kebiasaan dimana kita guna satu jQuery script dan satu javascript untuk buat slide.

Oleh kerana ianya basic, hanya slide bergambar yang dapat kita tunjukkan. Tapi memang tidak rumit.

Apa yang perlu hanya tukar masa slide (lihat kod (timeOut) warna hijau); saiz imej ikur kesesuaian sendiri (lihat kod warna merah); serta bilangan imej yang ingin dipos (lihat kod warna biru yang ditebalkan).

Untuk mencuba, ambik kod kat bawah :

<div style="text-align: center;">
<script type="text/javascript">
var image1=new Image()
image1.src="imej pertama"
var image2=new Image()
image2.src="imej kedua"
var image3=new Image()
image3.src="imej ketiga"
//</script>

<img height="350" name="slide" src="imej pertama" width="350" />

<script>
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1500)
}
slideit()
</script>

</div>

Contoh slide (24 gambar) :

Haaa cubalah...

Cerita seterusnya »

Kemaskini Tutorial Pasang Lagu/Autoplay/Repeat/Pause

Ini merupakan kemaskini kepada cerita Pasang Lagu/Autoplay/Repeat/Pause lebih 4 tahun lepas. Lama tuuuu...

Dengan adanya secured link (https) serta tuanpunya web - youtube yang mengawal kemas gelanggang dengan payungan google di belakangnya, banyakle kod yang tak boleh berfungsi dengan cantik. Tak gitu?

Ok mari kita cuba lagi. Tak cuba tak tau kan...

Memula tukar link youtube kepada link lain. Aku cadangkan guna guna ListenVid Camni:

1. Buka YouTube dan cari lagu. Ambil linknya.

2. Buka ListenVid dan paste link tadi dalam box yang disediakan. Pilih .mp4 untuk dapat link baru:

3. Tekan 'Convert it!'

4. Nanti akan keluar paparan camni:

Klik kanan mouse di butang download (warna hijau tu) dan pilih Copy link address. Simpanle dulu kat notepad atau wordpad. Untuk contoh aku; linknya ialah:
http://listenvid.com/index.php?output=yt/EfXSvvJT-f8/128%7e%7e256%7e%7eKhairil_Johari_Johar_Sepasang_Kurung_Biru_Lirik_uuid-580cf0f0315e9.mp4

Untuk paparkan hanya butang 'Play' dan 'Stop'; ikut aja kod kat bawah ni. Jangan lupa tukar link pilihan kamu sendiri:

<script type="text/javascript"> playerFile = "http://www.mcmediaplayer.com/public/mcmp_0.8.swf"; fpFileURL = "http://listenvid.com/index.php?output=yt/EfXSvvJT-f8/128%7e%7e256%7e%7eKhairil_Johari_Johar_Sepasang_Kurung_Biru_Lirik_uuid-580cf0f0315e9.mp4"; playerSize = "55x25"; cpBackgroundColor = "ffffff"; cpPlayBtnColor = "3355ff"; cpStopBtnColor = "cc0000"; cpInfoBtnPosition = "0x55"; fpButtonOpacity = "0"; cpHidePanel = "never"; </script> <script type="text/javascript" src="http://www.mcmediaplayer.com/public/mcmp_0.8.js"></script>

Untuk paparkan butang 'Play', 'Stop', Volume dan Scrubber; ambil kod kat bawah. Jangan lupa tukar link lagu pilihan kamu sendiri:

<script type="text/javascript"> playerFile = "http://www.mcmediaplayer.com/public/mcmp_0.8.swf"; fpFileURL = "http://listenvid.com/index.php?output=yt/EfXSvvJT-f8/128%7e%7e256%7e%7eKhairil_Johari_Johar_Sepasang_Kurung_Biru_Lirik_uuid-580cf0f0315e9.mp4"; playerSize = "240x25"; cpBackgroundColor = "ffffff"; cpPlayBtnColor = "cc0000"; cpStopBtnColor = "cc0000"; playerBackgroundColor = "ffffff"; cpInfoBtnPosition = "0x240"; cpFullscreenBtnPosition = "0x240"; fpButtonOpacity = "0"; cpHidePanel = "never"; </script> <script type="text/javascript" src="http://www.mcmediaplayer.com/public/mcmp_0.8.js"></script>

Kenapa awalnya tadi aku cadang untuk tukar kepada link .mp4? Sebab script ni boleh paparkan videonya. Kita cuma perlu ejas ketinggian dan tambah lagi kod macam kat bawah:

<script type="text/javascript"> playerFile = "http://www.mcmediaplayer.com/public/mcmp_0.8.swf"; fpFileURL = "http://listenvid.com/index.php?output=yt/EfXSvvJT-f8/128%7e%7e256%7e%7eKhairil_Johari_Johar_Sepasang_Kurung_Biru_Lirik_uuid-580cf0f0315e9.mp4"; videoScreenSize = "360x200"; playerSize = "360x225"; cpBackgroundColor = "ffffff"; cpPlayBtnColor = "cc0000"; cpStopBtnColor = "cc0000"; cpInfoBtnPosition = "0x360"; fpButtonOpacity = "0"; cpFullscreenBtnPosition = "0x360"; cpHidePanel = "never"; </script> <script type="text/javascript" src="http://www.mcmediaplayer.com/public/mcmp_0.8.js"></script>

Kaler merah - tukarle kalau menyampah ngan lagu sedia ada
Kaler biru - ejaslah ikut suka, tapi yang aku bagi tu macam dah ngam...
Autoplay - script ni lupa nak sediakan hehe
Auto-repeat - ada belah kanan sekali tu...

Masih berminat lagi? Cubalah

Cerita seterusnya »

Followers Friend Connect Mudah Alih

Dulu aku ada cerita pasal followers friend connect widget/gadget. Bila script friendconnect dah tak boleh digunapakai, susah sikitle nak ambil kod untuk letak kat tempat yang kita suka, kannnn... Nak nak lagi bila followers makin surut, macam malulah nak pamer tapi nak juga letak hahahahahah.

Dulu ada tutorial untuk buka-tutup gadget benda alah ni. Sekarang tutorialnya pun dah tak ada. Imejnya lebih kurang camni:

Cuba tekan butang ([+]Follow) tu. Timbul tak?
Boleh lagi ni. Yang betulnya aku ada letak kat multi-tab polska ada kat sidebar tuh. Cenggini:

1. Memula buka Blogger Dashboard ---> Layout ---> Add a Gadget ---> More Gadgets ---> Followers

2. Pastikan paparan gadget yang terhasil nanti memuaskan dan mengikut kehendak hati kamu ya :) Pastu save.

3. Buka blog kamu di tab baru; klik kanan dan tekan 'View page source'. Akan keluar satu tab baru dan cari sampai jumpa yang ini: <div id='Followers1-wrapper'>

Pastu copy aja mula dari <div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> hinggalah ke </script></div>

Kalau berdasar nombor baris blog aku: dari baris Nombor 863 hingga baris Nombor 894:


Dapat tak? Haishhhhh..... Haaaa ambek nih:

<div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height; }, 'reset': function() { window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d874138832550890313\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjc3Nzc3NyIGY2MwMDAwKgZGRkZGRkYyBmNjMDAwMDoGNzc3Nzc3QgZjYzAwMDBKBjc3Nzc3N1IGY2MwMDAwWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26origin\x3dhttp://empayarutama.blogspot.com/");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d874138832550890313\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjc3Nzc3NyIGY2MwMDAwKgZGRkZGRkYyBmNjMDAwMDoGNzc3Nzc3QgZjYzAwMDBKBjc3Nzc3N1IGY2MwMDAwWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26origin\x3dhttp://empayarutama.blogspot.com/");
</script>
</div>

Yang kaler merah tu no. id blog aku, tukarlah dengan no. id blog kamu ya. Tau tak kat mana nak dapat id blog? Kat sini:


Satu lagi kaler merah tu nama blog aku. Kena tukar jugalah dengan nama blog kamu.

4. Salin / copy kod nih kat notepad ke, wordpad ke; save dan kendian balik semula ke item no. 2 atas tu. Delete follower gadget asal yang telah disave tadi sebab tadi tu kita create follower gadget cuma untuk rembat kodnya menerusi view page source.

5. Lepas Delete, Save. Pastu ambil kod yang telah disalin dalam notepad / wordpad tadi; haaa letakle kat mana-mana yang berkenan. Save dan dah siap.

Tutorial ini dikongsikan sebab kod gadget ni tak ada jual kat kedai. Satu lagi sebabnya ialah ada tempat-tempat yang kita nak letak tapi tak boleh letak kerana kod asal kena melalui dashboard, siap tersedia tanpa dapat nak cilok kodnya.

Senang, kannn. Dah dulu, babai.

Cerita seterusnya »

Cara Letak Video Dan Playlist Youtube Ke Dalam Blog

Selain dari pasang lagu dengan Skin MP3 yang cantik; ada juga yang berminat untuk letak video lagu. Banyak program tawarkan Skin MP4 untuk muatkan video lagu tapi bagi aku, jika sumber asal dan majoriti video diperoleh dari YouTube; kita guna yang sedia ada sajalah.

OK. Dahtu bagaimana cara letak video

YouTube ke dalam blog? Biasanya bila ada akaun gmail, kita akan ada akaun YouTube. Kalau belum ada bukalah satu. Tapi kalau tak ada akaun pun boleh juga.

Sebenarnya video YouTube nih ada dua. Pertamanya hanya untuk satu video dan keduanya - banyak video (tak kisahlah cerita ke, lagu ke) yang kita panggil playlist. Jadi di sini kita akan cuba camana nak bagi 'hidup' kod untuk satu video guna kod lama (old embed code); buat playlist dan dapatkan kod untuk yang dah ada akaun; serta buat playlist dan dapatkan kod untuk yang tak ada atau tak nak buat akaun YouTube, bersekali dengan camana nak letak dalam blog.

Cam biasa; kod yang berwarna merah boleh diejas ikut suka ya...

1. Cara pasang Video YouTube guna kod lama (old embed code)

Paparan Video:


<object type="application/x-shockwave-flash" style="width:450px; height:250px;" data="//www.youtube.com/v/kod link YouTube?color1=CC0000&amp;color2=9999CC&amp;border=1&amp;rel=0&amp;loop=1&amp;hd=1&amp;showsearch=0&amp;version=3&amp;modestbranding=1"> <param name="movie" value="//www.youtube.com/v/kod link YouTube?color1=CC0000&amp;color2=9999CC&amp;border=1&amp;rel=0&amp;loop=1&amp;hd=1&amp;showsearch=0&amp;version=3&amp;modestbranding=1" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> </object>

(pastikan keseluruhan data dan value adalah sama)

2.Cara buat YouTube playlist serta dapatkan embed kod untuk yang sudah ada akaun

1. Bila buka YouTube akan keluar paparan seperti ini:

Klik LIBRARY.

2. Pergi ke menu Playlists dan klik kotak New Playlist untuk cipta satu track album. Taip tajuk / identiti playlist dalam kotak pop-up tu. Pastikan mode di bawah tajuk adalah Public; pastu klik kotak biru Create.


3. Imej bawah ni cuma nak tunjuk beberapa fungsi yang perlu nanti:


4. Ok, tekan kotak Playlist settings. Akan keluar satu pop-up window seperti di bawah serta fungsi-fungsi yang ada. Dah siap Tekan Save.


5. Kita akan kembali ke skrin seperti dalam langkah No. 3 tadi. Tekan kotak Add Videos. Akan keluar satu pop-up window seperti di bawah. Masukkan link video YouTube dan tekan kotak Search.


6. Akan keluar seperti paparan di bawah:


7. Anda perlu tekan logo 'Play' dalam imej video yang terpapar baru keluar skrin seperti ini:

Bila video berfungsi barulah boleh tekan kotak Add Videos.

8. Haaa sekarang kita dah ada satu playlist. Ulang langkah No. 5 dan seterusnya jika nak tambah video / video-video sampai puashati. Untuk dapatkan embed link serta fungsi lain – lihat imej pada langkah No. 3 tadi. Sebagai contoh, aku masukkan 6 video:


9. Bila kembali ke menu Playlists, satu playlist telah ditambah:

Paparan Playlist:

<iframe width="450" height="250" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLid playlist anda&amp;showinfo=0(tiada paparan playlist di bahagian atas kiri video)&amp; allowfullscreen (buang jika tidak mahu fungsi full screen)&amp;ap=%2526fmt%3D18(untuk high quality atau ap=%2526fmt%3D22 untuk 720p High Definition)&amp;modestbranding=1(sorok logo YouTube)" frameborder="0" ></iframe>

3. Cara buat YouTube playlist serta dapatkan embed kod tanpa perlu login atau tanpa akaun

1. Memula dapatkan beberapa link video YouTube untuk bina playlist

Di sini contoh 5 video YouTube, 4 lagu dan 1 bukan lagu:
a) Wings - Misteri Mimpi Syakilla (http://www.youtube.com/watch?v=VLYmm3Um-uM)
b) Sharifah Zarina - Langit Ke Tujuh (http://www.youtube.com/watch?v=ZR9-rxfHlPs)
c) Secret Garden- Song from a Secret Garden (http://www.youtube.com/watch?v=-sWnEWpS_fA)
d) Scorpions - Wind Of Change (http://www.youtube.com/watch?v=n4RjJKxsamQ)
e) Maharaja Lawak Mega 2013 - Minggu 8 - Persembahan Sepahtu (http://www.youtube.com/watch?v=Rs1xtoM3pNw)

2. Jadi bila digabungkan kelima-lima id video tersebut; ianya akan jadi begini: http://www.youtube.com/watch_videos?video_ids=VLYmm3Um-uM,ZR9-rxfHlPs,-sWnEWpS_fA,n4RjJKxsamQ,Rs1xtoM3pNw

3. Ambil link ini dan paste di tab baru (new tab) dan tekan enter. Secara otomatis link tersebut akan bertukar dan paparan playlist terhasil. Lihat imej di bawah:


4. Copy link yang baru terbina di tab tersebut: Untuk contoh di atas, linknya ialah http://www.youtube.com/watch?v=VLYmm3Um-uM&list=TLJyN30yl4GhMwMjAzMjAxNg

5. Hanya link kod berwarna merah sahaja (list=TLJyN30yl4GhMwMjAzMjAxNg) yang diperlukan untuk kita letak dalam embed code supaya dipaparkan dalam blog. Contoh paparan:



(Playlist tak ada tajuk sebab tak login / tak ada akaun)

6. Ini embed kodnya:

<iframe frameborder="0" height="250" src="https://www.youtube-nocookie.com/embed/videoseries?list=TLJyN30yl4GhMwMjAzMjAxNg&amp;ap=%2526fmt%3D18&amp;modestbranding=1" width="450"></iframe>

Lihat list tersebut di mana TLJyN30yl4GhMwMjAzMjAxNg itu kepunyaan saya dan perlu ditukar dengan link list yang anda cipta.

Kalau nak cara pasang lagu MP3 dan beberapa pilihan skin MP3; nanti senangle baru buleh buat cerita.

Ehhhh dah habis laaa :) Semoga bermanfaat buat semua

Cerita seterusnya »

Pasang Lagu Menggunakan Pilihan Skin MP3 Player Di Blog

Selamat berhujung minggu. Kali ni aku nak cerita camana letak lagu dalam blog. Bagus untuk yang berminat dan masih tercari-cari walaupun blog sekarang nih agak kurang popular.

Banyak program yang tawarkan lagu mp3 untuk didownload; ambil sumber asal dari YouTube atau SoundCloud. Masalahnya majoriti program ni tak sediakan skin mp3 player untuk diletak

dalam blog. Ada masanya nak download link lagu pun tak boleh; tak padan dengan iklan yang keluar 3-4 kali sebelum kita dapat link tersebut, itupun kalau dapat.

Tak ingat kat mana ntah komen ni...

Bila kita tahu mereka ambil dari YouTube; guna YouTube sajalah untuk masukkan lagu dalam skin mp3 player yang kita pilih/ada. Tukar link tersebut kepada link mp3 (hujung link ada .mp3). Program terbaik adalah ListenVid. Nanti aku tunjuk sekali bagaimana nak guna ListenVid.

Sebelum lupa;
~ Semua program yang aku ambil untuk cerita kali ni adalah percuma tak payah nak register bagai,
~ Segala kod berwarna merah boleh diejas sesuka hati ikut kesesuaian blog,
~ Kalau nak buang Tajuk Lagu, buang keseluruhan kod yang ini: <div style='width:XXXpx; background:transparent; font:YYpx Comic Sans MS;'>Tajuk Lagu</div>,
~ Nak pilih kaler boleh tengok sini; sini; atau sini, dan
~ Semua kod dah dicuba dan boleh guna selagi program tu masih hidup dan kod MP3 skinnya tak ditukar.

Haaa meh tengok satu persatu:
1. Program tawarkan lagu mp3 dan tersedia skin mp3 player

1. Program yang sediakan skin mp3 player yang sama.

1. a) Antaranya MP3 Juices; MP3 Raid; dan MP3 World
Paparan skin MP3:

<div style='width:250px;background:transparent;font:12px Comic Sans MS;'>Tajuk Lagu</div><embed type='application/x-shockwave-flash' src='https://mp3-juices.com/inc/jplayer/mp3player.swf' flashvars="file=http://link lagu.mp3&volume=50" quality="high" allowscriptaccess="always" height="20" width="250"><br /></embed>

1. b) MP3 Downloads
(Ada butang Stop tetapi tiada butang Download)
Paparan skin MP3:

<div style="background: transparent; font: 14px Comic Sans MS; width: 300px;">Tajuk Lagu</div> <embed src="http://www.mp3-downloads.net/flash/playlistplayer.swf" width="300" height="20" flashvars="height=20&width=300&file=link lagu.mp3&showstop=true&autostart=false&skin=http://www.mp3-downloads.net/flash/controlpanel.swf"></embed>

1. c) Cincopa
(Lebih lengkap dengan fungsi ubah warna - Sebenarnya kena register dulu tapi aku dapat kat mana ntah)
Paparan skin MP3:

<div style="background: transparent; font: 14px Comic Sans MS; width: 300px;">Tajuk Lagu</div> <embed width="300" height="20" src="http://www.cincopa.com/media-platform/runtime/player4/player4.swf" wmode="transparent" type="application/x-shockwave-flash" flashvars="file=link lagu.mp3&amp;showstop=true&amp;frontcolor=cc0000&amp;lightcolor=000000&amp;autostart=false"></embed>

2. Seek A Song
Paparan skin MP3:

<div style='width:280px;background:transparent;font:12px Comic Sans MS;'>Tajuk Lagu</div><embed src='http://www.seekasong.com/mp3player/player.swf' width='280' height='30' allowscriptaccess='always'allowfullscreen='false' flashvars='file=http://link lagu.mp3&skin=http://www.seekasong.com/mp3player/seekasong.swf'></embed>

3. Kiwi6
Paparan skin MP3:

Ini kod lama tapi masih berfungsi. Kod baru guna iframe dan boleh terus paparkan banyak lagu (tracks) tapi perlu melalui link yang disediakan oleh program ini.

<div style='width:300px;background:transparent;font:12px Comic Sans MS;'>Tajuk Lagu</div><object type="application/x-shockwave-flash" data="http://kiwi6.com/swf/audio-player.swf?audioUrl=http://link lagu.mp3" id="audioplayer" height="27" width="300" allowscriptaccess="always"> <param name="movie" value="http://kiwi6.com/swf/audio-player.swf?audioUrl=http://link lagu.mp3"/><param name="FlashVars" value=""/> <param name="quality" value="high"/><param name="menu" value="false"/><param name="allowscriptaccess" value="always"/><param name="wmode" value="transparent"/></object>

4. SoundCloud
Sumber asal lagu adalah dari program ini sendiri. Gunakan link lagu yang ada di dalamnya saja. Adalah lebih baik terus ke laman webnya untuk dapatkan link dan kod untuk lagu-lagu.
Paparan skin MP3:

<iframe width="63%" height="110" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=link lagu dari soundcloud.com&amp;color=cc0000&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false"></iframe>

5. MP3 Fusion
Sebenarnya kena register tapi yang ini pun aku tak ingat dapat kat mana...
Paparan skin MP3:

<embed src="http://www.mp3fusion.net/flash/mediaplayer.swf" width="300" height="100" allowscriptaccess="always" flashvars="height=100&amp;width=300&amp;file=link lagu.mp3&amp;screencolor=0xeeeeee&amp;showstop=true&amp;showdownload=false&amp;autostart=false&amp;skin=http://www.mp3fusion.net/flash/controlpanel.swf"></embed><div style='width:300px;background:transparent;font:14px Comic Sans MS;'>Tajuk Lagu</div>

2. Program tanpa lagu mp3 tapi sediakan skin mp3 player
Oleh kerana program-program ini tidak sediakan link lagu mp3, ada banyak pilihan skin mp3 player sama ada untuk satu atau lebih lagu.

1. FriendsBilly
Paparan skin MP3:

<center><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://link lagu.mp3&t0=Tajuk Lagu&total=1" quality="high" wmode="bbbbbb" width="300" height="20" name="" align="middle" type="application/x-shockwave-flash" ></embed></center>

Ini pula kod untuk lebih dari satu lagu:

<center><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://link lagu pertama.mp3&t0=Tajuk Lagu Pertama&f1=http://link lagu kedua.mp3&t1=Tajuk Lagu Kedua&f2=http://link lagu seterusnya.mp3&t2=Tajuk Lagu Seterusnya&total=3" quality="high" wmode="bbbbbb" width="300" height="20" name="" align="middle" type="application/x-shockwave-flash" ></embed></center>

2. MP3 Player
Ada lima jenis skin mp3 player. Kalau berminat; aku cadangkan pergilah ke laman webnya sebab boleh ejas ikut suka...
Paparan skin MP3:

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="300" height="22"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="mp3=link lagu pertama.mp3%7Clink lagu kedua.mp3%7Clink lagu seterusnya.mp3&amp;width=300&amp;height=22&amp;volume=50&amp;autoplay=0&amp;loop=1&amp;shuffle=1&amp;showvolume=1&amp;showinfo=1&amp;volumeheight=10&amp;loadingcolor=ffffff&amp;bgcolor1=ffffff&amp;bgcolor2=dddddd&amp;slidercolor1=cc0000&amp;slidercolor2=cc0000&amp;sliderovercolor=bbbbbb&amp;buttoncolor=cc0000&amp;buttonovercolor=bbbbbb&amp;textcolor=666666&amp;showlist=0&amp;playlistcolor=999999&amp;currentmp3color=cc0000&amp;scrollbarcolor=cccccc&amp;scrollbarovercolor=bbbbbb" /> </object>

3. SCM Music Player
Ia terima link mp3, SoundCloud track dan link youtube. Kelemahannya – kedudukan skin mp3 player hanya di bahagian atas dan bawah; serta tak boleh ejas tinggi dan lebar skin.
Paparan skin MP3:

<script type="text/javascript" src="http://scmplayer.net/script.js" data-config="{'skin':'skins/tunes/skin.css (banyak lagi pilihan skin)','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'Tajuk Lagu Pertama','url':'link lagu pertama.mp3'},{'title':'Tajuk Lagu Kedua','url':'link lagu kedua.mp3'},{'title':'Tajuk Lagu Seterusnya','url':'link lagu seterusnya.mp3'}]}" ></script>

3. Bina sendiri skin mp3 player dalam blog

1. Guna html kod blog
Paparan skin MP3:

<br/><br/><video controls autoplay (buang perkataan ini jika tidak mahu autoplay) name="media" width="300" height="0"><source src="link lagu pilihan.mp3" type="audio/mpeg" ></source></video><div style='width:300px;background:transparent;font:14px Comic Sans MS;'>Tajuk Lagu</div>

2. WordPress Plugin
Paparan skin MP3:

Errrrr hehe yang ini nak juga ke? Nanti-nantilah bila ada senang baru aku bagi ya

4. Cara dapatkan link mp3 dari YouTube guna ListenVid

1. Buka YouTube dan cari lagu. Ambil link yang di atas sekali. Di sini paparan link youtube ialah https://www.youtube.com/watch?v=ixxVDu1vLUw


2. Buka ListenVid dan paste link tadi untuk tukar kepada link mp3. Tekan butang Convert It!

3. Right click mouse di kotak Download dan klik pada Copy link address. Paste kat mana-mana WordPad atau Notepad. Untuk contoh tadi, link mp3nya ialah http://listenvid.com/index.php?output=yt/ixxVDu1vLUw/256~~256~~Send_Me_An_Angel_-_Scorpions_Instrumental_Cover_auf_Yamaha_Tyros_uuid-56c450cc01c75.mp3

Cukup panjang dah ni. Penat woo buat tutorial yang ini. Harap-harap meriahlah semula dunia blog. Memula ingat nak jadikan 4 cerita tapi aaaahhhhh ada aku kisah.....

Cerita seterusnya »