Membuat Tulisan Berwarna-warni

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:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Tambahkan widget JavaScript dengan mengklik "Add a Gadget" - "HTML/JavaScript",
3. 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>

4. Klik "Save",
5. 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
[+] selengkapnya...

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 Drop Cap (Upgraded!)

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:

1. Masuk ke account Blogger kamu, kemudian klik "Layout" - "Edit HTML",
2. Cari kode
   

   .post-body {
   xxxxxxxxxx;
   xxxxxxxxxx;
   }

3. Kemudian tambahkan di bawahnya kode
   

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

4. Untuk mengatur ukuran DropCap-nya ubah font-size-nya jadi 2.5em, 2em, atau nilai-nilai yang lain,
5. Kemudian cari lagi kode
   

   <data:post.body/>

6. Kalau di kode tersebut tidak diapit oleh kode <p> dan </p>, tambahkan kode tersebut sehingga menjadi
   

   <p class='dropcap'> <data:post.body/> </p>

7. Dan kalau kode <data:post.body/> sudah diapit oleh kode <p> dan </p>, cukup tambahkan kode class='dropcap' sehingga jadi seperti kode di atas,
   
8. Klik "Save Template" kalau sudah selesai,
9. dan sekarang semua post kamu akan terlihat seperti di koran! :D

Selamat mencoba!
[+] selengkapnya...

Link List Transparan

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:

• Link 1
  
• Link 2
• Link 3
• Dan seterusnya...

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:

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

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

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

Membuat Elemen Hide N Seek

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:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Edit HTML",
2. Centang "Expand Widget Templates",
3. Cari kode
   

   .post {
      xxxxxxxxxxxx
      xxxxxxxxxxxx
      ...
   }
   

   kemudian tambahkan di bawahnya:
   

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

4. Nah, setelah itu, cari lagi kode <div class='post-footer'>, dan tambahkan di bawahnya:
   

   <div class='hideseek'>
      <!-- Kode Elemen kamu di sini -->
   </div>
   

5. Kamu bisa menambahkan kode elemen di atas dengan kode Share Button, sebuah gambar, dll.
6. 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
[+] 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...

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

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