Membuat Tulisan Berwarna-warni

Sabtu, 29 Agustus 2009

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

Rabu, 26 Agustus 2009

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="http://lh4.ggpht.com/_jn57XA2jLxY/SpS8DmNReHI/AAAAAAAAAc8/OZmZfpilhh4/gbbutton.png" />
    </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...

Mengatur Jadwal Posting

Senin, 24 Agustus 2009

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:

  1. 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.
  2. 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:
  1. Masuk ke account Blogger kamu, dan pilih "Posting",
  2. Ketik judul, isi, dan label dari postingan kamu,
  3. Klik "Post Option" pada bagian sebelah kiri bawah postingan kamu dan akan muncul sebuah kotak untuk mengedit opsi dari postingan kamu,
  4. Perhatikan kolom "Post date and time". Pada kolom tersebut terdapat tanggal dan jam berapa kamu mulai membuat postingan kamu.
  5. 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.
  6. 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.
  7. Klik "Publish Post" jika semuanya sudah selesai.


NB: Maaf, postingannya agak jelek, soalnya udah ngantuk, tapi semoga bermanfaat! :D
[+] selengkapnya...

Membuat Drop Cap (Upgraded!)

Rabu, 19 Agustus 2009

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

Membuat Headline News Blog

Senin, 17 Agustus 2009

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

Link List Transparan

Jumat, 14 Agustus 2009

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

Selasa, 11 Agustus 2009

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

Title Search Widget

Sabtu, 08 Agustus 2009

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

Rabu, 05 Agustus 2009

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

Sabtu, 01 Agustus 2009

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

Cheat di Blog

Rainbow Text

Buku Tamu versi 2


ShoutMix chat widget
Widget by Info Blog

Headline News

Buku Tamu


ShoutMix chat widget

Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Tautan Link Otomatis

Gamba di Pojok