Selasa, 21 Januari 2014

Bermacam-Macam Jam Animasi Untuk Blog

Langsung yaaaa..!!!

Caranya :

1. Masuk ke Dasbor
2. Pilih Tata Letak
3. Tambah Gadget / Add as Target
4. Pilih HTML/Java Script

Ni kode beserta contoh jamnya


Jam Analog


<embed src=http://fc02.deviantart.com/fs48/f/2009/196/1/3/appleanalogclock_by_blogclocks.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=120 height=140 wmode=transparent></embed>


Jam Digital

<embed src=http://fc08.deviantart.com/fs49/f/2009/196/a/7/appledigitalclock_by_blogclocks.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=120 height=140 wmode=transparent></embed>

Jam Spongebob

<embed src=http://fc01.deviantart.com/fs45/f/2009/139/2/6/Spongebob_Clock_by_blogclocks.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=150 height=127 wmode=transparent></embed>


Jam Orange Orange

Mmmm… kalo ini untuk yang suka dengan jam animasi dengan karakter ce pake jilbab :D
CopyPaste aja kodenya di bawah ini. Jangan lupa sebelum di-paste di blog Anda, ganti teks yang berwarna Merah dengan nama blog Anda (untuk penulisan nama blog yang ada spasinya, harus diganti dengan tanda +, misal nama blog : Ichal Blog, maka harus ditulis Ichal+Blog
Yuhu… met coba yak…
<embed src="http://www.geocities.com/unazzanu/aksesorisblog/jamanimasi/zawabloganimasi_1.swf?ygpunya=Ichal+Blog" menu="false" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer/"></embed>


Jam Animasi / Kucing Balon


No Image
<embed src="http://fwt.txdnl.com/5-10/z/a/zawa/aksesorisblog/zawabloglucu_2.swf" width="120" height="120" menu="false" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer/"></embed>


Jam Animasi / Kucing Cinta


No Image
<embed src="http://fwt.txdnl.com/5-10/z/a/zawa/aksesorisblog/zawabloglucu_1.swf" width="120" height="120" menu="false" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer/"></embed>



Baru!!!
Jam Animasi Lambang "GARUDA"


<p align="center"><embed menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" swliveconnect="true" quality="best" allowscriptaccess="sameDomain" loop="false" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" src="http://www.widgipedia.com/widgets/orido/Jam-Garuda-Indonesia-4639-8192_134217728.widget?__install_id=1248336094072&__view=expanded" height="205" type="application/x-shockwave-flash" width="205" wmode="transparent"> </embed></p>


Baru!!!
Jam Animasi Squidward


<embed src="http://fc03.deviantart.com/fs48/f/2009/189/1/e/clockwidget_by_blogclocks.swf?c=0x99e2ff&p=http%3A%2F%2Fi41%2Etinypic%2Ecom%2F11rydfq%2Ejpg&a=20&s=1&r=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="120" height="120" wmode="transparent"></embed>


Kode Widget Jam dengan Animasi bagian 1
<div class="noop-clock"><center><embed height="140" src="http://www.hitarek.com/clock/clock24-6.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="210"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 2
<div class="noop-clock"><center><!-- hitarek.com --><embed width="210" src="http://www.hitarek.com/clock/clock24-2.swf?TimeZone=IST&Place=&" height="140" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 3
<div class="noop-clock"><center><!-- hitarek.com --><embed width="120" src="http://www.hitarek.com/clock/clock5-1.swf?TimeZone=IST&Place=&" height="230" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 4
<div class="noop-clock"><center><embed height="230" src="http://www.hitarek.com/clock/clock5-2.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="120" wmode="transparent"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 5
<div class="noop-clock"> <center><iframe allowtransparency="true" frameborder="0" height="148" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.hitarek.com/animation/dolls5.html" vspace="0" width="100"></iframe></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center>


Kode Widget Jam dengan Animasi bagian 6
<div class="noop-clock"> <center><!-- hitarek.com --><embed width="130" src="http://www.hitarek.com/clock/clock11-4.swf?TimeZone=IST&Place=&" height="130" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 7
<div class="noop-clock"> <center><!-- hitarek.com --><embed width="160" src="http://www.hitarek.com/clock/clock25-9.swf?TimeZone=IST&Place=&" height="160" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 8
<div class="noop-clock"> <center><!-- hitarek.com --><embed width="140" src="http://www.hitarek.com/clock/clock22-5.swf?TimeZone=IST&Place=&" height="180" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>


Kode Widget Jam dengan Animasi bagian 9
<div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object> </div>


Kode Widget Jam dengan Animasi bagian 10
<div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object></div>


Kode Widget Jam dengan Animasi bagian 11
<div class="noop-clock"> <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div>


Kode Widget Jam dengan Animasi bagian 12
<div class="noop-clock"> <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div>


Kode Widget Jam dengan Animasi bagian 13
<div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object> </div>



Kalau sobat blogger ingin sedikit memodifikasi letak dari widget jam tersebut, coba masukkan kode berikut SETELAH kode jam:
<style type="text/css">.noop-clock { position: fixed; right: 0%; top: 0%; padding: 3px 7px; box-shadow: -2px 2px 6px; }</style>
***Selamat Mencoba***

Minggu, 19 Januari 2014

Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML

 Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML - Hai sobat bloger. Selamat sore. Ngomong-ngomong, rasanya saya sudah lama tidak membuat postingan. Yap, jika sobat bertanya kenapa lama tidak buat postingan dikarnakan saya sibuk ujian akhir. Hari ini saya akan sempatkan untuk share beberapa artikel, salah satunya artikel mengenai Cara Mudah Membuat Social Media Share Tanpa Edit HTML. Buat sobat blogger yang sedang mencari-cari widget social media share, saya akan memberikan tutorial cara pembuatannya tanpa mengedit HTML yang ada di Template.


Untuk sobat blogger yang baru membuat blog, saya sarankan untuk menggunakan widget ini. Kenapa saya bilang begitu, karena menurut saya widget yang satu ini wajib untuk dimiliki dan dipasang di blog sobat untuk meningkatkan jumlah pengunjung blog sobat. Dengan menggunakan jasa jejaring sisial yang sedang populer saat ini bukan tidak mungkin kan untuk menambah jumlah pengunjung / visitor blog sobat. Selain untuk menambah jumlah pengunjung blog sobat, masih banyak kegunaan atau manfaat yang bisa sobat dapatkan dengan memasang widget ini. Untuk sobat yang ingin memasang widget ini di blog sobat, silahkan ikuti langkah-langkah yang saya buat berikut.


Masuk / Login ke akun blog sobat.
Pilih Tata Letak =>> Tambahkan Gedget.
Pilih HTML/Javascript.
Setelah itu sobat Copy kode dibawah ini dan Paste di kolom HTML/Javascript.


/*--------Touch Me Sharing Widget mari-berbagi244.blogspot.com Start ------*/

<style>

.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHs9XVefmQc_3sdjrxrozsSEVH5BC7SCPVM82oEOa-a-A_fQfZHUm_2_cr9VzGvY5PGYJT_DGjzpE6d_aE4IXsesg24I0liRG8XsP50UbXE_dpMn5qPLL7luC3gP9pGtKbjo_3aQ60HXE/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;

}

