MEMBUAT MULTIPLE COLUMNS DENGAN CSS3

Dengan CSS3, Anda dapat membuat beberapa kolom untuk meletakkan teks - seperti di surat kabar! Ada 3 Parameter yang dapat kita ubah yaitu jumlah kolom, jarak antar kolom dan garis kolom.





Dengan menggunakan CSS3 anda akan mendapatkan hasil seperti ini :

Ubud adalah sebuah desa kelurahan, membawahi 13 (tiga belas) banjar dinas yang terdiri dari 6 (enam) desa adat, termasuk kecamatan Ubud, Kabupaten Gianyar dengan jarak 20 km dari kota Denpasar, Ubud dapat dicapai dalam 1 jam 15 menit dari Kuta, 30 menit dari Denpasar, atau 15 menit dari kota Gianyar.

Dengan ketinggian sekitar 300 meter di atas permukaan laut, Ubud memiliki udara lebih sejuk dari daerah dataran Bali asli selatan. Kelurahan Ubud berpenduduk sekitar 9.800 jiwa. Dengan lingkungan yang masih alami, daerah ini merupakan daerah sumber inspirasi bagi para seniman, termasuk seniman luar negeri, terutama seniman Eropa.

Sebagai daerah tujuan wisata, Ubud memiliki banyak objek yang menarik bagi wisatawan, baik nusantara maupun mancanegara. Beberapa diantara objek tersebut adalah Puri Saren, yang terletak di Puri Ubud, pasar seni tradisional, Monkey Forest (Wenara Wana) dan museum.

Script CSS3 :

<style type="text/css">

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>

<div class="newspaper">

Ubud adalah sebuah desa kelurahan, membawahi 13 (tiga belas) banjar dinas yang terdiri dari 6 (enam) desa adat, termasuk kecamatan Ubud, Kabupaten Gianyar dengan jarak 20 km dari kota Denpasar, Ubud dapat dicapai dalam 1 jam 15 menit dari Kuta, 30 menit dari Denpasar, atau 15 menit dari kota Gianyar.

Dengan ketinggian sekitar 300 meter di atas permukaan laut, Ubud memiliki udara lebih sejuk dari daerah dataran Bali asli selatan. Kelurahan Ubud berpenduduk sekitar 9.800 jiwa. Dengan lingkungan yang masih alami, daerah ini merupakan daerah sumber inspirasi bagi para seniman, termasuk seniman luar negeri, terutama seniman Eropa.

Sebagai daerah tujuan wisata, Ubud memiliki banyak objek yang menarik bagi wisatawan, baik nusantara maupun mancanegara. Beberapa diantara objek tersebut adalah Puri Saren, yang terletak di Puri Ubud, pasar seni tradisional, Monkey Forest (Wenara Wana) dan museum.</div>

Anda dapat mengubah text yang berwarna merah.

Read more »

Posted in: CSS3,Multiple column

MEMBUAT BORDER IMAGE DENGAN CSS3

Dengan menggunakan property Border-Image CSS3, anda dapat menggunakan sebuah image / gambar untuk membuat sebuah border. Berikut adalah cara membuat border image dengan CSS3.



Dengan menggunakan image / gambar di bawah ini,


akan memperoleh hasil seperti :

Ini adalah border image yang diulang (repeat)

atau seperti ini

Ini adalah border image meregang (stretch)

Di bawah ini adalah code script CSS3

<style type="text/css">

div
{
border-width:15px;
width:250px;
padding:10px 20px;
}

.ulang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
}
.meregang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Safari and Chrome */
border-image:url(border.png) 30 30 stretch;
}
</style>
<div class="ulang">
Ini adalah border image yang diulang (repeat)</div>

Selamat mencoba...

Read more »

Posted in: border image,CSS3

BELAJAR CSS3

Kalau anda ingin belajar CSS3 (Cascading Style Sheets Level 3) untuk membuat web design anda lebih menarik dan keren, anda bisa mendownloadnya di SINI, setelah itu anda bisa belajar CSS3 tanpa harus online berjam-jam. Setelah anda mahir, anda bisa mempraktekkannya langsung dan menggembangkan tampilan web anda dengan CSS3.
Selamat mencoba.

Read more »

Posted in: CSS3

MENAMBAHKAN EMOTICON KASKUS PADA KOMENTAR

Dengan menambahkan Emoticon di atas kotak komentar pada Blog Anda, akan membuat Blog anda kelihatan lebih keren, selain itu para pengunjung dapat mengexpresikan komentarnya melalui emoticon-emoticon yang lucu.
Berikut adalah emoticon kaskus yang akan ditambahkan pada kotak komentar Blog.

Ikuti langkah-langkah berikut ini :
1. Buka LAYOUT >> EDIT HTML >> Klik Expand Widget Template
2. Cari kode di bawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

3. Copy-Paste kode dibawah, tepatnya di bawah kode
    <p class='comment-footer'>

<b><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' width='40'/>
:a:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' width='40'/>
:b:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' width='40'/>
:c:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' width='40'/>
:d:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' width='40'/>
:e:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' width='40'/>
:f:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' width='40'/>
:g:
<br/><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' width='40'/>
:h:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' width='40'/>
:i:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' width='40'/>
:j:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' width='40'/>
:k:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' width='40'/>
:l:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' width='40'/>
:m:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' width='40'/>
:n:
</b>

4. Lalu tambahan kode javascript dibawah sebelum tag </body>

<script type='text/javascript'> //<![CDATA[ a = document.getElementById('comments'); if(a) { b = a.getElementsByTagName("DD"); for(i=0; i < b.length; i++) { if (b.item(i).getAttribute('CLASS') == 'comment-body') { _str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:b:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' class='smiley'/>"); _str = _str.replace(/:c:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:d:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:e:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:f:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:g:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:h:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:i:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:j:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:k:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:l:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:m:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:n:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' alt='' width='40' class='smiley'/>"); b.item(i).innerHTML = _str; } } }

a = document.getElementById('comments'); if(a) { c = a.getElementsByTagName("DD"); for(i=0; i < c.length; i++) { if (c.item(i).getAttribute('CLASS') == 'comment-body-author') { _str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:b:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' class='smiley'/>"); _str = _str.replace(/:c:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:d:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:e:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:f:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:g:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:h:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:i:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:j:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:k:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:l:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:m:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' alt='' width='40' class='smiley'/>"); _str = _str.replace(/:n:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' alt='' width='40' class='smiley'/>"); c.item(i).innerHTML = _str; } } }

//]]> </script>

5. Save template, kemudian lihat hasilnya. Selamat mencoba.

NB. Pastikan tag pada class='comment-body' diubah dari DIV menjadi DD
Seperti ini :<dd class='comment-body'><data:comment.body/></dd>

Kalau sudah berhasil, jangan lupa komentarnya.

Read more »

Posted in: Emoticons,emoticons kaskus,Kaskus

KOLEKSI ANIMASI MR BEAN

Mr Bean yang kocak dan bikin ngakak sangat cocok untuk menghiasi blog anda. Ada beberapa koleksi Animasi Mr Bean, yang bisa anda pilih untuk dipasang di Blog anda.

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean11.gif">

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean12.gif">

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean2.gif">

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean.gif">

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean3.gif">

<img src="http://i1234.photobucket.com/albums/ff405/hendrik2011/bean7.gif">

Bagaimana? anda terhibur?
Jika anda terhibur, berikan komentar anda di bawah, Terima kasih.

Koleksi Mr.Bean yang lainnya dapat Anda lihat di SINI

Read more »

Posted in: Animasi,Mr Bean,Script

MEMBUAT BOX SHADOW DENGAN CSS3

Cascading Style Sheet (CSS) adalah salah satu bahasa perograman website untuk mengatur beberapa komponen yang ada dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS3 merupakan pengembangan dari CSS yang membuat sebuah web menjadi lebih menarik.
Salah satunya seperti yang dibawah ini.

Membuat box shadow dengan menggunakan CSS3

CONTOH MEMBUAT BOX SHADOW DENGAN CSS3

Code CSS3:

<style type="text/css">
.bayangan
{
width:330px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px 5px #999999; /* Firefox 3.6 and earlier */
}
</style>
<div class="bayangan">

<ul>CONTOH MEMBUAT BOX SHADOW DENGAN CSS3</ul>
</div>

Read more »

Posted in: box shadow,CSS3

MENGGANTI PAVICON BLOG ANDA

Favicon adalah kependekan dari “Favorite Icon “, sebuah ikon berupa gambar kecil (biasanya berukuran 16×16 px) yang diasosiasikan dengan logo sebuah situs atau blog dan akan muncul pada bagian browser atau bagian bookmark. Favicon dimaksudkan untuk memudahkan mengidentifikasi sebuah situs atau blog.

Pavicon pada blogger berupa logo "orange B" yang muncul setiap kali kita mengakses blog.
Berikut cara untuk mengganti Pavicon pada blog.

1. Siapkan gambar yang berekxtension ICO atau GIF.
2. Login ke blog
3. masuk ke tata letak
4. pilih edit html
5. cari code di bawah ini :

<b:include data='blog' name='all-head-content'/>

6. Copy paste code berikut di bawah code tadi

<link href='url-gambar.ico' rel='shortcut icon'/>

atau

<link href='url-gambar.gif' rel='icon' type='image/gif'/>

ganti tulisan berwarna biru dengan gambar ICO atau GIF yang telah anda siapkan

7. simpan, view blog, dan lihat hasilnya.

semoga bermanfaat.

Read more »

Posted in: mengganti Pavicon,Pavicon

KOLEKSI ANIMASI LUCU

Koleksi animasi special anjing lucu dapat anda copy dengan cara klik kanan kemudian save as.

Read more »

Posted in: Animasi,Koleksi animasi lucu

SCRIPT TOP KOMENTATOR

Dengan menambahkan widget top komentator pada blog anda, akan mengundang para pengunjung blog untuk memberikan komentar

Langkah untuk memasang top komentator pada blog :
1. Copy code html/script di bawah ini dengan menekan tombol select All

<br /> <br /> <script type='text/javascript'><br /> function pipeCallback(obj) {<br /> document.write('<ol>');<br /> var i;<br /> for (i = 0; i < obj.count ; i++)<br /> {<br /> var href = "'" + obj.value.items[i].link + "'";<br /> if(obj.value.items[i].link == "")<br /> var item ="<li>" + obj.value.items[i].title + "</li>";<br /> else<br /> var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br /> document.write(item);<br /> }<br /> document.write('</ol>');<br /> }<br /> </script><br /> <script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=f91b5716f09d1986849eb4072486db48&url=hendrik-online.blogspot.com&num=10&filter=Hendrik"></script><br /> <br/><small>Powered By: <a href='http://www.bloggerplugins.org'>Blogger Widgets</a></small><a href='http://www.bloggerplugins.org/2008/06/top-commentators-widget-for-blogger.html'><img style='border: 0' alt='top commentators widget for blogger' src='http://image.bloggerplugins.org/blogger-widgets.png'/></a></taxtarea><br />

2. login ke blogger
3. pilih tata letak
4. add gadget
5. pilih html/javascript
6. paste code yang telah anda copy
7. simpan, view blog dan lihat hasilnya.

Read more »

Posted in: Blog,Script,Top komentator

SCRIPT EFEK DAUN BERGUGURAN

Menambahkan efek daun berguguran di blog akan membuat blog anda kelihatan lebih hidup, karena ada efek animasi yang menghiasi blog anda.. Untuk menampilkan efek daun berguguran di blog, langkah yang harus dilakukan adalah sebagai berikut :

1. Copy script di bawah ini:

<script src="http://www.geocities.com/sehatserasi72/efekdaunberguguran.js"></script>

2. login blogger
3. pilih tata letak
4. add gadget
5. pilih html/javascript
6. paste code yang sudah anda copy
7. simpan, view blog, dan lihat hasilnya.

Read more »

Posted in: Blog,efek daun berguguran

UNTUK MENGETAHUI SIAPA YANG MENGUNJUNGI PROFIL FACEBOOK KITA

Pingin tahu siapa saja yang mengunjungi profil facebook kita? Caranya mudah, langsung saja
1. KLIK http://apps.facebook.com/mytopfans
2. Kemudian klik ijinkan/allow
3. pilih salah satu dari 4 pilihan yang ada
4. klik "Lets start"
5. kemudian akan muncul 8 nama fans berat kamu alias orang yang paling sering mengintip profil anda.
6. klik publish, jika anda ingin menampilkan nama-nama tsb di wall anda. Jika tidak, pilih "SKIP".
Selamat mencoba, semoga bermanfaat.

Read more »

Posted in: Facebook

MEMBUAT BANNER ANIMASI GRATIS

Memasang Banner dengan animasi akan membuat tampilan blog semakin keren. Untuk membuat banner animasi, anda dapat mengunjungi http://www.addesigner.com. Anda bisa mendaftar gratis, setelah itu anda bisa langsung memilih banner yang sudah tersedia. Tambahkan text anda kedalam benner. Kemudian anda dapat menyimpannya menjadi file dengan extension GIF dengan cara klik kanan kemudian "save image as".
Selamat mencoba, semoga bermanfaat

ini contoh banner animasinya:

Read more »

Posted in: Banner,Blog,membuat banner

MAIN CATUR DI FACEBOOK

Bagi anda yang suka main catur, anda dapat memainkannya di facebook. Karena facebook punya game catur yang seru untuk dimainkan.Anda tidak bermain melawan komputer tapi anda akan bermain melawan orang-orang dari seluruh penjuru dunia. Siapa tahu dengan sering berlatih di game ini anda bisa menjadi master catur internasional. he..he..langsung saja klik http://apps.facebook.com/chesscube

10 tips yang harus dilakukan:
1. Kuasai pusat, dalam hal ini wood chess, wood chessboard
2. Jalankan kuda sebelum gajah
3. Jalankan gajah sebelum benteng
4. Jalankan benteng sebelum menteri
5. Rokade cepat
6. Lindungi buah
7. Serang petak pada papan catur/wooden chess board yang sama dengan banyak buah
8. Ciptakan penyergapan bila mungkin
9. Ciptakan pengikatan bila mungkin
10.Kembangkan strategi pada setiap langkah

10 Larangan yang harus dihindarkan:
1. Jangan jalankan buah lebih dari 1x dalam pembukaan pada chess board
2. Jangan memberikan sekak terlalu cepat
3. Jangan ciptakan bidak tumpuk
4. Jangan ciptakan bidak terpencil (isolasi)
5. Jangan biarkan lawan menciptakan bidak bebas
6. Jangan tutup jalan gajah dengan bidak
7. Jangan cepat makan buah yang terikat, kalau masih bisa mempertahankan ikatan
8. Jangan jalankan bidak dimuka raja yang sudah rokade
9. Jangan lakukan strategi yang tidak dimengerti
10. Jangan main terlalu tegang

sumber:trickfacebook.com

Read more »

Posted in: Facebook

MEMBUAT STATUS FACEBOOKMU MENARIK

Berbeda dengan status facebook dengan tulisan terbalik, kali ini status facebook dengan simbol-simbol yang disusun menyerupai gambar dan pastinya akan membuat status facebook anda beda dari yang lain dengan kata lain status facebook anda lebih keren. Caranya cukup mudah.

1. Login ke facebook
2. Masuk ke http://apps.facebook.com/statussymbols
3. pilih gambar / simbol yang akan anda tampilkan
4. blok dengan menekan Ctrl+A kemudian Ctrl-X
5. paste di status facebook anda dengan menekan Ctrl-V
6. Share dan lihat hasilnya

Read more »

Posted in: Facebook

MEMASANG IKLAN DI BAWAH JUDUL POSTINGAN

Memasangn iklan atau Adsense di bawah judul postingan akan tampak lebih menarik dibandingkan dengan memasangnya di sidebar Blog anda. Karena setelah pengunjung membaca Judul artikel, mau tidak mau pengunjung akan melewati iklan atau adsense terlebih dahulu sebelum kemudian membaca artikel atau postingan yang ada di blog kita.

Berikut cara memasang iklan atau Adsense di bawah judul postingan.

1. Login ke blog
2. masuk ke tata letak
3. pilih edit html
4. centang "Expand widget template"
5. pakai Ctrl+F untuk mempercepat pencarian code <data:post.body/>
6. Copy paste script iklan yang telah di PARSE tepat di atas code <data:post.body/>
7. Untuk memPARSE script iklan anda klik di SINI
8. Jika sudah simpan template, kemudian view blog untuk melihat hasilnya.

