aburohma: 13 Jun 2011

Senin, 13 Juni 2011

Menambah Code Efek Hujan Salju Di Blog Tanpa Menggunakan Image

Menambah meriah sebuah tampilan blog biasa dilakukan oleh para blogger, salah satunya yang kali ini akan kita tambahkan adalah membuat efek hujan salju, Rain Snow. Untuk melihat contohnya silahkan lihat Demonya disini .

Seperti biasa untuk oprak oprek blog Signin di draft blogger
Dalam dasbor masuk Rancangan --> Edit HTML

Jangan centang Expand template widget.

Cari kode ini <body>

Setelah ketemu masukan javascript berikut sebelum kode <body>

<script src='http://codecariilmu.googlecode.com/files/Snow.js' type='text/javascript'></script>

Atau juga yang ini, dengan butiran salju lebih besar :

<script src=' http://codecariilmu.googlecode.com/files/Snowstorm.js ' type='text/javascript'></script>

Jangan lupa jika sudah di masukan disimpan dan coba deh lihat hasilnya.

Cara Pasang Yahoo Messenger (YM) di Blogger

Saya punya blog di Blogspot. Saya ingin pengunjung blog saya bisa chatting dengan saya lewat Yahoo! Messenger. Mungkinkah?

Untuk keperluan itu kita bisa memanfaatkan fitur Pingbox yang disediakan Yahoo!. Lewat Pingbox, kita akan mendapatkan kode yang harus kita pasang di blog, profil Friendster, atau website kita.

Berikut ini cara membuat Pingbox:

Klik http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini:
Pilih Background Theme sesuai dengan preferensi kita;
Di kolom Display name, masukkan nama yang akan kita tampilkan. Contrenglah opsi Show Yahoo! Messenger display image jika kita ingin menampilkan gambar yang sekarang muncul di YM kita.
Pilihlah salah satu ucapan selamat datang di kolom Online Greeting, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
Pilihlah salah satu pesan bahwa kita sedang tidak online di kolom Offline message, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
Contrenglah opsi Require visitors to enter Nickname to send IM agar setiap orang yang mengirim pesan ke kita diwajibkan mengisikan nama aliasnya (nick name);
Pada kolom Save Pingbox as, tulislah nama Pingbox kita. Misal, jika pingbox yang kita bikin sekarang ini akan dipasang di blog, berilah nama Pingbox Blogger atau sesuka anda.
Tekan tombol Save;
Akan muncul windows bar. Masukanlah Yahoo! ID dan passwordnya, lalu tekan tombol Sign In. Windows itu akan menutup sendiri.
Akan muncul kotak berisikan kode yang harus kita pasang. Untuk mendapatkan kode yang pas sesuai peruntukannya, pilihlah jenis blog atau website kita. Misal, jika kita ingin mendpatkan kode untuk Blogger maka kliklah logo dan tulisan Blogger yang tersedia.
Tentukan ukuran kotak yang kita inginkan. Sangat disarankan untuk memilih opsi Recommended.
Tekan tombol Copy to clippboard.

Tahapan selanjutnya Cara Pasang Yahoo Messenger (YM) di Blogger, langkah-langkahnya sebagai berikut:

Login ke Blogspot Anda => klik Rancangan/Design => Tambah/Add Gadget => pilih HTML/JavaScript atau baca Cara Pasang dan Hapus Widget Blog di Blogspot;
Setelah terbuka halaman baru, pada kolom Judul, tulislah Judul yang kita mau, misal: CHATBOX.
Pada kolom Konten masukan kode Pingbox yang telah dicopy sebelumnya, caranya letakkan Crusor ke dalam kolom Konten, lalu klik kanan dengan mouse dan pilih paste atau tekan Ctrl + V pada keyboard;
Klik Simpan, selesai.

Apabila proses dan langkah-langkah di atas telah di lakukan dengan benar, maka hasilnya akan seperti pada contoh di bawah ini (contoh akan muncul/tampil jika browser Anda dilengkapi plugins flash player):

Demikianlah tutorial Cara Pasang Yahoo Messenger (YM) di Blogger ini, semoga bermanfaat.

Toolbar Baru pada Blogspot

Mungkin Info ini sudah banyk yang tahu,kenapa saya posting artikel ini , saya sendiri selama ini tidak menyadari adanya toolbar terbaru pada blogspot,jadi tidak apa -apalah lebih baik terlambat mengetahuinya dari pada tidak sama sekali...ehheh

Toolbar ini merupakan Satu lagi perkembangan yang dilakukan oleh Blogspot. Mereka telah menambahkan sebuah toolbar yang bernama "Define/translate". Sesuai namanya, toolbar ini berguna bagi kita untuk mengetahui defenisi dan menerjemaahkan kata-kata yang kita tulis pada blog ke beberapa bahasa negara. Hmm, sepertinya cukup berguna bagi yang suka menulis artikel yang berasal dari beberapa referensi, supaya kita semakin mengerti dengan apa yang kita tulis. Toolbar ini sendiri merupakan perpaduan program Google Dictionary dan Google Translate yang dimiliki oleh Google selaku empunya Blogspot.

Toolbar ini sendiri masih dalam tahap pengembangan sehingga baru bisa digunakan dari Blogger in Draft. Jadi, Anda harus masuk login ke akun Blogger Anda melalui halaman http://draft.blogger.com.

Cara Membuat Gambar / Tulisan / Animasi Bergerak (GIF Animasi) Untuk Mempercantik

Gambar Animasi adalah salah satu penarik agar visitor yang mampir di blog jadi betah untuk berkeliling. saya ingin berbagi dengan anda tips membuat gambar animasi gif secara online, hal tersebut akan mempermudah dalam pembuatan animasi dan dapat di setting sesuai dengan keinginan anda.

Tampilan website dan blog anda dengan animasi, bisa berupa animasi teks, gambar dan efek tertentu. Cara termudah membuat animasi adalah dengan menggunakan GIF animasi. File GIF adalah satu-satunya file gambar yang dapat bergerak, sementara untuk animasi yang lebih rumit anda dapat menggunakan flash atau video.

Saat ini kita sedang membahas bagaimana cara membuat animasi secara online, tanpa anda perlu bersusah payah menginstall program GIF animasi, serta mempelajari masing-masing tools dari program tersebut.

Berikut beberapa daftar website yang menyediakan layanan aplikasi editing GIF animasi :

Screenbot – dengan aplikasi ini anda bisa dengan mudah membuat enimasi efek ketikan/typewritter effect pada tulisan yang anda kehendaki, Tuliskan kata dan klik “Create Screed” untuk membuatnya menjadi animasi GIF. Kemudian anda dapat simpan file tersebut ke Flickr atau ImageShack atau menaruhnya di blog, MySpace, LiveJournal dan lainnya.
GIFWorks adalah aplikasi online GIF editor, dengan GIFWorks anda dapat membuat efek spesial animasi, dan fungsi-fungsi diantaranya merubah ukuran, mewarnai dan mengoptimalkan file. Caranya mudah, tinggal upload file yang anda inginkan, dan buat efeknya secara online. GIFWorks website meskipun tampilannya terasa kuno, tetapi memilik aplikasi yang sangat membantu kita membuat animasi secara mudah dan cepat.
GIFMake memiliki aplikasi GIF image generator, anda dapat mengupload beberapa foto dan secara otomatis GIF akan menjadikannya slide dengan jeda waktu yang dapat anda atur.
Loogix membantu anda dalam membuat animasi GIF, Loogix memiliki beberapa efek yang menarik diantaranya Zoom, Recursion, Motley, Swirl. BlackWhite, Painting, Blur. Anda ingin membuat avatar dengan animasi GIF? sangat tepat apabila anda memanfaatkan Loogix.
Gickr dapat membuat animasi GIF yang keren dan lucu, kartun, banner, dan lain sebagainya. Anda dapat mengirimkan gambar itu ke social bookmarking seperti MySpace, Bebo, Hi5, dan lainnya.
Make A GIF satu lagi aplikasi GIF animasi generator, anda dapat langsung mengupload 12 gambar sekaligus untuk dijadikan efek animasi, misalnya efek slideshow. Terdapat pula setting kecepatan animasi dan memperkecil gambar untuk dijadikan buddy icon/avatar.

Dengan berbagai perangkat online diatas, kita dapat membuat animasi secara instant untuk digunakan dalam kerperluan sehari-hari di website kita masing-masing, diantaranya sebagai banner animasi, ucapan selamat, avatar, foto gallery, dan masih banyak lainnya.

Ada juga pembuat file ber-ekstensi GIF yang mudah dan dapat kita instal di komputer. Filenya bisa kalian Download di sini Gif Animator Maker

Selamat mencoba.

Tips Membuat gambar Berjatuhan (falling snow effect)

Tips Membuat gambar Berjatuhan ini memiliki kelebihan dimana kita dapat mengubah gambar untuk falling effect-nya sesuai yang kita inginkan. Kita juga dapat mengatur tingkat kecepatan dan banyaknya gambar yang jatuh (falling snow) sesuai yang kita mau
ika sobat blogger tertarik untuk membuat falling snow ini, kamu bisa mengikuti langkah-langkah berikut:

* Login ke akun blogger kamu.
* Dari halaman Dashboard, pilih Tata Letak lalu pilih Edit HTML.
* Kopikan script di bawah ini dan letakkan (paste) di bawah kode <head> (yang letaknya di awal-awal script template blog).

<script language='JavaScript'>
var no = 7;
var speed = 5;
var snowflake = "http://i634.photobucket.com/albums/uu66/oktri_2009/kampret.gif";
</script>
<script language='JavaScript' src='http://sites.google.com/site/ruangsc/enes/fallinsnow.js'/>

* Kamu bisa mengganti gambar yang jatuh (var snowflake) dengan gambar yang kamu inginkan. Kamu juga bisa mengatur banyaknya gambar (var no) dan tingkat kecepatan (var speed) sesuai keinginan kamu.
* Lakukan Pratinjau (Preview) sebelum menyimpan template kamu.
* Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...

Nah, mudah sekali kan? , selamat mencoba...

Cara Membuat Efek Bubble 'Gelembung' Pada Cursor

Pada postingan sebelumnya pernah saya membahas tentang membuat "Kursor Selallu diikuti text", , "Tanggal dan Jam Mengikuti Mouse/Kursor" dan masih banyak lagi tutorial yang sudah saya posting yang berkaitan dengan masalah Kursor/Cursor.

Nah, mungkin tutorial kali ini yang akan saya bahas beda dengan tutorial kursor sebelumnya yaitu cara membuat "Bubble Cursor Efect". Effek Bubble Kursor adalah bila kita menggerakkan mouse pada halaman blog kita maka akan keluar dari Kursor beberapa gelembung, yang tadinya kecil hingga membesar. Dan makin sering kita menggerakan Kursor makin banyak gelembungan (bubble) yang berterbangan di halaman blog kita.

OK. Kalau sobat berminta dan ingin memasangnya di blog masing-masing silahkan ikuti langkah-langkah berikut.

   1. Seperti biasa LogIn ke Blogger sobat
   2. Pada halaman Dasbor klik Rancangan
   3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget,

4. Pilih yang HTML/Javascript

4. Copy dan Paste Kode Bubble Kursor Efeck di bawah ini di ktak HTML/Javascript

PERINGATAN!!
Kode yang berwarna merah adalah warna Bubble silahkan sobat ganti dengan warna kesukaan sobat, untuk bantuan kode warna silahkan klik disini.
Kode yang berwarna kuning adalah jumlah Bubble yang akan kita pasang. Sobat boleh menggantinya mau seberapa banyak Bubble yang akan di tampilkan

5. Setelah semua langkah langkah selesai. Klik tombol SIMPAN, dan lihat hasilnya.

Selamat mencoba mudah-mudahan berhasil dan dapat bermanfaat, Amiin.

Cara Bikin Float Gambar Pada Blog

