Archive for 02/22/13

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Cara membuat menubar pada blog
Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut

Cara Membuat Menu Bar Pada Blog

Posted by : Unknown 0 Comments
Pernah kita melihat widget mp3 player di salah satu blog dan isi dari lagunya bisa banyak dalam satu media player, tampilan dari media playernya juga bisa kita pilih sesuka hati dan hebatnya dari pemutar musik yang satu ini, lagu-lagu yang akan kita masukan kedalam media player ini bisa kita pilih sesuka hati.  maka player inilah yang cocok untuk hal tersebut.

 Kalau memang tertarik dan ingin mencobanya di blog silahkan  ikuti keterangannya dibawah ini,
  • Media Playernya ( pemutar musiknya ).
  • Media Playlistnya ( daftar lagunya ).
  • Tempat hostingan untuk menyimpan pemutar musik dan playlistnya, kita bisa mencobanya di www.ripway.com atau hostingan lainnya namun biasanya harus regristrasi terlebih dulu disitus tersebut.
  • Tempat Upload Mp3 bisa mencobanya di www.fileden.com dan juga harus regristrasi terlebih dahulu.
  • Notepad
Kemudian,
  • Upload Lagunya. Upload lagu kesukaan di Fileden.com atau  juga boleh mencobanya di media penyimpanan online lainnya, namun terlebih dahulu kompress file mp3 supaya ketika di putar lagunya tidak terputus-putus, converternya ada banyak di internet bisa dicari sendiri di Google dan setelah  upload file mp3 tersebut silahkan Catat Link mp3nya.


  •   Membuat Playernya.
Carilah template/model dari media playernya, ada banyak di internet namun boleh mencobanya di myspaceprodesigns pilih sesuka hati player mana yang cocok.

Lalu pertanyaan kita adalah bagaimanakah cara mengambil playernya...?
Silahkan  buka alamat ini http://www.myspaceprodesigns.com/flashtoy/mp3.php dan pilih playernya, disini saya mengambil contoh player yang akan saya gunakan adalah model 3 flash mp3 player by RedDragon, dan setelah  memilih jenis model playernya klik " generate mp3 playlist " di dalam adrees bar akan tertulis.

http://www.myspaceprodesigns.com/generator/playlist/xml.php?purl=http://www.myspaceprodesigns.com/RedDragon/26.swf

Buang tulisan berikut ini.

http://www.myspaceprodesigns.com/generator/playlist/xml.php?purl=

Maka tinggallah tulisan.

http://www.myspaceprodesigns.com/RedDragon/26.swf

Dan kemudian tekan Enter.

Disana akan terlihat tampilan penuh dari Player tersebut, simpanlah halaman tersebut kedalam folder komputer  dengan cara klik " Save Page As " simpan ke dalam format SWF, nama filenya bebas saja. contoh mudah bisa beri nama " Player.swf " (tanpa tanda petik) setelah itu silahkan upload file tersebut kedalam hostingan disana  akan mendapatkan Linknya lalu Catat Link Player tersebut.

  • Membuat Playlistnya.

Salin file di bawah ini kedalam Notepad.

<?xml version="1.0" encoding="UTF-8"?>
<player showDisplay="yes" showPlaylist="yes" autoStart="random">
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
</player>

Dalam keterangan diatas saya hanya membuat 5 daftar jumlah lagu yang akan diputar, namun  boleh mengurangi ataupun menambahkannya lagi karena itu bukan urusan saya...he...he...he... dan ganti tulisan "Link Mp3 " yang berwarna BIRU dengan Link mp3 sendiri begitu juga dengan tulisan "Judul Lagunya" yang berwarna MERAH, silahkan  tulis apa Judul Lagunya dan simpan atau " Save As " file tersebut kedalam Format XML.

Contoh disini saya memberi nama filenya "Daftar lagu.Xml" (tanpa tanda petik) kemudian upload file yang berformat xml tersebut kedalam hostingan disana akan mendapatkan Linknya lalu Catat Link Playist tersebut.

  • Nah kini sudah mempunyai 2 Link yaitu Link Player yang berformat SWF dan Link Playlist yang berformat xml, sekarang hanya tinggal memasukkan kedua Link tersebut ke dalam script yang ada dibawah ini.

<div align="center"><embed allowScriptAccess="never" src="http://LINK PLAYER ANDA" menu="false" quality="high" width="265px" height="270px" name="index" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playList=http://LINK PLAYLIST ANDA" wmode="transparent"/></embed><br /><a href="http://davotmarbun.blogspot.com">Catatan Pena Musik Player</a></div>

  • Sekarang silahkan  buka blog  dan copy/pastekan script di atas kedalam blog anda .

Cara Memasang Banyak Lagu Di Blog

Posted by : Unknown 0 Comments
Saya yakin, pasti sobat blogger pernah blogwalking ke beberapa blog dan ketika berada di blog tersebut ternyata kita disambut oleh musik atau lagu. Yup, kali ini saya ingin berbagi tips tentang cara memasang lagu di blog, khususnya buat sobat yang newbie seperti saya ini :D

