Info Blog

Hurray! Toolbar

noreply@blogger.com (Unknown) — Fri, 25 Dec 2009 10:55:00 +0000

Wah, sudah lama saya ga nge-post lagi. Maaf, ya. Soalnya saya mesti konsentrasi ke kuliah dulu dan beberapa kegiatan lainnya.
Tapi saya sempatkan waktu saya untuk membuat satu widget untuk menggabung beberapa widget blog, yaitu Hurray! Toolbar.

Itu adalah toolbar gratis untuk menempatkan beberapa widget sekaligus dalam 1 toolbar. Untuk mencobanya, langsung saja kunjungi link: http://www.linkxc.com/hurray/
Kritik dan sarannya ditunggu, ya! :D

Selamat Hari Raya Idul Fitri 1430H!

noreply@blogger.com (Unknown) — Thu, 24 Sep 2009 12:05:00 +0000

Mungkin saya agak telat ngucapin selamat, soalnya kemarin-kemarin habis dari kampung, ga bisa internetan. Daripada saya tidak mengucapkan sama sekali, lebih baik saya ucapkan sekarang meskipun telat.

Selamat hari raya Idul Fitri 1430H!

Mohon maaf lahir dan batin! :)

Membuat Protected Post di Blogspot

noreply@blogger.com (Unknown) — Fri, 18 Sep 2009 23:16:00 +0000

Sobat, sudah baca artikel saya sebelumnya, kan (tentang cheat di blog)?? Mungkin banyak yang bertanya-tanya, untuk apa sih sebenarnya cheat di blog itu?
Awalnya saya juga membuatnya hanya untuk iseng-iseng, tidak tahu pemanfaatannya. Tapi setelah dipikir-pikir, ternyata cheat itu bisa dipakai untuk membuat protected post, yaitu post yang tidak dapat dibaca kecuali jika memasukkan cheat tersebut.
Hampir sama dengan wordpress, tapi yang ini bukan dalam bentuk password, melainkan dalam bentuk cheat. :D

Mau tau caranya? Silakan masukkan cheat yang sama dari artikel sebelumnya untuk membaca lanjutan artikel ini. :D

Caranya:

Pasang dulu cheat di blog kamu. Caranya ada di artikel sebelumnya.

Untuk fungsi ch_runCheat, ubah jadi:

function ch_runCheat() {
var elems = document.getElementsByTagName("span");
for(var i = 0; i != elems.length; i++) {
   var elem = elems[i];
   if(elem.className == "protected_post") {
       elem.style.display = "inline";
   }
}
}

Save widget tersebut dan masuk ke "Layout" - "Edit HTML",
Carilah kode ]]></b:skin> dan masukkan kode di bawah sebelum kode tersebut:
```
span.protected_post { display : none }
```
Nah, persiapannya sudah selesai. Sekarang tinggal bagaimana memasukkannya ke dalam post.
Saat kamu menulis post, tambahkan tag span dengan atribut class="protected_post", jadi seperti contoh di bawah ini:
```
<span class="protected_post">
Ini adalah bagian yang ingin saya sembunyikan
</span>
```
Dan sekarang kamu sudah bisa membuat protected post!

Catatan:
Cara ini mempunyai kelemahan, yaitu isi dari protected post kamu tetap bisa dibaca jika seseorang melihat source code blog kamu. Salah satu cara mengantisipasinya adalah dengan tidak memberitahukan bahwa ada protected post di blog kamu, sehingga tidak ada yang menduga bahwa ada konten tersembunyi.

Cheat di Blog

noreply@blogger.com (Unknown) — Tue, 15 Sep 2009 05:34:00 +0000

Sobat, kali ini saya akan berbagi rahasia di blog ini. Tapi, ssstttt! jangan bilang-bilang ke yang lain, ya! Ini rahasia di antara kita saja. Just kidding.. :p

Sebenarnya...

di blog ini sudah saya pasangi cheat. Bukan hanya game saja yang punya cheat, lho! Blog pun bisa punya cheat :D.

