Senin, 02 September 2013

Cara mensejajarkan photo ke samping

       Ok untuk pembahasan tutorial kita berikutnya adalah, mengenai Blog dari BLOGGER milik mbah Google. coba kita lihat pictures di bawah ini menarikan bukan, bagaimana ingin mencobanya...


  klo begitu mari kita mulai dengan menggunakan Code Html di bawah ini...code di bawah ini adalah code yang akan kita gunakan sebagai alat untuk membuat foto sejajar tadi .

<table><tr>
<td>Letakkan Url Gambar atau Widget</td>
<td>Letakkan Url Gambar atau Widget</td>
<td>Letakkan Url Gambar atau Widget</td>
</tr></table>

  Harus di ingat tulisan yang berwarna merah adalah url untuk code dari pictures yang akan kita letakan nantinya...

pertama - tama kita buka Blogger milik kita , lalu beralih ke Entri Baru seperti gambar di bawah ini.


maka anda akan masuk ke bilik untuk mengetik, lalu tuliskan judul sesuai yang anda inginkan, setelah itu anda klik tool yang ada pada blogger anda yang bertuliskan Insert Image, seperti gambar di bawah ini.


lalu anda upload foto milik anda yang ada di folder milik anda sebanyak dua kali . maka akan tampil seperti di bawah ini.


lalu setelah anda mengupload foto anda, sekarang kita beralih ke tombol HTML yang terdapat pada bilik ketik anda seperti gambar di bawah ini.


maka akan ada tampilan seperti gambar di bawah ini.


    nah, disitu kan tertulis sebuah kode yang berbentuk HTML, nah code itulah yang akan kita copy kan ke code sebelumnya, tapi harus di ingat kalian harus memisahkan kode tersebut menjadi dua karena foto yang kita upload berjumlah dua buah, bagaimana caranya , yaitu kita lihat kode awal dan akhirnya, biasanya dia berawalan <div dan berakhiran <div pula, jadi untuk mengcopynya kita harus mulai dari awalan <div sampai dengan <div, seperti contoh kode di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdv1MMvoWQXdcynZbHH4mgxnXToDGrDZllQflYB4eAxPFCpcNKO591e27kYfL7Y5r5FdwlZ5OL8CPlwDYAahbhT67stUlghI35Eudg80eS_6BH3-UuFD7crsDteVd4elE4Zkm7trMOsk2/s1600/1044469_607561439269100_1481531027_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdv1MMvoWQXdcynZbHH4mgxnXToDGrDZllQflYB4eAxPFCpcNKO591e27kYfL7Y5r5FdwlZ5OL8CPlwDYAahbhT67stUlghI35Eudg80eS_6BH3-UuFD7crsDteVd4elE4Zkm7trMOsk2/s320/1044469_607561439269100_1481531027_n.jpg" width="213" /></a></div>

   nah setelah mengerti kode tadi mari kita mulai mengcopy kode awal tadi yaitu kode untuk mensejajarkan foto yang akan kita buat. caranya kita pastekan code awalan tadi ke bilik ketik HTML seperti gambar di bawah ini.



setelah itu, di sanakan kan terdapat tiga kolom untuk pengcopyan foto, karena foto yang kita upload tadi hanya dua buah maka kolom yang satunya kita hapus saja seperti gambar di bawah ini.


lalu setelah kita menghapuskan satu kolom yang tidak terpakai, setelah itu kita copy paste kode Html foto tadi ke kode untuk mensejajarkan foto yang akan kita buat, seperti gambar dibawah ini.


setelah itu , bekas kode Html dari foto yang kita upload kan masih tersisa, tinggal kita hapus saja, karena sudah tidak terpakai lagi. lihat gambar dibawah ini.


setelah kode dari sisa foto tadi kita hapus, sekarang kita kembali ke mode
Compose yang terdapat disebelah kode HTML tadi yaitu bilik untuk mengetik kita sebelumnya. dan yups maka hasil nya adalah seperti gambar di bawah ini, keren kan...


Gimana tertarik !!!, selamat mencoba ya...





















Tidak ada komentar:

Posting Komentar