Mengenal dan Membuat Iframe

 Saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah


Beberapa atribut yang sering di pasang dalam iframe adalah :

• ALIGN="left/right" --> Untuk mengatur posisi iframe

• WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen

• HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen

• FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas

• SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe

• SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe

Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya yang lain yang beralamat di http://google.co.id/, lebar yang ingin saya gunakan adalah sebesar 700 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

Contoh kode yang di pasang seperti ini :

Hasilnya seperti ini :

begitulah hasilnya.

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

Hasilnya seperti ini :

begitulah hasilnya.

Dengan Iframe kita bisa mengintip isi blog orang lain pada blog kita.Terlebih dahulu sobat izin sama yang punya blog ya.
Selamat bereksperimen.

2.15.2009

You are here: Home / Blogger Tutorial / Membuat Tampilan Komentar Blogger Seperti Friendster

Membuat Tampilan Komentar Blogger Seperti Friendster

Minggu, Februari 15, 2009 by Ridwanox · 41 komentar

Setelah agak sehatan , akhirnya saya posting ini Membuat Tampilan Komentar Blogger Seperti Friendster .
Sebenarnya ini request dari mbak Atca begini katanya:

mas...tolong dong bikin tutorial bikin kotak komentar yang kaya gini..
yah ...yahhhh..kutunggu.

Lihat Komentar ala friendsternya :


Sebelumnya tutorial ini saya dapat dari Kang Jaloe,
Apa mau tukang arsip yang ngasih tutornya, ok deh ikuti langkah-langkahnya :

• Buka Blogger.com

• Klik Tata Letak/Layout

• Klik Edit HTML → Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Kemudian Centang Expand Widget Template

• Cari kode berikut :
  Atau secara lengkapnya begini :

  
  

  
  
  
  
  
  
  
  
  

  Sobat hapus semua kode diatas ganti dengan kode dibawah ini:

  
  

  • 
    
    
    

    
    

    
    

    
    
    
    
    
    
    
    
    
    Said

    
    

    
    

    
    

    
    
    

    
    
    

    
    
    
    

    
    

    
    
    
    

    
    
    

    
    
    
    
    
    
    

    
    

    
    
    
    

    
    

• Masukkan Syntax CSS ini :

  * {
  margin: 0px;
  padding: 0px;
  }

  diatas CSS ini :

  body {

• Terus Sobat cari kode ini :

  /* Comments
  ----------------------------------------------- */

• Kode asli Comments di minima template begini :

  /* Comments
  ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
  
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }

• Hapus semua kode diatas ganti dengan kode ini

  #comments{background:#EBF3FB; border:solid #ccc 1px; margin-bottom:10px}
  #comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
  #comment-list {margin-top: 10px;padding:10px;
  background: transparent;border:
  1px dotted #ddd;font-size: 1.75em;color: #666;}
  .commentlistdiv {
  margin-top: 10px;padding:10px;
  background: #FFF;border:
  1px dotted #ddd;font-size: 1.75em;color: #666;}
  .commentlistdiv h1 {font-size: 1.3em;
  color: #366799;border-bottom: 1px solid #eee;
  line-height: 1.5em;}
  .commentlist li {background: transparent;
  border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
  .commentlist li.alt {background: #fff;}
  .pane_l {float: left;background:#fff;display: inline;
  width: 110px;min-width: 110px;max-width: 110px;
  border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
  * html .pane_l{margin-top:15px; }
  .pane_r {display: block;line-height: 1.5em;margin-left: 125px;
  padding:8px 15px 15px 15px;;background:#fff;
  border-left:1px dotted #CCCCCC;
  border-right:1px dotted #CCCCCC;
  border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
  .c_author {font-size: 13px;font-weight: normal;height:30px;
  overflow:hidden;margin: 0px 0px 7px 0px;}
  .c_avatar {display: block;margin: 0px 0px 7px 0px;}
  .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
  padding-top:20px;}
  .c_approved {color: #aaa;font-size: 0.9em;}
  .comment-form { background:#EFEFEF; border:5px solid #cccccc;
  margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
  * html .comment-form { width:87%; }
  .owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
  background:#EFEBE0;padding:8px 15px 15px 15px;
  border-left:1px dotted #fff;border-right:1px dotted #fff;
  border-top:3px double #fff;border-bottom:3px double #fff;}
  .owner-Body p {
  font-size:100%;margin:0 0 0 0;color:#FF0000;
  text-decoration:bold;
  }
  .deleted-comment {
  font-style:italic; color:gray;
  }

• Bila tidak menemukan kode /* Comments bisa diatasi dengan menaruh kode diatas diatas tag ]]>

• Selesai deh.

Bila Ingin Menambahkan/Memunculkan Foto di area komentar ikutin langkah-langkah di bawah ini :

Menambah Gambar di Area Komentar.

• Masukkan Script di bawah ini di atas kode
  

  
  

Keterangan :

• Warna merah merupakan alamat dari JS sebaiknya , sobat upload sendiri di tempat hostingan punya sobat seperti googlepages,ripway dan sebagainya.
• Warna biru merupakan Foto yang akan muncul di area komentar,bila yang berkomentar tidak menggunakan id blogger atau biasa disebut annonymous.
• Warna hijau : 50 merupakan lebar foto dan 60 merupakan tinggi foto.

Membuat Tampilan Komentar Blogger Seperti Friendster.Selesai jugadeh.
Bila mengalami kegagalan di coba terus,terus dan terus.
Saya juga sering mengalami kegagalan
Insya Allah bila berusaha maka akan berhasil.

Posted in: