Membuat Gambar Batman Berjalan Di Pinggir Blog

(Batman lagi jalan-jalan)

Penambahan gambar-gambar bergerak di blok akan menambah tampilan blog menjadi lebih indah dilihat, dan bisa menjadi ciri khas blog itu sendiri. Akan tetapi jangan terlalu banyak juga ya, yang ada pengunjung blog jadi ribet melihat tampilannya, dan juga penempatan gambar harus sesuai. 

Untuk membuat gambar Batman berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Mungkin trik ini usang atau tidak berguna bagi para master dan para webmaster, tapi apa salahnya bagi pemula seperti saya yang awam ini, mungkin bagi sahabat bloger yang pengen tau caranya kita ikuti langkah - langkahnya  seperti dibawah ini:

Disini kita nggak perlu upload gambar lagi kok,,

1. Login ke blogger dengan ID anda 

2. Klik tata letak

3. Klik tambah gadget

4. Pilih HTML/Javascript 

5. Masukan kode dibawah ini:

 <div style="position: fixed; bottom: 25px; left: 20px;width:120px;height:135px;"><a href="http://zuazz.blogspot.com" title=""><img src="http://batman-project.googlecode.com/files/zuazz.gif.gif"/></a><small><center><a href="http://zuazz.blogspot.com" target="_blank"><span style="font-weight:bold;color:#00000;"> den zuaz </span></a></center></small></div>

Untuk kolom judul kosongin aja ya, dan untuk menentukan di sebelah mana gambar ditempatkan silahkan ganti kode berwarna merah (left / right).ganti kode berwarna biru dengan url anda sendiri atau dibiarkan saja juga tidak apa-apa kok.

6. Klik simpan dan lihat hasilnya.

Read More

Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pupLST03RpZ_Iz2jgTdQCvO6jBK2_OVG1nkArEZvxKrqDtg_DlfWOz4qPW6Nzxp4ctniFX3CKbryrLf7QW_3_9WuvNuqrHN0HZnb5K4EMuM8dkRpaCZG6nHrrp2wDTFmts7Wk4xPbWbQ/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Read More

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot. Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

• Pertama-tama silahkan login di Blogger
• Klik Design > Page Element > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLA-QTWeOg3Hrh60bcsPPYFr2vGSzMRC4a__0phyphenhyphenfxxvCh9Hsi4vpoMdJj9lCimFL3JWFhn5YVES1ihp5srwi9K21uZC-_SzXUobVxJWZZikEjvhZiF8d1dMHGPU-fGrN5S1rrpGAXbYg/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
• Simpan dan lihat hasilnya.

 Warna Pilihan Burung Twitter

 Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_rx7uKTLKfovcfTg1IFRamUIAnQHat6Sxv9Slrwbi5N3DhuxQq7fNT5hhV08a6t8PIWtj-p7_FQLJUmRWCE0auCPM6AzmGjbUqniCqtIFn9PgQNlP7OcHNGZKpV34KllLqTzBcdorZy8/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqmqvSnSQuVllNmWOZpX7ZSTj_zvOYGDM9CgliK3v7OGURnWM52fwb_84geeVUW7vo9jINtmhwKzjSNeRJU-Odw4M9LJmnuXQkSaSRDTzTZRsAuN0XhCRY7WW75YI1KMHE0mCWg-3_RI/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyU4KSSS9Q77Ymvb_CWu7Dubaok6GeArT8iFIJgN_WLeIKVjz4Ok2hhQ1qmaGrrjojaBSamakHJH7nzxxXxCsKTFA7qvSgK2sAoGaUg6n-B13h1rwCJ-8L69rt5fg6Ut618lgeiorZi8/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyHsMbiUxhPGVDEupIk-cwKs-bQA42SwpUKNf8h4UfOoUCnYNcwQPtvg_ivA0bNv7EEbDyL6afT0ore_V_FHI1pi0qC1XWdI6liPJ9PgUfJVMoK1aiTMrlccy7YQDIp1jnJHQ0vBXSTmQ/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRRPsiM7V8ew7MLcIaiv2TG9afQpc4ZjBMjrFjYLSSka40SQykifOJE2Q6fWSmh2yGzIWXyKL9PfJUgOH4dsUHI5-Yayj2GiiGZpMJxh4N5GBnkQ3iN2RfANRRYpzYSUSzBFpKZmztjU/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoXp6PcCXcO5XLB9HMT_FURlXdcKwMZa0kzSAIJqvNml-B0FXlUbqXycA1bLstfIcYn9AfE6ehoNP5i68LFwcFgsa1fBdcwmRLMbJePRnh0OQnz0svHiGty3v3CA8KTAtvObuQKfba0c/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVriacdNllndDgSsvv2DsClxWX3yqeC5-6G12xXfcwdWdttQTjTlX9uANl8IuqujyHyMmrseB4eoZdmG3xtr4ie1yYiHovmYnUxOGFz8S0Sn924R3GP4DszGnbxTYrwsaZYXGOd7xX60/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijV8vgZtGpQc0HxU_9iL9uIiFSu_FXj08egds5nF3Loj6Ikgy6p1tuyDF-bfeeMSKvqHPPyLi6_HS2C4TTq4cFhXOj6q6_2_-kPKm3XzHptDRDm0noQ4nuSJWJTgy3Wg_cbC0S-BNhTxk/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!!!!

Read More

Emoticon Gundam

Nah di sini saya hanya sedikit share hasil karya dari sobat blogger CHRISTIANTATELU yaitu Emoticon Gundam Keren, barang kali di antara teman-teman yang lain ingin mendapatkan emoticon keren ini.

  :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: 

Cara Memasang Emoticon Gundam di Kotak Komentar Blog

Mungkin sobat sudah sering membaca judul yang mirip dengan judul dalam postingan ini, karena apa?? di blog ini hampir semua emoticon sudah saya posting, mulai dari emoticon skype, emoticon kaskus, emoticon onion, emoticon emo girl dan emo boy dan saat ini kita membahas cara memasang emoticon gundam di komentar blogger.

Silahkan ikuti tutorial berikut jika sobat tertarik membuat emoticon gundam di komentar blog.

Emoticon Gundam di atas Kotak Komentar Blog

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
3. Letakkan kode berikut di atas kode </body>

<script src='http://tateluproject.googlecode.com/files/Gundam%20emoticon.js'/>
4. Cari kode merah seperti di bawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Bila sudah ketemu letakkan kode emoticon gundam di bawah ini tepat di bawah kode <p class='comment-footer'>

<center> <b><img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/14-1.gif' width='50'/> :b: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/13-1.gif' width='50'/> :c: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/12-1.gif' width='50'/> :d: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/11-1.gif' width='50'/> :e: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/10-1.gif' width='50'/> :f: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/9-1.gif' width='50'/> :g: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/8-1.gif' width='50'/> :h: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/7-1.gif' width='50'/> :i: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/6-1.gif' width='50'/> :j: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/5-1.gif' width='50'/> :k: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/4-1.gif' width='50'/> :l: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/3-1.gif' width='50'/> :m: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/2-1.gif' width='50'/> :n: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/1-1.gif' width='50'/> :o: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/15-1.gif' width='50'/> :p: </b></center>
5. Klik save dan lihat hasilnya...

Read More

Tulisan Berjalan Di Buku Tamu CBOX

Sedikit berbagi pengalaman pribadi lagi nih sob,, heheheheee,,,

pada saat melihat teman-teman blogger menulis di biku tamu CBOX saya kok bisa bergerak-gerak,, sedikit rasa penasaran dan mencoba dengan kode HTML,, tapi ternyata salah,, hehehe,, jadi malu nih sob,, maklumlah masih pemula,, dan akhirnya saya cari di mbah google dan akhinya ketemu juga nih,, setelah saya coba ternyata berhasil juga,, belajar dari kesalahan memang sangat bermanfaat walaupun agak malu juga ya sob,,

Nah bagi sobat yang belum tahu bagaimana caranya biar tidak salah kayak saya disini saya berbagi sedikit ilmu. Diantaranya membuat tulisan berjalan, Berwarna, bergaris bawah, tebal dan lain sebagainya.

Nah langsung saja kita bahas, untuk membuat tulisan pada CBOX lebih terlihat menarik silahkan ikuti langkah langkah berikut :

1. Membuat Teks Berjalan di CBOX
   Apit kata-kata yang ingin dibuat berjalan dengan [scroll] dan [/scroll]
   Contoh: [scroll] Salam kenal [/scroll] hasilnya

Salam kenal

2. Membuat Teks Berukuran Besar
   Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
   Contoh: [big] Salam kenal [/big] hasilnya adalah Salam kenal

3. Membuat Teks Miring
   Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
   Contoh: [i] Salam kenal [/i] hasilnya Salam kenal

4. Membuat Teks Tebal
   Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
   Contoh: [b] Salam kenal [/b] hasilnya adalah Salam kenal

5. Membuat Teks Bergaris Bawah
   Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
   Contoh: [u ]Salam kenal [/u] hasilnya adalah Salam kenal

6. Membuat Teks Bergaris Tengah
   Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
   Contoh: [s] Salam kenal [/s] hasilnya adalah Salam kenal

7. Membuat Tulisan Berukuran Kecil
   Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
   Contoh: [small] Salam kenal [/small] dan hasilnya adalah Salam kenal

8. Cara Membuat Tulisan Rata Tengah (Center)
   Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
   Contoh: [center] Salam kenal [/center]

9. Membuat Tulisan Berwarna
   Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
   Contoh: [color=red] Salam kenal [/color]  maka hasilnya adalah Salam kenal

10. Cara Membuat Teks yang Ber Link
   Apit kata-kata yang ingin diberi link dengan [url=alamaURL] dan [/url]
   Contoh: [url=http://kuturing.blogspot.com/] kuturing [/url] maka hasilnya adalah kuturing

Selamat mencoba ya sob,,

Read More