Coba saja kamu ke tekan tombol atas, bawah, bawah, atas, c, p, c, t, dan enter. Kamu akan melihat efek dari cheat ini. :)

Caranya ga susah-susah amat, kok:

Masuk ke account Blogger kamu, kemudian tambahkan gadget HTML/JavaScript (sudah tau caranya, 'kan? :D )

Copy-paste kode di bawah ini:


<script type="text/javascript">
function ch_decode(cheat) {
    return cheat.split("").reverse().join("").split(";").reverse();
}
function ch_checkCheat(evt) {
    var code = evt.charCode ? evt.charCode : evt.keyCode;
    if(ch_cheatCode[ch_step] == code){ch_step++;}
    else{ch_step = 0;}
    if(ch_step == ch_cheatCode.length) {
        ch_runCheat();
        ch_step = 0;
    }
}
function ch_runCheat() {
    alert("Cheat telah aktif");
    document.body.style.background = "#A3BB50";
}
var ch_step = 0;
var ch_cheat = "83;04;04;83;76;08;76;48;31";
var ch_cheatCode = ch_decode(ch_cheat);
document.onkeydown = ch_checkCheat;
</script>

Penjelasan:
- ch_cheat adalah kode tombol-tombol yang harus ditekan secara berurutan untuk mengaktifkan cheat tersebut.
  Kamu bisa mengubahnya dengan menggunakan cheat-maker di bawah.
- ch_runCheat() adalah fungsi yang akan bekerja jika cheat telah aktif.
  Kamu bisa meng-copy-nya jika kamu menginginkan efek yang sama dengan cheat blog ini.

Kalau kamu mau menentukan tombol cheat kamu sendiri, kamu bisa menggunakan cheat-maker di bawah ini.

Cara menggunakannya:

Tekan tombol "Masukkan cheat",
Kemudian tekan tombol-tombol yang kamu ingin jadikan tombol cheat,
Lalu klik tombol "Selesai",
Setelah itu, akan ada angka-angka di sampingnya. Copy angka-angka tersebut dan masukkan ke variabel ch_cheat di atas

List yang Menjorok

noreply@blogger.com (Unknown) — Thu, 10 Sep 2009 23:20:00 +0000

Nah, setelah membuat berbagai macam modifikasi list, seperti membuatnya bergerak dan transparan, kali ini saya akan membahas tentang cara membuat list tersebut menjorok jika pointer mouse berada di atasnya. Contohnya kamu bisa lihat di bawah ini:

Coba taruh
pointer mouse kamu
di atas list ini

Caranya:

Masuk ke account Blogger kamu, dan pilih "Layout" - "Edit HTML",

Cari kode </b:skin> dan tambahkan kode di bawah ini setelah kode tersebut:

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>

Kamu bisa mengatur seberapa jauh list tersebut menjorok dengan mengubah angka 5 jadi yang lebih besar atau lebih kecil,
Kemudian, untuk list yang kamu mau berikan efek tersebut, kamu bisa membuat tag <li> jadi:
```
<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>
```

Dan kalau kamu mau membuat seluruh list di blog kamu mempunyai efek seperti itu, kamu bisa menambahkan kode di bawah ini setelah kode-kode yang panjang di atas (sebelum tag </script>):

function lm_loadBehavior() {
   var lis = document.getElementsByTagName("li");
   for(var i=0; i < lis.length; i++) {
       var li = lis[i];
       li.onmouseover = function(){lm_toRight(this);}
       li.onmouseout = function(){lm_restore(this);}
   }
}
var lm_window_onload = window.onload;
window.onload = function() {
   if(lm_window_onload) {lm_window_onload();}
   lm_loadBehavior();
}

Semoga bermanfaat!

Tips Menyembunyikan Judul Widget yang Berjudul

noreply@blogger.com (Unknown) — Sun, 06 Sep 2009 23:02:00 +0000

Sobat, pernah punya masalah seperti gambar di bawah, ga?
Di gambar tersebut, kita punya widget HTML/JavaScript tanpa judul yang kebanyakan, sehingga sulit untuk membedakan widget-widget tersebut.

Kenapa kita harus membuatnya tanpa judul?? Alasan utamanya adalah agar judulnya tidak tampil sehingga tidak mengganggu desain web kita, seperti widget headline news dan buku tamu dari blog ini. Tapi akibatnya seperti di atas, kita jadi kesulitan membedakan widget-widget tersebut.

Saya akan memberikan trik agar judul widget tersebut tidak tampil meskipun judulnya tidak kosong.

Caranya:

Masuk ke bagian "Edit HTML" Layout blog kamu,
Cari kode ]]></b:skin>, dan tambahkan kode di bawah ini sebelum kode tersebut:
```
#hidden_widget h2 {
display:none;
}
```
Kemudian cari lagi kode </b:section> yang paling bawah, kemudian tambahkan kode di bawah ini setelah kode tersebut:
```
<div id='hidden_widget'>
<b:section id='sidebar_hidden' preferred='yes'>
</b:section>
</div>
```
Klik "Save Template",
Kemudian masuk ke bagian "Page Elements" Layout kamu, dan kamu akan melihat ada sebuah area baru untuk widget.
Sekarang pindahkan widget-widget "tak berjudul" kamu ke tempat itu, dan kamu bisa memberinya judul tanpa menampilkan judul tersebut di blog.
Ini yang saya pakai di blog ini:
Seperti yang kamu lihat, widget-widget tersebut mempunyai judul, tapi apakah kamu melihat judul widget tersebut di blog ini?

Semoga bermanfaat! :D

Anchor/Link Target

noreply@blogger.com (Unknown) — Fri, 04 Sep 2009 23:22:00 +0000

Sobat, kali ini saya akan membahas macam-macam target yang ada di sebuah link. Mungkin ada yang bertanya, "target itu apa, sih?" Sebenarnya saya juga masih kurang jelas dalam definisi target itu, tapi kurang lebih target itu menentukan di mana sebuah link akan dibuka.

Untuk memperjelas definisi target, coba klik 2 link di bawah ini:
Link 1 dan Link 2

Link 1 membuka link tersebut di window kamu bekerja sekarang, sedangkan Link 2 membuka link tersebut di window yang baru.

Cara membuat target adalah dengan menambahkan atribut target di dalam tag <a> kamu. Contohnya:

<a href='suatulink' target='jenistarget'>Suatu teks</a>

Kalau kamu menggunakan blogger, tambahkan atribut tersebut dari menu "Edit HTML" saat kamu menulis post kamu.

Jenis-jenis target ada beberapa macam, yaitu:

_blank
Selalu membuka link di window yang baru. Ini berguna agar pembaca yang mengklik link tidak meninggalkan blog kamu. Contoh: Target Blank
_self
Membuka link di window kamu saat itu. Contoh: Target Self
_parent
Membuka link di parent window. Ini bisa diterapkan jika link tersebut berada dalam suatu frame. Jika tidak, hasilnya akan sama saja dengan _self.
_top
Sebenarnya saya kurang tau perbedaan ini dengan _parent, jadi kalau ada yang tahu perbedaannya, bisa komen di bawah. :D
nama_frame
Yang ini untuk membuka link di window yang tertentu. Kalau kamu pengguna Blogger, kamu pasti lebih familiar dengan jenis ini, jika kamu sudah mengedit sesuatu, ada link "View Blog" atau "View Blog in a new window". Link tersebut menggunakan nama frame sebagai targetnya.
Untuk lebih jelasnya, kamu bisa membandingkannya dengan _blank dengan mengklik berkali-kali kedua link di bawah ini:
Target Blank dan Nama_Frame.

Itu saja yang saya tahu tentang target sebuah link. Semoga bermanfaat! :D
Thanks for: w3schools and its Tryit Editor.

Membuat Recent Post Khusus untuk Label

noreply@blogger.com (Unknown) — Tue, 01 Sep 2009 04:54:00 +0000

Atas request dari Blog Sharing, kali ini saya akan membahas tentang cara membuat Recent Post khusus untuk sebuah label. Sebenarnya widget untuk recent post sudah saya bahas di artikel sebelumnya, widget tersebut untuk semua label, tapi bisa difilter untuk menampilkan label tertentu.
Kali ini akan benar-benar hanya menampilkan 1 label tertentu.

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
Tambahkan Gadget baru dengan mengklik "Add a Gadget",
Pilih gadget "Feed",

Kemudian pada kolom Feed URL, isi dengan:

http://blogkamu.blogspot.com/feeds/posts/default/-/labelkamu

Ganti blogkamu dengan alamat blog kamu, dan ganti juga labelkamu dengan label yang ingin kamu tampilkan.
Ingat bahwa URL adalah case-sensitive, jadi perhatikan huruf besar-kecilnya label kamu.
Klik "Continue" kalau sudah selesai.

Semoga bermanfaat! :D

Membuat Tulisan Berwarna-warni

noreply@blogger.com (Unknown) — Sat, 29 Aug 2009 05:35:00 +0000

Sobat, kali ini aku akan membahas tentang cara membuat tulisan berwarna-warni. Cara ini bisa kamu gunakan kalau kamu mau mempercantik blog kamu ataupun menarik pengunjung untuk membaca artikel kamu.
Lihat contohnya di bawah:

Tulisan berwarna-warni

Tulisan tersebut awalnya berwarna biasa saja, tapi setelah semuanya selesai diproses, akan langsung berubah jadi berwarna-warni

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
Tambahkan widget JavaScript dengan mengklik "Add a Gadget" - "HTML/JavaScript",

Tidak usah diberi judul, dan copy-paste kode di bawah ini sebagai kontennya:

<script
src="http://sites.google.com/site/copycatgroup/Home/jsfile/rainbowtext.js">
</script>

Klik "Save",
Kalau kamu ingin membuat tulisan berwarna-warni di post kamu, tambahkan kode di bawah ini saat kamu menulis post untuk blog kamu:
<span class="rainbow_text"> Tulisan yang ingin dibuat berwarna-warni </span>

Selamat mencoba! :D

Buku Tamu Tersembunyi Versi 2

noreply@blogger.com (Unknown) — Wed, 26 Aug 2009 04:01:00 +0000

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:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements"
Tambahkan widget baru dengan mengklik "Add a Gadget" - "HTML/JavaScript"

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>

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,
Kalau kamu mau mengganti gambar tombolnya, ganti kamu bisa mengganti source gambar yang ditebalkan di atas,
Dan juga jangan lupa untuk mengganti kode  jadi kode buku tamu kamu.
Klik "Save" kalau sudah selesai.

Semoga bermanfaat!

Mengatur Jadwal Posting

noreply@blogger.com (Unknown) — Sun, 23 Aug 2009 16:23:00 +0000

Mungkin informasi ini sudah banyak diketahui oleh para blogger, tapi tidak ada salahnya kalau aku memposting artikel tentang jadwal posting ini.

Menurut aku, mengatur jadwal posting itu mempunyai 2 manfaat yang sangat penting dan sangat sering digunakan. Aku pun sering mengatur jadwal posting ini agar blog aku tidak berantakan. Adapun 2 manfaat tersebut antara lain:

Kamu bisa mengatur artikel kamu agar ter-publish secara otomatis. Hal ini sangat penting jika kamu biasa mem-publish artikel kamu secara berkala, tapi kamu mempunyai kegiatan yang banyak ke depannya. Atau jika kamu tiba-tiba punya banyak ide dalam 1 hari, tapi tidak mau mem-publish semuanya dalam hari tersebut.
Jika kamu tidak ingin menempatkan postingan baru tersebut di halaman utama blog kamu. Hal ini biasanya diterapkan untuk postingan yang bukan berupa artikel, tapi merupakan halaman pendukung blog, seperti yang aku lakukan pada halaman daftar isi blog ini.

Caranya:

