Cara Memasang Like This Button Facebook Pada Blog

Setelah anda mempelajari mengenai cara memasang Social Bookmarking Icon. Sekarang saatnya untuk mempelajari cara memasang Like This Button Facebook, contohnya bisa anda lihat bagian atas artikel ini tepatnya di bawah judul artikel.


Ok, untuk mempersingkat waktu kita mulai saja caranya.
Copy salah satu Code berikut yang sesuai dengan template blog anda

Blogger/Blogspot classic template:

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

Blogger/Blogspot modern template:

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>

Blogger/Blogspot tambahkan code berikut agar buttonnya terlihat setelah kita masuk kedalam artikelnya, contohnya button saya saat di home tidak terlihat, tapi saat mengklik artikelnya dan masuk ke halaman artikel baru terlihat:

<b:if cond='data:blog.pageType == &quot;item&quot;'>Salah Satu Code Diatas</b:if>

WordPress:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

Untuk Blogger/Blogspot, letakan Code di atas setelah tag <b:includable id='post' var='post'> untuk meletakannya diatas judul articel, Letakan setelah atau sebelum <div class='post-body entry-content'> untuk meletakan di bawah judul dan diatas isi articel.

Sedangkan untuk WordPress, silahkan letakan kode tersebut sebelum atau sesudah tag <?php the_content(); ?> pada file single.php yang terdapat pada editor theme Anda.

Selamat mencoba dan Semoga Bermanfaat.

Cara Membuat Icons Social Bookmarking Didalam Halaman Artikel

Apa sih Social Bookmarking itu?

Awalnya saya juga tidak tahu, tapi setelah saya bertanya kepada om google saya menemukan jawabannya di wikipedia. Social Bookmarking adalah metode bagi para pengguna internet untuk berbagi, mengatur, mencari, dan mengelola bookmark (penanda) sumber daya web. Tidak seperti file sharing, sumber dayanya sendiri tidak dibagi tapi hanya sebagai penanda referensi.

Lalu gunanya untuk apa?

Memasang Social Bookmark merupakan salah satu cara mudah untuk melakukan promosi blog/web kita. Oleh karena itu kita perlu memasang Social Bookmark pada setiap halaman artikel dalam blog.web kita.

Icon social bookmarking apa saja yang bisa kita pasang?

Icon Social bookmarking yang bisa kita pasang sangatlah banyak, nah icon yang akan saya pasang yaitu Digg, Sphinn, Delicious, Facebook, Twitter, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati. Untuk contoh iconnya bisa anda lihat gambar di bawah ini.

Bagaimana cara membuatnya?

Cara membuatnya sangat mudah anda tinggal mengikuti langkah-langkah berikut :

• Masuk kedalam account Blogger anda, lalu klik Tata Leta /  Rancangan lalu pilih Edit HTML.
• Sebelum memulai ada baiknya anda menyimpan atau mengunduh template anda untuk berjaga-jaga jika terjadi sesuatu yang tidak diinginkan.
• Jika anda sudah yakin, mari kita mulai. Beri tanda cek pada Expand Template Widget.
• Letakan Code CSS berikut di atas ]]></b:skin> :
  
  /* Social Bookmark
  ----------------------------------------------- */
  div.sociable { margin: 16px 0 0 0; text-align: center; }
  
  span.sociable_tagline { position: relative; }
  span.sociable_tagline span { display: none; width: 14em; }
  span.sociable_tagline:hover span {
  position: absolute;
  display: block;
  top: -5em;
  background: #ffe;
  border: 1px solid #ccc;
  color: black;
  line-height: 1.25em;
  }
  .sociable span {
  display: block;
  }
  .sociable ul {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  }
  .sociable li {
  background: none;
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 1px;
  }
  .sociable ul li:before { content: ""; }
  .sociable img {
  float: none;
  width: 16px;
  height: 16px;
  border: 0;
  margin: 5px 5px; /*jarak antargambar*/
  padding: 0;
  }
  .sociable-hovers {
  opacity: .4;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
  }
  .sociable-hovers:hover {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  }
• Kemudian cari kode <data:post.body/> . Jika ada dua buah, pilihlah yang pertama. 
• Setelah itu letakan Script Code berikut dibawah(setelah) <data:post.body/> yang pertama.
  
  <!-- Awal Social Bookmark -->
  <div class='sociable'>
  <span class='sociable_tagline'>
  <span>Ikon ini merupakan link ke situs social bookmark, pembaca dapat men-share halaman artikel yang sedang dibaca.</span>
  </span>
  <li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPidoDJ2k-x2jQG7cZYCWkeyT1-dvgf76IlIvwxVkBxcKJrdtpovbLnFHpk-pSth2cm_apoQe9GgeW7JakD6zE2mD8w_cez3EgicqkxgdPII2Fyjjxd03NxoEz5WX8K4wbyoCt-m6E4c/s800/digg.png'/></a></li>
  <li><a expr:href='&quot;http://sphinn.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Sphinn'><img alt='Sphinn' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel-_UOJjfoQQAInCmtf41QkiVzV3MIch6ccz9gemh3Xg67v1t367tvZl-Q1Nhyphenhyphenj1EyHD84XxZdCkGMJ2hq6wXD249E-cggByIoY_wvRhVdcnq6sFukacBxe6bmQLe3FvJcf9T900ekNo/s800/sphinn.png'/></a></li>
  <li><a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpc1Th30xT5DUNESNtlOxIcWK-nJ9lX0mcSmnRDPXDpAYXdlmnCWCanJwytzMOeGrfZ47E8KW17nsRAnM4vmcyaLXMhZdviEV5yztEEAIE-cj5RjBp46f2YcuS-0Szwu0pTZAPwzwwd5M/s800/delicious.png'/></a></li>
  <li><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipS_iwPqJoxC2Dzq6DownvdrMsw9jmnkXDJBZnE3c7Luit5DtgadWjQLpwu_yXjeimzhgeRk9X7PPjkekkDNkzkNxyLWC67qSuQA6Y73VyFWx7BNA5c6bFlM_vIyYsUqDaPhZvoZbEByI/s800/facebook.png'/></a></li>
  <li><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Twit This!'><img alt='Twit This!' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWI3VXQUKN_GdDvWSEcnZPXem9ZeEotv_uQA1bbtbfzzz3jK991VoNGT_1xN1lvB5ioJbG8xxP1oC9LskOQ2yUMqA62VeM4HLmWguLJNSxoUIx4kn3j0qTy2POJ5CQrUeKlSJNEGhKSw/s800/twitter.png'/></a></li>
  <li><a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-79oYxM_KvKhM5jrF4vSxwsvI4oihCaqSzF64OqRXIPbLxYULhMNFCyoydsRDIiPlPdSYM0_uSBrBl-Zl9_dYcHuwI8Dtvd6hyphenhyphenFb4GgR0mq3j7vLoJWb146STHVv3LsXpDjfKQBDyFc/s800/mixx.png'/></a></li>
  <li><a expr:href='&quot;http://google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteED2fRxkspdo7-c4obgrPIYz-BrPNxPEI4IjywheSofPkpEniMuXzEwAhT3eLGrO4P68lsiTPULenr6J3JHNYB-h1QonNRipI7dX29n2JKXP8kNN_emairsNUkrJgsll9kA4JH51aCE/s800/google.png'/></a></li>
  <li><a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIGyCjb6NXV3on80LsvGU0txwDogAwoSfxAwFhE3fbqqj96X6OfJd9BVGywseFitQUqcsMwLkF5Hqw-NQH18hK9-_AA5T8n1ZP-SP30x45zuC9zGFSHGtOPlrFtm4ZL8NOrmhwyhTngY/s800/furl.png'/></a></li>
  <li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVoWy-8TLKLbj68Itw7kypjP15eQoO7rSN1XMBOQlf6HidM_ajrf2IyfdEgwIXBqrLzgUEznZzFEyEfR-v0P_V2a_jt3xjQ9T3jUyPVB4s0JoKR_kkeNdQap1wTtlULT0JMX_2mBIZiI/s800/reddit.png'/></a></li>
  <li><a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Spurl'><img alt='Spurl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSHiBUENe4w3VuU5JdvTHSILPR_9uHpqO5GdScUrFGf3oInCYF0GY7vCfz3wq-BrCYtfG-mU635qjJd2WuIDP6hOVAtOnbwlFidycHOpBOJBZD96hFmEouXEtqf1BwRqU8nWhQ3RbmoI/s800/spurl.png'/></a></li>
  <li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4HmIiqxdTYowfUcJFBs1NE4DEZ4fpiEoBrujMfL7nw-NbSxyVF1BYngmc8fUNM0y8Nrj8z74S4n5EjqamMcyE-k1s_NB6W9U87IRAZtZZXyZdALxIkTKNmAXKXSHvlvn2WVKvmYRWRM/s800/stumbleupon.png'/></a></li>
  <li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t0f5pwsDZMzfUM9Qlq8TnFZ39JwMjh8pRVupWLB0JMrxxumTSfaYUzWW1JJGbUzOKYaJFG6o7wnsbYkugWnZkac9cQEHuu07XaemZnZTPhHdWcb44X1153bodvcl3efBEwRYjV8J0U4/s800/technorati.png'/></a></li>
  </div>
  <!-- Akhir Social Bookmark -->
• Setelah selesai klik Simpan Template, lalu buka salah satu artikel anda untuk melihat hasilnya.

Selamat Mencoba dan Semoga Bermanfaat .

Cara Membuat Spoiler

Mumpung lagi bengong-bengong aja, jadi saya menyisihkan waktu untuk menulis artikel ini.  

Apa sih spoiler itu?

Mungkin bagi para kaskuser spoiler sudah bukan hal yang asing lagi, tapi mungkin masih ada yang belum tahu mengenai spoiler ini. Spoiler adalah sebuah command untuk membuat data/tulisan/gambar kita bisa kita buka(terlihat isinya) atau tutup(tidak terlihat isinya), jadi dengan adanya spoiler tulisan/gambar yang berukuran besar atau banyak bisa kita minimalis tampilannya dengan menyembunyikan sebagian data-data besarnya, sehingga tampilan dari penulisan menjadi singkat dan rapih. Dan jika data yang kita minimalis ingin dilihat, kita tinggal mengklik button spoiler tersebut.

Maaf ya jika penjelasan saya salah, penjelasan ini muncul sendiri di otak saya saat lagi makan jadi saya tulis deh, hehehehehe.....

Ok kita langsung masuk ke pointnya, bagaimana cara membuatnya?

Kalau di Kaskus command yang digunakan

[Spoiler="NamaSpoiler"]Isi spoiler[/Spoiler]

Nah kalo di blog ada 2 jenis spoiler, ada yang menggunakan Script dan ada yang menggunakan code CSS. Ikuti saja langkah-langkah ini :

Spoiler 1 Dengan Menggunakan Command Div(Code CSS)

Ini tampilannya dan Codenya ada di dalamnya klik tampilkan untuk melihatnya.

