Tutorial Membuat Slide Gambar Berisi Tulisan II

Tutorial ini hampir sama dengan Tutorial Membuat Slide Gambar Berisi Tulisan dan untuk lebih jelasnya tekan DEMO seperti yang aku pasang pada sidebar widget paling atas blog aku Embun Pagi Jogja. Cara membuat  slide gambar berisi tulisan II ini juga hanya perlu memasukkan kode ke tata letak > tambahkan gadget > pilih HTML/JavaScript memasukkan kode berikut: 

Contoh gambar sebelum disentuh cursor

<style>#ck{

background:#f0eeeb;

color:#000;

width:250px;

height:200px;

margin-top:-205px;

padding-left:0.5px;

padding-right:0.5px;

padding-bottom:0.5px;

padding-top:5px;

opacity:.0;

-webkit-transition:all .5s ease-in-out; }

#ck:hover{opacity:.7}</style>

<div style="text-align:center;"><img height="200" src="URL IMAGE/GAMBAR" width="250" /><br />

<div id="ck"><br />Tulisan anda

<br />

<br />

Tulisan anda

<br />

<br />

Tulisan anda

<br />

<br />

Tulisan anda </div></div>

Contoh gambar setelah disentuh cursor

Yang aku tandai dengan warna silahkan diganti sendiri, dan url image/gambar anda bisa memilihnya di tutorial blog aku bagian Material. Itulah Tutorial Membuat Slide Gambar Berisi Tulisan II, kalau anda suka silahkan untuk mengambil codenya, selamat mencoba xD.

Share :