Cara Membuat Popular Posts Jadi Warna Warni di Blog

Cara Membuat Popular Posts Jadi Warna Warni

Posting ady kali ini membahas tentang widget blog. Yaitu Cara Membuat Popular Posts Jadi Warna Warni di Blog. Sedikit rincian widget ini, widget popular posts adalah widget yang sudah disediakn oleh pihak blogger. Cara mendapatkan widget ini dengan menuju ke tata letak dan klik tambahkan gadget lalu muncul jendela baru dan klik popular posts. Tapi sungguh di sayangkan widget ini mempunyai tampilan yang monoton. Nah, untuk itu ady ingin memberikan sedikit tips untuk mempercantik tampilan widget tersebut.
Berikut tutorialnya: 

1. Menuju Tata Letak dan Tambahkan Gadget dan pilih HTML/Java Script
2. Nama cukup dikosongkan saja lalu copy kode ini dikolom yang sudah disediakan. Klik Select All dan CTRL+C.

<style type='text/css'>/*----- POPULAR POST WARNA WARNI -----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li+ li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px} </style>

3. Klik Simpan.

Untuk mengkonfigurasi alias menambahkan gambar tinggal klik edit pada gadget Popular Posts dan centang thumbnail gambar dan setting juga cuplikannya berapa artikel yang ingin di tampilkan. Mungkin sekian tutorial Cara Membuat Popular Posts Jadi Warna Warni di Blog.

Selamat Mencoba, Good Luck !!!

Baca Selengkapnya - Cara Membuat Popular Posts Jadi Warna Warni di Blog

Cara Mengetahui Loading Blog Berat Atau Tidak

Loading Ketik Alamat Blog Sobat

KETERANGAN ! 

Di bagian tab SIZE :
Kurang dari 100 Kb = Blog Tidak Berat
Lebih dari 100 Kb = Blog Berat

speed test by : iwebtool

Baca Selengkapnya - Cara Mengetahui Loading Blog Berat Atau Tidak

Daftar Isi

Daftar Isi

Baca Selengkapnya - Daftar Isi

Cara Membuat Tombol Spoiler Dengan jQuery di Blog

Tombol Spoiler Dengan jQuery

DEMO

Dengan melihat demo diatas teman-teman pasti tau kan maksudnya.

Okeh kita lanjut ke tutorial.

1. Login Blogger

2. Ke menu Template lalu pilih edit html.
3. seperti biasa expand widget bagian atas.
4. lalu cari kode </head> dan letakkan kode berikut tepat diatasnya.

<script type='text/javascript'>//<![CDATA[ $(function() { $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Lihat Konten</button>'); $('button.sp-trigger').toggle(function() { $(this).addClass('sp-active').text('Tutup').next().slideDown(1000); }, function() { $(this).removeClass('sp-active').text('Lihat Konten').next().slideUp(1000); }); }); //]]></script>

5. Selanjutnya cari kode ]]></b:skin> dan letakkan kode ini diatasnya.

/* Spoiler sederhana dengan JQuery (http://hompimpaalaihumgambreng.blogspot.com) */ blockquote.spoiler { font:normal 11px/16px Verdana,Arial,Sans-Serif; color:#666; border:2px dashed #cec2c2; background-color:#eee2e2; padding:18px 20px; -webkit-box-shadow:inset 0px 0px 7px #222; -moz-box-shadow:inset 0px 0px 7px #222; box-shadow:inset 0px 0px 7px #222; margin:0px 30px 15px; /* overflow:auto; height:250px; (opsional) */ } button.sp-trigger { display:block; outline:none; cursor:pointer; margin:20px 0px 10px 30px; border:none; background-color:green; font:bold 11px Verdana,Arial,Sans-Serif; color:white; text-shadow:0px 1px 0px rgba(0,0,0,0.4); padding:5px 10px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); } button.sp-trigger.sp-active {background-color:#981515;}

6. Save template anda.

7. Selanjutnya silahkan anda menuju postingan <new entri> pastekan kode dibawah ini dalam mode html jangan Compose (tidak akan jadi).

<blockquote class="spoiler"> Masukkan artikel anda di sini... </blockquote>

Silahkan di Publish or pratinjau. dan Selamat Mencoba.

Baca Selengkapnya - Cara Membuat Tombol Spoiler Dengan jQuery di Blog

Cara Membuat Menu Navigasi Terkeren Ala Rak Buku

Navigasi Ala Rak Buku

     Sebelum ady menjelaskannya yuk kita chek out dulu :D :D :D

Demo

Nah sekarang pasti temen-temen sudah pada tau kan maksud judul artikel diatas. Okeh, saya jelaskan sedikit.

     Navigasi rak buku adalah navigasi yang disediakan layaknya rak-rak buku yang ada diperpustakaan. bedanya kali ini bukan di perpustakaan melainkan di blog/website ( hahahaa anak kecil gin tau ). Navigasi ini sangat menarik dikarenakan animasi-animasi yang begitu cantik nan indah. Menurut ady, navigasi rak buku ini mungkin bisa di bilang navigasi terkeren yang pernah ady temui. Permainan animasinya pun tak kalah dari navigasi keren yang lain. Sehingga banyak sekali peminatnya, yang ingin menaruh/memasang navigasi rak buku ini ke blog/websitenya. Saya gin rencananya ingin memasangnya heheee.....

Okeh, mungkin cukup untuk penjelasannya...

Dan saat yang di nanti-nantikan oleh pembaca/pengunjung,,,,,inilah diaaaaa ,,,, kita SAMBIT ,,ech salah maksudnya,,, kita SAMBUT tuuttoorriiaallnnyyaaaa...... hahahaaa  }:D  << IBLIS

