Membuat frame pada blog post image

Wah, lama juga ya gak posting artikel, maklum lagi gak enak badan sama gak mood neh...

Kali ini kita akan membuat gambar gambar kita pada setiap posting menjadi semakin cantik dengan menambahkan frame termasuk juga caption-nya seperti gambar di bawah ini.

lihat..! Gambar ini ada frame-nya.

Caranya bikin?

Ini adalah kelanjutan dari posting terdahulu tentang caption apik, yang artinya cara ini akan bekerja baik jika anda telah mengikuti langkah pada pembuatan caption tadi.

Copy kode di bawah ini lalu paste pada template sebelum kode ]]></b:skin> lalu simpan template.


.imgbox {
  border: 1px solid #e8e8e8;
  text-align: center;
  background-color: #f9f9f9;
  padding: 3px 0px 0px 0px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.imgbox img {
  margin: 0 auto;
  padding: 0px;
  border: 0px;
}

Pada saat upload gambar/image, pilihlah None lalu modifikasi nilai "width" dan hapus kode "height".

Contoh:
...;width: 600px; height: 400px;"...
diubah menjadi
...;width: 98%;"...

Di ganti jadi 98% agar frame kiri dan kanan tidak tertutupi gambar nantinya

Kemudian tambahkan kode class="imgbox" pada kode <div id=...
Sehingga keseluruhan kode menjadi seperti di bawah ini.

<div id="leftimg" class="imgbox" style="width:280px;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOosVc7y3cf8mkePeufP0rteM5YVb0UdXNHCy7lKV6DTwoBH-Cqw6UGdFXiLWmQyQr5FGbDQRqz3BzSULR1ESpPfyyjrVCDGmp8ImDtAV0uBwdvI8P4Z0QjHPlTWuJ3BGlBvztHrtAOjk/s1600/tbLee.jpg"><img style="cursor:pointer; cursor:hand;width: 98%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOosVc7y3cf8mkePeufP0rteM5YVb0UdXNHCy7lKV6DTwoBH-Cqw6UGdFXiLWmQyQr5FGbDQRqz3BzSULR1ESpPfyyjrVCDGmp8ImDtAV0uBwdvI8P4Z0QjHPlTWuJ3BGlBvztHrtAOjk/s1600/tbLee.jpg" border="0" alt="" /></a>
<cite class="caption">Keterangan gambar atau caption di sini!</cite></div>


Jadi deh...kode diatas akan menjadi seperti gambar di bawah ini.

Keterangan gambar atau caption di sini!

SELAMAT MENCOBA!

Ditulis oleh Wira

>> Selengkapnya...

Membuat multi MP3 player pada blog

Ada berbagai cara untuk membuat audio player pada website khususnya blogger, misalnya cara yang dibahas dalam Macloo.com, sampai mp3 player terkecil.

Kalau yang di sini caranya adalah, copy kode javascript berikut lalu paste pada template di mana saja pada area html (sebaiknya sebelum tag </body>) agar loading tidak terhambat oleh javascript ini.

<script src='http://sites.google.com/site/wirelect/javascript/mp3_multiplayer.js' type='text/javascript'/>

Selanjutnya bila anda membuat ancor link untuk audio file jenis mp3, javascript ini langsung akan membuat embed player pada blog anda.
misalnya jika saya membuat kode seperti di bawah ini,

<a href="http://www.fileden.com/files/2009/6/23/2486417/12barslowbluesincm.mp3">12 bar slow blues</a>

Maka javascript akan membuat player seperti di bawah ini,
12 bar slow blues

Anda juga bisa memainkan musik atau audio file dalam popup window dengan mengklik 'Play PopUp'.

Seperti namanya, mp3_multiplayer.js, maka anda bisa membuat lebih dari satu model player cukup dengan menambahkan id pada ancor link seperti dibawah ini,

<a id="1" href="http://www.fileden.com/files/2009/6/23/2486417/12barslowbluesincm.mp3">12 bar slow blues</a>

Silahkan coba dengan angka id yang lain, maka anda akan tahu hasilnya.

Lalu di mana saya menaruh file mp3 saya?

Cobalah file hosting seperti fileden.com, Fileave.com, atau sites.google.com.

SELAMAT MENCOBA !!

>> Selengkapnya...