Kamis, 29 November 2012

Cara Membuat Galeri Foto Pada Postingan Blog


Cara membuat gallery foto :
 1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya) dapatkan url foto yang telah diupload
 2. Bikin postingan dalam mode HTML (bukan Compose) 
 3. Masukkan kode di bawah ini pada postingan
 4. Publish dan lihat hasilnya

<div class="snap_preview"> <div> <span style="color: #0066ff;font-size: medium;">Spain Fans</span></div> <style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style> <div class="gallery snap_nopreview">

<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0Asn_JeMegy0LPd8OuLQed3jqb0yNFYLoHFw2qDxLBlQCxeAEVT2WTaOdZ-FKeCxZxj7XkuVKSaULOMRc_2zJdmTTB0zCdf1SSsjlwbfBwRbShxDT3GLfLRBCGVAHvZuTGvyDCuaJ6E/s400/sexy+suporter%25284%2529.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgTLy2xavcnEnJ3vPmyCn6dBn7ay5Yu63j8EKll1T4yH6tyzZjpmeF2k-OEQBlxCjeHNteTTWFuM5LMOceYT91m4tO0XWD-4AMgtq-KUKYw61F_sr7B6s3j6mwvsdFH9eTkPaxPl3FKI/s400/sexy+suporter%25281%2529.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-RybG2BMkVuoGZpE4cB6LTUtfWbhRPlFuQ7_OAimUE4WxwtX3DkxCOtWLQE63-IPd76c8Rye46XwJBAmWdQIRay10abGm7W1XFyTCWa51UBW8vK6_hT5T5p8wJm8K0gUylbTGuzcS5o/s400/sexy+suporter.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEB2rdBJgEBvqcxqo5m0eM-PUsaAJWQwGk0ymzsssLU_jcGdEg7ITAoiAbyvZyIp6KIqXcF1Ghos_Ok9WfIvYme9qqKti0bGMl7dfFYDNqbkXz5DJ4gjDNbQt60ToDz4sEer1fBlJSidE/s400/sexy+suporter%25283%2529.jpg" width="150" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

  • Ganti kode yang berwarna jingga adalah URL blog sobat dan yang berwarna hijau ganti dengan url foto yang didapatkan dari hosting setelah foto diupload.
  • Ukuran foto bisa diganti dengan merubah angka 150 dan 200. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%) Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya. 
  • Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
  • Selamat mencoba.

1 komentar: