BREAKING NEWS :
Loading...

Tutorial Membuat Slide Gambar Berisi Tulisan

 Tutorial Membuat Slide Gambar Berisi Tulisan

Tentang tutorial membuat slide gambar berisi tulisan contohnya seperti di Owner pada sidebar blog aku kalau gambar disentuh mouse akan terbuka slide dan berisi tulisan. Jadi disini aku akan menuliskan tutorialnya. Caranya tidak usah masuk ke template dan edit HTML tapi hanya perlu menambahkan gadget pada tata letak > tambahkan gadget > pilih HTML/JavaScript > masukkan kode berikut:

<style type="text/css">
#side{
margin-right:-1px;
width:275px;
height:185px;
overflow:hidden;
}
#text{
text-align:left;
width:250px;
height:185px;
padding:5px;
overflow:auto;
color:#000000;
background-color:#fff;
}
#picture{
margin-left:-275px;
width:275px;
height:185px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
}
#side:hover #picture{
margin-left:-550px;
}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div id="text">
Kata-kata anda
</div>
</td><td><div id="picture"><img src="URL IMAGE/GAMBAR" /></div></td></tr></tbody></table>
 Tutorial Membuat Slide Gambar Berisi Tulisan
Contuh gambar sebelum dibuka slide
 Tutorial Membuat Slide Gambar Berisi Tulisan
Contoh gambar setelah dibuka
Ganti dengan kata-kata anda, kata sesuai dengan keinginan dan yang aku tandai dengan warna merah itu adalah URL IMAGE/GAMBAR bisa memilih gambar nya di TUTORIAL BLOG aku di bagian Material. Gambarnya boleh ditaruh dimana saja dan kalau ingin ditaruh pada sidebar kadang gambarnya kekecilan atau malah kebesaran jadi untuk menyesuaikan lebar sidebar dan posting blog agar pas, contohnya lihat gambar di bawah ini:

 Tutorial Membuat Slide Gambar Berisi Tulisan
Masuk tata letak >Desainer Template > pilih Sesuaikan lebar seperti pada contuh pada gambar di atas dengan cara menyesuaikan ukuran sidebar, pintar-pintarlah mengeditnya sendiri dan akan terlihat gambarnya di bawah sana xD. Kalau sudah pas sesuai keinginan pada ujung kanan atas tekan Terapkan ke Blog dan lihat hasilnya, selamat mencoba.

Subscribe to receive free email updates: