Selasa, 14 Juni 2011

Cara buat dan Pasang Banner Flash di Blog

Cara Pasang Iklan di samping Artikel | Otomatis

Cara Pasang Iklan di samping Artikel | Otomatis



Cara Pasang Iklan | Adsense Pada Kiri atau Kanan Artikel untuk Blogspot secara Otomatis
COntoh Pada Iklan Disamping ARtikel ini.
Sebenarnya cara ini sudah tidak asing Lagi, Namun ada saja beberapa Sobat yang bertanya Langsung lewat YM pada saya. Diminta Cari di google malah bilang " Waduh Caranya sulit dimengerti bagi kami yang Newbie Gun, dan Lebih Mudah dimengerti Jika Agan yang Posting dan cara menjelaskannya sangat Cocok untuk Pemula".
Ha..ha.. Jadi tersanjung Padahal sama-sama Newbie, Inilah untungnya jadi Newbie seperti saya, Jadi Tahu juga keinginan teman-teman baru.
Oh ya Lanjut Ke Topik, Memang diakui Tampilan Iklan yang menempel langsung Pada Artikel baik itu disisi kiri atau Kanannya akan membuat Artikel dan Iklan tersebut Tampil Dinamis dan Elegan ( cuittttt ).Nah Sobat Pecinta Blogspot kini tidak kalah dengan Sobat Pengguna Wordpress. Keuntungan Lain memasang iklan seperti ini yakni, kemungkinan besar iklan untuk di Klik persentasenya agak Besar ketimbang taruh iklan di bawah Artikel.
Baiklah Mari Kita Mulai
Pertama
Seperti biasa Loginlah ke Account Blogger Masing-masing
Kedua
Silahkan Menuju Racangan Lalu Klik Edit HTML
Ketiga
Ingat setiap Edit HTML jangan pernah Lupa Untuk Download Template Lengkap Untuk Menjaga Kesalahan.
Sekarang silahkan Centang Expand Template Widget
Cara Pasang Iklan di samping Artikel
Keempat
Tekan Ctrl + F lalu Cari Kode berikut
<div class='post-header-line-1'/>
Kelima
Setelah Ketemu Silahkan Masukkan Kode berikut ini Dibawahnya
<div style="width: 600px;">
<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">
Kode Iklan Anda disini
</div></div>
Masukkan Kode Iklan yang diberikan PPC pada Petunjuk yang dimaksud,
PERHATIAN :
Sebelum Memasukkan KODE Pada HTML jangan Lupa Di Parse dulu, Tempat Parse Kode disini : www.blogcrowds.com

Caranya Copy Seluruh Kode lalu Pastekan di Parse HTML lalu Klik Parse
Nah Hasil Parse inilah Yang Anda Letakkan dibawah <div class='post-header-line-1'/>
Sehingga Hasilnya Seperti ini :
<div class='post-header-line-1'/>
<div style="width: 600px;">
<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">
Kode Iklan Anda disini
</div></div>
Keenam
Sekarang Silahkan disimpan dan Lihat Hasilnya
Catatan :
Sobat Harus Sesuaikan Lebar kolom Artikel Agar terlihat Stabil dengan Mengubah Kode berikut :
<div style="width: 600px;">
<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">

Width : 600 px bisa Sobat Ubah dengan Lebar Kolom Posting Masing2
Jika Iklan Ingin Ditampilkan di Kiri Artikel Tinggal Ganti right dengan Left
Cara ini Tidak disarankan Untuk PPC dari Kumpul Blogger, karena Tampilan Iklannya kurang dinamis.
Semoga Bermanfaat

Cara pasang iklan di samping kiri | kanan Blog | Melayang

Cara pasang iklan di samping kiri | kanan Blog | Melayang



Cara Pasang iklan si sisi kiri atau kanan Blog berikut ini sebenarnya sudah banyak sahabat blogger lain yang telah memberikan tutorialnya, namun entah kenapa Masih banyak Juga Sahabat Kumpulancara yang menanyakan ini. Cara Pasang Iklan di Blog-pun ada berbagai Cara al :