Read more »

Posted in: Blog,memasang iklan

FACEBOOK CHAT EMOTICON BAR

Chatting dengan teman di facebook akan terasa lebih seru bila kita menginstal Facebook Chat emoticon bar. Tanpa emoticon bar kita harus menghafalkan code-codenya, tapi kalau sudah diinstal, kita tinggal klik semau kita.

Cara untuk menginstal emoticon bar di facebook adalah sebagai berikut:

1. Syaratnya anda harus menggunakan Mozilla Firefox. Kalau belum install dulu di SINI
2. Install Addon Greasemonkey klik di SINI
3. Restart firefox anda
4. Install Chat emoticon bar klik di SINI.
5. Selanjutnya Login ke Facebook
6. Pilih salah satu teman anda untuk diajak cahtting alias ngobrol
7. Chat Emoticon Bar yang sudah diinstal akan tampil seperti gambar di bawah ini

Semoga bermanfaat...
Setelah berhasil, jangan lupa komentarnya, OKey?!

Read more »

Posted in: Facebook

EMOTICONS KEREN UNTUK MENGHIASI BLOG ANDA

Emoticons adalah sebuah simbol atau kombinasi dari simbol-simbol yang biasanya digunakan untuk menggambarkan ekspresi wajah manusia yang mengandung emosi atau perasaan dalam bentuk pesan atau tulisan.

Emoticons terus berkembang hingga bentuknya bukan hanya berupa simbol-simbol tapi kita bisa melihat banyak Emoticons keren dan lucu yang bertebaran di internet.

Jika anda ingin menambahkan emoticons ke dalam postingan blog atau menambahkannya pada sidebar blog anda, berikut ada beberapa emoticons keren yang langsung bisa anda copy.
Tidur pulas
<img src="http://cute-smiley.com/smilies/cutepig9.gif" /><br />

Ga bisa tidur
<img src="http://cute-smiley.com/smilies/cutepig59.gif">

Sedih
<img src="http://cute-smiley.com/smilies/cutepig72.gif" />

Pusing
<img src="http://cute-smiley.com/smilies/nini71.gif">

Kaget
<img src="http://cute-smiley.com/smilies/cute_smiley69.gif">

Bingung
<img src="http://cute-smiley.com/smilies/Red_fox3.gif">

Flu
<img src="http://www.freesmileys.org/emoticons/emoticon-char-027.gif">

Joged
<img src="http://www.freesmileys.org/emoticons/emoticon-char-017.gif">

Emoticons lainnya dapat anda pilih sendiri di SINI atau klik di yang INI.

Read more »

Posted in: Emoticons

MEMBUAT ANIMASI BURUNG TERBANG

Memberi effect animasi seperti burung terbang pada Blog akan membuat Blog anda lebih hidup dan sedap dipandang. Nah, cara untuk menambahkan animasi burung terbang di Blog adalah sebagai berikut :



1. Anda bisa langsung mengcopy code HTML yang ada di bawah ini

<script language='JavaScript' src='http://oridmail.googlepages.com/oRiDscript.js' type='text/javascript'/><script language='JavaScript' type='text/javascript'>eXl1lXc('http://i584.photobucket.com/albums/ss285/vanesalu/flying_bird.gif','top','0px','left','0px','123455','150','150','transparent','ffffff');</script>

<script language='JavaScript' src='http://oridmail.googlepages.com/oRiDscript.js' type='text/javascript'/><script language='JavaScript' type='text/javascript'>eXl1lXc('http://i584.photobucket.com/albums/ss285/vanesalu/flying_bird.gif','top','0px','right','0px','123456','150','150','transparent','ffffff');</script>

2. Login ke Blog
3. Pilih tata letak
4. Klik "Edit Html"
5. Paste code html di atas kode </body>
6. Gunakan Ctrl+F untuk mempercepat pencarian
7. Save dan lihat hasilnya.

Selamat mencoba

Read more »

Posted in: Animasi burung terbang,Blog

MEMBERI BACKGROUND PADA POSTING BLOG

Anda dapat merubah background untuk setiap postingan sesuai dengan topik yang anda bahas. Contoh background dapat anda lihat di SINI.

