Mencegah Copy-Paste Artikel

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:

1. Masuk ke akun blogger kamu, klik "Layout" - "Edit HTML",
2. Jangan lupa centang "Expand Widget Templates",
3. Cari kode <div class='post-body'> dan tambahkan di dalamnya:
   

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

4. Jadi kode kamu akan kurang lebih seperti ini:
   

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

5. Simpan perubahan yang kamu lakukan,
6. 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)

[+] 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...

Membuat Rating Setiap Post dengan Outbrain

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:

1. Masuk ke www.outbrain.com,
2. Pilih tipe blog kamu di sebelah kiri (typepad, blogger, atau wordpress),
3. 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:

1. Masuk ke www.outbrain.com,
2. Klik "Sign-in" di bagian atas, isi "username" dan "password", kemudian tekan enter,
3. Lihat di sebelah kiri, klik "Manage Blogs", lalu pilih "Settings" di samping blog yang ingin kamu atur widgetnya.
4. 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.
5. Klik "Submit" untuk menyimpan perubahan.

Selamat mencoba!
[+] 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 Judul Post Berbeda Dengan URLnya

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.
[+] selengkapnya...

Logo Google

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

2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 << sebelumnya | selanjutnya >>

Sumber: Google Holiday Logo

[+] selengkapnya...

Membuat Rating Setiap Post dengan Fitur Blogger Baru

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:

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

Selamat mencoba!
[+] selengkapnya...

Gambar Google Berubah

Sudah lama aku ga ngunjungi www.google.com secara langsung. Biasanya sih langsung ketik keywords-nya langsung dari fasilitas pencarian di browser saya.
Dan hari ini aku iseng2 ngunjungi www.google.com. Aku agak terkejut, soalnya logo google kali ini berubah. Jadi seperti ini:

Mungkin ini untuk memperingati gerhana matahari yang jatuh pada hari ini (22 Juli 2009).
Aku juga pernah dengar, katanya google sering mengubah logonya, tapi biasanya cuma di Amerika saja. Baru kali ini ada di Indonesia juga.
[+] selengkapnya...

Impersonation

Impersonation adalah berlaku sebagai orang lain. Pelaku impersonation disebut juga impersonator.

Di era internet seperti sekarang ini, impersonation sangat mudah dilakukan. Cukup dengan mengumpulkan data-data sebanyak mungkin dari orang itu, seseorang dapat menyamar menjadi orang lain di dunia internet.

Salah satu contoh yang aku pernah dapatkan adalah impersonation di facebook. Aku mendapati page Ahmadinejad di facebook. Awalnya aku percaya kalau yang mengurus page-nya adalah Ahmadinejad (atau orang suruhannya), dan aku pun jadi fan pada page tersebut.
Lama-lama aku jadi curiga, karena status-statusnya sangat menunjukkan kalau dia (orang yang mengurus page itu) bukanlah seorang muslim (tidak dapat aku ungkapkan statusnya bagaimana, tapi sangat jelas terlihat). URL page-nya pun tertulis "Iranian.Artist", bukan "Ahmadinejad". Jelas sekali kalau ini pelecehan terhadap Ahmadinejad.
Akhirnya aku berkesimpulan: orang yang membuat page itu bukan Ahmadinejad ataupun orang suruhannya! Dan aku berhenti jadi fan-nya.

Kasus seperti di atas tidak hanya bisa terjadi di situs sosial, tapi bisa juga terjadi di blog. Seperti kasus yang menimpa seorang mahasiswi di artikel ini. Akibat destruktif impersonation sangat jelas: pencemaran nama baik. Dan bisa saja lebih fatal jika dibiarkan terjadi. Seperti contoh di atas, mungkin banyak yang menganggap itu adalah Ahmadinejad, sehingga anggapannya tentang Ahmadinejad akan sangat berbeda dari yang sesungguhnya.

Kalau kasus impersonation terjadi, yang harus dilakukan adalah melapor ke webmaster situs yang berhubungan (atau "Flag Blog" pada blogger.com).
Untuk pencegahannya, jangan terlalu banyak mengumbar data di internet, dan jangan pula terlalu cepat percaya pada orang lain di dunia internet.