Setelah melakukan pencarian di mbah google saya menemukan beberapa macam cara untuk memasang lagu di blog, mulai dari yang sederhana, sampai yang rada rumit. Jika sobat tertarik untuk memasang musik atau lagu di blog mungkin tips atau cara memasang lagu di blog ini bisa membantu sobat.

Sebelum memasang lagu di blog, ada baiknya kita berkenalan dulu dengan situs yang menyediakan musik atau lagu yang akan kita gunakan untuk memasang lagu yang diinginkan. Ada beberapa situs penyedia lagu, diantaranya adalah musik-live.net, esnips.com, fullmusik.co.cc, , song2play.com, atau scmplayer.net.

Semuanya memiliki kelebihan dan kekurangan masing-masing (sobat coba ajah sendiri ya) seperti ada yang menyediakan banyak lagu tapi kita tidak bisa mengupload lagu sendiri, ada juga yang lagunya sedikit tapi ada fitur untuk mengupload lagu sendiri, atau sobat ingin yang mempunyai tampilan skin menarik? Silahkan sobat coba sendiri hehehe...



Memasang Lagu Di Blog Dengan Flash (.swf)


Pertama saya akan menuliskan cara ini dulu, kenapa? karena menurut saya cara inilah yg paling ringan untuk memasang lagu di blog sehingga tidak begitu memberatkan blog sobat.

Caranya adalah dengan menggunakan lagu berformat .swf, sobat bisa mengupload sendiri atau supaya lebih mudah cari saja di http://divine-music.info karena disana sudah banyak musik berformat .swf yang bisa digunakan untuk memasang musik di blog. Jika sudah menemukan alamat lagunya langsung saja sobat taruh di widget HTML/Javascript, tulis seperti berikut

<EMBED SRC="http://divine-music.info/musicfiles/eminem-cleaningoutmycloset.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="0" HEIGHT="0" ALIGN="CENTER"></EMBED>
Yang berwarna merah adalah alamat atau url dimana lagu yang akan kita pasang tersebut diupload. Silahkan diganti jika sobat sudah menguploadnya sendiri di layanan-layanan penyimpanan seperti 4shared.


Memasang Lagu Di Blog (eSnips)


memasang lagu di blog
  1. Kunjungi situsnya, http://www.esnips.com/. Sign Up dulu untuk mendapatkan akses full.
  2. Klik Upload Files dan kemudian Select Files sesuai

    lagu yang ingin di pasang di blog

    .
  3. Pilih lagu yang akan dipasang di blog dan pilih folder untuk menyimpan lagu tersebut. Pastikan foldernya bersifat Public, karena kalau Private maka lagu tersebut tidak bisa ditambahkan ke playlist.
  4. Langkah terakhir adalah memasang lagu di blog. Pilih atau klik Add to quicklist.
    memasang lagu di blog - quicklist
  5. Jika sudah, scroll ke bagian atas halaman, dan kemudian pilih Create playlist widgets.
    memasang lagu di blog - create widget
  6. Pilih skin yang diinginkan kemudian copy kode yang ada di kotak.
    memasang lagu di blog - skin
  7. Buka blogger, tambahkan gadget HTML/Javascipt dan paste kode tersebut disana. Save dan lihat hasilnya.
Dengan

memasang lagu di blog

bisa membuat blog terlihat hidup dan pengunjung blog betah berlama-lama di blog sobat.

Memasang Lagu Di Blog (SCM Music Player)


  1. Ke situsnya dulu, scmplayer.net. Lngkah-langkahnya sebenarnya cukup mudah, yaitu : Choose Skin > Edit Playlist > Configure Setting.
  2. Pilih skin yang cocok bagi sobat, ada bermacam-macam skin dengan warna yang menarik disana.
  3. Jika sudah, silahkan sobat pilih tab Edit Playlist. Ada 2 pilihan, yang pertama dengan memasukkan url lagu yang akan dipasang secara manual, dan yang kedua adalah dengan memanfaat RSS Podcast seperti playlist youtube (jika sobat memilik akun youtube).
  4. Langkah terakhir adalah pengaturan lagu yang di pasang di blog nantinya. Setting ini mempunyai 2 garis besar yaitu PLAYBACK (Autostart, Shuffle Playback, dan Default Volume) dan APPEREANCE (Placement of Player Bar dan Show Playlist by Default).
  5. Langkah terakhir adalah klik tombol Done dan copy kode yang disediakan. Masuk ke blogger, kemudian tambahkan gadget HTML/Javascript dan pastekan kode yang didapat sebelumnya.
  6. Save dan lihat hasilnya. Sobat sudah berhasil memasang lagu di blog.
Silahkan sobat mencoba situs-situs penyedia lagu lainnya semoga


Cara Mudah Memasang Lagu Di Blog

Posted by : Unknown 0 Comments

- Copyright © 2013 Assasin-Creed - Shingeki No Kyojin - Powered by Blogger - Designed by Johanes Djogan -