1. Login Blogger.
2. Menuju Edit Html dan seperti biasa expand widget.
3. Lalu Cari Kode </head> dan letakkan kode ini diatasnya.

<style type="text/css">/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/css3-cssplay6.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0 auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;} ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;} ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } ul.topUL > li.b1 > a {background:#562; border-color:#340; background: -moz-linear-gradient(0, #562, #784 50%, #562 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562)); } ul.topUL > li.b2 > a {background:#366; border-color:#144; background: -moz-linear-gradient(0, #366, #688 50%, #366 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366)); } ul.topUL > li.b3 > a {background:#246; border-color:#024; background: -moz-linear-gradient(0, #246, #579 50%, #246 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246)); } ul.topUL > li.b4 > a {background:#741; border-color:#520; background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741)); } ul.topUL > li.b5 > a {background:#623; border-color:#401; background: -moz-linear-gradient(0, #623, #956 50%, #623 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623)); } ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; transition-delay:0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul.topUL > li.b1 > ul {background:#784;} ul.topUL > li.b2 > ul {background:#688;} ul.topUL > li.b3 > ul {background:#579;} ul.topUL > li.b4 > ul {background:#a74;} ul.topUL > li.b5 > ul {background:#956;} ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; transition-delay: 0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul ul li b {display:block;} ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;} ul ul li a:hover {color:#000; text-decoration:underline;} ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;} ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;} ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;} ul.topUL > li.b1 li.cover {background:#562; background: -moz-linear-gradient(0, #562, #784 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(100%, #784)); } ul.topUL > li.b2 li.cover {background:#366; background: -moz-linear-gradient(0, #366, #688 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(100%, #688)); } ul.topUL > li.b3 li.cover {background:#246; background: -moz-linear-gradient(0, #246, #579 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(100%, #579)); } ul.topUL > li.b4 li.cover {background:#741; background: -moz-linear-gradient(0, #741, #a74 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(100%, #a74)); } ul.topUL > li.b5 li.cover {background:#623; background: -moz-linear-gradient(0, #623, #956 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(100%, #956)); } ul.topUL > li:hover {direction:ltr; z-index:100;} ul.topUL > li:hover a.p1 {top:230px;left:-100px; -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transition-delay: 0s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -webkit-transition-delay: 0s; } ul.topUL li:hover ul {width:200px; -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transition-delay: 0.5s; -o-transition-delay: .5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } ul.topUL li:hover ul li.cover {width:200px; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } ul.topUL li:hover ul li.content {width:190px; background: -moz-linear-gradient(0, #ddd, #fff 50%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff)); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } ul.topUL li:hover ul:hover {overflow:visible;} ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;} ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;} ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;} ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;} ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;} ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;} ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;} ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;} ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;} ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;} ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px; -o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } .shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto; background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%); background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620)); -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); } </style>

4. Save Template.
5. Menuju Layout ( Tata Letak ), add gadget dan pilih HTML/Java Script.
6. Copy kode ini dan pastekan.

<div id="info"> <ul class="topUL"><li class="b1"><a class="p1" href="#url"><span>Product Guide</span></a><ul class="sub"><li class="cover">Product Guide<br /><i>by HYG </i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Mak erot</a><a href="#url">2. Mak Icih</a><a href="#url">3. Bang Kumis</a><a href="#url">4. Bang Jenggot</a><a href="#url">5. Bang Brewok</a><a href="#url">6. Si Jambang</a></li></ul></li><li class="b2"><a class="p1" href="#url"><span>A Concise History</span></a><ul class="sub"><li class="cover">Menu Sarapan<br /><i>by HYG </i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Sarapan Pagi</a><a href="#url">2. Sarapan Siang</a><a href="#url">3. Sarapan Malam</a><a href="#url">4. Mandi Kembang</a></li></ul></li><li class="b3"><a class="p1" href="#url"><span>Design for Beginners</span></a><ul class="sub"><li class="cover">Halaman Cinta<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Cerita Cinta</a><a href="#url">2. Cinta Pertama</a><a href="#url">3. Cinta Kedua</a><a href="#url">4. Cinta Ketiga</a><a href="#url">5. Putus Cinta</a></li></ul></li><li class="b4"><a class="p1" href="#url"><span>Address Book</span></a><ul class="sub"><li class="cover">Alamat ku<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Facebook ku</a><a href="#url">2. Twitter ku</a><a href="#url">3. Google+ ku</a><a href="#url">4. Skype ku</a><a href="#url">5. Alay sekali</a><a href="#url">6. Cape deh</a></li></ul></li><li class="b5"><a class="p1" href="#url"><span>Travellers Tales</span></a><ul class="sub"><li class="cover">Musik Koe<br /><i>by HYG</i><i>Hover to open ...</i></li><li class="content"><b>Contents</b><a href="#url">1. Dangdut</a><a href="#url">2. Pop</a><a href="#url">3. Rock</a><a href="#url">4. Melayut</a><a href="#url">5. Blues</a></li></ul></li></ul><div class="shelf"></div></div><!-- end of info -->

7. Klik Save dan Lihat Website/Blog anda.

Adik : wwaaawwww keeerreeeennnnn ,,,,, (y) (y) (y)
kakak : apakah aku harus bilang waw juga gtu ,,,,,, ?????

8. Heheheeee Selamat Mencoba yah temen-temen... Good Luck!




Demo by : oto website

Baca Selengkapnya - Cara Membuat Menu Navigasi Terkeren Ala Rak Buku

Cara Membuat Artikel Favorit Bergaya Image Walk

Artikel Favorit Bergaya Image Walk Di Blog

Pengunjung : gan.. mau tanya. bagaimana cara buat animasi artikel favorit seperti di bawah?

Dari Pertanyaan diatas pengunjung menanyakan animasi yang ada di bagian bawah blog Ady Bakom. maksudnya membuat artikel-artikel yang isinya bukan sekedar link, tetapi di isi dengan gambar/image berjalan didalamnya dan tambahan atau animasi lain yaitu saat kursor meyentuh gambar otomatis gambar tersebut akan melebar dan membesar. Sehingga memudahkan pembaca melihat gambar dengan jelas.
     Sudah Jelaskan !  Sekarang Time Is Tutorial. Silahkan lihat Tutor Di bawah Ini.

1. Login Blogger.
2. Menuju Edit Html dan seperti biasa expand widget.
3. Lalu Cari Kode </head> dan letakkan kode ini diatasnya.

<style type='text/css'> div.animasislide{margin 2px; padding-top:6px; border: 5px solid #ffff00; border-style:double; background:url(http://i1001.photobucket.com/albums/af136/lttiggity/lightspeed.gif); width:auto; float:left; text-align:center; width:950px} div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #0000ff; border-style:double; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */} div.animasislide a:hover img{width:200px; height:100px;} </style>

4. Save.
5. Menuju Layout ( Tata Letak ), add gadget dan pilih HTML/Java Script.
6. Copy kode ini dan pastekan.

<div id="tooltip"> <div align="center" class="animasislide"> <marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%"><a href="http://adybakom.blogspot.com/2012/06/tampilan-keren-cybercity-indonesia-cci.html"><img title="css Cybercity Indonesia Social Network" src="http://mf.cybercityindonesia.com/CENTRALSTORAGE/public/user/f7/a7/10/108760_7d36.png?c=c933"/></a><a href="http://adybakom.blogspot.com/2012/07/cara-mengatasi-penderita-kencing-manis.html"><img title="Cara Mengatasi Penderita Kencing Manis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Krms5ShIpuqKPZ9aqw1EloDzRIa3LfDNEAC-OU-_xMLZdtuOPnV6oXh0TnTfw4AxsDaw0Tj98aFi5Qdrq2ptBkrMIKx91L8a1MaxIXcsXr-G2xJFBI0Qfos-LvMEsKOmuEPznVQO7hw/s200/sugar-dalam.jpg"/></a><a href="http://adybakom.blogspot.com/2012/05/cara-mempercepat-kinerja-komputer.html"><img title="cara mempercepat kinerja komputer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbObInSENlJYH0zcIF9NWF-h6rPtBAbs8bXAbObgs-3bp-pcdhzMLi2Pel0HIESjyNWxw_YfE9PJqaCCgPTvcaQUcytzSuqak4X85QOgJ-LAi9BTzN5YOSvuIVtmVniJ7Rrj6PdYW3Avw/s200/4+800px-IBM_Blue_Gene_P_supercomputer.jpg"/></a><a href="http://adybakom.blogspot.com/2012/07/contoh-karangan-narasi.html"><img title="Contoh Karangan Narasi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkuS8qEcOOYNddN5T0x-Yn1yI38JRNM0xvk7fjDCmBj-oeTZ0wQRHYHnI7pj3IF21lkbZ3jT8_dEZBdH099lreIM00X7_QCKgpUfRD5vaRLkouDPi2h_M_fb9D2cY6fR-kzGaYi_4tEw/s1600/contoh+karangan+narasi.jpg"/></a><a href="http://adybakom.blogspot.com/2012/08/pengertian-vektor-satuan-dan-vektor-posisi.html"><img title="Pengertian Vektor Satuan dan Vektor Posisi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpsGRzAmuBhQcT6KR6h1gf7Ma9l_InSbi3ami96a6TDRC3cYatpi_VOz0f6Q9k9iLB_vitSU32RF2XfsFdEAlh9mQWSuoAsb0x1IV9xWT1VVZqVMtfvi4KS1_9eom9L0rodu9I3zbYsI/s1600/pengertian+vektor+satuan+dan+vektor+posisi.jpg"/></a><a href="http://adybakom.blogspot.com/2012/08/pengertian-ekosistem.html"><img title="Pengertian Ekosistem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJP4mxqNAJXksp0OLd7bAE6cuv4PvDHjmbfOZS-jBsGcqpYr-2TseeGa0KM8ZpB214o8jeYOXwGtp9hUBcpmDzPAoBjyDFo5mHyNAi-WbrO_Kc1L7_KsqEuFleuJX5TybrNKCDvxuGEA0/s1600/ekosistem.png"/></a><a href="http://adybakom.blogspot.com/2012/08/contoh-surat-izin-tidak-masuk-sekolah.html"><img title="Contoh Surat Izin Tidak Masuk Sekolah" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMVWKkqXMR6QtnZnWEEhzbnmFRqy1aXRH4IrJOgvFSQDnbkawBS5vbm6RlOTqJYp-S_eA1VMaraX7OXal6FOBLvEl12dGjpOSoMC5AAs8FTEHZ1Ycu929Ufs_JUVetj1I5sLX5sDyspU/s1600/Contoh+Surat+Izin+Tidak+Masuk+Sekolah.jpg"/></a></marquee></div></div>

7. Klik Save dan Lihat Website/Blog anda.
8. Selamat Mencoba. Good Luck :p

Baca Selengkapnya - Cara Membuat Artikel Favorit Bergaya Image Walk

Sport Part 3

Cara Membuat Gambar Bergerak di Sudut Blog

    Inilah gambar atau animasi yang telah ady sediakan untuk menghias blog/website anda. Untuk cara pemasangannya silahkan lihat di Cara Membuat Gambar Bergerak di Sudut Blog. Silahkan di Copas, di edit, dan yang pasti di pasang di blog anda agar lebih keren.

Gratis buat pengunjung blog ady bakom.

Tema : Sport Part 3

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202D3.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/00020059.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202D5.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202D7.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202D8.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202DD.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202DF.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202DB.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202E0.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202DC.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/0002028B.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/0002018C.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

Baca Selengkapnya - Sport Part 3

Sport Part 2

Cara Membuat Gambar Bergerak di Sudut Blog

    Inilah gambar atau animasi yang telah ady sediakan untuk menghias blog/website anda. Untuk cara pemasangannya silahkan lihat di Cara Membuat Gambar Bergerak di Sudut Blog. Silahkan di Copas, di edit, dan yang pasti di pasang di blog anda agar lebih keren.

Gratis buat pengunjung blog ady bakom.

Tema : Sport Part 2

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000203EA.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/00020471.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/0002064C.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/00020450.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000200D1.gif " title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202C9.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/0002045D.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000200E1.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202CC.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202CD.gif " title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/00020388.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000200CE.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000200F1.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/00020452.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202DE.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202CF.gif" title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

<div style="position: fixed; bottom: 0px; right: 10px;width:110px;height:140px;"><a href="http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank"><img border="0"src=" http://content.sweetim.com/sim/cpie/emoticons/000202D0.gif " title="Click to get more."/></a><small><center><a href=" http://adybakom.blogspot.com/2012/06/membuat-gambar-bergerak-di-sudut-blog.html"target="_blank">Animasi Blog</a></center></small></div>

Baca Selengkapnya - Sport Part 2