Cara Pasang Iklan di samping kiri | Kanan Artikel
Cara Pasang Iklan di Atas artikel | dibawah Header
Cara Pasang Iklan Popup | Melayang | Tutup Buka
Cara Pasang Iklan di Bawah Artikel
Cara Pasang Iklan di Tengah Artikel


Dari Berbagai Cara Pasang Iklan diatas, kira-kira menurut Sobat Mana yang Lebih Keren dan Menghasilkan Klik Tertinggi dan tidak Melanggar TOS dari Pemilik Iklan Seperti : Google Adsense, Kumpul Blogger, Adsensecamp dan lain sebagainya.
Menurut Hasil Uji Coba Kumpulancara.com beberapa bulan Terakhir dan mencoba Utak atik sendiri Tempat meletakkan Iklan tanpa Kena Teguran Terutama Oleh GA, Akhirnya ternyata yang memiliki Klik Tertinggi Yakni Dengan Pasang Iklan di sisi Kanan Blog secara Menggantung | melayang Tepatnya di sisi Scroll Layar Monitor Sobat.

Beberapa Sobat Blogger lain telah menulis jika Klik tertinggi dengan memasang iklan dengan cara Popup | Tutup Buka Melayang, Namun sayang cara ini sangat tidak Dibolehkan Oleh GA pada TOS yang sudah ditentukan, jika Ngeyel maka siap-siaplah di PHK. Juga dengan cara ini membuat Blog jadi Berat dan kadang membuat Pengunjung Anda Kesal lalu Malas balik berkunjung.

Baiklah Maaf Jika terlalu Banyak Basa basi Mari kita Mulai.
Langkah-langkah
Pertama :
Silahkan Login Seperti biasa Ke Account Blogger Masing-masing

Kedua
Silahkan SObat masuk Ke menu RANCANGAN lalu Klik EDIT HTML

Ketiga
Download Template sobat dulu untuk menjaga Kesalahan

Keempat
Silahkan Cari Code ]]></b:skin>
Untuk mudahnya Copy kode diatas dan Klik CTRL + F lalu paste

Kelima
Setelah Ketemu Silahkan Sobat Letakkan code ini Tepat Diatas code ]]></b:skin>
Ini codenya :
#trik_pojok {
position:fixed;_position:absolute;top:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan :
Text yang berwarna biru adalah posisi Iklan, kalau mau merubah posisi text rightdiganti dengan text Left. Kemudian text top di ganti dengan text bottom
Karena Ukuran banner iklan yang akan kita Pasang yakni 120 x 600, maka sebaiknya Jangan Merubah nilai Top dan Bottom. Jika ingin merubah Posisi iklan Ubah saja Right dengan Left

Keenam
Sekarang Sobat silahkan Cari code ini : </body>
Setelah Ketemu Silahkan Pasang code Berikut diatas </body>
Ini codenya
<div id="trik_pojok">
Pasang Kode Iklan sobat yg berukuran 120 x 600 disini!!!
</div>

Ketujuh:
Klik Simpan

CATATAN :
Ingat!! Iklan Yang cocok untuk Cara ini yakni Iklan berukuran 120 x 600, Utamakan yang berbentuk Banner bukan yang Teks. Karena jika selain Ukuran tersebut maka Blog Sobat Ketutup Iklan

Terakhir
Apakah Cara ini Dilarang Oleh TOS Google Adsense?
Setelah saya Ubek-ubek semua Tos, Alhamdulillah Cara ini Belum Masuk Kategori Yang Terlarang.
Namun Jika ada SObat Pengguna GA yang ketemu SIlahkan Komentar untuk Bantuannya, agar Kita Aman-aman saja bermain GA
Semoga Bermanfaat

Cara membuat slideshow di blog

Cara membuat slideshow di blog



