Archive for 2010

Memberi Jam Pada Blog

Time is Money = waktu adalah uang. kali ini ade mau memberi tahu tentang bagaimana memasang jam di blog. agar blog kita mempunyai jam ada banyak cara untuk memasang jam di blog. Ada sebuah situs yang menyediakan berbagai bentuk jam apalagi di situs tersebut kita tinggal mengcopy dan paste kodenya tanpa harus registrasi terlebih dahulu ke situs tersebut situs-situs tersebut sangatlah banyak tetapi yang banyak di pakai adalah :

www.clocklink.com

Berikut cara memasang widget Jam di blogger

  1. Pertama kunjungi www.clocklink.com
  2. lalu klik pada menu Gallery (disitu kita bisa memilih kategori-kategori yang ingin kita pilih)
  3. sebagai contoh kategori analog kita pilih,
  4. kemudian klik view html tag pada kotak di bawah jam yang kita pilih lalu akan timbul halaman baru di window baru. disitu nanti kita ada ketentuan-ketentuan yang memakai bahasa inggris,
  5. langsung aja kita pilih accept
  6. Selanjutnya kita diminta memilih warna (color), {time zone untuk Waktu Indonesia Bagian Barat sebaiknya memilih JOG : Jogyakarta Indonesia Time (GMT + 07.00)} serta jangan lupa tuliskan ukuran (size) jam agar sesuai dengan sidebar tempat meletakan jam itu nantinya. Dapat juga diatur kemudian.
  7. Copy seluruh kode HTML kemudian disimpan di komputer kita contoh pada notepad.
Langkah selanjutnya kita menuju blog kita
  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak
  3. Klik tab Elemen Halaman
  4. Klik Tambah Gadget
  5. Klik tanda plus (+) untuk HTML/Javascript
  6. Copy paste kode yang kita taruh di notepad tadi ke dalam kolom konten yang tersedia
  7. selesai



ada beberapa situs lain yang menyediakan widget jam untuk blog secara gratis diantaranya adalah :

www.mytictac.com

Semoga berhasil..
Demikianlah artikel mengenai Cara Memasang Jam di Blog
Semoga Bermanfaat..

Memasang Radio Online atau MP3 di Blog 3

Setelah sebelumnya saya membahas tentang cara memasang radio Muslim dan radio Sunnah di blog, sekarang saya akan membahas tentang cara memasang Ceria Radio di blog. Radio online ini hanya berisi lagu-lagu, sehingga saya memberikan judul cara memasang Mp3 di blog. Radio online ini  auto play jadi akan langsung hidup ketika blog kita  di buka, seperti radio pada blog ini. Untuk memasangnya kita harus memasang kode radio online pada blog kita, gimana apakah anda tertarik? Kode radio ceria online dapat diambil di website resminya di ceriaradio.com, tapi saya juga telah menyediakan kodenya di blog forantum ini.





Widget By: Forantum

Cara memasang radio online atau cara memasang Mp3 di blog adalah sebagai berikut:
  • Login ke Blogger
  • Setelah masuk ke Dasbor, klik "Tata Letak"
  • Maka anda akan masuk ke "Elemen Halaman"
  • Klik tulisan "Tambah Gadget"
  • Pilih widget "HTML/JavaScript"
  • Masukkan kode di bawah ini, lalu Simpan.
 
<center><embed style="margin-top: 0px;" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" autostart="true" displaysize="0" showstatusbar="1" type="application/x-mplayer2" src="http://ceriaradio.com:8000/" name="RAOCXplayer" allowscriptaccess="never" height="70" width="160"></embed></center>
<div style="text-align: center;">
<center><span style="font-size: xx-small;">Widget By: <a href="http://forantum.blogspot.com/">Forantum </a></span></div></center>

Cara Menghilangkan Angka Dalam Label

Sewaktu saya kemarin melakukan tapa brata di dalam goa yang pengap selama beberapa hari, ternyata masih tetap ada yang mencoba mengajukan pertanyaan melalui kotak komentar. Salah satunya adalah seperti ini :


Kang,tanya nih, cara buat ngilangin angka yang didalam kurung pada label gimana? misal :

Serba-serbi (3)

jumlah post-nya itu di ilangin bisa gak?


Jawabannya tentu saja bisa, dan untuk melakukan ini anda tidak harus mengeluarkan keringat yang banyak karena hanya dengan menghapus sedikit kode di dalam kode template, maka keinginan anda akan segera tercapai. Caranya adalah seperti ini :

  1. Sign in ke blogger dengan ID anda.
  2. Klik Layout.
  3. Klik menu Elemen Halaman.
  4. Klik tab Edit HTML.
  5. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting untuk di lakukan).
  6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
  7. expand widget template
  8. Tunggu beberapa saat ketika proses sedang berlangsung.
  9. Silahkan anda cari kode berikut pada kode template milik anda :
  10. (<data:label.count/>)
  11. Jika anda sudah menemukan kode yang seperti di atas, silahkan hapus/delete.
  12. Klik tombol Simpan Template.
  13. Selesai. Silahkan lihat hasilnya !


