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:
Selamat mencoba! :D<script
src="http://sites.google.com/site/copycatgroup/Home/jsfile/rainbowtext.js">
</script><span class="rainbow_text"> Tulisan yang ingin dibuat berwarna-warni </span>
[+]
selengkapnya...
Membuat Tulisan Berwarna-warni
Sabtu, 29 Agustus 2009Label: Memperindah Blog >> Tips dan Trik
Diposting oleh di 13.35 129 komentar
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:
Semoga bermanfaat!<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>right
jadi left
. Dan kalau kamu mau menempatkannya di bawah, ubah top
jadi bottom
,<!-- Kode buku tamu kamu -->
jadi kode buku tamu kamu.
[+]
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:
Caranya:
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.
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:
Selamat mencoba!.post-body {
xxxxxxxxxx;
xxxxxxxxxx;
}.post-body p.dropcap:first-letter {
font-size:3em;
float:left;
margin-right:5px;
vertical-align:text-top;
}font-size
-nya jadi 2.5em
, 2em
, atau nilai-nilai yang lain,<data:post.body/>
<p>
dan </p>
, tambahkan kode tersebut sehingga menjadi<p class='dropcap'> <data:post.body/> </p>
<data:post.body/>
sudah diapit oleh kode <p>
dan </p>
, cukup tambahkan kode class='dropcap'
sehingga jadi seperti kode di atas,
[+]
selengkapnya...
Label: Memperindah Blog >> Tips dan Trik
Diposting oleh di 10.27 57 komentar
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:
Selamat mencoba dan semoga bermanfaat! :D<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>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.
[+]
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 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.
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...
Label: Memperindah Blog >> Tips dan Trik
Diposting oleh di 07.48 117 komentar
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:
Selamat mencoba!
kemudian tambahkan di bawahnya:.post {
xxxxxxxxxxxx
xxxxxxxxxxxx
...
}.post .hideseek {
display:none;
}
.post:hover .hideseek {
display:inline;
float:right;
}<div class='post-footer'>
, dan tambahkan di bawahnya:<div class='hideseek'>
<!-- Kode Elemen kamu di sini -->
</div><img src='urlgambarkamu.png'/>
Bagi yang ingin bertanya atau mempunyai masalah dalam mencoba ini, silakan tinggalkan komentar di bawah :D
[+]
selengkapnya...
Label: Memperindah Blog >> Tips dan Trik
Diposting oleh di 06.46 101 komentar
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:
Selamat mencoba!
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>ts_summary_length
adalah jumlah karakter (kurang lebih) ringkasan dalam hasil pencarian,ts_blog_url
adalah URL blog kamu (khusus yang memakai Blogger saja),name='q'
dan tambahkan di sampingnya kode di bawah ini:
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).onfocus='ts_loadFeed()' onkeyup='ts_titleSearch(this.value)'
: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:
Semoga bermanfaat! :D<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>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...
[+]
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:
Semoga bermanfaat!
<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>BLOGKAMU
dengan URL blog kamu,jumlah_kata_dalam_ringkasan
,contentlist.js
jadi contentlist_en.js
.
O iya, kalau kamu mau menulis artikel tentang daftar isi ini di blog kamu, kamu boleh menambahkan kode
di bagian bawah kode di atas pada artikel kamu.<div style="text-align:right; font-size:80%">
Re-published by: <a href="urlblogkamu.com"> Blog kamu </a>
</div>
Supaya blog kamu juga dapat backlink dari blogger yang pakai daftar isi ini.
:D
[+]
selengkapnya...