Buku Tamu Tersembunyi Versi 2

Setelah membuat buku tamu tersembunyi versi 1 dan melihat respon yang cukup banyak untuk itu, aku coba untuk membuat buku tamu tersembunyi versi 2. Seperti namanya, buku tamu ini juga tersembunyi. Bedanya dengan versi pertama adalah cara penampakannya.
Untuk contohnya, kamu bisa lihat di blog ini.

Cara membuatnya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements"
2. Tambahkan widget baru dengan mengklik "Add a Gadget" - "HTML/JavaScript"
3. Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget kamu:
   

   <style type="text/css">
     .gb_fixed{
         position:fixed;
         top:0px;
         right:0px;
         z-index:+10;
     }
     * html .gb_fixed {position:relative;}
     #hidden_gb2 {
         display:none;
         border:2px solid #88C900;
         background:#E5E5E5;
         padding:10px;
         padding-top:0px;
     }
   </style>
   <div class="gb_fixed">
     <table id="hidden_gb2" cellpadding="0" cellspacing="0">
       <tr><td>
         <div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>
   
         <!-- Kode buku tamu kamu -->
   
         <div style="text-align:right; font-size:10px">
             Widget by
             <a href="http://infotentangblog.blogspot.com/2009/08/buku-tamu-tersembunyi-versi-2.html">
                 Info Blog
             </a>
         </div>
     </table>
   </div>
   
   <script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">
   
   <div class="gb_fixed" style="z-index:+5">
   <a href="javascript:void(0)" onclick="gb_showHideGB()">
     <img border="0" style="border:0px"
          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgFUetbWMjoc-7crHfS-mRWcJH17Em2IS7iqvWFMG1qAtKGZau4yMr_1u7VUanXq-UY_ALc7jr31xt0ZtizSPkXA-orQqGPUL3F7__JI4fkeWJfLNuqi-kWEN5P3tWtvTDekC1mQIJcqh/" />
     </a>
   </div>
   </script>
   

4. Posisi buku tamu jika kamu tidak mengganti kode di atas adalah di bagian kanan atas. Kalau kamu mau mengganti jadi kiri, ubah right jadi left. Dan kalau kamu mau menempatkannya di bawah, ubah top jadi bottom,
5. Kalau kamu mau mengganti gambar tombolnya, ganti kamu bisa mengganti source gambar yang ditebalkan di atas,
6. Dan juga jangan lupa untuk mengganti kode <!-- Kode buku tamu kamu --> jadi kode buku tamu kamu.
7. Klik "Save" kalau sudah selesai.

Semoga bermanfaat!
[+] selengkapnya...

Membuat Headline News Blog

Kali ini aku akan membahas tentang membuat headline news untuk blog. Sesuai namanya, widget headline news ini menampilkan judul serta link artikel-artikel terbaru dari blog kamu di bagian atas atau bawah blog kamu.
Kamu bisa lihat contoh gambarnya di bawah:


Judul-judul artikel pada headline news tersebut bergerak, sehingga lebih menarik perhatian pembaca.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" dan pilih "HTML/JavaScript",
3. Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:
   

   <script type="text/javascript">
    var hn_url_blog = "http://BLOGKAMU.blogspot.com";
    var hn_jumlah_post = 5;
    var hn_warna_latar = "#EEEEEE";
    var hn_warna_garis = "#000000";
    var hn_posisi = "top";
    var hn_tampilkan_judul = true;
    var hn_backlink = true;
   </script>
   <script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
   </script>
   

4. Berikut adalah penjelasan tentang variabel-variabel di atas:
   
   
   • hn_url_blog adalah URL blog kamu (widget ini hanya untuk pengguna blogger).
     
     
   • hn_jumlah_post adalah jumlah judul artikel yang ingin kamu tampilkan pada headline news.
     
     
   • hn_warna_latar adalah kode warna untuk latar belakang headline news. (Baca artikel kode hex warna di sini)
     
     
   • hn_warna_garis adalah kode warna untuk garis bingkai/border headline news. (Baca artikel kode hex warna di sini)
     
     
   • hn_posisi menentukan posisi headline news kamu apakah di atas ("top") atau di bawah ("bottom"),
     
     
   • hn_tampilkan_judul bernilai true kalau kamu ingin menampilkan tulisan "Headline news of BLOGKAMU" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
     
     
   • hn_backlink bernilai true kalau kamu ingin menampilkan backlink ke blog ini dan false jika tidak.
     
     

Selamat mencoba dan semoga bermanfaat! :D
[+] selengkapnya...

Title Search Widget

Title Search Widget adalah widget yang menampilkan beberapa judul post/artikel kamu yang cocok dengan keywords (kata kunci) yang kamu ketikkan. Dengan widget ini, kamu ga perlu lagi pindah ke halaman lain untuk melihat hasil pencarian kamu, jadi langsung ditampilkan di halaman itu.
Selain menampilkan judul beserta link dari artikel kamu, widget ini juga menampilkan ringkasan dari artikel kamu. (lihat screenshot-nya)

Kamu bisa lihat contohnya pada kotak pencarian di bagian sebelah kanan blog ini.

Widget ini hanya akan memuat feed dari blog tersebut saat kotak pencariannya diklik, jadi tidak akan begitu memberatkan waktu loading awal blog.

Caranya:

1. Masuk ke account Blogger kamu, klik "Layout" - "Page Elements",
2. Klik "Add a Gadget" - "HTML/JavaScript",
3. Tulis judul yang kamu inginkan dan tambahkan kode-kode di bawah ini:
   
   Kode untuk kotak pencarian:
   

   <form action='/search' method='get'>
   <input name='q' onfocus='ts_loadFeed()' onkeyup='ts_titleSearch(this.value)'/>
   <input type='submit' value='Search'/>
   </form>
   

   
   Kode untuk hasil pencarian:
   

   <div id='ts_content_list'></div>
   <script type='text/javascript'>
   var ts_summary_length = 200;
   var ts_blog_url = "http://BLOGKAMU.blogspot.com";
   
   // ganti variabel2 di bawah jika kamu ingin mengganti bahasa
   var ts_LOADING       = "Memuat...";
   var ts_TYPE_KEYWORDS = "Silakan ketik kata kuncinya";
   var ts_NO_RESULTS    = "Tidak ada judul yang cocok";
   var ts_SEE_SUMMARY   = "Lihat Rangkuman";
   var ts_HIDE_SUMMARY  = "Sembunyikan Rangkuman";
   </script>
   <script src="http://copycat91.googlecode.com/svn/trunk/titlesearch.js"/>
   </script>
   

4. Kamu boleh mengganti kode-kode yang ditebalkan:
   
   • ts_summary_length adalah jumlah karakter (kurang lebih) ringkasan dalam hasil pencarian,
   • ts_blog_url adalah URL blog kamu (khusus yang memakai Blogger saja),
   • dan variabel lainnya yang berhuruf kapital adalah untuk memudahkan dalam mengganti bahasa.
5. Kalau kamu sudah mempunyai kotak pencarian dan tidak ingin menggantinya, cukup cari saja kode name='q' dan tambahkan di sampingnya kode di bawah ini:
   

   onfocus='ts_loadFeed()' onkeyup='ts_titleSearch(this.value)'

   Dan jangan lupa tambahkan juga kode untuk hasil pencarian di tempat yang kamu inginkan (kamu bisa menambahkan gadget HTML/JavaScript untuk menempatkan kode hasil pencarian).
   

Selamat mencoba!
:D
[+] selengkapnya...

Widget Tautan Otomatis

Yang aku maksud dengan tautan otomatis adalah membuat link secara otomatis pada artikel kamu jika pada artikel kamu terdapat beberapa "kata kunci". Contoh, jika pada sebuah artikel mengandung kata read more, maka widget ini akan membuat link ke artikel yang membahas tentang read more. Jadi dengan menggunakan widget ini, pembaca kamu akan lebih mudah untuk menemukan artikel kamu yang lain.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" - "HTML/JavaScript",
3. Tambahkan kode di bawah:
   

   <script src="http://copycat91.googlecode.com/svn/trunk/autolink.js">
   </script>
   <script type="text/javascript">
   
   var f = new autoLink();
   
   f.add("kata kunci 1", "http://urlblogkamu.com/artikel1kamu.html");
   f.add("kata kunci 2", "http://urlblogkamu.com/artikel2kamu.html");
   f.add("kata kunci 3", "http://urlblogkamu.com/artikel3kamu.html");
   
   // dan seterusnya...
   
   f.startScript();
   
   </script>
   

4. Ganti kata kunci jadi kata kunci yang kamu inginkan dan url-nya jadi url artikel yang kamu maksud. Contohnya yang aku pakai untuk blog ini adalah:
   

   f.add("widget", "http://infotentangblog.blogspot.com/search/label/Widgetku");
   f.add("read more", "http://infotentangblog.blogspot.com/2009/07/membuat-read-more-versi-2.html");
   f.add("warna", "http://infotentangblog.blogspot.com/2009/07/kode-hex-warna.html");
   
   // dan seterusnya...

Semoga bermanfaat! :D
[+] selengkapnya...

Membuat Daftar Isi Blog

Daftar isi di blog sangatlah penting perannya, karena ini dapat mempermudah pembaca kita menemukan artikel-artikel lain di blog kita.
Setelah berkutat berhari-hari dengan javascript, akhirnya selesai juga script untuk membuat daftar isi blog.

Daftar isi ini tidak hanya menampilkan judul dan link-nya, tapi juga menampilkan label, tanggal postingan, serta ringkasan dari artikel-artikel kita.

Selain itu, daftar isi ini dapat di-filter untuk menampilkan beberapa artikel dengan label atau tanggal tertentu saja, dan dapat juga diurutkan sesuai tanggal atau judulnya.
Untuk contohnya, kamu bisa lihat di sini.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Posting" - "New Post",
2. Kemudian isi judulnya dengan judul yang kamu inginkan, seperti "Daftar Isi" atau semacamnya,
3. Kemudian copy-paste kode di bawah ini:
   

   
   <div id="cl_option"> Loading... </div>
   <div id="cl_content_list"> </div>
   <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
   <script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
   <script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
   
   

4. Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
5. Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
6. Untuk mencegah daftar isi ini berada di halaman paling depan, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu,
7. Kalau kamu ingin yang versi bahasa inggris, ganti aja contentlist.js jadi contentlist_en.js.
   

Semoga bermanfaat!

O iya, kalau kamu mau menulis artikel tentang daftar isi ini di blog kamu, kamu boleh menambahkan kode

<div style="text-align:right; font-size:80%">
Re-published by: <a href="urlblogkamu.com"> Blog kamu </a>
</div>

di bagian bawah kode di atas pada artikel kamu.
Supaya blog kamu juga dapat backlink dari blogger yang pakai daftar isi ini.
:D
[+] selengkapnya...

Membuat Recent Comments

Atas request dari alone_ranger di artikel recent post dengan label, aku coba buat widget untuk recent comments. Mungkin sudah banyak yang tau, widget ini menampilkan komentar terbaru dalam sebuah blog.

Caranya:

1. Masuk ke akun blogger kamu, pilih "Layout" - "Page Elements",
2. Kemudian klik "Add a Gadget" - "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
   

   
   <script type="text/javascript">
   var num = 5;
   var include_link = true;
   </script>
   <script src="http://copycat91.googlecode.com/svn/trunk/recentcomments.js"></script>
   <script src="http://BLOGKAMU.blogspot.com/feeds/comments/default?alt=json-in-script&callback=onLoadFeed"></script>
   
   

4. Jangan lupa untuk ganti BLOGKAMU dengan url blog kamu,
5. Ubah juga nilai variabel num untuk mengatur jumlah komentar terbaru yang ingin ditampilkan,
6. Ubah variabel include_link jadi false jika kamu tidak ingin ada backlink kecil ke artikel ini di widget kamu.
   

Semoga bermanfaat! :D
[+] selengkapnya...

Recent Post dengan Label

Nah, sobat, kali ini kita akan membahas tentang membuat Recent Post dengan label. Mungkin sudah banyak yang tau bagaimana membuat Recent Post saja, tapi kali ini kita akan membuat Recent Post dengan label.
Yaitu menampilkan beberapa post/artikel terbaru dengan label-label tertentu. Untuk contohnya kamu bisa lihat di blog ini.

Caranya:

1. Masuk ke akun Blogger kamu dan pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" - "HTML/JavaScript",
3. Beri judul sesuai dengan yang kamu inginkan,
   
4. Copy-paste kode di bawah ini,
   

   Label: <span id="pbl_labels"></span>
   <div id="pbl_posts"> Recent Posts </div>
   
   <script type="text/javascript">
   var jumlah_maksimum_post      = 5;
   var dengan_ringkasan          = true;
   var jumlah_karakter_ringkasan = 100;
   </script>
   
   <script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
   </script>
   
   <script src="http://URLBLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
   </script>
   
   <!-- Tolong hargai dengan tidak menghapus/mengubah link di bawah -->
   <div style="text-align:right; font-size:0.75em">
   Widget by:
   <a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html">
   Info Blog
   </a>
   </div>
   

5. Ubah kode yang ditebalkan sesuai dengan yang kamu inginkan:
   
   • jumlah_maksimum_post adalah jumlah maksimum post yang kamu ingin tampilkan.
   • dengan_ringkasan, true kalau kamu ingin menampilkannya dengan ringkasan dan false kalau kamu hanya ingin menampilkan judulnya saja.
   • jumlah_karakter_ringkasan adalah jumlah karakter ringkasan yang ingin ditampilkan, ini harus diisi hanya jika kamu mau menampilkan dengan ringkasannya juga.
   • URLBLOGKAMU ganti dengan URL Blog kamu, contohnya untuk blog ini, aku ganti jadi: infotentangblog.
     
6. Kamu juga bisa copy-paste kode di atas di widget "Tambahkan Widget" di sebelah kanan dan klik "Add to Blogger".
   

Selamat mencoba!
[+] selengkapnya...

Membuat Link Berwarna-warni

Kamu pernah lihat blog yang kalau pointer kita ada di atas link, link-nya langsung berwarna-warni? Kamu bisa lihat contohnya di bawah:

Link Berwarna-warni

Nah, sekarang kita akan membahas tentang cara membuat link yang berwarna-warni tersebut.
Caranya gampang, kok. Ga perlu copy-paste, tinggal klik aja.

Klik aja ini:

Kemudian klik "Add Widget", dan selesai, deh! :D

[+] selengkapnya...

Membuat Buku Tamu "Tersembunyi"

Kalau kamu ga tau lagi mau taruh buku tamu kamu di mana, buat aja buku tamu kamu "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
   

   <style type="text/css">
   #gb{
   position:fixed;
   top:50px;
   z-index:+1000;
   }
   * html #gb{position:relative;}
   
   .gbtab{
   height:100px;
   width:30px;
   float:left;
   cursor:pointer;
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3o8U5UvCrmT9vNfuD0TgM2ho2oo3D2q2bxcGAgICRAVM05uGJjW8Mfr_SsLox89akuIBHqVvAher-6FJTiyOkjafHQJxG2GWITIYxMR3rtUfKJTAke1UxbFvOmkUkbcBJIQvrtCisCUk/') no-repeat;
   }
   .gbcontent{
   float:left;
   border:2px solid #A5BD51;
   background:#F5F5F5;
   padding:10px;
   }
   </style>
   
   <script type="text/javascript">
   function showHideGB(){
   var gb = document.getElementById("gb");
   var w = gb.offsetWidth;
   gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
   gb.opened = !gb.opened;
   }
   function moveGB(x0, xf){
   var gb = document.getElementById("gb");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   gb.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
   }
   </script>
   
   <div id="gb">
   
   <div class="gbtab" onclick="showHideGB()">   </div>
   
   <div class="gbcontent">
   
   <!-- Ganti ini dengan kode buku tamu kamu -->
   
   <br/>
   Mau punya buku tamu seperti ini?<br/>
   Klik di
   <a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
   sini (Info Blog)
   </a>
   
   <div style="text-align:right">
   <a href="javascript:showHideGB()">
   [tutup]
   </a>
   </div>
   
   </div>
   
   </div>
   
   <script type="text/javascript">
   var gb = document.getElementById("gb");
   gb.style.right = (30-gb.offsetWidth).toString() + "px";
   </script>

4. Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
6. Selamat mencoba!

Catatan: di kode di atas aku pasang backlink ke post ini, kalau kamu mau berbaik hati, tolong backlink-nya jangan dihapus, ya! :D
[+] selengkapnya...