03.21 | Label:



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
<script type='text/javascript'>
//<![CDATA[

msg = ":::::Agra Anggakara.Blog:::::";
msg = "................." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",130);
}
scrollMSG();
//]]>
</script>

Copyright : http://agraanggakara.blogspot.com/2012/11/cara-menggerakkan-judul-blog.html#ixzz2kzU16DkD


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.
Entri Populer Unik Bergerak mboir


Tampilan widget Entri Populer Blog dengan animasi bergerak unik dapat Anda lihat seperti widget disamping kanan ini. Cara membuatnya mudah.
  1. Login ke akun Blogger atau Blogspot Anda dan masuk ke menu Tata Letak
  2. Sediakan 2 (dua) Widget yaitu widget Entri Populer dan widget HTML/JavaScript seperti gambar dibawah ini

    Blogger Tata Letak Widget mboir

  3. Widget Entri Populer dapat Anda tambahkan dengan cara klik Tambah Gadget – Entri Populer (Baru!) dan ubah settingannya seperti gambar berikut:
    Blogger Entri Populer Widget mboir

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


http://i.imgur.com/7hCpY.gif

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

<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>


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.

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>
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 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Bx7CTAzsvMbPWcgY3te6UOUlSzf3OH52MR_oFy9HH2WiWcFoXwjld71jZLEzhGBN0864mqwG_beHMEcN6XNl8trFBbnd3iiMgZ3fsIrEr5sdlSzWn-Rf4uNtC4KbCiT5Rnyf18DYFbw/s640/untitled.bmp


 Catatan : height:200px; adalah untuk tingginya, jadi silahkan sobat sesuaikan sendiri sesuai dengan kebutuhan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP737khq9oAvyD4B7QaUvOZ0FH8M6UZPaDasZ6PlZdCIuJuUwIFsc1GBiDMZqt2NIm6tSHsWihnncFDXit5enTj106bWs2YxaSC_iSHeAHt24xQxhpVS4v-uUbbde0vb9m6DrEnwmoVro/s400/untitled.bmp
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHauerr5ksaZ4aFxJuAndPaj3o2vXvljvP6Mh3UC9TmnUe92T3F24_fOQmOY09UL3Vc9pVgk0ZteUxjyVSSE3VRLoUJhnmvQ8_RUNVQp6eOpjyvVc4OLpBdq_bEsasGc-cGLw7AVqoJ2U/s400/untitled.bmp

Read more: http://myhafiezers.blogspot.com/2011/11/cara-membuat-scroll-pada-label-blog.html#ixzz2kzaUmhXw

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh YASTOFI ROYANA PUTRI
Langganan: Postingan (Atom)