Jika ingin menggunakan spoiler ini, masukanlah Code ini pada setiap data yang ingin di buat spoilernya:

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e1e1e1; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG DISEMBUNYIKAN</div></div></div !akhir spoiler>

Kamu dapat mengubah :

Text Align : Perataan teks pada button spoiler.
Input style Width : Lebar button(input) spoiler.
Input style Background-color : Warna latar button(input) spoiler.
Input style Color : Warna huruf button(input) spoiler.
Input style Value : Kalimat pada button (Value normal button anda).
Value dengan kata "Sembunyikan" : Kalimat pada button saat akan menutup spoiler.
Value dengan kata "Tampilkan" : Kalimat pada button saat akan membuka spoiler.
Div style padding : Padding teks/gambar yang disembunyikan.
Div style text-align : Peratan teks yang disembunyikan.
Tulisan/Gambar yang disembunyikan : data anda yang ingin disembunyikan.

Spoiler 2 Dengan Menggunakan Script

Nah cara ke-2 ini cara yang saya pakai untuk membuat Related Post saya, bisa anda lihat di bawah.

Ini tampilannya dan Scriptnya ada di dalamnya klik tampilkan untuk melihatnya.

Tampilkan/Sembunyikan Caranya

Langkah-langkah membuatnya sebagai berikut:

• Setelah anda login/masuk ke Blogger, klik Tata Letak/Rancangan dan pilih Edit HTML.
• Lalu Cari kode ]]></b:skin> 
• Setelah itu letakkan kode CSS berikut di atasnya:
  
  /*-----Toggle Spoiler-----*/
  .widgethidden {display:none}
  .widgetshown {
  display:inline
  overflow:auto;
  }
• Kemudian letakkan script ini di bawah kode ]]></b:skin>:
  
  <script type='text/Javascript'>
  function togglespoiler (postid){
  var whichpost = document.getElementById(postid);
  if (whichpost.className=="widgetshown"){
  whichpost.className="widgethidden";
  }
  else{
  whichpost.className="widgetshown";
  }
  }
  </script>
• Jika sudah selesai meletakan Script dan CSS code, gunakan code ini setiap anda ingin membuat spoiler :
  
  <div style="text-align:center; margin:0px 0px; font-size:auto; font-weight:bold;">
  <a href='javascript:togglespoiler ("spoiler1")' style='border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 10px; background-color:#e1e1e1;' title='Click for expand'>Tampilkan/Sembunyikan</a></div>
  <div class='widgethidden' id='spoiler1'>
  

  TULISAN/GAMBAR YANG DISEMBUNYIKAN

  </div>
  Catatan:
  Jika anda akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya yang berwarna Merah bisa diubah menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: Artikel, Trick, Tips, dll.
  Anda dapat mengubah tulisan-tulisan berwarna biru sesuai keinginan anda.
  Keterangannya:
  
  
  - Text-align : Perataan tulisan pada button.
  - Margin : Pengaturan margin button.
  - Font-Size : Ukuran font pada button.
  - Font-Weight : Karajteristik font pada button (bold/italic/underline).
  - Padding : Pengaturan padding button.
  - Background-Color : Warna background button.
  - Title : Keterangan button.
  - Tampilan Tulisan Pada Spoiler (Tampilkan/Sembunyikan) : Bisa di ubah sesuai dengan selera.

Selamat mencoba dan semoga bermanfaat untuk anda.

Cara Membuat Daftar Isi Blog (Sitemap)

Bagi anda yang sudah membuat Recent Posts, Related Posts, Recent Label, dan Popular Posts, itu semua masih belum cukup karena kita perlu membuat Daftar Isi(Sitemap). Yang gunanya untuk membantu para pengunjung/pembaca blog ini dalam mencari/melihat seluruh data artikel di dalam blog ini, dengan cara melihat judul-judul berdasarkan category/tanggal posting di dalam daftar isi/sitemap ini.

Dari yang sudah saya pelajari dan baca-baca dari blog teman, dalam membuat Sitemap/daftar Isi terdapat 2 type/2 jenis. Pertama yaitu Sitemap yang penyusunannya berdasarkan Category/Label ,dan yang kedua yaitu Sitemap yang penyusunannya berdasarkan tanggal posting. Dalam hal peletakannya pun terdapat 2 cara, yaitu diletakan pada artikel blog dan diletakan pada widget/gadget blog. Dalam hal peletakan anda bebas memilih, ingin diletakan didalam artikel atau di dalam gadget. Untuk contoh peletakan dalam gadget anda bisa lihat sitemap saya yang berada pada tabview widget.

Dalam membuat Sitemap dengan penyusunan berdasarkan Label/Category  terdapat 2 cara :

Sitemap Berdasarkan Label/Category 1.

• Setelah anda login kedalam akun blogger anda, anda bisa memilih :
  1. Klik Terbitkan entry ( Buat Entry Baru ) jika anda ingin meletakannya pada artikel.
     - Jika memilih Terbitkan Entry setelah mengklik dan masuk pada tampilan Entry Baru, lalu beri
       judul postingan anda dan pilih Edit HTML untuk memasukan code scriptnya.
     - Setelah itu klik post option(option entry), lalu ubah Post tanggal dan waktu ke tanggal dan
       waktu paling lama (pertama kali posting).
  2. Klik TataLetak/Rancangan jika anda ingin meletakannya pada gadget blog.
     - Selanjutnya klik Add Widget/Tambah Gadget lalu pilih HTML/Javasript.
• Setelah memilih dan melakukan pengaturan, letakan code script berikut :
  
  <div style="overflow:auto; padding-left:5px; width:100%; height:250px;">
  <script language="javascript">
  numposts=9999;
  home_page="NamaBlog.blogspot.com";
  explanpost="Baru !";
  </script>
  <ul><script style="text/javascript" src="http://ic-project.googlecode.com/files/sitemaps.js"></script></ul>
  </div>
  Keterangan
  - Padding, Widht(lebar), dan Height(tinggi) sesuaikan dengan selera dan kebutuhan anda.
  - Numpost jumlah artikel yang ditampilkan.
  - NamaBlog ganti dengan nama blog anda.
  - Explanpost keterangan postingan baru, bisa anda ubah menjadi New!!, Nuovo!!, Baru Coy!!, atau
    sesuaikan dengan selera anda.
  - <ul></ul> ini berfungsi untuk menambahkan bullet, hapus jika tidak ingin menggunakan. - Dan untuk alamat Script yang berwana merah, jika ingin menggunakan source script aslinya dari
    Kang Enes, silakan ganti dengan alamat ini:
  
  http://enes-sc.googlecode.com/files/sitemap-np.js  
  Keterangan Tambahan
  
  Keterangan ini digunakan jika anda menyimpannya di Tabview Widget
  - Hapus <div style="overflow:auto; padding-left:5px; width:100%; height:250px;">
   di awal Script, dan </div> di akhir Script.
  Command ini berfungsi untuk menambahkan scroll, dihapus karena pada Tabview Widget sudah otomatis memakai scroll.
  
• Setelah selesai Klik Terbitkan Entry jika menaruhnya di artikel blog, atau Klik Simpan jika menaruhnya di gadget blog.
  

Sitemap Berdasarkan Label/Category 2.

• Setelah anda login kedalam akun blogger anda, anda bisa memilih :
  1. Klik Terbitkan entry ( Buat Entry Baru ) jika anda ingin meletakannya pada artikel.
     - Jika memilih Terbitkan Entry setelah mengklik dan masuk pada tampilan Entry Baru, lalu beri
       judul postingan anda dan pilih Edit HTML untuk memasukan code scriptnya.
     - Setelah itu klik post option(option entry), lalu ubah Post tanggal dan waktu ke tanggal dan
       waktu paling lama (pertama kali posting).
  2. Klik TataLetak/Rancangan jika anda ingin meletakannya pada gadget blog.
     - Selanjutnya klik Add Widget/Tambah Gadget lalu pilih HTML/Javasript.
• Setelah memilih dan melakukan pengaturan, letakan code script berikut :
  
  <script style="text/javascript" src="http://ic-project.googlecode.com/files/sitemap.js"></script>
  <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  Keterangan
  - NamaBlog ganti dengan nama blog anda.
  - Dan untuk alamat Script yang berwana merah, jika ingin menggunakan source script aslinya dari
    Abu Farhan, silakan ganti dengan alamat ini:
  
  http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js
• Setelah selesai Klik Terbitkan Entry jika menaruhnya di artikel blog, atau Klik Simpan jika menaruhnya di gadget blog.
  

 Sitemap Berdasarkan Tanggal.

• Setelah anda login kedalam akun blogger anda, anda bisa memilih :
  1. Klik Terbitkan entry ( Buat Entry Baru ) jika anda ingin meletakannya pada artikel.
     - Jika memilih Terbitkan Entry setelah mengklik dan masuk pada tampilan Entry Baru, lalu beri
       judul postingan anda dan pilih Edit HTML untuk memasukan code scriptnya.
     - Setelah itu klik post option(option entry), lalu ubah Post tanggal dan waktu ke tanggal dan
       waktu paling lama (pertama kali posting).
  2. Klik TataLetak/Rancangan jika anda ingin meletakannya pada gadget blog.
     - Selanjutnya klik Add Widget/Tambah Gadget lalu pilih HTML/Javasript.
• Setelah memilih dan melakukan pengaturan, letakan code script berikut :
  
  <script style="text/javascript" src="http://ic-project.googlecode.com/files/sitemap.date.js"></script>
  <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  Keterangan
  - NamaBlog ganti dengan nama blog anda.
  - Dan untuk alamat Script yang berwana merah, jika ingin menggunakan source script aslinya dari
    Abu Farhan, silakan ganti dengan alamat ini:
  
  http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js
• Setelah selesai Klik Terbitkan Entry jika menaruhnya di artikel blog, atau Klik Simpan jika menaruhnya di gadget blog.

Keterangan Tambahan "Sitemap Berdasarkan Label/Category 2" dan "Berdasarkan Tanggal"

- Gunakan Perintah <div style="overflow:auto; padding-left:5px; width:100%; height:250px;">
letakan di awal Script, dan </div> letakan di akhir Script.
Gunakan ini jika jumlah data sitemap/jumlah postingan anda banyak, ini berfungsi untuk menambahkan scroll.
- Jika anda memilih untuk menyimpan Sitemap pada artikel(postingan), setelah anda selesai membuat artikelnya buatlah direct link ke postingan tersebut, dengan cara memasukan link postingan tersebut ke navbar anda, atau di sidebar. Contoh penulisan link seperti ini :

<a href="http://NamaBlog.blogspot.com/2010/12/Cara-Membuat-Daftar-Isi-Blog.html">Daftar Isi</a>

(2010/12/Cara-Membuat-Daftar-Isi-Blog.html menunjukkan artikel yang berjudul "Cara Membuat Daftar Isi Blog" dibuat pada bulan Desember 2010)