Masuk ke account Blogger kamu, dan pilih "Posting",
Ketik judul, isi, dan label dari postingan kamu,
Klik "Post Option" pada bagian sebelah kiri bawah postingan kamu dan akan muncul sebuah kotak untuk mengedit opsi dari postingan kamu,
Perhatikan kolom "Post date and time". Pada kolom tersebut terdapat tanggal dan jam berapa kamu mulai membuat postingan kamu.
Jika kamu ingin mem-publish postingan kamu secara otomatis, majukan tanggalnya menjadi tanggal berapa yang kamu inginkan postingan kamu itu ter-publish secara otomatis.
Misalnya aku membuat artikel ini pada hari ini (09/08/24), tapi aku baru mau mem-publish-nya 3 hari lagi, jadi aku tinggal ubah tanggalnya jadi 09/08/27.
Sebaliknya jika kamu tidak ingin postingan kamu tampil pada halaman depan, mundurkan tanggalnya beberapa hari atau beberapa bulan ke belakang. Kalau kamu mau tampil pada halaman paling belakang, mundurkan jadi sehari sebelum postingan pertama kamu.
Klik "Publish Post" jika semuanya sudah selesai.

NB: Maaf, postingannya agak jelek, soalnya udah ngantuk, tapi semoga bermanfaat! :D

Membuat Drop Cap (Upgraded!)

noreply@blogger.com (Unknown) — Wed, 19 Aug 2009 02:27:00 +0000

Aku sudah membahas tentang bagaimana membuat drop cap seperti di koran pada postingan awal2 saya. Tapi cara itu aku nilai terlalu merepotkan, karena harus menambahkan kode HTML pada setiap post.

Dengan cara yang sudah di-"upgrade", tidak perlu lagi menambahkan kode HTML tersebut. Kamu cukup membuat post seperti biasa dan post kamu akan tampil dengan dropcap seperti di koran.

Caranya:

Masuk ke account Blogger kamu, kemudian klik "Layout" - "Edit HTML",
Cari kode
```
.post-body {
xxxxxxxxxx;
xxxxxxxxxx;
}
```

Kemudian tambahkan di bawahnya kode

.post-body p.dropcap:first-letter {
font-size:3em;
float:left;
margin-right:5px;
vertical-align:text-top;
}

Untuk mengatur ukuran DropCap-nya ubah font-size-nya jadi 2.5em, 2em, atau nilai-nilai yang lain,
Kemudian cari lagi kode
```
<data:post.body/>
```
Kalau di kode tersebut tidak diapit oleh kode <p> dan </p>, tambahkan kode tersebut sehingga menjadi
```
<p class='dropcap'> <data:post.body/> </p>
```
Dan kalau kode <data:post.body/> sudah diapit oleh kode <p> dan </p>, cukup tambahkan kode class='dropcap' sehingga jadi seperti kode di atas,
Klik "Save Template" kalau sudah selesai,
dan sekarang semua post kamu akan terlihat seperti di koran! :D

Selamat mencoba!

Membuat Headline News Blog

noreply@blogger.com (Unknown) — Sun, 16 Aug 2009 23:27:00 +0000

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:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
Klik "Add a Gadget" dan pilih "HTML/JavaScript",

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>

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

Link List Transparan

noreply@blogger.com (Unknown) — Thu, 13 Aug 2009 23:48:00 +0000

Sobat, kali ini kita akan membahas tentang membuat Link List transparan. Menurut aku, ini membuat Link List kamu terlihat lebih keren, tapi ga tau menurut yang lain gimana. Kamu bisa lihat contohnya di bawah:

Cara ini tidak terlihat bagi pengguna browser Internet Explorer (makanya yang pakai IE, cepetan ganti)

Cara membuatnya hampir sama dengan artikel Hack Link List. Berikut langkah-langkahnya:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
Tambahkan gadget Link List di blog kamu (klik "Add a Gadget" - "Link List"),
Kalau sudah punya, masuk ke halaman "Edit HTML",
Centang "Expand Widget Templates",
Cari kode <li> setelah kode <b:loop values='data:links' var='link'>,

Ubah kode <li> jadi

<li style='opacity=0.5' onmouseover='this.style.opacity="1"'
  onmouseout='this.style.opacity="0.5"'>

Klik "Save Template" kalau sudah selesai.

Kamu bisa mengubah nilai 0.5 di atas untuk mengatur transparansi link kamu. Turunkan nilainya jika kamu ingin lebih transparan, dan naikkan nilainya jika kamu ingin sebaliknya.
Semoga bermanfaat! :D

Membuat Elemen Hide N Seek

noreply@blogger.com (Unknown) — Mon, 10 Aug 2009 22:46:00 +0000

Yang aku maksud dengan elemen hide n seek adalah jika pointer mouse kita berada di atas sebuah post/artikel maka elemen tersebut akan terlihat, dan jika pointer mouse kita berada di tempat lain, elemen tersebut tidak akan terlihat. Hal ini membuat elemen tersebut lebih menarik untuk dilihat pembaca.
Aku terinspirasi membuat ini dari facebook. Semoga saja pemilihan nama "hide n seek" tidak salah. :)
Contohnya kamu bisa lihat di blog ini.

Cara membuatnya:

Masuk ke account Blogger kamu, pilih "Layout" - "Edit HTML",
Centang "Expand Widget Templates",

Cari kode

.post {
   xxxxxxxxxxxx
   xxxxxxxxxxxx
   ...
}

kemudian tambahkan di bawahnya:

.post .hideseek {
    display:none;
}
.post:hover .hideseek {
    display:inline;
    float:right;
}

Nah, setelah itu, cari lagi kode <div class='post-footer'>, dan tambahkan di bawahnya:
```
<div class='hideseek'>
   
</div>
```
Kamu bisa menambahkan kode elemen di atas dengan kode Share Button, sebuah gambar, dll.
Kalau kamu mau menambahkannya dengan gambar, ganti saja kode yang ditebalkan dengan
```
<img src='urlgambarkamu.png'/>
```

Selamat mencoba!
Bagi yang ingin bertanya atau mempunyai masalah dalam mencoba ini, silakan tinggalkan komentar di bawah :D

Title Search Widget

noreply@blogger.com (Unknown) — Fri, 07 Aug 2009 23:55:00 +0000

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:

Masuk ke account Blogger kamu, klik "Layout" - "Page Elements",
Klik "Add a Gadget" - "HTML/JavaScript",

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>

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.
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

Widget Tautan Otomatis

noreply@blogger.com (Unknown) — Wed, 05 Aug 2009 01:15:00 +0000

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:

Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
Klik "Add a Gadget" - "HTML/JavaScript",

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>

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

Membuat Daftar Isi Blog

noreply@blogger.com (Unknown) — Fri, 31 Jul 2009 23:42:00 +0000

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:

Masuk ke account Blogger kamu, pilih "Posting" - "New Post",
Kemudian isi judulnya dengan judul yang kamu inginkan, seperti "Daftar Isi" atau semacamnya,

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>

Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
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,
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

Mencegah Copy-Paste Artikel

noreply@blogger.com (Unknown) — Thu, 30 Jul 2009 06:00:00 +0000

Bagaimana perasaan kamu kalau artikel yang sudah kamu buat susah payah di-copy-paste tanpa ijin oleh orang lain atau tidak menyebutkan sumbernya? Pasti kesal, kan?

Nah, kali ini kita akan membahas bagaimana mencegah artikel kita di-copy-paste oleh orang lain.

Trik ini masih tidak sempurna, masih ada celahnya, tapi aku tidak mau beri tahu di mana kelemahannya.

Aku dapat trik ini dari Tutorial Blog, tapi trik di situ masih sangat banyak kelemahannya (a/l tidak bisa mengisi shoutbox, kotak komentar, dll). Dan aku sudah memperbaiki beberapa kelemahannya, walaupun tidak semuanya bisa teratasi, tapi setidaknya kamu masih bisa mengisi shoutbox, kotak komentar, dll dengan cara di bawah ini.
(Terima kasih untuk CodeSnippets)

Caranya:

Masuk ke akun blogger kamu, klik "Layout" - "Edit HTML",
Jangan lupa centang "Expand Widget Templates",

Cari kode <div class='post-body'> dan tambahkan di dalamnya:

onmousedown='return false' onselectstart='return false'
oncopy='return false'

Jadi kode kamu akan kurang lebih seperti ini:

<div class='post-body' onmousedown='return false'
onselectstart='return false' oncopy='return false'>

Simpan perubahan yang kamu lakukan,
Selesai, deh :D

Untuk lihat contohnya, silakan coba copy-paste artikel ini ke textarea di bagian widget sebelah kanan.
(yang mau copy-paste kodenya, langsung saja ke sini)
Aku tidak menerapkannya ke semua artikel aku, karena beberapa artikel aku terdapat kode untuk di-copy-paste.

Semoga bermanfaat!

(Telah diupdate untuk disempurnakan. Terima kasih banyak untuk QuirksMode)

Membuat Recent Comments

noreply@blogger.com (Unknown) — Wed, 29 Jul 2009 09:45:00 +0000

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:

Masuk ke akun blogger kamu, pilih "Layout" - "Page Elements",
Kemudian klik "Add a Gadget" - "HTML/JavaScript",

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>

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

Semoga bermanfaat! :D

Membuat Rating Setiap Post dengan Outbrain

noreply@blogger.com (Unknown) — Tue, 28 Jul 2009 08:56:00 +0000

Dalam artikel sebelumnya, aku sudah membahas bagaimana membuat rating dari blogger itu sendiri. Tapi rating dari blogger lebih bersifat seperti polling. Nah, kali ini aku akan membahas tentang rating dari www.outbrain.com.

Rating ini lebih bersifat penilaian: 1 bintang - 5 bintang. Tidak seperti rating dari blogger yang lebih mirip polling.
Cara mendapatkannya:

Masuk ke www.outbrain.com,
Pilih tipe blog kamu di sebelah kiri (typepad, blogger, atau wordpress),
Kemudian ikuti langkah2nya. Aku sarankan untuk mendaftar di outbrain, supaya kamu bisa melihat statistik artikel kamu dan mengatur hal2 yang lainnya.

Keunggulan rating dari outbrain ini adalah mereka tidak hanya memberikan rating saja, tapi juga memberikan link ke artikel lain, baik itu dari blog kamu atau dari sumber luar.
Tapi kalau kamu tidak mendaftar, kamu tidak bisa mengatur link yang diberikan outbrain tersebut.

Untuk mengatur link yang diberikan outbrain:

Masuk ke www.outbrain.com,
Klik "Sign-in" di bagian atas, isi "username" dan "password", kemudian tekan enter,
Lihat di sebelah kiri, klik "Manage Blogs", lalu pilih "Settings" di samping blog yang ingin kamu atur widgetnya.
Lihat "Recommendations", dan ada beberapa pilihan:
- "Best Recommendations" untuk link-link menuju artikel terbaik dalam outbrain (baik itu dari blog kamu atau dari blog orang lain),
- "Limited Recommendations" untuk link-link menuju artikel di blog kamu saja, dan
- "No Recommendations" kalau kamu tidak ingin ada link-link rekomendasi.
Klik "Submit" untuk menyimpan perubahan.

Selamat mencoba!

Membuat Judul Post Berbeda Dengan URLnya

noreply@blogger.com (Unknown) — Thu, 23 Jul 2009 13:26:00 +0000

Sobat, kali ini aku akan membahas sedikit "trik licik" untuk para blogger, yaitu bagaimana membuat judul post beda dengan URL-nya.

Seperti yang biasa kita lihat, URL dari sebuah post/artikel biasanya diambil dari beberapa kata awal pada judulnya. Kamu bisa lihat contohnya di gambar di bawah:

Gambar di atas menunjukkan bahwa URL dari artikel tersebut diambil dari judulny.

Nah, kali ini kita akan membahas bagaimana membuat judul post/artikel dengan URL-nya berbeda.