Untuk memberi background pada setiap postingan, anda tinggal mengcopy code di bawah ini.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3pG-yTPvHg2uQZola_jULSvoIqjxa-XEYS-CKih1yNYCGgLQ3zcET-M-YHRoV4LtGI5-QNebnKBNDMY8JGq9r8IEJugdi6g221FGD8FGv-GrfT6hyphenhyphen2cm0PcUsjW3NnyCH80V6grGQPs/s1600/mario2.jpg
) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;">

Isi Postingan

</div>

Paste code di atas pada editor "Edit HTML".
Ganti URL gambar yang berwarna merah, dengan gambar pilihan anda.
Code "no-repeat" adalah perintah untuk tidak mengulang gambar.
Jika ingin menampilkan gambar secara berulang, hapus kata "no"

Selamat mencoba

Read more »

Posted in: background posting,Blog

MEMBUAT SCROLL PADA ARCHIVE BLOG

Membuat scroll pada archive blog hampir sama dengan membuat scroll pada label atau kategori. Tujuannya yaitu untuk menghemat tempat. Jika postingan kita banyak, maka archive blog kita akan memanjang ke bawah, dan hal ini kurang sedap dipandang mata.

Untuk menambahkan scroll pada archive blog caranya adalah sebagai berikut.

1. Login ke blogger
2, Pilih rancangan
3. pilih edit html
4. centang expand template widget
5. tekan Ctrl+F untuk mempercepat pencarian
6. cari kata "Archive"
7. Tambahkan kode berwarna biru seperti contoh di bawah
8. kalau sudah, klik "save" dan lihat hasilnya

<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:200px;'>

<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

</div>

Read more »

Posted in: archive blog,Blog,scroll archive blog

MEMBUAT SCROLL BOX

Scroll Box berfungsi untuk menghemat ruang atau space pada Blog Anda. Untuk membuat scroll box, anda dapat mengcopy code di bawah ini. Anda dapat memodifikasi lebar dan tinggi scroll box sesuai dengan yang anda inginkan.

<div style="height: 100px; overflow: scroll; width: 200px;">

Letakkan teks anda di sini. Semakin banyak teks yang anda ketik, maka secara otomatis scroll box akan muncul sesuai dengan lebar dan tinggi scroll box yang anda buat.

</div>

Hasilnya seperti di bawah ini

Letakkan teks anda di sini. Semakin banyak teks yang anda ketik, maka secara otomatis scroll box akan muncul sesuai dengan lebar dan tinggi scroll box yang anda buat.

Untuk membuat scroll box dengan warna background, codenya ada di bawah ini :

<div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">
Letakkan teks anda di sini. Semakin banyak teks yang anda ketik, maka secara otomatis scroll box akan muncul sesuai dengan lebar dan tinggi scroll box yang anda buat.
</div>


Hasilnya seperti ini

Letakkan teks anda di sini. Semakin banyak teks yang anda ketik, maka secara otomatis scroll box akan muncul sesuai dengan lebar dan tinggi scroll box yang anda buat.

Anda dapat mengubah warna background dengan mengganti code background-colornya.
Selamat mencoba...

Read more »

Posted in: Blog,Scroll box

SCRIPT GAME FISH TALES

Lagi senang memposting script game. Setelah script game Mario Bross, sekarang saya akan memposting script Game Fish Tales. Game yang mirip feeding frenzy ini mungkin bisa menjadi alternatif dalam bermain game untuk menghilangkan kejenuhan anda.

Copy code html di bawah ini, kemudian pasang di blog anda.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.gametop.com/online-free-games/fish-tales-deluxe-online/game.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="http://www.gametop.com/online-free-games/fish-tales-deluxe-online/game.swf" menu="false" quality="high" bgcolor="#000000" width="550" height="400" name="" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Selamat mencoba, semoga bermanfaat.

Read more »

Posted in: Fish tales,Script game

PARSE CODE HTML

Para blogger yang isi blognya tentang "tutorial blog" mungkin sudah tidak asing lagi dengan "parse html", tapi bagi para newbie yang ingin memposting kode html dan masih bingung bagaimana caranya, sebenarnya google telah menyediakan code converter.

