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>

Contuh gambar sebelum dibuka slide

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:

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.

Share :