Selamat mencoba dan semoga bermanfaat.

Cara Menampilkan Isi Dari 2 Label Atau Lebih

Sekarang saya akan menjelaskan mengenai bagaimana cara memunculkan isi dari 2 buah label atau lebih, artikel ini saya temukan saat saya sedang baca-baca blog milik salah seorang yang saya nilai dia pandai sekali membuat blog, orang itu bernama Kang Enes. Karena isi dari artikel ini sangat penting, jadi saya tulis juga artikel tersebut disini.

Ok pertama-tama saya akan menjelaskan apa itu label ?

Label adalah sebuah judul yang digunakan untuk menandai setiap postingan kita, yang dimana fungsi utamanya untuk memberikan tanda/mengelompokan postingan kita pada sebuah judul yang sama. Label bisa kita sebut juga sebagai Categori.

Lalu fungsinya untuk apa ?
Label mempunyai fungsi untuk membantu para pembaca artikel, dalam mencari artikel lain yang bersangkutan dengan topik utamanya. Sebagai contoh anda memiliki 2 buah postingan mengenai cara membuat label dan cara membuat Recent Posts, dari 2 postingan itu sudah pasti di kelompokan dalam categori Trick Blog. Nah 2 postingan itu kita beri Label Trick Blog, sehingga saat pembaca mencari trick-trick blog, pembaca tinggal mengklik labelnya saja dan setelah di klik label itu maka akan munculah semua postingan dengan label tersebut.


Nah disini saya akan menjelaskan cara memasang widget yang isinya lebih dari 2 label beserta isi label tersebut dengan menggunakan Javascript, sehingga widget itu terlihat seperti daftar isi di dalam buku.

Untuk membuat widget tersebut, ikuti saja langkah-langkah di bawah ini :

• Masuk ke Rancangan/Tata Letak dan pilin Elemen Halaman.
• Lalu klik Tambah Widget dan pilih HTML/Javascript.
• Lalu masukan kode ini :
  
  <script style="text/javascript">
  var numposts = 50;
  var standardstyling = true;
  </script>
  
  <script type='text/javascript' src='http://ic-project.googlecode.com/files/rc-labels.js'></script>
  
  
  <h4>Judul</h4>
  

  <ul>

  <script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default/-/Nama%20Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
  

  </ul>

  <br/>

  
  <h4>Judul</h4>
  

  <ul>
  <script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default/-/Nama%20Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
  

  </ul>
  Keterangan :
  - Judul ubah dengan yang anda inginkan, atau sama dengan nama label
  - var numpost jumlah judul yang akan ditampilkan
  - NamaBlogAnda ganti dengan nama blog anda.
  - Nama Label di ubah sesuai dengan nama label/category yang ingin anda tampil.
  - %20 jika nama label anda memakai spasi, maka spasinya di ganti dengan %20
  - <br/> gunanya untuk memberi jarak antara isi teakhir label sebelumnya dengan judul label selanjutnya.
  - <ul></ul> gunanya untuk memberikan bullet pada isi label.
  
  bingung?? Ok akan saya beri contoh penulisannya.
  
  
  <script style="text/javascript">
  var numposts = 50;
  var standardstyling = true;
  </script>
  
  <script type='text/javascript' src='http://ic-project.googlecode.com/files/rc-labels.js'></script>
  
  
  <h4>Blogspot</h4>
  

  <ul>

  <script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default/-/Blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
  

  </ul>

  <br/>

  
  <h4>Online Business</h4>
  

  <ul>

  <script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default/-/Online%20Business?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
  

  </ul>
• Klik Simpan untuk menyelesaikannya.

Selamat mencoba dan semoga bermanfaat.

Cara Membuat Related Posts

Karena sudah pagi dan seharusnya ini waktu untuk tidur, jadi saya langsung jelaskan apa fungsi dari related Posts ini.

Related Posts berfungsi untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan yang sedang dilihat. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel dan label/category yang berkaitan dengan artikel yang sedang dibacanya, sehingga si pembaca bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.

Untuk menambahkan/membuat Related Post dalam blog, anda bisa mengikuti langkah-langkah berikut :

