Archive for 2012-07-15

20 July 2012

belajar html iframe

Leave a Reply
IFrame (Inline Frame)

Inline Frames merupakan tipe frames yang banyak digunakan. Micrsoft Internet Explorer 3.0 memperkenalkan sebuah fitur yang disebut inline frames yang didefinisikan dengan tag <iframe>. Inline Frames memungkinkan sebuah frames dengan scrollbar dipasang ditengah-tengah kode HTML seperti halnya image. Tag <iframe> beserta atributnya telah ada didalam standar W3C's HTML 4.0. Memasang inline frame caranya hampir sama dengan memasang image didalam sebuah dokumen HTML. Didalam <iframe> kita mengatur tinggi dan lebar frame dan dokumen HTML yang ingin ditampilkan. Sama seperti images kita bisa mengatur align dan mengatur atribut hspace dan vspace. Kita pun dapat mengatur garis sama seperti images.

Sintaks IFrame 
    <iframe src="URL"></frame>


Contoh : iframe.htm

view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Inline Frame</title>  
  4.   </head>  
  5. <body>  
  6. <h2>Inline Frames</h2>  
  7. Isi keterangan disini  
  8. <iframe src="http://eliastutik.blogspot.com" width="350" height="200" align="left" hspace="12"></iframe>  
  9. </body>  
  10. </html>  
Dokumen iframe.htm

IFrame sebagai Target dari sebuah link

Iframe dapat digunakan sebagai Target Frame untuk link
Atribut target dari link harus mengacu pada atribut name di iframe-nya.

Contoh : iframe_target.htm
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Inline Frame dengan atribut Target</title>  
  4.   </head>  
  5. <body>  
  6. <iframe src="demo_iframe.htm" name="showframe"></iframe>  
  7. <p><a href="http://eliastutik.blogspot.com" target="showframe">Blognya eli</a></p>  
  8. <p>value/nilai atribut Target link harus sesuai dengan value/nilai atribut name di iframe-nya, link akan terbuka di iframe</p>  
  9. </body>  
  10. </html>  

Contoh : demo_iframe.htm
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>demo iframe</title>  
  4.   </head>  
  5. <body>  
  6. <h2>frame "demo iframe" yang masih belum ditempati</h2>  
  7. </body>  
  8. </html>  
Dokumen iframe_target.htm
Jika Anda klik link "Blognya eli" maka akan berubah seperti gambar dibawah ini.
Dokumen iframe_target.htm dengan iframe demo_iframe.htm
sumber:http://eliastutik.blogspot.com/2011/12/iframe-html.html

18 July 2012

Trik Cara Menampilkan Judul Postingan Saja Pada Halaman Utama

Trik Cara Menampilkan Judul Postingan Saja Pada Halaman Utama

1 Comment
Dengan trik ini juga rasanya kita akan memperkecil loading blog pada halaman utama karena halaman utama hanya menampilkan judul postingan saja tanpa menampilkan gambar dan yang lainnya. Dan tentunya ini akan berimbas bagus bagi perkembangan SEO blog kita. Nah bagi anda yang tertarik mencoba untuk menampilkan judul postingan saja pada halaman utama silahkan ikuti langkah-langkah berikut ini.

1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru silahkan klik rancangan » edit HTML » centang kotak Expand Template Widget. Dan disarankan untuk mem-backup template anda buat jaga-jaga bila terjadi kesalahan.
3.Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat di bawah kode ]]></b:skin>.

 <style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

Kode di atas masih menyisakan beberapa komponen pada halaman utama selain judul postingan, seperti tanggal posting, jumlah komentar,label,dan yang lainnya. Jika anda menginginkan hanya menampilkan judul postingannya saja pada halaman utama tanpa menampilkan tanggal postingan, label,jumlah komentar, dan yang lainnya silahkan anda pakai kode yang ini.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

4.Save template anda.

Demikianlah tutorial tentang  Cara Menampilkan Judul Postingan Saja Pada Halaman Utama  mudah-mudahan postingan saya yang sangat singkat kali ini bermanfaat bagi anda.
sumber: http://bdigg.blogspot.com/2012/04/cara-menampilkan-judul-postingan-saja.html
Cara membuat tombol buka tutup di blog

Cara membuat tombol buka tutup di blog

Leave a Reply
Nah, kali ini yang di share yaitu cara membuat tombol Buka/Tutup pada script yang ingin sobat sembunyika di blog, mau tau caranya ? mari disimak dulu

  1. Login akun blogger
  2. Masuk kemenu rancangan
  3. Tambah HTML/Java Script
  4. Sisipkan kode dibawah ini

16 July 2012

Membuat Daftar Isi dalam Satu Label

Membuat Daftar Isi dalam Satu Label

Leave a Reply

Daftar Isi dalam Satu Label contohnya seperti gambar di atas contoh lebih detailnya ada di bagian atas sidebar sebelah kanan Blog CaraGampang. jadi fungsi dari gadget ini adalah mengkategorikan Artikel berdasarkan label. sehingga pengunjung dapat dengan mudah melihat artikel dengan label tertentu.. oia ini juga dapat meningkatkan Page view blog kita juga loh karena dengan adanya gadget ini pengunjung bisa betah berlama-lama di blog kita apalagi semua artikel dalam satu label tersebut adalah artikel yang sedang dicari atau dipelajari  si pengunjung, sehingga pengunjung tidak pindah ke Blog lain untuk mencari artikel terkait..
okeh, langsung saja ini Cara Membuat  Daftar Isi dalam Satu Label :

Masuk ke akun Blogger anda
Pilih menu Rancangan >> Tambah Gadget >> Pilih HTML/Java Script
Kemudian Tambahkan Script bibawah ini :

<script style="text/javascript">
var numposts = 10;
var standardstyling = true;
</script>


<script type='text/javascript' src='http://caragampangcom.googlecode.com/files/label.js'></script>


<ul>
<script src="http://www.caragampang.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
Langkah terakhir tinggal di simpan maka lihat hasilnya

KETERANGAN : 
10 = jumlah artikel yang akan ditampilkan (silahkan ganti dengan yang kamu inginkan).
www.caragampang.com = ganti dengan blog anda
Tutorial blog = Ganti dengan nama label yang akan ditampilkan.

NB : Jika anda ingin menampilkan artikel dalam jumlah banyak saya sarankan untuk menambah Scroll pada gadge ini , untuk tutorialnya silahkan lihat Cara Menambahkan Scroll pada Widget
Cara Membuat Teks Area disertai Tombol Select

Cara Membuat Teks Area disertai Tombol Select

Leave a Reply

Teks area yang satu ini biasanya  digunakan untuk menyinpan Script banner pada Tukar Link tujuannya untuk memudahkan mengcopy script karena dengan meng-klik tombol Select maka Script/Kode langsung ter-Blok secara otomatis. Pokonya teks area dengan Tombol ini bisa duganakan untuk menyimpan apa saja Script, Teks, dan lain lain. Untuk Contohnya kurang lebih seperti ini :



Okeh, untuk sobat yang pengen Membuat Teks Area disertai Tombol Select  silahkan Copy script berikut :
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width:200px; height:60px;" name="txt"> MASUKAN SCRIPT, TEKS, ATAU YANG LAINNYA</textarea></p></form>
Silahkan teks yang berwarna merah diganti dengan Teks yang sobat ingin masukan kedalam area tersebut. selamat mencoba dan semoga berhasil Membuat Teks Area disertai Tombol Select .

15 July 2012