.touchme a.googleplus {
background-position: 0px -58px;

}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}


.touchme a.twitter {
background-position: 0px -290px;

}
.touchme a.twitter:hover {
background-position: 0px -232px;

}
.touchme a.facebook {
background-position: 0px -406px;

}
.touchme a.facebook:hover {
background-position: 0px -348px;

}


.touchme a.rss {
background-position: 0px -174px;

}
.touchme a.rss:hover {
background-position: 0px -116px;

}


</style>


<div class='touchme'>

<!--RSS-->
<a class='rss' href="Link RSS Sobat" target='_blank'></a>

<!--Google Plus-->
<a class='googleplus' href="Link Goggle Plus Sobat" target='_blank'></a>

<!--Facebook-->
<a class='facebook' href="Link FACEBOOK Sobat" target='_blank'></a>

<!-- Twitter -->
<a class='twitter' href="Link TWITTER Sobat" target='_blank' ></a>


</div>
/*--------Touch Me Sharing Widget mari-berbagi244.blogspot.com End ------*/


Silahkan sobat ganti tulisan yang berwarna Merah dengan Link Sosial Media sobat.
Kemudian Simpan HTML/Javascript.

Demikian tutorial Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML dari saya. Somoga artikel yang saya buat ini dapat berguna dan bermanfaat untuk sobat blogger yang membutuhkan. Jika sobat mengalami kesulitan dalam membuat widget ini, silahkan hubungin saya lewat kolom komentar dibawah atau lewat chatbox atau bisa juga kirim Email ke saya. Terima Kasih dan Salam Blogger.