• Masuk ke akun blogger anda.
• Pilih dan klik tab Tata Letak/ Rancangan.
• Pilih Edit HTML.
• Beri tanda cek pada Expand Template Widget.
• Carilah kode
• Lalu letakan kode script berikut di bawahnya
  
  <!-- Mulai Related Post -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'>
  <div class='related-posts'>
  
  <div class='widget-content'>
  <h4>Artikel terkait dengan kategori ini:</h4>
  <div id='datablogku' style='margin:10px 0px 10px 0px'/>
  
  <script type='text/javascript'>
  var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
  var maxNumberOfPostsPerLabel = 4;
  var maxNumberOfLabels = 10;
  
  maxNumberOfPostsPerLabel = 100;
  maxNumberOfLabels = 3;
  
  function listEntries10(json) {
  var ul = document.createElement(&#39;ul&#39;);
  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
  json.feed.entry.length : maxNumberOfPostsPerLabel;
  for (var i = 0; i &lt; maxPosts; i++) {
  var entry = json.feed.entry[i];
  var alturl;
  
  for (var k = 0; k &lt; entry.link.length; k++) {
  if (entry.link[k].rel == &#39;alternate&#39;) {
  alturl = entry.link[k].href;
  break;
  }
  }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  a.href = alturl;
  
  if(a.href!=location.href) {
  var txt = document.createTextNode(entry.title.$t);
  a.appendChild(txt);
  li.appendChild(a);
  ul.appendChild(li);
  }
  }
  for (var l = 0; l &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
  var raw = json.feed.link[l].href;
  var label = raw.substr(homeUrl3.length+13);
  var k;
  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
  var txt = document.createTextNode(label);
  var h = document.createElement(&#39;b&#39;);
  h.appendChild(txt);
  var div1 = document.createElement(&#39;div&#39;);
  div1.appendChild(h);
  div1.appendChild(ul);
  document.getElementById(&#39;datablogku&#39;).appendChild(div1);
  }
  }
  }
  function search10(query, label) {
  
  var script = document.createElement(&#39;script&#39;);
  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
  + label +
  &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
  document.documentElement.firstChild.appendChild(script);
  }
  
  var labelArray = new Array();
  var numLabel = 0;
  
  <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
  textLabel = &quot;<data:label.name/>&quot;;
  
  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
  labelArray.push(textLabel);
  var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
  labelArray.length : maxNumberOfLabels;
  if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
  }
  }
  </b:loop></b:loop>
  </script>
  </div></div>
  <!-- Terimakasih karena anda tidak menghapus link ini -->
  <div style='font-size:85%; float:right; margin-top:3px;'><a href='http://improve-computer.blogspot.com/2010/12/membuat-related-posts.html' target='_blank' title='Cara membuat Related Post'>Cara Membuat Related Posts</a>
  </div></div>
  </b:if>
  <!-- Akhir Related Post -->
  Keterangan
• • Tulisan yang diberi warna biru bisa kamu ubah sesuai keinginan.
  • Jika anda menggunakan script Readmore, letakkan kode tersebut di bawah yang pertama (paling atas). Jika berbeda, kamu bisa mencobanya di bawah yang kedua (paling bawah).
  • Jika anda sudah menambahkan Icons Social Bookmarking atau Addthis Sharing Tools, letakkan kode tersebut dibawah script Icons Social Bookmark atau Addthis Sharing Tools.
• Jika sudah selesai mengedit, klik Simpan Template untuk menyelesaikannya

Untuk contoh Related Post milik saya yang bisa dibuka/ditutup, dapat anda pelajari di Cara Membuat Spoiler.

Selamat mencoba dan semoga bermanfaat

Cara Membuat Popular Post Widget

Recent Posts sudah. Recent Comments Sudah. Ok selanjutnya kita coba membuat Widget Popular Post. Apa sih widget popular posts itu?
Sebuah widget atau bisa disebut gadget tambahan pada blogger yang gunanya untuk memunculkan/menampilkan Postingan populer(postingan yang paling banyak di respon oleh pengunjung) yang berada di blog kita.
Contoh bentuk widgetnya bisa anda lihat di New 15 Post pada widget tabview saya yang berada di bagian atas tampilan blog ini.

Saya tidak akan bertele-tele lagi, kita langsung ke tahap pembuatannya, sebagai berikut :

• Pertama-tama anda masuk kehalam Dashboard blog dan pilih Tata Letak (Layout).
• Setelah berada di Elemen Halaman, klik Add Gadget (Tambah Gadget).
• Lalu pilih gadget HTML/Javascript untuk ditambahkan.
  
• Lalu masukan Script berikut pada kolom yang tersedia.
  
  <script language="javascript">
  titlebold=false;
  numposts=9999;
  maxshowresult=10;
  explanation="respon";
  home_page="NamaBlog.blogspot.com";
  </script>
  <script style="text/javascript" src="http://ic-project.googlecode.com/files/popularpost.js"></script>
  Keterangan:
  • titlebold = Judul artikel. Jika ingin judul artikel ditampilkan dengan cetak tebal, ganti false-nya dengan true. 
  • numpost = Banyaknya artikel yang dijadikan referensi. 
  • maxshowresult = Maksimum artikel yang ditampilkan. Amda bisa mengubahnya menjadi kurang atau lebih dari 10. 
  • explanation = Keterangan. Anda dapat mengubah respon menjadi comments, komentar, komen, komeng, atau bisa juga kamu kosongkan.  
  • home_page = Alamat situs. Ganti NamaBlog dengan nama blog anda. Tanpa menggunakan http:// !
• Setelah selesai mengedit klik tombol Simpan.

Selamat mencoba dan semoga bermanfaat.


Sumber : berbagai sumber "Script by Abu Farhan"

Cara Membuat Recent Comment dan Recent Posts Widget dengan Javascript

Cara ini adalah cara lain membuat Recent Comment dan Recent Posts, dari cara sebelumnya yang membuatnya dengan menggunakan gadget blogger. Sekarang saya akan mengajarkan cara membuatnya dengan menggunakan Javascript, kelebihan dengan menggunakan Javascript yaitu entry yang di tampilkan bisa kita atur semau kita atau lebih dari 5(batas maksimal gadget blogger).

Ok kita langsung saja ke cara membuatnya karena penjelasan lengkap bisa anda baca di postingan sebelumnya.

• Pertama-tama anda masuk kehalam Dashboard blog dan pilih Tata Letak (Layout).
• Setelah berada di Elemen Halaman, klik Add Gadget (Tambah Gadget).
• Lalu pilih gadget HTML/Javascript untuk ditambahkan.
  
• Lalu masukan Script berikut pada kolom yang tersedia.

Script Recent Posts :

<script style="text/javascript" src="http://ic-project.googlecode.com/files/RCposts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan :

• Var numposts : Jumlah postingan yang ditampilkan (maksimal 25 entry)
• Var showpostdate : Menampilkan tanggal posting ( True = menampilkan , False = tidak menampilkan)
• Var showpostsummary : Menampilkan sebagian isi posting ( True = menampilkan , False = tidak menampilkan)
• Var numchars : Banyaknya huruf yang ditampilkan dari postsummary.
• Var standartstyling : Menggunakan style standart  ( True = gunakan , False = tidak gunakan)
• NamaBlogAnda : Ganti dengan nama Blog anda.
  

Script Recent Comments :

<script style="text/javascript" src="http://ic-project.googlecode.com/files/RCcomments.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan :

• Var numcomments : Jumlah postingan yang ditampilkan (maksimal 25 entry)
• Var showcommentdate : Menampilkan tanggal posting ( True = menampilkan , False = tidak menampilkan)
• Var showposttittle : Menampilkan judul postingan tempat comment itu berada  ( True = menampilkan , False = tidak menampilkan)
• Var numchars : Banyaknya huruf yang ditampilkan dari Komentar.
• Var standartstyling : Menggunakan style standart  ( True = gunakan , False = tidak gunakan)
• NamaBlogAnda : Ganti dengan nama Blog anda. 

Dari kedua script diatas jika tampilannya tidak menampilkan bullet dan anda ingin menampilkannya silakan tambahkan perintah ul  pada script teakhir, seperti contoh di bawah ini.

<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>

Setelah selesai melakukan pengeditan, tekan Simpan untuk menyelesaikannya.

Selamat mencoba dan semoga artikel ini bermanfaat.

Sumber : "Berbagai Sumber"

Cara Membuat Recent Comment dan Recent Posts Widget dengan gadget blogger

Apa itu Recent Comment dan Recent Posts widget??

Apa sih manfaat dan kegunaanya??

Bagaimana cara membuatnya??

Ok saya akan menjawab semua pertanyaan itu dengan tulisan di artikel ini.
Bagi orang awam yang baru mengenal dunia blog mungkin akan bertanya-tanya apa sih recent comment dan recent posts widget itu dan apa manfaat serta kegunaanya pada blog kita??
ok saya akan menjelaskannya.


-Recent Comment Widget adalah Sebuah widget atau bisa disebut gadget tambahan pada blogger yang gunanya untuk memunculkan/menampilkan komentar terbaru yang berada di postingan blog kita.
-Recent Posts Widget adalah Sebuah widget atau bisa disebut gadget tambahan pada blogger yang gunanya untuk memunculkan/menampilkan postingan terbaru yang berada di blog kita.

Simple-kan penjelasannya? Tapi manfaat dan kegunaanya yang diberikannya sangat berguna sekali untuk blog kita serta pembaca yang datang ke blog kita.
Dengan adanya 2 buah widget itu, kita jadi memiliki 2 buah daftar isi(post dan comment), yang dimana sangat berguna untuk para pengunjung blog yang ingin melihat comment dan postingan terbaru kita.Jadi pengunjung blog tidak harus lagi membuka atau melihat 1-1 postingan kita lagi, kasiankan mereka jika harus membuka 1-1 postingannya.

Ok, sekarang saya akan mengajarkan cara mudahnya untuk membuat 2 buah widget tersebut.

• Pertama-tama anda masuk kehalam Dashboard blog dan pilih Tata Letak (Layout).
• Setelah berada di Elemen Halaman, klik Add Gadget (Tambah Gadget).
• Lalu pilih gadget Feed untuk ditambahkan.
  
  
• Lalu masukan URL Feed pada kolom yang tersedia.
  
  URL Feed untuk Recent Post:
  
  http://nama blog anda.blogspot.com/feeds/posts/default
  
  URL Feed untuk Recent Comments:
  
  http://nama blog anda.blogspot.com/feeds/comments/default
• Klik lanjutkan, lalu pada tampilan berikutnya anda atur sesuai keinginan, lalu klik Simpan.
• Lalu anda atur posisinya dengan men-drag/menggeser gadget anda ketempat yang diingankan.

Membuat widget Recent Posts dan Recent Comment dengan menggunkan gadget blogger meiliki kelemahan yaitu jumlah entry yang di tampilkan sangatlah terbatas yaitu maksimal 5 entry. Jika ingin menampilkan lebih dari 5 entry lebih baik anda membuatnya dengan menggunakan Javascript.

Sekian Artikel dari saya dan semoga bermanfaat untuk anda.
Selamat mencoba.

Sumber : "Berbagai Sumber"

Cara Membuat TabView Widget

Pusing karena widget yang kebanyakan sehingga ruang yang tersedia di sidebar blog kita menjadi sedikit? Saya punya solusi untuk mengatasi maslaah itu, yaitu dengan membuat menu Tab View. Tab View ini (dikenal juga dengan istilah Slide Show Menu) Widget ini sangat bermanfaat karena dapat menggabungkan beberapa widget dalam 1 widget, baik itu Recent Post, Recent Comments, Blogroll, Popular Post, dll. Contoh Tab View ini bisa kalian lihat pada Widget Header saya yang berisi menu: Chat Zone, Popular dan NewPost, NewComment, dll.

Untuk membuat Tab View ini dapat kita pelajari dari situs www.o-om.com, trik-tips.blogspot.com, suprisdiantoko.com, ruangsc.blogspot.com dan situs-situs lain yang mengupas masalah ini. Tapi jika malas search and research di web-web lain, ikuti saja langkah-langkah membuat Tab View berikut:

Langkah Pertama

* Login ke akun Blogger kamu.

* Dari halaman dashboard, pilih Edit HTML.

* Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog anda. Tekan Control F untuk mencarinya.

* Kopikan kode CSS berikut dan letakkan di atas kode ]]></b:skin> .

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5VaSQYTV9HdRVDI1dpcfUoA8joRwcyZX4ESq8N44B9K1VbdB68xv4EFF_eKT1HZwBleoAU8qug0vcOx-HDumRq6UU6SHbzqvIT5tVyUoWsqlqqYwlW5cJDyBI42LdC9sdOrDtjovgmw/s0/bgtabview.gif.png"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Pada bagian yang berwarna biru, bisa kita ubah sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
* Setelah itu letakan script berikut di bawah ]]></b:skin>