Semoga bermanfaat!
[+] selengkapnya...

Membuat Judul Halaman Bergerak

Kalau kamu mau buat blog kamu lebih unik lagi, buatlah judul halaman kamu "bergerak". Lihat contohnya di bawah:

Inilah Contohnya!

Kalau mau lihat blog yang judulnya bergerak, lihat di sini (maaf kalau sudah tidak lagi).

Caranya:

1. Masuk ke account blogger kamu, klik "Layout" kemudian "Page Elements",
2. Tambahkan widget dengan meng-klik "Add a Gadget" dan pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
   

   <script type="text/javascript">
   var msg = document.title;
   msg = " " + msg + " ";
   var speed = 5;
   var pos = 0;
   function movingTitle(){
    document.title = msg.substr(pos) + msg.substr(0, pos);
    pos++;
    if(pos == msg.length){pos = 0;}
    setTimeout("movingTitle()", 1000/speed);
   }
   movingTitle();
   </script>

   Dan klik "Save",
   
   
4. Atau kamu juga bisa copy kode di atas, dan tempelkan di widget blog ini di sini, kemudian klik "Add to Blogger", dan klik "Add Widget",
5. Atur kecepatannya dengan mengubah nilai speed.
   

Selamat mencoba!
[+] selengkapnya...

Hack Link List

Sekarang kita akan membahas bagaimana meng-hack link list di blog kamu supaya tampil lebih menarik. Secara khusus, kita akan membahas bagaimana membuatnya bergerak ke atas.
Cara yang biasa dipakai adalah dengan memakai widget HTML/JavaScript, kemudian menuliskan satu per satu link di antara tag <marquee> dan </marquee>. Tapi cara ini sangat merepotkan kalau kita mau menambah link.

Dan kali ini kita akan membahas dengan cara yang berbeda, dengan memakai widget Link List.

Caranya antara lain:

1. Masuk ke account Blogger, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" dan pilih "Link List",
3. Isi judul widget tersebut kemudian tambahkan link-link yang kamu mau,
4. Klik "Save" kalau sudah selesai,
5. Kemudian masuk ke halaman "Edit HTML",
6. Centang "Expand Widget Templates",
7. Cari kode title='judulwidgetkamu', dan cari kode <ul> terdekat setelahnya,
8. Tambahkan kode ini sebelum tag <ul> :
   

   <marquee direction="up" height="100" scrollamount="2"
     onmouseout="this.start()" onomouseover="this.stop()">

9. Dan tambahkan juga kode ini setelah tag </ul> :
   

   </marquee>
   

10. Jadi kodenya kurang lebih akan seperti ini:
    

    <marquee direction="up" height="100" scrollamount="2"
        onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">
     <ul>
      <b:loop values='data:links' var='link'>
        <li> <a expr:href='data:link.target'> <data:link.name/> </a> </li>
      </b:loop>
     </ul>
    </marquee>

Atur arah gerakannya dengan mengubah nilai atribut direction jadi "up", "down", "left", atau "right".
Atur juga tingginya dengan mengubah nilai atribut height, dan kecepatannya dengan mengubah nilai atribut scrollamount

Cara ini memang agak repot pada awalnya, tapi setelah itu kamu tidak usah repot2 lagi tulis kode macam2 untuk menambah link kamu.

Selamat mencoba! :D

Sumber inspirasi: resep-jitu
[+] selengkapnya...

Blogger Add Widget

Add Widget adalah fitur dari blogger di mana kamu bisa menambahkan widget HTML/JavaScript tanpa harus membuka "Layout" blog kamu. Kamu tinggal klik, edit seperlunya, dan klik "Add Widget", selesai deh!

Kali ini aku mau manfaatkan fitur tersebut untuk memudahkan para pembaca kalau mau meng-install widget HTML/JavaScript dari blog ini.
Untuk itu, aku sudah menaruh widget-nya di samping kanan blog ini. Tinggal copy-paste kode dari blog ini ke widget tersebut, dan klik "Add to Blogger".