Sebenarnya ini bukan trik yang "waaaahh", tapi hanya sebuah trik yang sangat sederhana.

Misalnya aku mau punya artikel dengan URL: ".../google-is-the-best.html"
Dan judul artikelnya: "Search Engine Terbaik: Google".

Gampang saja, pertama, tulislah sebuah artikel dengan judul "Google is The Best" (disamakan dengan URL yang kamu inginkan). Kemudian publish artikel tersebut.
Setelah di-publish, akan ada pilihan untuk mengedit kembali post tersebut ("Edit Post"), dan klik di situ.
Kalau kamu sudah masuk ke halaman untuk mengedit kembali post tersebut, sekarang ubahlah judulnya jadi "Search Engine Terbaik: Google" (sesuai dengan judul yang kamu inginkan). Dan klik "Publish Post" untuk mem-publish ulang post/artikel tersebut dengan judul yang berbeda.

Untuk contohnya, kamu bisa perhatikan URL dan judul post/artikel ini.

Logo Google

noreply@blogger.com (Unknown) — Wed, 22 Jul 2009 12:25:00 +0000

Karena aku lihat logo google berubah hari ini, aku jadi penasaran dengan logo google. Setelah browsing2 lewat om Google, akhirnya aku dapat logo google untuk setiap tahunnya. Ternyata google membuat logo kalau ada perayaan-perayaan skala dunia yang penting atau liburan setiap tahunnya.

Aku sudah mengumpulkan sekitar 200-an logo-logo google yang resmi dan kamu bisa lihat di bawah.

Ternyata banyak sekali logo-logo yang dibuat oleh google mulai dari tahun 1999. Semuanya berbentuk .gif, kecuali untuk tahun 1999, beberapa logo dibuat dalam bentuk .jpg.

Kalau kamu mau lihat silakan lihat di bawah ini:

Google Logo

<< sebelumnya | selanjutnya >>

Sumber: Google Holiday Logo

Membuat Rating Setiap Post dengan Fitur Blogger Baru

noreply@blogger.com (Unknown) — Wed, 22 Jul 2009 11:08:00 +0000

Membuat rating setiap post adalah hal yang perlu, karena dengan hal itu kamu bisa mengevaluasi artikel2 kamu, mana yang disukai pembaca dan mana yang kurang disukai.
Kalau kamu menggunakan Blogger baru (bukan yang classic), kamu bisa membuat rating di setiap post kamu dengan fitur dari blogger itu sendiri.

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
Klik "Edit" di bagian pojok kanan bawah dari "Blog Posts" kamu,
Kalau sudah muncul window baru, centang kotak di samping "Reaction" (lihat gambar),
Kamu bisa mengedit tulisan "Reaction" tersebut jadi "Suka artikel ini?" dan semacamnya,
Untuk mengedit pilihan2nya, klik "Edit" di samping kanannya, kemudian tulislah pilihan2nya dipisahkan dengan tanda koma (,)
Klik "Save" jika sudah selesai mengedit pilihan, dan tombol "Save" jika ingin disimpan.

Selamat mencoba!

Info Blog

Hurray! Toolbar

Selamat Hari Raya Idul Fitri 1430H!

Membuat Protected Post di Blogspot

Cheat di Blog

List yang Menjorok

Tips Menyembunyikan Judul Widget yang Berjudul

Anchor/Link Target

Membuat Recent Post Khusus untuk Label

Membuat Tulisan Berwarna-warni

Buku Tamu Tersembunyi Versi 2

Mengatur Jadwal Posting

Membuat Drop Cap (Upgraded!)

Membuat Headline News Blog

Link List Transparan

Membuat Elemen Hide N Seek

Title Search Widget

Widget Tautan Otomatis

Membuat Daftar Isi Blog

Mencegah Copy-Paste Artikel

Membuat Recent Comments

Membuat Rating Setiap Post dengan Outbrain

Recent Post dengan Label

Membuat Judul Post Berbeda Dengan URLnya

Logo Google

Membuat Rating Setiap Post dengan Fitur Blogger Baru