Mengenal dan Membuat Iframe

Saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah <iframe>.Sebenarnya tutorial ini dari Kang Rohman untuk lebih menjelaskannya maka tutorialnya saya buat juga.
Kembali ke iframe,dengan perintah iframe kita dapat menampilkan isi dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan. Perintah dasar dari iframe adalah sebagai berikut :

<iframe> .... isi dari iframe .... </iframe>

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 :

<iframe align="left" frameborder="0" src="http://google.co.id/" width="550" height="300" scrolling="no"> </iframe>

Hasilnya seperti ini :

begitulah hasilnya.

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="10" src="http://google.co.id" width="550" height="300" scrolling="auto"> </iframe>

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.

Template Blogger Laptop dan Iphone Style

Kembali ke laptop... wah rasanya pernah dengar ya. Sebenarnya template ini sudah lama di publikasikan karena iseng-iseng ya saya posting ajah untuk share ajah deh.Jika mau download klik disini

Satu lagi nih,wah serasa seperti memakai iphone ya .
Coba dulu saja ya sobat bisa download disini
Bila alamat itu tidak bisa dibuka mungkin finalsense lagi maintance.

Read More Dengan Teknik Gambar

Sebelumnya menggunakan Read More Dengan Teknik Gambar Bila Sobat belum pernah membuat read more seharusnya membaca dulu disini.
Setelah itu baru sobat lanjutkan Read More Dengan Teknik Gambar.
Tutorial ini saya dapat dari kang jaloe nih, Baiklah saya buat tutorialnya dengan lebih mudah.

• Login ke 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

• Masukkan Kode Ini :

  .more {
  background:url(http://img412.imageshack.us/img412/8126/reedmorebgvk0.gif) no-repeat right;
  bottom:5px;
  font-family:verdana;
  font-size:80%;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:bold;
  line-height:normal;
  padding-right:10px;
  text-align:right;
  white-space:nowrap;
  }

  Di atas kode ]]></b:skin>

klik gambar untuk perbesar

• Cari kode

  <p><data:post.body/></p>

• Kemudian lihat tulisan ini :

  <p><data:post.body/></p>
  <span id='showlink'>
  <a expr:href='data:post.url'>Read More......</a>
  </span>

• Ganti tulisan Read More...... dengan <p class='more'>&#187; Read More.... </p>

• Read More...... bisa sobat ganti dengan Lanjutkan membaca... Klik Membaca... atau sebagainya
  

• Klik Simpan Template

Keterangan Tidak Penting :

.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan fixel misal 12px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks lawannya Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan lawanya left or center
white-space:nowrap;
}

Ya begitulah semoga sobat berhasil deh.

Membuat FONT STYLE SETTING

Ketika blogwalking saya menemukan ada yang beda di blog mas abgamal.
Terdapat beberapa macam widget yang tidak pernah , saya lihat di blog manapun
Lebih jelasnya lihat di sidebar saya ada widget FONT STYLE SETTING.

Ikuti langkah-langkahnya :

• login ke blogger.com

• Klik Tata Letak/Layout
  

• Klik Elemen Halaman/Page Elements

• Klik Tambah Gadget/Add Gadget

• Pilih HTML/Javascript

• Copy-Paste script ini :

  <center>
  <script>
  function go1(){
  if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none") {
  document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value
  
  }
  }
  
  function go2(){
  if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none") {
  document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value
  
  }
  }
  </script>
  <form id="forma" name="selecter2" method="POST">
  
  <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
  <option value="Times New Roman"/>Times New Roman
  <option value="Arial"/>Arial
  <option selected value="Book Antiqua"/>Book Antiqua
  <option value="Bookman Old Style"/>Bookman Old Style
  <option value="Century Gothic"/>Century Gothic
  <option value="Comic Sans Ms"/>Comic Sans Ms
  <option value="Tahoma"/>Tahoma
  <option selected value="Trebuchet Ms"//>Trebuchet Ms
  <option value="Verdana"/>Verdana
  </select>
  <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
  <option value="8px"/>8
  <option value="9px"/>9
  <option value="10px"/>10
  <option value="11px"/>11
  <option selected value="12px"/>12
  <option value="14px"/>14
  <option value="16px"/>16
  <option value="18px"/>18
  </select>
  </form>
  </center>

• Klik Simpan/Save

Bila Widgetnya tidak berfungsi ikuti langkah-langkah berikut :

• Dari menu blogger klik Tata Letak/Layout-->Edit HTML

• Cari kode :

  .post {
  margin:0 0 10px 0;
  font-family: Arial;
  background: #FFF;
  padding:10px;
  text-align:justify;
  border:1px solid #C0C0C0;
  }

• Hapus kode yang ini font-family: Arial; atau semua template beda ada yang font-family: Verdana; atau font-family: Times New Roman;

• Pokoknya kode yang itu harus dihapus.

• Simpan template

