Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Zoom Image

Zoom Image sangat bagus dan effektif untuk menciptakan effisiensi halaman blog. Dengan mengatur ukuran gambar, kita dapat memilih ukuran gambar yang ingin kita tampilkan di halaman blog hingga ukuran terkecil yang diinginkan. Sentuhan cursor pada gambar membuat gambar orisinil akan terpampangkan dihalaman blog sesuai dengan ukuran aslinya.

D E M O

Klik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.


Kode CSS
.GRzoombox{
       position:relative;
       float:left;
       width:224px;
       height:174px;
       margin:5px 15px 5px 0;
}
.GRzoombox .GRzoom{
       position:absolute;
       left:0;
       top:0;
       padding:0;
       margin:0;
       border:12px ridge #663333;
       border-radius:8px;
       width:200px;
       height:150px;
}
.GRzoombox .GRzoom:hover{
       z-index:99999;
}


Javascript:
<script src="http://gubhugreyotprojects.googlecode.com/svn/GRzoom.js" type="text/javascript"></script>

xHTML Posting Image Zoom
<div class="GRzoombox">
<img class="GRzoom" src="image.jpg" />
</div>Tuliskan teks atau kalimat anda di sini! Jika teks jumlahnya tak terlalu banyak dan anda ingin menggunakan image zoom lagi di bawahnya maka setelah teks terakhir tambahkan kode <div style="clear:both;"></div> 
Gunakan image (image.jpg dengan ukuran selebar halaman posting atau lebih kecil. Jika image terlalu besar maka ketika zoom image bekerja gambar akan melewati halaman posting hingga ke sidebar kanan.

Cara Menyimpan Kode CSS dan javascript

  1. Login ke Blogger
  2. Setelah halaman Dasbor (dasboard) terlihat, klik Design (Rancangan)
  3. Lanjutkan dengan klik "Edit HTML"
  4. Lakukan Backup Template. Caranya bisa anda buka di Special Tutorials yang ada di menu sebelah kiri.
  5. Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya.
  6. Cari kode <head>. Letakkan javascript di atasnya.
  7. Klik "Simpan Template (Save Template)"
  8. Gunakan xHTML untuk posting seperti yang terlihat dlam box xHTML.
  9. Selesai dan selamat posting ... selamat ngelembur!!!!!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu LEGI, Maret, 03, 2012

» Happy Blogging - gubhugreyot «

6 komentar:

  1. Bos sya sdah coba menu jquery vertikal accordion,tapi setelah sya terapkan di blog sya koq ga ngefek? Knpa ya.? mhon pncerahanya bos.!

    BalasHapus
  2. Bos knp ngefeknya hanya pada satu artikel....

    BalasHapus
    Balasan
    1. aha aku tau permasalahannya, klau sama file hostingnya blogspot gak mau bekerja. gimana ni bos?

      Hapus
    2. File hosting saya maksud adalah gambar

      Hapus
    3. Aku dah coba cek ke blog sampeyan & ternyata semua sudah bisa bekerja dengan baik!

      Salam...

      gubhugreyot

      Hapus
  3. Ada untungnya nyasar ke blog ini karena artikelnya sangat unik dan pencerahannya jelas banget serta mudah difahami, betul-betul gubhuk reyot karena memang banyak goyangannya, saya minta maaf sebelumnya karena langsung main kopas saja tanpa izin terlebih dahulu...., wassalam & terima kasih - semoga sukses selalu.

    BalasHapus

 
GR | Edited by | gubhug reyot