Tcyute tsj blog

Mungkin ada diantara teman-teman yang ingin membuat banner berjalan di blog,atau jika punya gambar kesayangan mungkin bisa buat gambar berjalan di blog, bisa juga jika punya foto maka membuat foto berjalan di blog. Anda bisa menempatkan banner, gambar, atau foto tersebut di dalam postingan atau di disebar (gadget html/javascript). Prosedur atau cara buat banner berjalan hampir sama dengan cara buat teks berjalan (marquee)

Ada beberapa tahap yang harus anda lakukan,

1. Upload gambar dari komputer ke situs layanan image hosting gratis seperti tinypic,photobucket,dll

2. Buat kode banner di blog

Langkah detail untuk membuat :

1. Buka situs image hosting 

2. Login ke dasboard blogger, buat entri baru atau add gadget html/javascript

 Masukkan kode berikut:

Contoh 1: Gambar 1 buah, bergerak dari kanan ke kiri,

Anda bisa mengatur tinggi dan lebar gambar , dalam contoh ini:

a. width="200" lebar gambar 490 sesuaikan dengan gambar anda

b. height="360" lebar gambar 360 sesuaikan dengan gambar anda

Kode:

<marquee behavior="scroll" direction="left" scrollamount="3" width="200" height="360"><img src="ISIKAN LINK FOTO ANDA" />

</marquee>

Contoh 2, jika gambarnya lebih dari satu, bergerak dari kanan ke kiri

Kode:

<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"><img src=" ISIKAN LINK FOTO ANDA "/> <span style="padding: 5px;"> <img src=" ISIKAN LINK FOTO ANDA "/> </span> <span style="padding: 5px;"> <img src=" ISIKAN LINK FOTO ANDA "/></span></marquee>

Contoh 3: jika gambarnya bergerak secara vertikal , untuk mengubah bergerak dari atas ke bawah , ganti direction="up" menjadi direction="down"

Kode:

<marquee behavior="scroll" direction="up" scrollamount="3" width="490" height="360"><img src=" ISIKAN LINK FOTO ANDA "/> <br> <img src=" ISIKAN LINK FOTO ANDA "/><br><img src=" ISIKAN LINK FOTO ANDA "/><br>

</marquee>

Silahkan dicoba...masukkan kode di atas ke dalam teks editor blogger atau ke gadget html, sesuaikan lebar dan tinggi sesuai dengan gambar/banner anda.

Membuat Buku Tamu Buka Tutup Di Samping Kanan Blog

Ya udah, kayaknya udah jelas nieh…

Oke langsung aja ke proses pembuatannya..!!!

Langkah 1

Copy Paste Script Kode Dibawah Ini :

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR-qSzulxwsOHqcIyzafWV0HrF_xuafd9ZVUeXl4KF_qt3chpwFKob4rRQoh6-kgX3_6xq3yo70cFRXxB1mH-4YX222UIguZqEOXlLnsVGQTP7wsi43uOjv8TVEv8avWCwAe5z3-R6aIr/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]

<br/>

Mau punya buku tamu seperti ini?<br/>

Klik di

<a href="http://www.kikiyo.co.cc/2010/05/membuat-buku-tamu-buka-tutup-di-samping.html">

sini

</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Lalu cari tulisan [Masukan Script Kode Buku Tamu Anda Disini] di script kode tadi.

Hapus tulisan itu Lalu Ganti dengan Script kode Buku Tamu anda

Langkah 2

1. Login di blogger dengan ID anda

2. Klik menu tata Letak

3. Klik Elemen Halaman

4. Klik Tambah Gadged

5. Klik HTML/JavaScript

6. Lalu Copy paste kodenya

7. Setelah itu klik Simpan

8. Dan Lihat Hasilnya

sebelumnya untuk mendapatkan kode script buku tamu anda harus register dlu di sini

sekian ya semoga bermanfaat

#foxmenucontainer46{height:30px; background: transparent url() repeat; display:block; padding:0px 0 0px 0px; font: 12px sagoe print; comic sans, sans-serif; font-weight:bold; text-transform:uppercase; overflow:hidden; }
#menu46{margin: 0px; padding: 0px 10px; width:80%; background:url() repeat; height:30px; border-bottom:1px solid #dddddd; }
#menu46 ul {float: left; list-style: none; margin: 0px; padding: 0px; }
#menu46 li {float: left; list-style: none; margin: 0px; padding: 0px; }
#menu46 li a, #menu46 li a:link, #menu46 li a:visited {color: #61210B; display: block; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }
#menu46 li a:hover, #menu46 li a:active {background:#61210B; color: #fff; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }
#menu46 li li a, #menu46 li li a:link, #menu46 li li a:visited {background:#202020; width: 150px; color: #bbb; font-size: 10px; font-family: tahoma, century gothic,Georgia,  sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 9px 10px; border-bottom: 1px solid #282828; }
#menu46 li li a:hover, #menu46 li li a:active {background: #121212 ; color: #fff; padding: 9px 10px 9px 10px; }
#menu46 li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; }
#menu46 li li {  }
#menu46 li ul a {width: 140px;}
#menu46 li ul a:hover, #menu46 li ul a:active { }
#menu46 li ul ul {margin: -31px 0 0 170px; }
#menu46 li:hover ul ul, #menu46 li:hover ul ul ul,#menu46 li.sfhover ul ul, #menu46 li.sfhover ul ul ul {left: -999em;}
#menu46 li:hover ul, #menu46 li li:hover ul, #menu46 li li li:hover ul, #menu46 li.sfhover ul, #menu46 li li.sfhover ul, #menu46 li li li.sfhover ul {left: auto; }
#menu46 li:hover, #menu46 li.sfhover {position: static;}

    <div id='header-wrapper'>

Pasang kode berikut di bawahnya

<div id='menu46'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>Java Script</a></li>
<li><a href='#' title='#'>Templates</a></li>
<li><a href='#' title='#'>Register</a></li>
<li><a href='#' title='#'>Subscribe</a></li>
<li><a href='#' title='#'>About us</a></li>
<li><a href='#' title='#'>Contact</a></li>
<li><a href='#' title='#'>Privacy Policy</a></li>
</ul>
</div></div>