Membuat Tampilan Komentar Blogger Seperti Friendster

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 :

  <b:loop values='data:post.comments' var='comment'>

  Atau secara lengkapnya begini :

  <dl id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
  <a expr:name='data:comment.anchorName'/>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  <b:else/>
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <p><data:comment.body/></p>
  </b:if>
  </dd>
  <dd class='comment-footer'>
  <span class='comment-timestamp'>
  <a expr:href='data:comment.url' title='comment permalink'>
  <data:comment.timestamp/>
  </a>
  <b:include data='comment' name='commentDeleteIcon'/>
  </span>
  </dd>
  </b:loop>
  </dl>

  Sobat hapus semua kode diatas ganti dengan kode dibawah ini:

  <ul class='commentlist'>
  <script type='text/javascript'>var CommentsCounter=0;</script>
  <b:loop values='data:post.comments' var='comment'><li>
  <div class='' expr:id='data:comment.id'>
  <div class='pane_l'>
  <div class='c_author'>
  <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
  <a expr:name='&quot;comment-&quot; + data:comment.id'/>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  <b:else/>
  <data:comment.author/>
  </b:if>
  <br/>
  Said
  </dt>
  </div>
  <div class='c_avatar'/>
  <div class='commentphoto' style='margin-top:.5em;'/>
  <a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
  <script type='text/javascript'>
  CommentsCounter=CommentsCounter+1;
  document.write(CommentsCounter)
  </script>
  </a>
  </div>
  <b:if cond='data:comment.author == data:post.author'>
  <div class='owner-Body'>
  <p><data:comment.body/></p>
  <div class='c_date'><data:comment.timestamp/></div>
  <div class='c_approved'/><br/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <b:else/>
  <div class='pane_r'>
  <p><data:comment.body/></p>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <div class='c_date'><data:comment.timestamp/></div>
  <div class='c_approved'/><br/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </b:if>
  </div>
  </b:if></div>
  <div class=' clear'/></li> </b:loop>
  </ul>

• 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 ]]></b:skin>
  

• 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 </head>
  

  <script src='http://www.geocities.com/ridwanox/blogger_comment_photos.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
  BloggerProfiles.imageWidth = 50;
  BloggerProfiles.imageHeight = 60;
  addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
  //]]> </script>
  

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.

Penelusuran Membuat Link Di Sidebar 2

Setelah ngeposting membuat link di sidebar.
Mari kita lanjutkan dengan Penelusuran Membuat Link Di Sidebar bagian 2.
Ikuti penelusuranku :

Membuat Link Gambar dengan Ukuran Tertentu :

<a href="http://adf.ly/?id=2151"><img style="width: 125px; height: 125px;" alt="Mau Dapat Uang Gratis,Klik Ajah Deh" src="http://img261.imageshack.us/img261/641/klikajahdehrj0.gif"/></a>

Maka hasilnya :

Keterangan :

• Warna merah ganti dengan alamat linkmu.
• Width : 125px merupakan lebar gambar.
• Height : 125px merupakan tinggi gambar.
• Warna hijau merupakan deskripsi gambar.
• Warna biru merupakan url gambar.
  

Ya segitu dulu saja
Mau istirahat dulu ya lagi tidak enak badan nih...

Belajar Membuat Border

Fiuhhakibat banyaknya kesibukan, baru sempatnya posting nih.
Ok lanjut Belajar Membuat Border,
Lihat contohnya untuk lebih mengenalnya :

Ini merupakan contoh dari border

Yang diatas merupakan contoh border yang memakai style dotted.

Sedikit Pengetahuan mengenai border :

Border jika digunakan dalam CSS

Bila bentuk secara komplitnya begini:
border:1px dotted #fff; urutan penggunaanya adalah ukuran border, style border dan warna border, bila dipecahkan menjadi beberapa bagian :

• border-width:1px; merupakan ketebalan dari border.
  

• border-style:dotted; merupakan jenis atau style bordernya bisa anda ganti dengan style/jenis dashed, solid, double, groove, ridge, inset, outset dan lainya

• border-color:#FFFFFF; merupakan warna dari border.Bisa anda lihat kode warnanya disini

Border jika digunakan dalam Postingan

Perlu kita ketahui scriptnya begini :

<div style="border:1px#fff dotted; padding:10px; background-color:#FFFFFF">

</div>

Sedikit Keterangan :

• Warna merah merupakan warna bordernya.
• Warna biru merupakan warna backgroundnya.
• Warna hitam tebal merupakan tebalnya border.
• Warna hijau merupakan Style/Jenis bordernya.
  

Bila ingin menggunakan Style/jenis border lain maka ganti dotted dengan style/jenis di bawah ini :

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset

Cara Menggunakan Border di Postingan :

• Anda tulis Script yang ada di atas tadi , copy paste waktu postingan dalam keadaan Tab Edit HTML.
  

• Setelah itu lihat hasilnya di postingan dalam keadaan Tab Tulis.

Selesai juga ya Belajar Membuat Border dengan tukang arsip .
Mungkin hanya begitu saja ya...Saya mulai ngantuk nih .
Semoga berhasil ya.

Belajar Membuat Blockquote

Ada request dari teman nih miss anna , katanya mau minta di ajarin membuat blockquote , oke deh saya kasih tutornya

Langkah Pertama Memasukkan kode Blockquote di HTML :

• Login ke blogger.com
• Klik Tata Letak
  

• Klik Edit HTML

• Tidak Usah Expand Widget Template.

• Copy code di bawah ini :

blockquote {
background-position:-10px -7px;
border: 1px dotted #FFC600;
margin: 10px;
padding: 10px;
background: url("http://img516.imageshack.us/img516/1513/blackquotewe3.png") no-repeat
#FFF8DD;
text-align: justify;
}

Taruh Kode itu di atas ]]></b:skin>

Keterangan :

• Warna merah merupakan background gambar blockquote.

Anda bisa ganti dengan gambar lainnya seperti yang saya berikan ini :

• Warna Biru merupakan warna background yang akan muncul.

Maka hasil kode yang di atas yaitu lebih kurang begini :

Langkah Kedua Cara Menggunakan Kode Blockquote di Postingan :

<blockquote><p> Tulis Artikelnya disini </p></blockquote>

Maka hasilnya begini :
Selesai juga akhirnya.
Selamat mencoba ya Sahabat.
Stay Tune With me OK