| FISALTOSAYUL

03.21 | Label: Tentang UE

Gerak Bolak-Balik.

a. Gerak Horizontal. (Kiri Ke Kanan)

<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

b. Gerak Vertikal. (Dari bawah ke atas)

<marquee behavior='alternate' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Gerak Berulang-ulang.

a. Dari kanan ke kiri atau sebaliknya.

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

b. Dari bawah ke atas atau sebaliknya.

<marquee behavior='scroll' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Keterangan:

Ubah tulisan berwarna biru dengan teks atau kode Widget yang sobat inginkan.
Dan sobat dapat mengubah kode berwarna merah sesuai dengan yang diinginkan.

6. Klik Simpan, dan Selesai.

- See more at: http://hardshoop.blogspot.com/2013/04/cara-membuat-widget-bergerak-di-blog.html#sthash.prZ1ElL0.dpuf

Cara menggerakkan judul blog

Cara Membuat Entri Populer Blog Dengan Animasi Bergerak

Davin Mboir

3/11/2012 04:39:00 PM

Blogger Tips Trik

Lama saya gak emmbuat tutorial tentang cara otak-atik desain template blog, maka kali ini penulis persembahkan postingan ini yg pertama untuk sahabat Asis-Sugianto yang me-request postingan ini dan untuk pengunjung setia lainnya. Mari kita mulai kawan.

Tampilan widget Entri Populer Blog dengan animasi bergerak unik dapat Anda lihat seperti widget disamping kanan ini. Cara membuatnya mudah.

Login ke akun Blogger atau Blogspot Anda dan masuk ke menu Tata Letak
Sediakan 2 (dua) Widget yaitu widget Entri Populer dan widget HTML/JavaScript seperti gambar dibawah ini
Widget Entri Populer dapat Anda tambahkan dengan cara klik Tambah Gadget – Entri Populer (Baru!) dan ubah settingannya seperti gambar berikut:
Widget HTML/JavaScript Anda tambahkan pula dengan cara klik Tambah Gadget – HTML/JavaScript lalu masukkan script berbackground merah berikut ini:

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:2px;
padding:0px 0px;
height:310px;
border-bottom: 1px solid #eeeeee;
}
#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:280px;
padding: 5px 5px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:75px;
overflow: hidden;
background:none;
}
#PopularPosts1 li .item-title {
    color:#ffffff;
    font-size:12px;
    margin-bottom: 2px;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#fffff;
font-size:12px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:none;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:12px;
color:#ffffff;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
.tags span,
.tags a {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
Simpan kedua widget tersebut dan beres sudah… Selamat menikmati…

Tutorial Menggerakkan Title Blog

Title blog secara default adalah dalam keadaan statik. Anda boleh ganti title blog anda dengan mudah dan juga anda boleh membuatnya bergerak dari kanan ke kiri.

Tutorial untuk membuat title blog bergerak adalah seperti berikut.

1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript

Note: Tukarkan 'Title Blog Anda' dengan apa saja yang anda mau.

3. Save dan lihat hasilnya.:)

Cara Buat Gambar Bergerak (Scrolling Image)

Membuat scrolling image dapat memberi pandangan yang berbeda berbanding memperlihatkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh blog yang mempunyai list dalam bentuk gambar seperti banner.
Pergerakan setiap gambar dapat diubah sesuai keinginan dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kecepatan pergerakan setiap gambar juga dapat diatur.

Contoh kode bagi scrolling image adalah seperti berikut.

Keterangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right, left.
Kecepatan pergerakan gambar : boleh diganti dengan angka lain. Semakin tinggi nilai semakin cepat.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak ditunjukkankan.

catatan:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bagian gambar
2. Kode-kode ini dapat digunakan di dalam post entri ataupun pada bagian gadget

Sebelumnya saya pernah mempostingkan tentang cara membuat scroll pada daftar link, sekarang saya akan membahas tentang cara membuat atau memasang scroll pada archive blog, namun kali ini sedikit berbeda, tips cara memasang scroll ini dapat diaplikasikan pada widget-widget lain diblogspot, seperti scroll untuk label, daftar link, archive, dan juga widget lainnya
Cara membuat scroll pada widget-widget tersebut adalah sbb

1. Log in keblogger
2. Masuk ke Rancangan
3. Edit HTML (centang kotak expand widget template)
4. Cari kode ]]></b:skin>
5. Setelah ketemu sobat pasang kode dibawah ini tepat diatas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

6. Simpan template dan silahkan sobat lihat hasilnya

untuk widget lainnya ,
tinggal ganti ID nya saja
cth
#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

ganti yang bertulisan biru dengan ID widget anda