Cara Mudah Membuat Slide Show Foto di Blog

 Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.

Selasa, 14 Januari 2014

Kumpulan Widget Animasi Yang Lucu dan Keren Untuk Blog

Cara Memasang Widget Animasi Yang Lucu dan Keren di Blog -
Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan , ternyata ada hal - hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya. Nah selain postingan, disain dan animasi / pernak - pernik blog ternyata dapat meningkatkan performa dari suatu blog.. ga percaya ? cobalah anda berkunjung kesuatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula . Pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain / animasi yang menarik itu bukan ? tentunya. Dan, memberikan efek animasi di blog itu ga sulit kok, dan pilihan animasinya pun beragam bergantung selera. . nah dibawah ini ada beberapa contoh widget animasinya. Kalo udah cocok, berikut langkahnya :

 Cara Memasang Widget Animasi Di Blog

1.Copy script yang ingin anda munculkan animasinya
2.Login ke Blog
3.Pilih Rancangan
4.Tambah gedget
5.Pilih edit html atau script,
6.Pastekan script tadi
7.Lalu save.. “pasti akan langsung  muncul animasi yang anda pilih tadi” 
selamat mencoba..
1.helicopter
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif"  alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
2. Ekspresi muka
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Ekspresi</a></center></small></div>
 
3. Kodok mata gede
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46606.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
4 Spiderman
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/3/th/312.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
5.Pig
 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
6. Muka senyum
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
7. monyet
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
 8.Doraemon
 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
9.Spongebob
 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
10.Panda
 
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
11.Monyet loncat
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
12.Anime cewek
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
13.Saringgan
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
14.Naruto berubah
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>
15.Gajah loncat
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-Animasi</a></center></small></div>
16. Lumba lumba
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>
17.Kucing tidur
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>
18.Ayam betelur
<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.cakrawaladunia.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget</a></center></small></div>
silahkan tinggalkan komentar anda..

Cara Membuat Efek Hati Bertaburan di Blog


Membuat Efek Hati Bertaburan di Blog
Ada yang hatinya sedang berbunga-bunga dan mengekspresikannya di blog? Tidak usah bingung untuk membuat efek hati bertaburan di blog personalmu. Kali ini Belajar Ngeblog di BLOG akan berbagi script memberikan efek hati berjatuhan di blog.

Sama seperti efek-efek bertaburan sebelumnya, seperti efek salju, efek bintang, dan efek gelembung. Untuk membuat efek ikon hati bertebaran di blog kita juga sama mudahnya, kita tinggal memasukkan script efek hati ke template blog kita.

Cara Membuat Efek Hati Bertaburan di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </body>
4. Taruh kode berikut di atasnya

<script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>

5. Simpan Template jika sudah selesai.

Bagaimana, mudah bukan untuk memberikan efek hati yang bertaburan di blog? Gambar-gambar hati berwarna merah muda akan menghiasi di blog kamu.

Rabu, 13 Maret 2013

Membuat Efek Daun Berguguran di Blog

Tip's n Trik Membuat Efek Daun Berguguran di Blog


Membuat Efek Daun Berguguran di Blog



Selalu saja ada berbagai macam efek menarik yang bisa kita tampilkan di blog, salah satunya yaitu membuat efek daun berguguran. Efek ini tentunya berbeda dari efek-efek sebelumnya karena pola jatuhnya daun berayun-ayun. Cara membuat efek ini sangat mudah, ikuti saja langkahnya dibawah ini:


1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML Javascript
4. Masukkan kode dibawah ini:



<script src='http://PRASTYPUNYA.BLOGSPOT.COM/files/daun.js'/></script>


5. Simpan gadjet lalu lihat hasilnya

MENAMBAH EFEK CURSORS / POINTERS PADA BLOG



Ingin kursor anda ada efek seperti gambar di atas? efek ini dapat menarik bagi pengunjung blog agar tidak bosan dengan blog yang begitu sederhana. Langsung saja berikut caranya: .....
  • Dari Home masuk ke Layout lalu add a gadget kemudian pilih HTML/javascript.
  • Copy kode di bawah ini:
------------------------------------------------------------------------------------------------------------ 
<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>
------------------------------------------------------------------------------------------------------------
  • Pastekan ke dalam tempat di ruangan HTML/javascript yang anda buka.
  • Save, dan lihatlah blog anda.