Apabila anda sudah melakukan langkah di atas, maka dapat di pastikan angka yang menyertai Label akan menghilang entah kemana.

Selamat mencoba !

Buat Frame Iklan

Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga sama tertarik untuk membuat frame tersebut? baca saja sampai akhir, saya akan memberitahu caranya.


Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa menggunakan kode HTML <div> atau bisa juga dengan menggunakan kode HTML <span>. Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang, warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Belajar membuat website »
Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!
http://www.resepbisnis.com/?id=rohman



Kode asli dari frame di atas adalah sebagai berikut :

<div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">
<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>Belajar membuat website </b></a> &raquo;<br/>
Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!<br/>
<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>http://www.resepbisnis.com/?id=rohman</b></a>
</div>


Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :

warna pembatas : merah
style dari pembatas : garis putus-putus dengan lebar 3 pixel
jarak hurup dengan batas terluar : 10 pixel
lebar frame: 330 pixel
posisi hurup : rata kiri
warna hurup : putih
warna latar belakang : biru
warna link : kuning


Bagaimana sudah agak faham? kemungkinan besar masih bingung deh. Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya sedikit malas untuk menerangkan secara terperinci dari kode yang saya buat.

ooo... iya lupa... sobat fajar widodo lebih spesifik menanyakan kode untuk membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :

border : 3px dashed red;

3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.

Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.

border : 3px dashed red; --> untuk garis solid
border : 3px dotted red; --> untuk garis berupa titik-titik


Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru dari bentuk frame. Salam !

Memberi Daftar Isi Pada Blog

Apakah sobat suka membaca buku? jawaban sobat tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui blognya
beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :

Langkah pertama :


  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik link Download full template, silahkan save untuk backup data
  5. Copy paste kode CSS berikut di atas kode ]]></b:skin>
  6. Klik tombol SIMPAN TEMPLATE



Langkah kedua :

  1. Klik menu Elemen Halaman
  2. Klik tulisan Tambah sebuah Elemen Halaman
  3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  4. Copy paste kode berikut ke dalam elemen yang muncul
  5. Klik tombol Simpan
  6. Pindahkan elemen yang baru di buat tepat di atas elemen Post
  7. Klik tombol Simpan yang berada di sebelah atas
  8. Klik tulisan Tambah sebuah Elemen Halaman kembali
  9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen
  11. Ganti tulisan YOURBLOG dengan nama blog sobat
  12. Klik tombol Simpan
  13. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)
  14. Klik tombol SIMPAN yang berada di sebelah atas
  15. Selesai



Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :




Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat.

Selamat mencoba !

Eh... yang mau dapet menu navigasi buat di header yang cantik, kunjungi aja http://css-lybrary.blogspot.com

Cara Memberi Read More Pada Blog

Sudah banyak yg tanya cara buat READ MORE di blogger beta / baru (untuk tutorial buat read more di blogspot / blogger template lama atau classic lihat di sini) dan sudah saya beritahu alamatnya. Tapi tampaknya agak kesulitan dg tutorial bahasa Inggris. Untuk Anda yg termasuk golongan ini, saya persilahkan mengikuti panduan berikut.
Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen ).
Cara Pertama:
1. Buka template -> Edit HTML -> Kasih tanda tik pada menu “expand widget tempate”
2. Letakkan kode berikut persis di atasnya kode </head>

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Letakkan kode berikut di bawah kode <p><data:post.body/></p>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>
4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:
<span>
</span>
Jangan lupa klik SIMPAN PENGATURAN.

Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode
<span>
</span>
Letakkan posting yg akan di muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode
<span>
dan
</span>
Masalah yang Sering Dihadapi
1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:
error message: The element type “style” must be terminated by the matching end-tag “”.
Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.
Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.
Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.
Cara Kedua:
1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:
<div class=’post-header-line-1′/>
<div class=’post-body’>
4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:
<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
5. Di Bawah kode di atas ada kode html sbb:
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
6. Nah, di antara kode
<p><data:post.body/></p>
dan kode
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
pasang kode html ini:
<a expr:href=’data:post.url’>Read More .. </a>
</b:if>
7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):
<div class=’post-header-line-1′/><div class=’post-body’>
<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href=’data:post.url’>Read More……</a>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
Klik Simpan Template. Selesai.
8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:
<span class=”fullpost”>
</span>
Jangan lupa klik SIMPAN PENGATURAN.

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode
<span class=”fullpost”>
</span>
Letakkan posting yg akan di muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode
<span class=”fullpost”>
dan
</span>
Penting:
(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di muka, Anda mengeditnya dg cara sbb:
1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode <span>
di bawah paragraf yg akan . Dan pasang kode </span>
di akhir artikel.
Ingat kode hanya ada SATU kode <span> dan </span>. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.
Masalah yang Sering Dihadapi
1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:
error message: The element type “style” must be terminated by the matching end-tag “”.
Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru.  Jangan lupa klik “Simpan”.
Perhatian:
Kalau Anda masih gagal juga dengan tutorial di atas, silahkan download tutorial versi text di bawah ini.
Cara buat read more blogger blogspot baru