Jumat, 28 Desember 2012

"Cara Menambahkan Animasi Bergerak Mengikuti Cursor Pada Sidebar Blog"


Ini Tutorial baru lagi!!! hehehe.. Kali Ini tutorialnya adalah Cara Menambahkan Animasi Bergerak Mengikuti Cursor. 
Kalau Mau.... mmmm ntar aku ajarin, padahal sih tekniknya sama! mungkin ada yang masih kurang paham! oke... caranyaaa .... dilaht selengkapnya duluuu (Ikuti Step)

1.  masuk atau login ke blog kalian.

2. klik Tata Letak



3. Klik Tambah Gadget.




4. pilih HTML/JAVA SCRIPT

5. Copy paste code jenis animasi yang kalian mau, pilihnya di bawah nanti ya. (boleh gak pake judul)



6. Lalu Klik save!!!

Sekarang!!!! kalian Pilih ya...... (maaf tidak ada gambarnya)


ini code script widget animasi hamster yang bergerak mengikuti arah mouse untuk blogger .. silakan copas :


<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a>





ini code script widget animasi laba-laba yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :



<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara laba-laba kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara laba-laba kaya gini"></a>

_________________________________________________________________________________

Nah kalo yang ini lebih asik lagi nih!!!!
kita di ibaratkan melihara anjing hidup di blog .. yang bisa kalian beri makan, kalian latih, dan ada kamera untuk mengawasinya...



dan ini code script widget animasi anjing yang bergerak mengikuti arah mouse dan bagaikan pelihara anjing di blog untuk blogger  .. silakan copas :




<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara anjing kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara anjing kaya gini"></a>



Animasi pinguin mengikuti arah Cursor Mouse
                                         
dan ini code script widget animasi pinguin yang bergerak mengikuti arah mouse dan bagaikan pelihara pinguin di blog untuk blogger .. silakan copas :



<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?" width="300" height="200"><param name="movie" value="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a>



                                           
Animasi Permainan Lempar, Tangkap & Gelinding Bola : mengikuti berjalan sesuai gerakan bola yang kita atur



<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau bola aneh kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://ballclockgadget.googlecode.com/svn/trunk/ballClock.swf?" width="300" height="220"><param name="movie" value="http://ballclockgadget.googlecode.com/svn/trunk/ballClock.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau bola aneh kaya gini"></a>


Animasi Ikan Pari Mengikuti Arah Cursor Mouse.                                   


<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara paus mengikuti mouse kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://stingraygadget.googlecode.com/svn/trunk/stingray.swf?" width="300" height="200"><param name="movie" value="http://stingraygadget.googlecode.com/svn/trunk/stingray.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara paus mengikuti mouse kaya gini"></a>


                                        
Animasi ..... (gak tau namanya! pokoknya dia itu bisa kita gerakan kalau kita atur pakai Mouse, nanti dia akan turun naik turun naik, saling memukul dengan benda di sebelahnya)

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau punya bola mengikuti mouse kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/newtonsCradle.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/newtonsCradle.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau punya bola mengikuti mouse kaya gini"></a>

________________________________________________________________________________                                        
Animasi Kura kura mengikuti cursor + Beri makan.

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara kura-kura mengikuti mouse kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a>



bagaimana ??? kalian mau pilih yang mana ??? tinggal copas aja ..

"Wassalamualaikum"
Diposting oleh di Tidak ada komentar:

Membuat Text Membersar Apabila Cursor Menyentuh Link

 COPAS Boleh, tapi Sertakan Credit by http://farahtutorial.blogspot.com/ di awal Post

Apabila cursor menyentuh link, tulisan akan "zoom in". Ikuti tutorial di bawah untuk cara mengaplikasikan tutorial ini.... PASTI KALIAN Kepengen tau kan???? hahaha langsung aja!!! yokkk (Ikuti Step)

1) Sign in akun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode. 

a:hover
4) Kemudian copy kode di bawah, dan paste di Bawah kode a:hover yang Kalian cari tadi.
font-size: 22px;font-weight: bold;text-decoration: none;}
22 adalah angka saiz font yang membesar, ganti dengan angka yang kalian mau.

Contoh:
a:hover

font-size: 23px;font-weight: bold;text-decoration: none;}
5) selesai, klik preview, dan jika tidak ada error, klik save template dan lihat hasilnya.

Selamat mencoba! :)

Diposting oleh di Tidak ada komentar:

"Cara Menambahkan Icon di Samping Entri Posting Pada Blog"


hai!!!!!, Sebelumnya ini aku copast dari "Jom Bina Belog (Tutorial Bina Blog)" ntar link blog-nya aku tulis ya dibawah :) Ada yang tahu gak maksud aku dari judul Tutorial kali ini??? hahahha maksudnya ini lho!!!

udah ngerti kan??? OK Mau kayak gitu? Langsung aja yokkk!!! (Ikuti Step)

1) Sign in akun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode ini

<li><a expr:href='data:i.url'><data:i.title/></a></li>

4) Masukkan kode di bawah di antara kode  <li> dan <a expr:href='data:i.url'><data:i.title/></a></li> yang korang cari tadi :
<img src='url icon'/>

contoh :
<li><img src='url icon'/><a expr:href='data:i.url'><data:i.title/></a></li>

5) Ganti tulisan URL ICON Dengan salah satu Link yang ada di sini (Pilih Salah Satu)

http://dl8.glitter-graphics.net/pub/1008/1008838wybxuht5da.gif


http://dl4.glitter-graphics.net/pub/1009/1009254cq7evun01h.gif


http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif

http://dl2.glitter-graphics.net/pub/436/436032x06lk4lcqb.gif



http://dl9.glitter-graphics.net/pub/438/438969azkmwb42oa.gif

http://dl4.glitter-graphics.net/pub/1008/1008954qqr71dvokd.gif


5) Save Tempalte ==> Tunggu ==> Close.

Selamat mencoba! :)
"Wassalamualaikum"

credit : jombinabelog
Diposting oleh di Tidak ada komentar:

"Cara Mengganti Reply Comment Menjadi Icon Pada Blog"

Kalian semua pasti udah tahu dengan yang namanya Reply Comment kan? biasanya itu untuk mrngulang Comment jika ada kesalahan mengetik dan  bla bla bla, oke... kalau biasanya hanya Relpy Commentnya sederhana?! tapi yang ini bisa diganti dengan Icon Icon lho!!! naaah! yang pasti aku gak make :D Kepenuhan! hahah. oke mau gak? oke langsung aja (Ikuti Step)

1. Buka Blogger.

2. Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates".

3. Cari kode ini.

 <b:include data='comment' name='commentDeleteIcon'/>


4. Jika sudah ketemu, Taruh Code ini di bawah <b:include data='comment' name='commentDeleteIcon'/> tadi. Tapi beri jarak satu garis.


<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG KALIAN&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='Reply To This Comment' src='URL BUTTON REPLY KALIAN/></a></span> 

5.  Ganti tulisan ID BLOG KALIAN Dengan ID BLOG Kalian! hahah. mmmm cara melihatnya itu kalian harus pergi ke Tata Letak BLOG Kalian! nanti ada ID BLOG Kalian!.

6. Ganti tulisan URL BUTTON REPLY KALIAN dengan URL BUTTON REPLY yang kalian mau, bisa dilpilih di bawah ini. pilih salah satu ya...

http://img444.imageshack.us/img444/3084/replybuttonred.png


http://img269.imageshack.us/img269/6203/replybuttonpurple.png


http://img21.imageshack.us/img21/1659/replybuttongreen.png


http://img692.imageshack.us/img692/5678/replybuttonblue.png

http://img824.imageshack.us/img824/2202/84379010.png


http://img688.imageshack.us/img688/2853/90595834.png


http://img843.imageshack.us/img843/7505/80872001.png


http://img828.imageshack.us/img828/9420/87249541.png

http://img641.imageshack.us/img641/9880/68119496.png


http://img263.imageshack.us/img263/9234/61790744.png

 7. Jika sudah dipilih... Klik Simpan Perubahan ==> Tunggu hingga loading selesai ==> Klik Tutup.

Tadaaaaammm!!!!!! Gimana??? semoga bermanfaat ya ^^

"Wassalamualaikum"
Diposting oleh di Tidak ada komentar:

"Cara Menambahkan Sweet Tooltips ke Dalam Blog"