<script src="http://ic-project.googlecode.com/files/tabview.js" type="text/javascript"/>

* Kemudian Save/Simpan Template

Langkah Kedua

* Buat/Tambah gadget baru di tab Elemen Halaman.
* Pilih gadget HTML/Javascript.
* Masukan script berikut ke dalam gadget anda.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript" src="http://ic-project.googlecode.com/files/tabview-tabs.js"></script>

Pada tulisan yang berwarna Biru tebal dapat kita ubah disesuaikan dengan keinginan dan kreasi kita. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kita gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kita. Begitupun dengan judul Menu dan Isi Menu dapat kita buat sendiri sesuai keinginan.
Selain itu kita bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kita mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kita.

* Langkah teakhir sangat mudah yaitu : Klik Simpan/Save.  Setelah itu anda kunjungi halaman blog anda untuk melihat hasilnya sesuai dengan keingina anda atau tidak.

Sangat mudah kan??? Hahahaha....

Ok, cukup sekian penjelasan singkat cara membuat tab view dari saya, jika ada yang kurang jelas atau kurang di pahami, anda bisa meninggalkan komen di bawah artikel ini.

Terima kasih dan sampai bertemu di artikel berikutnya.

Sumber : berbagai sumber

Cara me-setting blog

Setelah anda berhasil membuat account blogger dan telah mengetahui bagian-bagian serta fasilitas-fasilitas. Sekarang saatnya anda melakukan pengaturan pada blog anda.

