Cara Membuat Gambar Berputar dan Membesar saat di Sorot

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.

Kali ini saya akan berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Pinguin Linux di atas, maka gambar akan berputar dan membesar. Apabila anda berminat untuk mencobanya silakan diikuti langkah-langkah nya seperti berikut :

1. Seperti biasa pertama harus login dulu di akun blogger
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan download dulu template lengkapnya.
4. Lalu cari kode </head>
5. Setelah ketemu kemudian copy paste kan 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. Setelah itu klik save / simpan template.



Langkah selanjutnya untuk proses penenpatan gambarnya dalam postingan.



1. Anda 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://adituek.blogspot.com/"><img src="http://4.bp.blogspot.com/-CwEirHz3j3g/T3-qdL1Q4pI/AAAAAAAAAu0/yoWox29izCE/s200/naruto+dont+copy.png" /></a></div>

keterangan:
  1. kode berwarna merah adala kode pembuka dan penutup
  2. kode berwarna biru silakan ganti dengan URL blog anda dan URL gambar yang ingin anda pasang di dalam postingan.
  3. Setelah semuanya selesai klik publikasikan. 
Demikianlah uraian saya kali ini mengenai bagaimana cara membuat sebuah gambar berputar dan membesar saat di sorot. Mudah-mudahan bermanfaat dan selamat mencoba. Jangan lupa tinggalkan koment anda ya.....



Fungsi Terbilang Pada MS Excel.

Kali ini saya akan share sebuah aplikasi dan tips untuk sobat yang sering bekerja menggunakan Ms. Excel. Tips kali ini adalah Cara Membuat Fungsi Terbilang Pada Excel. Mungkin sobat semua pasti sudah mengetahui bahwa Ms. Excel itu penuh dengan formula/rumus / brangkasnya rumus.,hehe
Pernahkah sobat berpikiran bahwa apakah ada rumus agar suatu cell Ms. excel menampilkan Fungsi terbilang ?,maksudnya Ms excel dengan sendirinya membilangkan angka-angka yang kita Ketikkan pada Cell tertentu. Seperti misalnya pada Penulisan sebuah Kwitansi. Masa kita harus selalu menuliskan secara manual terus, cape Dech.,,hehe... Ya kalo yang kwitansinya cuma satu dua, kalo ribuan per hari ?? Caranya yang paling simple menurut saya pribadi adalah dengan memaswangkan rumus. Eh, lagi-lagi rumus ya.. ?: Gpp dech, yangpenting Kerjaan lancar. Oke, jadi kebanyakan inter mie ayam nich, ikuti aja di bawah ini langkah dan caranya:
1. Download file addins excel untuk terbilang disini..
2. Extraks file tersebut di computer (missal di c:\My Documents)
3. Buka aplikasi Excel 2007 anda, Excel versi lain juga bisa,,hehe
4. Masuklah ke office button (pojok kiri atas) – lalu klik tombol “Excel options”
Cara Mudah Membuat Fungsi Terbilang Pada Excel
5. Pilih tabs “Add-Ins”, lalu klik tombol “Go…” yang berada pada bagian bawah panel form.
Cara Mudah Membuat Fungsi Terbilang Pada Excel
6. Setelah muncul kotak beriku kemudiant klik pada tombol “Browse”.
Cara Mudah Membuat Fungsi Terbilang Pada Excel
7. Pilih direktori dimana tempat anda menyimpan file unduhan tadi (dalam contoh di c:/My Documents)
Cara Mudah Membuat Fungsi Terbilang Pada Excel
8. Klik tombol “Ok” lalu akan muncul kotak berikut, centang cek list file yang baru tadi:
Cara Mudah Membuat Fungsi Terbilang Pada Excel
9. Klik Ok lagi dan proses pemasangan Add-Insselesai. File siap digunakan.
Sekarang kita cek apakah fungsi tersebut berfungsi. Untuk memakainya anda perlu mengetahui formulanya. Missal angka yang hendak anda buatkan terbilangnya ada di cell “B1”, maka formulanya adalah sebagai berikut:
=terbilang(B1)","4",”Rupiah.”
Cara Mudah Membuat Fungsi Terbilang Pada Excel
Penjelasan formula tersebut adalah sbb.:
1. B1 adalah cell tempat angka yang akan dikonversi ke nilai terbilang.
2. 4 adalah style case, anda dapat memilih 0,1,2,3,4 untuk menampilkan style penulisan yang berbeda.
Contoh : type:
     (0) ; fungsi terbilang.
     (1); FUNGSI TERBILANG.
     (2); fungsi terbilang .
     (3); Fungsi Terbilang .
     (4) ; Fungsi terbilang.
3. “Rupiah,” Adalah text keterangan mata uang, dapat diganti dengan mata uang lain yang anda perlukan dengan cara manual.
Anda juga dapat mencoba cara lain dengan mengetikkan “=terbilang()” tanpa spasi, di cell edit bar seperti berikut, lalu tekan tombol “fx”
Cara Mudah Membuat Fungsi Terbilang Pada Excel
Maka akan muncul kotak dialog seperti berikut:
Cara Mudah Membuat Fungsi Terbilang Pada Excel
Coba masukkan nilai-nilai yang sesuai pada fungsi tersebut dan lihat hasilnya..
Trik ini tidak hanya berlaku untuk Excel 2007 melainkan untuk versi lain juga dengan prinsip yang sama. Yaitu anda harus mencari menu untuk menginstall Add-Ins baru.
 Selamat mencoba, .

Cara Membuat Border dan Background Blog


Jika sobat bosan dengan tampilan template blog yang itu-itu ajah, tutorial kali ini mungkin bisa sedikit membantu untuk memodifikasi blog anda agar lebih kelihatan hidup dan menarik. Setelah postingan saya membuat bingkai tulisan di blog, kali ini saya mencoba mengembangkan untuk modifikasi blog dengan membuat border dan background yang bisa anda gunakan untuk memperindah sidebar dan main-wrapper.Dalam bahasa Indonesia border dan background dikenal dengan istilah batas tepi dan latar belakang template blog. Dengan border dan background, maka blog akan semakin bagus dan tampak cantik, apalagi dipadukan dengan kombinasi warna yang sesuai. 

Border dan background berguna untuk memisahkan bagian-bagian dari blog. Juga dapat menunjukkan bagian yang penting seperti posting blog dan fitur-fitur yang ditambahkan pada bagian sidebar. Contohnya pada blog ini, terdapat batas tepi untuk bagian posting, header, sidebar dan footer sehingga setiap bagian dipisahkan oleh batas tepi kotak-kotak yang berbeda pula. Yang paling penting lagi, border dan background tidak mengharuskan anda untuk memiliki skil dan pengetahuan khusus untuk mengunakannya pada blog. Ada banyak cara untuk mengatur penggunaan border dan backgroud pada blog. Dalam tutorial ini saya hanya menjelaskan pengunaan dasar border dan background saja.

Jenis-Jenis dan Pengaturan Border

Cara termudah untuk menambahkan border pada setiap elemen di blog adalah menambahkan kode <b:skin> pada bagian template blog. Misalnya pada bagian #main-wrapper blogger yang mengacu pada tempat blog post, dapat ditambahkan kode border seperti ini
#main-wrapper
border: 3px solid #000000;
[kode lainnya di sini]
Kode border: 3px solid #000000; mengartikan adanya penambahan garis tepi batas dengan tebal garis 3 pixel berwarna hitam solid seperti di bawah ini:


A section with a solid black border, three pixels wide
Contoh di atas masih dapat dimodifikasi lagi sehingga menjadi seperti di bawah ini:


A section with a solid red border, five pixels wide
Border tidak harus selalu solid namun anda dapat mengubahnya dengan style border yang lain seperti dotted, dashed, double dan outset. Oke, contohnya dapat dilihat seperti di bawah ini :


Dotted border: 3px dotted #000;


Dashed border: 5px dashed green;

Double border-style: double; border-color: blue;

Outset border-style: outset; border-color: #404040;

Jenis-Jenis dan Pengaturan Backgroud

Backgroud dapat berupa paduan warna (didefinisikan sebagai nilai hex, seperti # 000000) atau berupa gambar (yang didefinisikan oleh URL dari gambar). Sangat mudah menggunakan flat warna sebagai backgroud blog hanya dengan menambahkan kode nilai hex warna pada template blog. Sebagai contoh, jika temen-temen ingin menambahkan warna latar belakang merah pada sidebar, anda bisa menambahkan kode warna merah pada bagian #sidebar-wrapper sehingga kode template menjadi seperti ini:
# sidebar-wrapper {
background: #DF0101;
[kode lainnya di sini]
}
Untuk menggunakan gambar sebagai background pada bagian template, maka anda harus menyimpan dulu gambar tersebut pada image hosting online. Setelah itu, ambil alamat url penyimpanan yang menghubungkan gambar. Jika sudah, padukan dengan kode di mana gambar ingin dijadikan backgroud. Contohnya seperti ini:
#sidebar-wrapper {
background: url(http://imagehost.com/yourimage.jpg);
[kode lainnya di sini]
}
Nah, warna dan gambar dapat dikombinasi menjadi background seperti kode di bawah ini:
#sidebar-wrapper {
background: #DF0101 url(http://imagehost.com/yourimage.jpg) no-repeat top left;
[kode lainnya di sini]
}
Contoh di atas akan menampilkan gambar di kiri atas sidebar, sementara ruang lainnya akan menjadi merah.

Kombinasi Border dan Background Properties

Pada bagian ini akan dijelaskan bagaimana kita dapat mengkombinasikan border dengan perintah-perintah untuk background untuk template blog. Misalnya seperti ini:

Mengkombinasikan ini

wide grey border

Dengan ini

paler grey background

Temen-temen bisa membuat efek seperti ini:
stylish section for your blog
border: 5px solid #666666;background: #333333;

Bahkan anda juga bisa menambahkan background image dan menambahkan garis pada seluruh bagian, seperti ini:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

Penempatan Border dan Background Styles pada Template Blogger
Bagian utama template blogger adalah header, main posts, sidebar dan footer. Nah, pada template blogger biasanya kode tersebut ditunjukkan seperti ini:
  • Header Section - #header-wrapper atau #header-wrap
  • Main Posts Section - #main-wrapper, #main-wrap atau #main
  • Sidebar - #sidebar-wrapper, #sidebar-wrap, #sidebar atau .sidebar
  • Footer Section - #footer-wrapper, #footer-wrap atau #footer
Jika anda meng-edit bagian-bagian tersebut pada <b:skin> template blog, disarankan untuk mengecek terlebih dulu apakah sudah ada penambahan kode border dan background. Jika sudah ada, maka anda hanya perlu meng-edit bagian itu saja daripada menambahkan kode yang baru. Patut diingat bahwa tiap template mungkin saja berbeda dan penggunaan border dan image background dapat disesuaikan karena apa pun bisa diganti-ganti pada bagian ini. Cobalah mennggunakan latar belakang warna yang berbeda-beda, membuat warna border dan background lebih kontras. Nggak apa-apa jika anda mencoba bereksperimen dengan berbagai jenis border dan image background serta warna-warna agar template blog semakin sesuai dengan keinginan. Untuk memudahkan pengaturan warna border dan background, gunakan kode warna ini. 

Itu tadi penjelasan singkatnya, sobat bisa ganti warna dengan gambar atau sesuaikan dengan selera masing-masing. Selamat berkreasi dan semoga bermanfaat.

Cara Membuat Efek Ling Bergerak saat Disorot

Tips blog saya kali ini yaitu membuat link yang ada di blog kita menjadi bergerak/bergoyang ketika disorot (hover). Untuk contoh jadinya silahkan sobat lihat pada blog ini.
 
Ternyata pemasangannya sangat simpel lho, tapi efek yang dihasilkan lumayan bagus untuk menambah keindahan blog kesayangan anda. Saya katakan simpel karena anda tidak perlu bersusah-susah mengedit HTML template blog yang ada, cukup copy lalu pastekan kode di bawah ini ke dalam satu tempat widget di blog (Add HTML/Script).
 
Ini kodenya:

<!--adituek link goyang start-->
<script src='http://ruki-zone.googlecode.com/files/link-goyang_www.ruki-zone.com.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
<!-- adituek link goyang end-->


Setelah anda pastekan kode tersebut silahkan simpan dan lihat hasilnya.
Mudah kan ..?

Cara Membuat Efek Pelangi Pada Link Yang Disorot

Efek pelangi diblog ?
Efek pelangi yang akan muncul disetiap link di blog saat link tersebut disorot mouse tentu menarik bukan.. bahasa kerennya hover pelangi.
Bagaimana cara memasangnya, tidak sulit kok. seperti yang ada di blog saya ini. Coba saja anda arahkan mouse ke link dimana saja, maka hasilnya akan berubah-ubah warna seperti Pelangi.
Caranya sangat mudah kox tinggal menambahkan sedikit kode saja, tidak mengubah atau menghapus, oia juga tidak perlu masuk ke bagian kode HTML template. ini caranya:
  • Yang pertama, anda harus masuk dulu ke akun Blogger
  • Setelah itu masuk ke bagian "Tata Letak"
  • Kemudian Klik link"Tambah Widget"
  • Selanjutnya pilih "HTML/JavaScript "
  • Kalau sudah CoPas (CopyPaste) aja kode berikut di dalamnya:
 <script src="http://iwan-namikaze.googlecode.com/files/MousePelangi_namikazestar.blogspot.com.js" type="text/javascript"></script>
  • Lalu simpan dan lihat hasilnya. O ya, nama widgetnya kosongin aja ya.
Mudah kan? Coba aja, dijamin berhasil deh.