Kalau kamu mau coba sendiri fitur Add Widget ini, silakan coba di bawah:

Ini adalah konten widget HTML/JavaScript yang akan kamu tambahkan
<= Klik tombol ini

[+] 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...

Mengganti Nama Author Jadi Signature

Kita sudah membahas bagaimana membuat signature di akhir tiap post. Sekarang kita akan membahas bagaimana mengubah nama author jadi signature.
Pada bagian bawah post biasanya ada nama author atau penulis post tersebut (lihat gambar di bawah).Yang inilah yang akan kita ubah jadi tanda tangan penulis. Caranya cukup mudah, kok.

Langkah-langkahnya adalah sbb:

1. Buat tanda tangan digital di www.mylivesignature.com,
   
2. Ikuti langkah-langkahnya. Untuk ukuran, sebaiknya pilih yang paling kecil saja, dan untuk kemiringan, pilih yang datar saja (tidak miring),
3. Download gambarnya, kemudian upload di situs upload gambar gratisan, seperti di Picasa, PhotoBucket, ImagesHack, dll,
4. Copy URL gambar yang kamu upload,
   
5. Masuk ke account Blogger, klik "Layout" dan pilih "Edit HTML",
6. Jangan lupa centang "Expand Widget Templates",
7. Kemudian cari kode <data:post.author/> dan ganti dengan:
   

   <img src="urlsignkamu.png" expr:title="data:post.author" border="0"
   style="vertical-align:text-bottom; border:0px" height="15"/>

8. Kamu bisa mengatur ukuran signature kamu dengan mengubah nilai atribut height

Selamat mencoba!
[+] 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...

Cara Menghilangkan URL, Bukan Menyembunyikan

Kalau pointer mouse kita berada di atas sebuah link, URL dari link tersebut akan muncul di bagian bawah browser kita (lihat gambar di samping). Nah, sekarang kita akan membahas bagaimana cara supaya URL itu tidak muncul di browser kita.

Aku terinspirasi menulis ini setelah membaca artikel bagaimana hilangkan URL, bukan menyembunyikan. Awalnya juga aku bingung, tapi setelah aku pikir2, sepertinya bisa pakai javascript.

Caranya, kita buat dulu anchor yang tidak menuju ke mana2, yaitu jangan tambahkan atribut href, tapi ganti dengan atribut name. Kemudian kita tambahkan atribut onclick. Jadi, kalau diklik akan langsung ke website yang dituju.

Contoh kode:

<a name="terserahkamu" style="cursor:pointer"
  onclick="window.location='http://www.urltujuankamu.com'">
   Coba ini
</a>

Nah, hasilnya akan seperti ini: Klik untuk lihat bakalan ke mana

Ini cuma salah satu cara, menurut saya masih banyak kelemahannya:

1. Kalau diklik kanan, tidak bisa pilih "Open in a new tab" atau "Open in a new window", yang ada hanya "Back", "Reload", dll.
2. Tidak bisa menuju ke URL yang dituju kalau browser men-disable javascript.
3. Warnanya tidak sama dengan link biasa (sebenarnya bisa diatasi dengan menambahkan atribut style, tapi bakalan lebih panjang)
   

Kalau ada yang punya cara lain, tolong beri tahu aku, ya! :D
[+] selengkapnya...

U comment I follow

Pasti kita sering mendengar istilah "U comment I follow" di beberapa blog. Apakah maksud dari istilah tersebut?

"U comment I follow" adalah istilah di mana pemilik blog tersebut menghapus atribut rel='nofollow' pada bagian komentarnya, sehingga orang yang berkomentar akan terindeks oleh search engine.

Keuntungan "U comment I follow" adalah untuk membuat komentar di post kita menjadi banyak. Hal ini juga sekaligus merupakan penghargaan kepada orang yang telah berkomentar pada blog kita.

Cara untuk mengaktifkan "U comment I follow" ini:

