06 February 2013

Membuat Bubble tooltip di dalam posting

Membuat Bubble tooltip di dalam posting

tooltip menggunakan css memungkinkan lebih cepatnya loading tanpa script pemanggil, yg biasanya tulisan pada tooltip akan muncul ketika loading pemanggil script selesai,Jika tertarik buat mencobanya silahkan mengikuti langkah berikut ini

O iya yg belum mengerti apa sih tooltip itu?
Tooltip adalah tulisan yang muncul ketika kursor berhenti diatas ling yg diberi tooltip atau semacam petunjuk dan penjelasan ya begitu lah kira2 contohnya anda letakan kursor di atas link di bawah ini..
tahan kursor disini
Dengan ditambahkan backgroud bubble lebih terlihat cantik, Untuk membuatnya Copy css dibawah ini
/*---------- bubble tooltip oce-modifblog.blogspot.com-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://1.bp.blogspot.com/_camK6MacbVQ/SmNbQ-VEh2I/AAAAAAAAAOU/qiVSMin-U6k/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat bottom;
}

Nah setelah di copy selanjutnya login blogger> tataletak> edit html> cari tag ]]></b:skin> paste code css yg udah di copy tadi di atasnya dan save Template. Untuk format penulisan link pada posting yg di beri tooltip seperti ini

<a href="#" class="tt">nama link disini<span class="tooltip"><span class="top"></span><span class="middle">keterangan atau tulisan pada tooltip disini</span><span class="bottom"></span></span></a>

03 February 2013

Cara Mengganti Background Postingan Dengan Gambar

Cara Mengganti Background Postingan Dengan Gambar


Background post dari sebuah blog tidak hanya berupa warna yang kadang membosankan. Sebagai alternatif lain, anda dapat mengganti background post dengan image yang tentu harus disesuaikan dengan warna huruf pada postingan agar kehadiran image sebagai background tidak mengganggu tampilan huruf.

LANGKAH-LANGKAHNYA

PERTAMA

  1. Siapkan sebuah gambar yang ukurannya telah disesuaikan dengan lebar postingan blog anda serta memiliki tinggi minimal 800 px lebar 1700px. Gunakan Adobe Photoshop atau aplikasi lainnya untuk me-resize image.
  2. Upload image tersebut ke hosting penyimpanan image seperti Photobucket, Imageshack, Web Picasa atau hosting yang selama ini anda gunakan.
  3. Copy Url/alamat gambar yang anda upload tadi. Simpan dulu pada note pad.

KEDUA
  1. Masuk ke Blogger
  2. Klik Tab Rancangan bagian Edit HTML
  3. Cari kode seperti dibawah ini pada template blog anda

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }


  4. Tambahkan kode untuk background seperti ini :

    background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;


  5. Gabungkan kedua kode diatas sehingga menjadi seperti ini :

    .post {
    background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }


  6. Kode yang berwarna kuning http://img268.imageshack.us/img268/6805/bodybgiq.jpg merupakan Url/alamat image yang akan tampil sebagai background postingan. Ganti alamat gambar tersebut dengan alamat gambar yang anda upload tadi (yang disimpan pada note pad)
  7. Klik tombol Simpan
  8. Lihat background postingan anda sekarang.


Selamat mencoba, semoga bermanfaat...
Cara Membuat Gambar Di Pojok Kanan Atau Kiri Blog

Cara Membuat Gambar Di Pojok Kanan Atau Kiri Blog


biasanya saya sering menemukan blog yang memasang gambar bergerak penuh animasi yang keren-keren, nah! disini tidak perlu  EDIT HTML, tetapi tips sederhana melalui widget saja,

1.      Siapkan gambar dulu, bisa di upload di “photobucket, blogger uploader, dll”,kalo belom mengetahuinya silahkan baca dulu artikel Cara Mendaftar Meng-upload Gambar di Photobucket jika anda sudah mempunyai gambar yang ditentukan harap menunggu untuk step selanjutnya
2.      Login ke Blogger, lalu Tata Letak(Layout), lalu Add Gadget (Tambah Gadget), pilih tanda  HTML/Javascript
3.      Masukan kode di bawah ke dalamnya seperti dibawah ini
<a href='URL LINK' style='display:scroll;position:fixed;Bottom:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

 Jika anda ingin memasangnya di pojok atas kodenya akan menjadi seperti ini:

<a href='URL LINK' style='display:scroll;position:fixed;top:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>