Membuat Buku Tamu yang Buka Tutup


Kali ini rasanya saya membuat judul yang unik dech Membuat Buku Tamu yang Buka Tutup Namanya juga buku ya bisa dibuka dan ditutup donk. Yang sudah berkunjung mengisi buku tamu menuliskan namanya, alamatnya dan pesannya. Buku tamu ini dipasang di blog kita. Buku tamu ini lebih populer dengan sebutan shoutbox

Yang banyak diguanakan untuk buku tamu yang kita buat ini akan bisa di buka dan ditutup, jadi terus tampil di halaman blog secara tidak utuh, jika ingin buka tinggal ngeklik dan jika ingin tutup buku tamunya juga diklik aja. Ada tulisan BUKU TAMU yang nempel dipinggir halaman dan tinggal klik untuk buka tutupnya. Untuk membuat buku tamu yang bisa buka tutup ini, silahkan Anda buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox. Di sana kita registrasi dan buat widgetnya lalu ambil kodenya.

Cara Membuat Buku Tamu yang Buka Tutup
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

03.31 | Category: | 0 komentar

Membuat "read more" pada blog


Space atau ruang di blog kita sangat terbatas, jika kita menampilakan semua isi dari postingan atau entri maka akan memakan banyak space (tempat). Bayangkan saja orang melihat halaman yang luas, maka orang akan sulit untuk memfokuskan diri.

Sebenarnya ini sama dengan membuat read more, tapi lebih praktis, karena kita tidak perlu menambahkan sesuatu kode HTML saat memposting artikel kita. Read More yang akan kita buat akan membuat kita gampang atau mudah dalam memengal isi dari postingan kita. Beberapa kalimat akan muncul dan jika dalam postingan kita ada gambarnya juga akan disertai thumbnail (gambar diperkecil)

Ada yang memberi nama read more yang akan kita buat ini dengan nama read more liberal, oleh kang Jaloe. sekarang kita bersiap untuk mempraktekanya Perhatikan dan baca seksama langkah-langkahnya.

Cara Membuat "read more" Yang Praktis
1. Login ke Blogger
2. Pilih Tata Letak kemudian pilih Edit HTML
3. Beri tanda cek (centang) pada “ Expand Widget Templates “
4. Cari kode di bawah ini
</head>

5. Jika sudah ketemu taruh kode berikut ini di bawahnya
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

6. Cari kode di bawah ini
<data:post.body/>

7. Ganti kode yang telah kita temukan di atas dengan kode berikut ini
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan Template Kalau sudah beres

08.15 | Category: | 0 komentar

Menampilkan Status YM (Yahoo Messenger ) di Blog



Menampilkan status YM kita. Dengan semakin banyak forum-forum atau situs jejaring sosial seperti facebook yang menyediakan tempat untukchatting dengan teman. Ini dia senior dari fasilitas yang disediakan oleh Yahoo. yaitu Yahoo Messenger. Denagn Menampilkan status Ym di blogmu, apakan kau sedang online atau offline, nah jika kamu sedang online maka si pengunjung bisa langsung berinteraksi dengan kita pemilik blog kita. Bisa ngobrol dengan kita, sehingga ada interaksi dan komunikasi antara pemilik blog dengan pengunjung blog, dan semoga aja bisa jadi sering-sering datang ke blog kita.

Cara Menampilkan Status YM (Yahoo Messenger )di Blog
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini
<a href="http://messenger.yahoo.com/edit/send/?.target=IDMU"><img src="http://opi.yahoo.com/yahooonline/u=IDMU/m=g/t=14/l=us/opi.jpg" alt="Status YM" border="0" /></a>

ganti IDMUdengan id YM kamu..



Pilih jenis tapilan status YM yang kita sukai, dengan kita mengganti nilai t dengan angka –angka dari 0 – 16. Tergantung tapilan status YM kita mau pilih yang mana. Pilihan tapilan status YM ada di bawah seperti yang ada di bawah.


t=0


t=1


t=2




18.18 | Category: | 0 komentar

Apa yang Dapat Kita Tulis di Blog?


Sebenarnya yang dibinggungkan oleh kebanyakan orang setelah membuat blog terwakili oleh pertanyaan di atas, Apa Yang Dapat Kita Tulis di Blog? Dan kali ini saya berikan sedikit motivasi yang semoga dapat memberikan kita ide-ide baru atau sedikit pencerahan tentang kebinggungan tersebut. Tulisan yang terdahulu yang pernah saya publish di blog saya yang lain, kini saya bahas (repost) kembali di sini.

Ada yang binggung mungkin, yaitu mengenai apa yang harus ia publikasikan atau tulis di blog. Agar blog kita dapat berjaga diantara berjuta-juta blog maka kita juga harus bisa menulis, mengupdate blog kita. Sebenarnya setiap manusia memiliki keunikan tersendiri yang mungkin antara manusia satu dengan yang yang lain berbeda.