1. Masuk ke account blogger, pilih "Layout" kemudian "Edit HTML",
2. Centang "Expand Widget Templates",
3. Cari kode data:comment.authorUrl,
4. Kemudian hapus rel='nofollow' yang berada di dekatnya.

Sekarang komentar di blog kamu telah di-'dofollow'-kan, jadi bisa terindeks di search engine. :D
[+] selengkapnya...

Kode Hex Warna

Dalam mendesain web/blog, kita sering lihat kode2 warna yang terdiri dari tanda '#' dan 6 angka/huruf di belakangnya. Kode warna tersebut dapat diterjemahkan jadi kode warna RGB (Red, Green, Blue). Bagaimanakah cara menerjemahkannya?

Misalnya aku punya kode warna: "#0088FF", kita akan mencari berapa porsi untuk warna merah (red), hijau (green), dan biru (blue). Dengan begini, kita bisa memperkirakan warna apa yang terbentuk.

Pertama, tanda "#" menunjukkan kalau itu adalah kode warna, jadi tidak usah terlalu diperhatikan.
Untuk enam karakter di sampingnya, itu menggunakan bilangan berbasis 16, yang terdiri dari angka 0-9 dan A-F : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (semakin ke kanan nilainya semakin besar). Dan setelah F, ada angka 10 (bukan berarti bernilai "sepuluh", tapi satu angka lebih besar dari F), 11, 12, ..., 1E, 1F, 20, 21, ..., 2E, 2F, ..., A0, A1, ..., AE, AF, ..., F9, FA, FB, FC, FD, FE, dan terakhir FF.
Nah, yang kita dapatkan dari situ adalah bahwa "00" adalah angka terkecil, sedangkan "FF" adalah yang terbesar.

Lihat kembali kode warna "#0088FF".
Lihat dua angka setelah tanda "#": "00" menunjukkan porsi untuk warna merah (red).
Dua angka setelahnya: "88" menunjukkan porsi untuk warna hijau (green).
Dan dua angka terakhir: "FF" menunjukkan porsi untuk warna biru (blue).

Dari sini, kita lihat bahwa porsi untuk warna merah tidak ada, untuk warna hijau hanya sebagian, dan warna biru mendapatkan porsi paling banyak. Jadi bisa kita perkirakan bahwa kode "#0088FF" berwarna agak kebiru-biruan.

Kadang ada juga orang yang cuma menuliskan kode warna 3 angka/huruf. Tapi ini cuma untuk menyingkat penulisan jika terdapat banyak angka/huruf yang sama.
Contoh: "#0088FF" bisa disingkat jadi "#08F"

Kalau kamu ingin coba-coba buat kode warna kamu sendiri, silakan coba di bawah:

Selamat mencoba!
[+] selengkapnya...

Memasang Signature pada Setiap Post

Tadi aku jalan2 ngeliatin website orang lain, dan ngeliat ada signature (tanda tangan) di bagian bawahnya. Terpikir deh, buat post tentang bagaimana cara memasang signature pada setiap halaman post di blog. Ini bisa buat blog kamu kelihatan lebih keren juga. :D

Langkah2nya:

1. Tentunya kamu harus buat signature digital dulu. Kamu bisa buat dengan gratis di MyLiveSignature. Ada langkah2nya, kok,
2. Kalo udah buat, download signature-nya ke komputer kamu,
3. Upload gambarnya di situs upload gambar gratis, seperti Picasa, ImagesHack, dll,
4. Kalo udah upload, copy URL gambar signature kamu,
5. Trus, masuk ke account Blogger kamu, klik "Layout", kemudian "Edit HTML",
6. Centang "Expand Widget Templates",
7. Cari kode <data:post.body/> dan tambahkan kode ini di bawahnya:
   

   <b:if cond='data:blog.pageType == "item"'>
     <br/><br/><img src='urlsignaturekamu.png'/>
   </b:if>

Catatan: Kalo kamu pake kode di atas, signature-nya cuma hanya ada di halaman post, tidak ada di halaman utama dan arsip. Kalo kamu mau signature kamu juga tampil di halaman utama dan arsip, hapus tag <b:if...> dan </b:if> dari kode di atas.

Selamat mencoba!
[+] selengkapnya...

Mengedit Blog This!

Kita sudah membahas tentang Blog This! di post sebelumnya. Kalau dilakukan dengan cara yang standar, tulisan awal Blog This! hanya judul dari post kita.
Dan kali ini kita akan membahas tentang bagaimana cara mengubahnya agar tulisan awal Blog This! tidak hanya judul post kita, tapi juga isinya.

Caranya:

1. Seperti biasa, masuk ke account Blogger, klik "Layout" dan "Edit HTML",
2. Jangan lupa untuk mencentang "Expand Widget Templates",
   
3. Carilah kode <data:post.body/> dan tambahkan kode ini di bawahnya:
   

   <form action="http://www.blogger.com/blog-this.g"
       method="post" target="_blank">
    <textarea name="t" style="display:none"><data:post.body/></textarea>
    <input type="hidden" name="n" expr:value="data:post.title"/>
    <input type="hidden" name="u" expr:value="data:post.url"/>
    <a href="javascript:void(0)" onclick="this.parentNode.submit()">
        Blog This!
    </a>
   </form>
   

Catatan: cara di atas hanya berlaku untuk artikel yang tidak mengandung kode2 seperti di artikel ini. Jika artikel kamu mengandung kode2, sebaiknya kamu pakai cara sebelumnya.

Selamat mencoba!
[+] selengkapnya...

Blog This!

Blog This! adalah fitur blogger yang membuat kita bisa menulis post tanpa harus repot2 mengunjungi blogger.com. Cukup dengan meng-klik 1 kali, jendela baru akan terbuka seperti di bawah.


Mungkin banyak di antara kita yang sudah memasang di blognya, tapi tidak sadar kalau itu adalah fitur "Blog This!". Aku juga baru sadar akhir2 ini setelah membaca artikel What is Blog This! ?.

Untuk mengaktifkan Blog This! sangat mudah.
Caranya:

1. Masuk ke account Blogger, klik "Settings" dan klik "Comments",
2. Kemudian, cari "Backlinks" dan pilih "Show",
3. Dan terakhir, klik tombol "Save Settings".

Dan di bagian bawah halaman postingan kamu akan tampak link "Create a link" seperti gambar di bawah.
Kalau hanya memasang dengan cara di atas, tampilan awal Blog This! hanyalah judul dan link menuju post kamu, tidak dengan isinya. Nah, untuk menampilkan sekalian dengan isi post-nya, ada di sini.
[+] selengkapnya...

Menambahkan Gambar di Samping Judul Post

Kita sudah membahas tentang bagaimana mengubah icon blog. Dan sekarang, kita akan membahas bagaimana menambahkan gambar di samping judul post di blog kita.

Caranya:

1. Cari atau buat gambar yang kamu inginkan (ukuran kira2 20x20pixel),
2. Upload gambar tersebut di situs upload gambar gratis seperti Picasa, PhotoBucket, ImagesHack, dll,
3. Setelah selesai, copy atau catat URL gambar kamu,
   
4. Masuk ke account blogger kamu, klik "Layout" kemudian klik "Edit HTML",
5. Centang "Expand Widget Templates",
6. Carilah tag yang mempunyai atribut class="post-title",
7. Tambahkan kode di bawah ini setelah tag tersebut:
   

   <img src="urlgambarkamu.png" height="20" border="0"
      style="margin:0px;padding:0px;border:0px;float:left" />
   

8. Kalau kamu tidak dapat kode class="post-title", tambahkan kode di atas di samping kiri semua tag <data:post.title/>,
   
9. Sesuaikan ukuran gambarnya dengan mengubah atribut height pada kode di atas.

Selamat mencoba!
[+] selengkapnya...

Membuat DropCap Seperti di Koran

Drop cap adalah huruf awal pada suatu artikel atau tulisan yang berukuran lebih besar dari huruf yang lainnya. Biasanya drop cap ditemukan pada artikel di media cetak, seperti koran. Tapi kamu juga bisa buat drop cap di blog kamu.

Caranya:

1. Masuk ke account blogger, klik "Layout" kemudian masuk ke "Edit HTML",
2. Masukkan kode di bawah sebelum tag </head> setelah tag ]]></b:skin>:
   

   <style type="text/css">
   span.dropcap{
   float:left;
   margin-right:5px;
   font-size:3em;
   vertical-align:text-top;
   }
   </style>
   

3. Saat menulis post, tambahkan tag <span class="dropcap"> dan </span> di kanan dan kiri huruf pertama artikel kamu.
   Contoh penulisan:
   

   <span class="dropcap">D</span>rop cap adalah huruf awal pada suatu artikel atau tulisan yang berukuran lebih besar dari huruf yang lainnya. Biasanya drop cap ditemukan pada artikel di koran2.

   Hasilnya:
   

   Drop cap adalah huruf awal pada suatu artikel atau tulisan yang berukuran lebih besar dari huruf yang lainnya. Biasanya drop cap ditemukan pada artikel di media cetak, seperti koran. Tapi bisa juga kalau kamu mau pasang di blog kamu.
   

Selamat mencoba!
[+] selengkapnya...

Copy Artikel dengan Backlink

Ini adalah cara untuk mempermudah orang lain yang ingin menulis artikel kamu di blognya dengan menyertai backlink ke blog kamu.

Caranya:

1. Masuk ke account blogger kamu, pilih "Layout" dan pilih "Edit HTML",
2. Centang "Expand Widget Templates" untuk mengedit template kamu secara keseluruhan,
3. Cari tag <data:post.body/> dan tambahkan di bawahnya:
   

   <b:if cond='data:blog.pageType == "item"'>
   <br/> <br/>
   Silakan copy artikel ini,
   asalkan disertai backlink ke blog ini
   <form action="http://www.blogger.com/blog-this.g"
       method="post" target="_blank">
   <textarea cols="45" rows="5" readonly="readonly"
             name="t" onclick="select()">
     <data:post.body/> <br /> Sumber:
     <a expr:href="data:post.url">
       <data:blog.title/>
     </a>
   </textarea> <br />
   <input type="hidden" name="u"
          expr:value="data:post.url" />
   <input type="hidden" name="n"
          expr:value="data:post.title" />
   <input type="submit" value="Blog This!" />
   </form>
   </b:if>

Catatan: ini hanya bekerja untuk artikel sederhana. Untuk artikel seperti ini, yang membahas tentang tag-tag pada blogger, cara ini tidak dapat bekerja dengan sempurna.
[+] selengkapnya...

Menaruh Judul Post di Bagian Awal Judul

Menaruh judul post di bagian awal judul adalah salah satu trik SEO, karena pada umumnya search engine melihat keywords pada kalimat2 awal judul, sehingga akan lebih mudah terindeks.


Caranya:

1. Masuk ke account blogger, klik "Layout" dan "Edit HTML",
2. Cari kode <title><data:blog.pageTitle></title> dan ganti dengan:
   

   <title>
    <b:if cond='data:blog.pageType == "item"'>
      <data:blog.pageName/> || <data:blog.title/>
    <b:else/>
      <data:blog.pageTitle/>
    </b:if>
   </title>
   

Selamat mencoba!
Referensi: Optycon Blog
[+] selengkapnya...

Mengganti Ikon Blog

Pada awalnya, ikon blog kita adalah ikon Blogger (huruf B putih dengan latar belakang oranye). Tapi kita bisa mengganti ikon ini dengan ikon yang kita inginkan.

Caranya:

1. Buatlah gambar yang kamu inginkan untuk jadi ikon dengan ukuran kira-kira 16x16 pixel (bisa lebih besar);
2. Kalau file gambar tersebut bukan file .ico, ubah file tersebut jadi .ico (untuk .png, bisa di-convert di www.convertico.com)
3. Upload gambar tersebut di situs upload ikon gratis, seperti di picpanda, imageboo, dll (bisa tanya sama om Google);
4. Dapatkan URL gambar yang kamu upload tadi (cek URL-nya dengan memasukkan URL tersebut ke browser kamu, dan hasilnya harus sebuah gambar saja);
   
5. Masuk ke account blogger, klik "Layout" dan "Edit HTML";
6. Tambahkan kode di bawah setelah tag <b:include data='blog' name='all-head-content'/> dan sebelum tag </head>:
   

   <link href="urliconkamu.ico" rel="icon"
         type="image/vnd.microsoft.icon" />

Catatan: kalau kamu kesulitan untuk meng-convert file jadi .ico, sebaiknya convert dulu ke .png kemudian convert lagi di www.convertico.com jadi .ico.
Sebenarnya tipe file yang lain juga bisa dijadikan ikon (seperti .png, .gif, dll), tapi hanya didukung oleh beberapa browser saja, seperti Mozilla FF 3.0.
Selamat mencoba!
[+] selengkapnya...

Sejarah Blogger

Pasti tau blogger.com, kan? Blogger.com atau blogspot.com adalah salah satu layanan penyedia blog terbesar yang dimiliki oleh Google. Bagaimanakah sebenarnya sejarah blogger.com ini?

Awalnya didirikan pada tanggal 23 Agustus 1999 oleh Pyra Labs. Kemudian pada Februari 2003, Blogger jadi milik Google, dan semua fasilitas premium (yang saat itu tidak gratis) digratiskan oleh google. Setahun kemudian, co-founder Pyra Labs, Evan Williams, meninggalkan google.

Pada tahun 2004, google membeli Picasa, sehingga para blogger dapat mengupload fotonya untuk keperluan nge-blog. Pada 9 Mei 2004, google menambahkan beberapa fitur2, seperti arsip untuk posting, komentar, dan post via email.

Agustus 2006, google meluncurkan versi terbarunya dalam versi beta, yang diberi kode "Invader". Hal ini sekalian memindahkan para pengguna ke server Google, dan juga menambahkan beberapa fitur. Desember 2006, versi baru Blogger tidak lagi beta. Dan pada Mei 2007, Blogger telah pindah ke Google secara keseluruhan.
Sumber: wikipedia
[+] selengkapnya...

Membuat Sesuatu yang Selalu di Pojok

Untuk membuat sesuatu selalu di pojok sebenarnya sangat sederhana, cukup dengan menambahkan atribut style='position:fixed'.

Tapi tidak semua browser mendukung fitur ini, contohnya seperti Internet Explorer 7.
Dan akhirnya setelah browsing2 lewat paman Google, dapat juga cara untuk "mengakali"-nya.

Nih, cara lengkapnya:

1. Masuk ke account Blogger, pilih "Layout" dan pilih "Page Elements",
2. Kemudian tambahkan Gadget dengan meng-klik "Add a Gadget",
3. Pilih "HTML/JavaScript",
4. Tambahkan kode di bawah (judul gadget sebaiknya jangan diisi):
   

   <style type="text/css">
   .fixed {
       position:fixed;
       bottom:0px;
       left:0px;
   }
   * html .fixed {position:relative;}
   </style>
   

5. Kode bottom:0px; dan left:0px; menunjukkan kalau posisinya ada di sudut kiri-bawah. Kalau mau memindahkan ke sudut yang lain, cukup tentukan posisinya dengan top, bottom, left, atau right,
6. Tambahkan kode HTML di bawah kode tersebut dengan atribut class="fixed" pada "sesuatu" yang ingin kita taruh di pojok. Contoh, jika ingin menaruh sebuah gambar selalu di pojok:
   

   <img src='urlgambarkamu.png' class='fixed' />

Selamat mencoba!
[+] selengkapnya...

"Read More" Mempersingkat Waktu Load??

Mungkin ada di antara kita yang berpikir kalau menambahkan fitur read more akan mempersingkat waktu untuk memuat blog, jadi kita boleh menampilkan blog lebih banyak dalam halaman utama. Benarkah demikian??

