Cara Membuat Banner Animasi Mudah dan Cepat bentuk Gif Banner (tipe file / ekstensi GIF)

Wookke, mimin dateng lagi nih sob, kali ini mimin mau coba postingin

Cara Membuat Banner Animasi Mudah dan Cepat bentuk Gif Banner (tipe file / ekstensi GIF)

dijamin pasti sobat sudah bisa

oke deh, langsung aja, cekidot!!!!

1. Persiapkan sejumlah gambar / file (tipe file : jpg, png, bmp, saya saranin gunakan JPG atau PNG) anda dengan ukuran yang sama. Ukuran Banner rata-rata 125x125, 150x150, 300x250, 468x60 atau 728x90. Pilihlah salah satu ukuran banner tersebut. Misalnya anda ingin membuat banner animasi ukuran 125x125, anda harus menyediakan sejumlah gambar yang berukusan 125x125 juga. Jadi harus sama, soalnya kalao tidak sama tidak bagus kelihatannya.

Contoh Sobat mau buat banner animasi ukuran 125x125. Saya akan menyiapkan gambar /file sebanyak 3 buah yang sederhana, dengan ukuran yang sama untuk membuat banner animasi.

2. Masuklah situs http://Picasion.com, lalu akan muncul  gambar seperti di bawah ini.

Keterangan :

• No. 1 : Masukkan file gambar yang telah kita sediakan tadi satu persatu
• No. 2 : Ukuran gambar animasi yang akan kita buat (sesuaikan dengan ukuran gambar yang dimasukkan pada No.1) / Hasil akhir dari gambar animasi
• No. 3 : Pilihlah kecepatan pergerakan banner animasi yang akan kita buat.
• No. 4 : Klik Create animation apabila langkah No.1 sampai No. 3 sudah yakin. (lihat gambar di bawah)

3. Setelah cara no 2 diatas sudah beres, maka tunggu sejenak.
4. Selanjutnya akan muncul gambar seperti di bawah ini.

5. Anda akan ditawarkan oleh Picasion beberapa hal pilihan. Apakah anda mau menggunakan link yang mereka tawarkan atau anda menyimpan file gambar/banner animasi yang baru saja anda buat. Saran Mas Bro, sebaiknya anda simpan file banner animasi tersebut ke dalam komputer anda.

6. Pilih atau Klik Save this animation (lihat panah merah di atas). Tunggu sejenak maka file banner animasi anda akan tersimpan.

7. Selesai. (lihat contoh banner animasi yang Mas Bro buat)

nah gimana sob, udah bisa belum??

pastinya udah dong!!!!

oke, semoga bermanfaat yach

mimin mau capcus dulu

cuuuusssss.......

Catatan :
Picasion akan memberikan nama file otomatis, silahkan anda ganti nama file tersebut sesuai keinginan anda. Dan satu lagi.... Silahkan anda pasang banner animasi anda ke dalam blog anda. Mudah bukan.... Tidak perlu punya keahlian khusus.

Read more »

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.


Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Copy Script nya

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAiwZPco9VQoJgYBDr5S47T0HDq9HULWax9csQZ8LokQ_Y51zXCs5gxWkUQ-0ggYID-41KbeeoxUQOx17WodLlgz4zjmUfdgTvt9iVN7rrt9urRtondpEIFannMKTl45BrqCraeLFtIjQ/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7UDaIpBm1tM7jEKONbCAhtxPCYmEiUqN7t097Lny6sezZ8OBvOG1A5l4TRwCztn_PkekfXbFpE9jjwof8zI_Eyx-51-n-izmHbVG9CpAgYn6vWQXCHCc5AMTrY5ze-mS8KEcmGKz9LqHN/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Read more »

Cara Membuat Tulisan atau Teks Berjalan di Blog

Cara Membuat Tulisan atau Teks Berjalan di Blog

Itu mudah sekali!! dan Dengan marque ini bisa juga lebih mempercantik blog kamu. disini kamu pun tidak perlu repot-repot untuk membuat scriptnya (code). kamu tinggal Copy dan paste code yang sudah saya sediakan. Yup inilah Kumpulan Cara-Cara Membuat Tulisan/teks Berjalan di Blog DI bawah ini

<marquee behavior="scroll">Tulisan berjalan</marquee>
Tulisan Berjalan

<marquee style="color:white;" bgcolor="grey">Tulisan berjalan dengan background.</marquee>
Tulisan berjalan dengan background.

<marquee behavior="scroll"><br><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjbIeUDwdC1qyK-W8eVRigR3FcT2XRAHU4gZSWKOKe0wwhA5hTqMgHdsQ0ocA7GbuyFSflXlAKXuKNfJqDjq9RmZj3OhLpJWRdJR8mGpv9MTj5B7c9Gxf03t6vtn8m0tiavDgulfugjQ/s429/bola%252520cara%252520membuat.png" height="60" width="500" /><br>Dengan gambar<br></marquee>

Dengan gambar

<marquee behavior="scroll" direction="right">Tulisan berjalan kekanan</marquee>

Tulisan berjalan kekanan

<marquee behavior="scroll" direction="up" height="30">Tulisan berjalan ketas</marquee><br>
Tulisan berjalan ketas
<marquee width="200" behavior="alternate">Tulisan mantul</marquee>
Tulisan Memantul

<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan berjalan akan stop bila dibayangi oleh cursor</marquee>
Tulisan berjalan akan berhenti bila dibayangi oleh cursor

<marquee behavior="scroll" scrolldelay=32 scrollamount=1>Tulisan berjalan lambat</marquee>
Tulisan berjalan Pelan

<marquee behavior="alternate" direction="up" height="50px"><br><marquee direction="right">Zig-zag</marquee><br></marquee>

Zig-zag
<marquee behavior="alternate" direction="up" width="300" height="100"><br><marquee direction="right" behavior="alternate">Bouncing around</marquee><br></marquee>
Bouncing (Memantul)

Oke-oke itulah beberapa Cara Membuat Tulisan atau Teks Berjalan di Blog. dan sekarang kamu bisa berkreasi sendiri dengan memadukan marquenya sehingga akan lebih cool dan lebih keren lagi.

Udah waktunya, mimin mau makan dulu.

Read more »