Ada banyak cara untuk membuat slide show di blog, seperti menggunakan javascript, menggunakan widget slideshow blogger, ataupun bisa dengan mengunakan layanan pihak ketiga. Dalam postingan ini kita mencoba membuat gambar dalam bentuk slide show, bergerak acak (random), dan berbagai efek-efek lainnya. Ada sebuah situs yang menyediakan layanan gratisan, yang bisa anda manfaatkan untuk membuat slide show gambar atau foto, kemudian kodenya bisa anda pasang di blog anda, atau dipasang di dalam postingan, di sidebar blog, header atau di footer blog anda. Slide show ini bisa anda terapkan pada gambar kesayangan, foto pribadi, atau koleksi foto dan gambar lainnya.

Untuk membuat slideshow di blog, prosedur yang harus anda lakukan:

1. Buka situs slideshow
Jika belum terdaftar (belum punya akun) klik tombol sign up untuk daftar dan isi form pendaftaran, jika sudah punya bisa langsung klik tombol Sign in

2.Setelah login , klik Create a slideshow atau klik icon Ctreate slideshow






3. Pada tampilan berikut, klik browse untuk memilih file gambar atau foto yang akan di upload



4. Pilih gambar yang ada
Klik Open

6. Lakukan langkah di atas hingga semua gambar ter-upload

7. Anda bisa mengatur style (efek / animasi slideshow)


8. Kemudian atur ukuran  widget slideshow yang akan dibuat:
width : lebar widget , height ; tinggi widget dalam satuan pixel (atur sesuai kebutuhan)
Ada beberapa option lain yang bisa anda atur seperti skin, themes, music/video,background
Klik update setelah selesai melakukan pengaturan
Jika suatu saat anda ingin mengubah efek slideshow anda bisa login ke akun slideshow, kemudian pilih edit slideshow.

9. pada halaman berikut pilih tombol  save slideshow




10. Anda akan mendapatkan kode yang bisa dipasang di blog



11. Login ke dashboard blogger
Pilih tata letak , pilih elemen halaman
Pilih tambah gadget, pilih HTML/Javascript
Masukkan kode yang anda peroleh dari situs slideshow





Hasilnya bisa dilihat seperti pada blog  Slide Show atau contoh lain dengan efek yang beda pada blog membuat slideshow di blog

Beberapa postingan lain yang membahas tentang panduan membuat blog bisa dilihat disini cara membuat blog

Senin, 13 Juni 2011

Menambah Code Efek Hujan Salju Di Blog Tanpa Menggunakan Image

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

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:
  1. Klik http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini:
  2. Pilih Background Theme sesuai dengan preferensi kita;
  3. 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.
  4. Pilihlah salah satu ucapan selamat datang di kolom Online Greeting, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
  5. 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.
  6. Contrenglah opsi Require visitors to enter Nickname to send IM agar setiap orang yang mengirim pesan ke kita diwajibkan mengisikan nama aliasnya (nick name);
  7. 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.
  8. Tekan tombol Save;
  9. Akan muncul windows bar. Masukanlah Yahoo! ID dan passwordnya, lalu tekan tombol Sign In. Windows itu akan menutup sendiri.
  10. 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.
  11. Tentukan ukuran kotak yang kita inginkan. Sangat disarankan untuk memilih opsi Recommended.
  12. Tekan tombol Copy to clippboard.
Tahapan selanjutnya Cara Pasang Yahoo Messenger (YM) di Blogger, langkah-langkahnya sebagai berikut:
  1. Login ke Blogspot Anda => klik Rancangan/Design => Tambah/Add Gadget => pilih HTML/JavaScript atau baca Cara Pasang dan Hapus Widget Blog di Blogspot;
  2. Setelah terbuka halaman baru, pada kolom Judul, tulislah Judul yang kita mau, misal: CHATBOX.
  3. 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;
  4. 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

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 :



  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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 (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


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

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://ade-tea.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>





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

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 :



<style type='text/css'>


<b:if cond='data:blog.url == data:blog.homepageUrl'>


.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}


.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}


.post h3 strong, .post h3 a:hover {color:#333333;}


.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}


</b:if>
//edit by http://wwwoktri.co.cc/
</style>







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....