Dengan kode CSS display:none;, konten yang ingin disembunyikan memang tidak terlihat, tapi bukan berarti tidak dimuat. Konten tersebut tetap dimuat, hanya saja tidak ditampilkan.
Kalau ingin bukti, lihat saja page source-nya (Ctrl+U untuk Mozilla FF, browser yang lain ga tau), kemudian cari konten yang "tersembunyi" (Ctrl+F) di page source tersebut.

Jadi, tujuan utama fitur read more adalah untuk menyederhanakan penampilan, biar tidak kelihatan terlalu banyak, bukan untuk mempersingkat waktu memuat blog.
[+] selengkapnya...

Membuat "Read More" versi 2

Kita sudah membahas tentang bagaimana membuat "Read More" pada postingan sebelumnya. Tapi "Read More" pada postingan ini berbeda. Cukup dengan mengklik tulisan "Read More" posting yang disembunyikan langsung akan terlihat.
Caranya:

1. Masuk ke account Blogger, pilih "Layout" dan "Edit HTML",
2. Centang "Expand Widget Templates",
3. Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>
   

   <style>
   <b:if cond='data:blog.pageType == "item"'>
     span.fullpost{display:inline;}
   <b:else />
     span.fullpost{display:none;}
   </b:if>
   </style>
   
   <script type="text/javascript">
   function showHidePost(obj){
    var sib = obj;
    while(sib.previousSibling){
        sib = sib.previousSibling;
        if(sib.className != "fullpost"){continue;}
        sib.style.display = obj.showed ? "none" : "inline";
        obj.showed = !obj.showed;
        obj.innerHTML = obj.showed ?
                       "[-] sembunyikan" : "[+] selengkapnya...";
    }
   }
   </script>
   

4. Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan tepat di sampingnya:
   

   <b:if cond='data:blog.pageType != "item"'>
   <a href='javascript:void(0)'
      onclick='showHidePost(this)' >
       [+] selengkapnya...
   </a>
   </b:if>
   

5. Sama seperti "Read More" versi pertama, masukkan tag <span class="fullpost"> Konten yang disembunyikan </span> pada postingan kamu. Contoh:
   

   Ini adalah konten yang ingin aku tampilkan di halaman utama. <span class="fullpost"> Sedangkan yang ini adalah konten yang ingin aku sembunyikan. </span>
   

   Dan hasilnya akan seperti ini:
   

   Ini adalah konten yang ingin aku tampilkan di halaman utama. Sedangkan yang ini adalah konten yang ingin aku sembunyikan. [+] selengkapnya...
   

6. Selamat mencoba!

[+] selengkapnya...

Membuat "Read More" pada Blog

Dengan membuat "Read More" atau semacamnya, postingan yang tampil pada halaman utama hanya bagian-bagian tertentu saja. Dan untuk menampilkan semua bagian postingan, harus masuk ke halaman postingan tersebut. Tutorial ini aku dapat dari www.isnaini.com.
Caranya:

1. Masuk ke account blogger, pilih "Layout" dan "Edit HTML",
2. Centang "Expand Widget Template",
3. Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>
   

   <style>
   <b:if cond='data:blog.pageType == "item"'>
    span.fullpost{display:inline;}
   <b:else />
    span.fullpost{display:none;}
   </b:if>
   </style>
   

4. Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan di bawahnya:
   

   <b:if cond='data:blog.pageType != "item"'>
   <a expr:href='data:post.url'>Read More</a>
   </b:if>
   

5. Untuk mengatur postingan yang "tersembunyi", tambahkan tag <span class="fullpost"> Postingan yang disembunyikan </span> di postingan Anda.
   Contoh:
   

   Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. <span class="fullpost">Dan ini adalah isi dari postingan saya, saya tidak ingin menampilkannya di halaman depan</span>
   

   Dan hasilnya akan seperti ini:
   

   Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. Read More
   

   Selamat mencoba!

Baca juga read more versi 2.
[+] selengkapnya...

Daftar Isi

Lihat cara buatnya di sini

Loading...

[+] selengkapnya...

Search Results

[+] selengkapnya...