masukkan code html ke kotak yang tersedia kemudian klik "convert".



berikut saya berikan code htmlnya powered by google.
ini code htmlnya :

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=320&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&amp;output=js"></script>

Anda bisa copy dan pasang di blog anda.

Read more »

Posted in: Blog,Google,parse html

MEMASANG GAME MARIO BROSS DI BLOG

Memasang game di blog membuat blog anda tambah keren. Selain itu kalau anda lagi
jenuh, anda bisa memainkannya tanpa harus meninggalkan Blog Anda. Dan saya yakin pengunjung blog anda akan lebih sering datang ke Blog anda untuk memainkan game yang fenomenal ini (mario bross.red).


Cara untuk memasang game mario bross di blog adalah sebagai berikut:

1. Copy code di bawah ini

<embed src="http://media.y8.com/games/content/Mario_Jungle_Adventure.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" menu="0" width="550" height="400"></embed>

2. login ke blog anda
3. masuk ke tata letak
4. tambah gadget
5. pilih html/javascript
6. paste code html yang sudah anda copy
7. save dan lihat hasilnya.

Selanmat mencoba

Read more »

Posted in: game mario bross

MEMASANG WIDGET GOOGLE TRANSLATOR

Dengan memasang widget Google translator ke dalam Blog Anda akan membuat para pengunjung mengerti apa isi Blog Anda, terutama pengunjung dari Luar negeri. Untuk memasang widget translator ke dalam blog, caranya sangat mudah.

1. Klik di SINI
2. Klik "get widget"
3. Copy code htmlnya
4. kemudian paste di BLOG anda
5. save dan lihat hasilnya

seperti ini :

Read more »

Posted in: google translator,widget

MEMBUAT BANNER UNTUK BLOG

Banner adalah sarana untuk promosi. Suatu produk akan lebih dikenal jika produk tersebut diiklankan. Para pemasang iklan biasanya memasang iklan dalam bentuk banner. Nah,untuk membuat banner, caranya sangat mudah. Langsung saja yach....

1. Masuk ke web biggo.ws atau langsung klik di SINI
2. Ketik Url blog yang akan anda promosikan
3. Tulis Text, tentukan warna dan font
4. Pilih effect
5. Tentukan background/latar
6. pilih animasi theme
7. Jika sudah, klik "Get Banner Code"
8. Copy code htmlnya
9. Paste di Blog anda.
10. Save dan lihat hasilnya

Read more »

Posted in: Banner,membuat banner

MEMBUAT FAN BOX FACEBOOK DI BLOG

Tutorial ini untuk siapa saja yang mempunyai Fan page di facebook yang ingin ditampilkan di Blog, sehingga para pengunjung blog anda tahu fan page anda di facebook.
caranya adalah :
1. Klik di sini
2. Copy URL fan page facebook anda, kemudian paste di "Facebook page url" (lihat gambar)

3. Klik "Get Code" untuk mendapatkan code htmlnya
4. Copy code HTML kemudian pasang di blog anda

Hasilnya seperti ini

Read more »

Posted in: Facebook,Fan box,Fan box facebook

CREATE A MUSIC PLAYLIST

Menambahkan musik kedalam Blog akan membuat blog anda tambah hidup. Apalagi lagu-lagu yang ada di playlistnya bagus dan terkenal. akan membuat pengunjung blog Anda betah dan bakalan balik lagi, balaik lagi dan balik lagi.

Berikut cara menambahkan music, mp3 atau video ke dalam Blog.

1. Langsung saja klik di sini
2. Ketik judul lagu yang akan anda tambahkan (lihat gambar)

3. Klik tanda "+" untuk menambahkan lagu
4. Jika sudah, klik Customize
5. Pilih music playlist yang Anda suka (lihat gambar)

6. Setelah selesai mengedit warna & bentuk klik "Save Playlist"
7. Beri judul untuk Playlist yang anda buat
8. Kemudian klik "save (get code)" untuk mendapatkan code htmlnya
9. Masukkan alamat email anda beserta password dan data yang lain kemudian klik SIGNUP

10. Copy code html dan pasangdi blog Anda.

Hasilnya seperti ini


Create a playlist at MixPod.com

Read more »

Posted in: create a music playlist,Mixpod