Pada tutorial Blogg kali ini saya berbgai tips Cara Bikin Float Gambar Pada Blog,Pada Aeal nya Saya tertarik dengan dengan float image yang pernah saya lihat di blog-blog atau forum untuk di pasang di blog saya. setelah mencari di google saya menemukan script floating dari dynamic drive, dan Sebelum nya saya Ucapkan kepada teman Blogger saya Mas Arifin yang telah berbagi Tutorial ini ,

Saya Akan Langsung Memulai Topik Kita..Baiklah Sobat Hanya Mengikuti Langkah Berikut :

1. Login Ke Akun Blog Sobat
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<style type="text/css">

#topbar{
background-color:#61380B;
position:absolute;
visibility:hidden;
z-index:100;
border:2px
#FFFFFF groove;
-moz-border-radius:8px;
padding-top:6px;
padding-left:1px;
padding-bottom:3px;
padding-right:1px;
-moz-opacity:0.63;
filter:alpha(opacity=63);opacity:0.63;
}
#topbar a img{
color:transparent;text-decoration:none;border:none;
}
</style>

<script language="javascript">

/***************************************************************
* Floating Top Bar script - Dynamic Drive (http://www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* Simplified Floating by !CrazyDavinci! (http://crazydavinci.net)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***************************************************************/
startX = parseInt(screen.width/2)+500;startY = parseInt(screen.height/2)-110
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function staticbar(){
ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
d = document;
el= d.getElementById("topbar");
barheight= el.offsetHeight;
function ml(id){
el.style.cssText="visibility:visible;width:75px";if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.x = startX;el.y -= startY;return el;
}
window.stayTopright=function(){
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopright()", 10);
}
ftlObj = ml("topbar");stayTopright();
}
if (window.addEventListener) window.addEventListener("load", staticbar, false);
else if (window.attachEvent) window.attachEvent("onload", staticbar);
else if (document.getElementById) window.onload=staticbar </script>

<div id ="topbar" align="center">
<a href="KASIH ALAMAT BLOG YANG ANDA INGINKAN" target="_blank">
<img src="KASIH ALAMAT GAMBAR YANG DI INGINKAN " width="70px" /></a><blink><font face="Times New Roman" size="2,8" color="#FF0000"><br />About Me<br /></font></blink></div>

Ket :
Url Ini KASIH ALAMAT BLOG YANG ANDA INGINKAN, merupakan letak dimana ABOUT ME diletakkan silahkan isi alamat URL yang sobat inginkan
untuk yg ini KASIH ALAMAT GAMBAR YANG DI INGINKAN merupakan URL gambar jadi isikan URL gambar yang sobat inginkan

7. Klik Simpan
8. Selesai

Selamat Mencoba

TUTORIAL BLOG

Cara Menampilkan Hanya Judul Postingan di Halaman Depan Blog dengan Css

Accesoris Blog, Tips Blogger 00:24

Hello Oktri Blog, Pada Postingan sebelumnya Cara Menampilkan Hanya Judul Artikel Pada Halaman Depan Blog , Beda nya Tutorial ini dengan sebelumnya yakni menggunkan kode css.Bagi Anda yang mempunyai artikel panjang dan selalu memenuhi halaman depan blog, mungkin sudah saatnya sekarang Anda menambahkan kodeCSS di blog. Kode ini berfungsi Hanya Menampilkan Judul Postingan Di Halaman Depan Blog, sehingga akan menambah efisiensi dalam menggunakan halaman depan blog Anda. Sebagai contoh ketika pengunjung meng-klik menu HOME blog apakah semua artikel dapat termuat dalam satu layar penuh? pasti tidak bukan walaupun sudah menambahkan Read More. Bagi yang berminat yuk baca lebih lanjut.

Kode CSS yang dipakai adalah sebagai berikut :

Note : Pada teks yang berwarna silahkan sesuaikan dengan selera Anda

Cara Pemasangannya
1. Login ke blogger -> Rancangan -> Edit HTML
2. Silahkan Copy kode diatas dan Paste tepat diatas kode </head> kemudian simpan atau pratinjau apa sudah benar apa belum. Selesai

Gimana, lebih efisien bukan pemakaian halaman depan blog Anda, semoga bermanfaat. Salam....