Dengan perbedaan itulah membuat kita punya jati diri dan ciri khas, Kita dapat menulis dengan segala kemampuan kita, toh takkan ada yang memarahi atau mengejek tulisan kita, paling cuma komentar yang akan membangun diri kita lebih baik.

Berikut ini hal-hal yang dapat kita tulis di blog
  •  Tulis apa yang kamu alami, hal ini meliputi beberapa hal, yaitu apa yang kita lihat, kita dengardan yang kita baca. Kita menulis kembali dengan kata-kata kita sendiri yang mengambarkan kita lihat, dengar atau baca. Misal kita nonton konser musik band di kota kita, lalu kita tulis pengalaman kita itu. Karena banyak yang yang tidak melihat, dan kamu melihat, tentu info atau tulisan ini juga bermanfaat untuk orang lain.
  • Tulis Apa yang kamu ketahui, karena setiap orang akan mempunyai ilmu yang berbeda, misalnya saja kita lebih pintar dalam biologi, ya kita tulis saja tentang ciri-ciri mahluk hidup misal.
  • Tulis Apa yang kamu impikan atau pendapatmu, karena sesuatu berasal dari mimpi, misalnya saja saya memimpikan nantinya Sebuah HP akan memiliki vitur yaitu hologram, seseorang yang kita telephon dia ada di depan kita dalam wujud hologram.
Jangan takut untuk memulai menulis, karena pasti dari 10 tulisan kita, setidaknya ada satu tulisan yang bermutu. 
01.09 | Category: | 0 komentar

Membuat Running Teks Berita dari Blog Kita

Pernah melihat televisikan? pastinya pernah. Saat ini Televisi yang ada sudah banyak menyertakan running teks yang berisi headline berita. Kita dapat mengetahui headline atau berita terbaru secara singkat. Sekarang kita akan membuat running teks yaitu tulisan berjalan yang isinya judul tulisan-tulisan terbaru blog kita.

Akan semakin menarik pembaca untuk mengetahui headline yang kita tulis di blog kita, judul-judul tulisan kita akan berjalan layaknya running teks yang ada di TV. Dan pengunjung dapat mengklik judul untuk melihat isinya secara lengkap.




Cara Membuat Running Teks Berita dari Blog Kita
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script type="text/javascript">
var hn_url_blog = " http://nuralfis.blogspot.com/";
var hn_jumlah_post = 10;
var hn_warna_latar = "#000000";
var hn_warna_garis = "#FF0000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = false;
</script>
<script src="http://headlinenews.googlecode.com/files/Headlinenews-MasDhani.js">
</script>

Ganti http://nuralfis.blogspot.com/  dengan url blog kita sendiri-sendiri, Selain itu kita juga bisa mengganti jumlah post, warna latar belakang, warna garis dan posisi sesuai dengan selera kita.

5. Simpan jika sudah selesai.
00.54 | Category: | 0 komentar

Membuat Mouseover Effect Pada Gambar


Membuat gambar lebih menarik, dengan ini setiap gambar atau foto yang kita akan tampilkan akan mempunyai efek juka mouse kita taruh di gambar tesebut. Gamabar tersebut akan menjadi redup atau sebaliknya, yaitu menjadi terang. Dan untuk membuat animasi mouseover effect itu tidaklah sulit.

Seperti dikutip dari O-om Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

Cara membuat mouseover effect dari redup ke lebih terang.
<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Cara membuat mouseover effect dari terang ke redup
<img border="1" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="URL Gambar" style="opacity: 1;" />

Dan mungkin akan sedikit repot jika harus menmabhkan kode css setiap kali ingin menampilkan effect pada gambar kita di postingan. Tapi ada jalan mudah untuk otomatis setiap gambar kita di postingan bereffect seperti diatasa, acaranya adalah menambahkan kode css berikut ini d atas ]]></b:skin>

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

00.37 | Category: | 0 komentar

Mengubah Cursor Blog dengan Gambar


Kembali membahas untuk mempercantik blog, kali ini kita akan belajar bagaimana mengubah cursor yang ada di blog kita dengan gambar. Ini baik juga untuk blog kita, sehingga akan membuat blog kita menjadi berbeda dengan blog-blog yang lain. Kalau yang lain standart maka blog kita berbeda dan jadi unik

Cursor yang ada di blog kita dapat kamu rubah dengan foto atau gambat yang kita suka. Atau kamu yang narsis habis bisa menggantinya dengan foto kamu sendiri. Yang jelas, buat saja blog kita menjadi lebih cantik dan menarik

Cara Mengubah Cursor Blog dengan Gambar
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>

Kode yang bercetak miring adalah URL gambar yang ingi kita jadikan pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu inginkan.
5. Simpan jika sudah selesai
00.30 | Category: | 0 komentar