Kalian tau gak maksudnya Sweet ToolTips itu? biasanya... Kalau kita KLIK Link di Blog itu! akan muncul seperti Kotak! warnanya kotak itu bermacam macam, Untuk lebih jelas.... kalian bisa lihat di Blogku, kalian Letakan Cursor kalian di atas Link yang ada di Blogku contohnya Link "List of Tutorials", nah!!! kan di bawahnya itu ada daftar daftar, itu adalah Link, kalian bisa letakan Cursor kalian di sana, maka hasilnya akan ada kayak Kotak gitu kan, kebanyakan sih orang tertarik! apakah kalian tertarik? mau gak kalau itu kita masukan ke dalam Blog kalian? oke!!! beneran ya??? hihi (Ikuti Step).

1. Buka Blogger.

2. Klik Template ==> Edit HTML ==> Klik di Expand Tempalte.

3. Cari Code Ini.
 </head>  

4. Jika sudah ketemu!!! !pilih salah satu Code di bawah ini! lalu letakan persis di bawah Code </head> tadi ya... ^^

Pilih!!!!.


Pink:

 <link href='https://sites.google.com/site/jombinabelogsweettooltips/pink.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Blue:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/blue.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Orange:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/orange.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Green:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/green.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Purple:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/purple.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Black:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/black.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>
5. Jika sudah.... Klik Simpan Pengaturan ==> Tunggu hingga selesai ==> Klik Tutup

Selamat Mencoba ^^

"Wassalamualaikum" 
Diposting oleh di Tidak ada komentar:

Membuat Text Link Menjadi Miring

COPAS Boleh, tapi Sertakan Credit by http://farahtutorial.blogspot.com/ di awal Post

Kalo sebelumnya Textnya bergeser/membesar.... sekarang Textnya menjadi miring!!! hayo gimana tuh!!! mau tahu caranya gak??? OK Langsung aja yokkk (Ikuti Step). 

 1) Sign in akun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode ini.

a:hover {
4) Kemudian copy paste kode di bawah kode a:hover { yang kalian cari tadi :
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

contoh:
 a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

5) Sekali lagi, dengan menggunakan ctrl + F, cari kode di bawah tadi :
a:link {
6) Kemudian copy paste kodee di bawah kode a:link { tadi :
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
Contoh:
 a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
7) Klik preview, jika gak ada error, klik save dan lihat hasilnya.

Selamat mencoba! :)


"Wassalamualaikum"
Diposting oleh di Tidak ada komentar:

Membuat Scrolling Text Pada Blog

COPAS Boleh, tapi Sertakan Credit by http://farahtutorial.blogspot.com/ di awal Post

Hai semua!!! ^^ Hahahaha sudah brapa banyak ya tutorialku?? mmm padahal masih banyak lho! tapi ternyata.. Experimen gagal huhuhu!!! jadi hanya sedikit yang aku kasih, oke.... kali ini Tutorialnya adalah Cara Membuat Scrolling Text Pada Blog. maksudnya Scrolling Text ini adalah... Textnya akan bergerak dari kanan, kiri, atas & bawah. waw!!!! tapi aku malas nambahinnya! :D hihihi sudah tahu penyebabnya bukan? karena.... kepenuhan! hahahaha. mau gak ini tutorialnya aku kasih ke kalian??? OK langsung aja (Ikuti Step).

1. Buka Blogger.

2. Klik Tata Letak.

3. Tambah Gadget ==> Cari HTML/JavaScript.

4. Copast LINK Ini. Pilih salah satu

Direction text - kanan:

<marquee bgcolor="#FFFFFF" direction="right" >Text bergerak</marquee>
Direction text - kiri:
<marquee bgcolor="#FFFFFF" direction="left" >Text bergerak</marquee>
Direction text - atas:
<marquee bgcolor="#FFFFFF" direction="up" >Text bergerak</marquee>
Direction text - bawah:
<marquee bgcolor="#FFFFFF" direction="down" >Text bergerak</marquee>
5. Ubah ubah dulu sedikit...

Text bergerak -  gantikan dengan kata kata yang kalian mau
FFFFFF - gantikan dengan warna background text yang kalian mau. Pilih kode warna di sini

6. Simpan ==> Simpan Perubahan.

Selesai! Selamat mencoba ya ^^!!!! Semoga berhasil...

"Wassalamualaikum"
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)