Berikut ini langkah-langkah untuk merubah pengaturan pada blogger :

Silahkan login dulu ke blogger dan pilih tab pengaturan lalu pilih

1.Klik Dasar untuk mengatur Menu Dasar

• Judul = isi dengan judul blog anda.

• Uraian = isi dengan deskripsi blog anda. Contoh : It Communities and training Center

• Tambahkan blog Anda ke daftar kami? = pilih ya agar setiap postingan anda selalu masuk di daftar Blogger.com.

• Biarkan mesin pencari menemukan blog Anda? = pilih ya agar blogger memasukkan blog Anda ke dalam Penelusuran Blog Google

• Tampilkan Editing Cepat di Blog Anda? = pilih Ya

• Tampilkan Link Posting Email? = Sebaiknya pilih ya, agar pengunjung Anda dengan mudah mengirimkan posting email dari blog Anda ke teman-teman mereka.

• Konten Dewasa? = Pilih tidak. Kalau blog anda bukan blog untuk dewasa

• Tampilkan Mode Compose untuk semua blog Anda? = pilih Ya

• Aktifkan transliterasi? = pilih Tidak,

• Klik tombol Simpan Pengaturan . Selesai

2. Klik Publikasi untuk mengatur menu Publikasi :

• Alamat Blog*Spot = isi dengan nama blog anda.(biasanya sudah terisi otomatis)

• Klik tombolSimpan pengaturan. Selesai

3. Klik Format untuk mengatur menu format :

• Tampilkan = pilih angka posting yang ingin anda tampilkan.pada halaman utama

• Format Header Tanggal = pilih model tanggal/bulan yang anda sukai.

• Format tanggal Index Arsip = pilih model untuk peng-arsip-an yang anda sukai.

• Format Timestamp = Pilih bentuk waktu yang anda sukai.

• Zona Waktu = Pilih zona waktu yang sesuai.

• Bahasa = Pilih bahasa yang anda sukai

• Konversi ganti baris = pilih ya

• Tampilkan Field judul = Pilih ya

• Tampilkan kolom link = pilih ya

• Aktifkan perataan float = pilih ya

• Klik tombol Simpan Pengaturan. Selesai

4. Klik Komentar Untuk mengatur menu komentar :

• Komentar = pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung

• Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak hanya kepada anggota blogspot saja.

• Penempatan formulir komentar = pilih Disemat dibawah Entri

• Default Komentar untuk Posting = pilih Entri baru memiliki komentar.

• Link balik = Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.

• Default Link Balik untuk Posting = pilih Posting baru Memiliki Link Balik.

• Format Timestamp Komentar = pilih yang anda sukai

• Aktifkan moderasi komentar? = pilih Tidak

• Tampilkan verifikasi kata untuk komentar? = pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.

• Tampilkan gambar profil dalam komentar? = pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.

• Email Pemberitahuan Komentar = isi dgn alamat email anda

• Klik tombol Simpan Pengaturan. Selesai

5. Klik Arsipkan Untuk mengatur menu Arsipkan :

• Frekuensi Arsip = pilih Bulanan.

• Aktifkan Halaman Posting? = pilih ya.

• Klik tombol Simpan Pengaturan . Selesai.

6. Klik Fedd Situs untuk mengatur menu feed situs :

• Izinkan Feed Blog = pilih Penuh.

• Posting URL Pengubahan Arah Feed = di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.

• Footer Feed Posting = Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

• Klik tombol Simpan Perubahan. Selesai.

Sampai sini anda sudah berhasil men-setting blog anda.