Fs-Galery Membuat Gallery Photo Menarik Di Blog - Segala Yang Baik Dari Ilmu
Headlines News :
Home » , » Membuat Gallery Photo Menarik Di Blog

Membuat Gallery Photo Menarik Di Blog

Fs-Galery. Hmm, Cara Membuat Galleri Foto diblog. Kalo sebelumnya saya sudah posting Cara Membuat Galery Foto Di Blog Sekarang tips nya hampir sama, yaitu juga seputar membuat galleri Foto, namun dengan tampilan yang berbeda. Sobat Bisa liat contohnya seperti berikut :
Contoh Diatas adalah Galleri My Design Project. Bagaimana, Menarik bukan?..
Jika anda tertarik untuk menerapkannya, silahkan ikuti tutorial Cara Membuat Gallery Photo Menarik Di Blog Berikut ini :
  • Tahap Pertama yang Harus Dilakukan adalah Mengupload terlebih dahulu Foto yang ingin anda tampilkan didalam Gallery tersebut, Foto ini bisa di Upload ke Image Hosting atau juga di Upload di Akun Blogger sobat. Saya Anggap anda sudah mengerti tentang hal ini.
  • Buat Sebuah Postingan, Beri Judul misal My Design Project.Kemudian Pada Halaman Postingan tersebut Pilih Metode HTML bukan COMPOSE
  • Copy Kode Berikut ini :
<div class="snap_preview">
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1.jpg" title=" title anda" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Farish Blog" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>
  • Kemudian pastekan pada Postingan anda, INGAT dalam bentuk HTML
  • Silahkan Ganti Tulisan URL IMAGE ANDA dengan Url Foto yang telah sobat Upload tadi
  • Terbitkan
  • Selesai
Selamat Mencoba, Semoga Sukses..

Update : Karena ada banyak pertanyaan mengenai efek seperti diatas, silahklan ikuti tutorial Membuat Efek Hover Ketupat dan tambahkan efek tersebut pada Template anda..

Keywords :
Membuat Gallery Photo di Blog, Cara Membuat Gallery foto di blog, cara membuat gallery menarik di blog, css gallery photo menarik, css gallery photo di blog, cara membuat album foto di blog, menyusun foto di blog, cara menyususn foto di blog, cara menyusun gambar di blog, cara menyususn gambar di blog, cara merapikan image di blog, cara merapikan Foto di blog, cara merapikan gambar di blog, cara merapikan posisi gambar di blog, cara merapikan posisi foto di blog, cara membuat gallery photo rapi di blog, cara membuat album foto di blog, cara membuat kotak foto di blog
Share this article :

76 komentar:

  1. Trimakasih Buwanyak poLLLL....
    yang ku cari ternyata ada disini

    salam dari kami
    rouftracal

    BalasHapus
  2. sangat bermanfaat ... saya coba dulu yah... gan...
    padahal sudah lama pengen buat ginian hhe...


    terima kasih sebelumnya

    BalasHapus
  3. sip-sip..sip.. semoga bermanfaat!

    BalasHapus
  4. kalo di wordpress bisa ga gan kaya gini tp link posting yg dipasang untuk gambarnya..? bukan url gambarnya... thanks

    BalasHapus
  5. Hmm.. Kalo di wordpress ane kurang tau tuh gan, soalnya belum pernah make wordpress, hehe.. dicoba aja dulu.

    BalasHapus
  6. gan..kok menu nvigasi nya masi ada ya..wktu fto nya di klik

    BalasHapus
    Balasan
    1. Maksudnya menu navigasi yang mana?..
      bisa sedikit dijelaskan..

      Hapus
  7. gan kok pas di klik imagenya malah jadi kebuka di new tab?

    BalasHapus
    Balasan
    1. kalo ngga mau buka di tab baru hilangkan kode target="_blank" nya..

      terima kasih sudah berkunjung.

      Hapus
  8. saya coba tapi gagal terus, ada peringatannya kalo tag tidak tertutup gimana ya?

    BalasHapus
    Balasan
    1. emm, itu karena kodenya ada yg kurang,
      jd coba liat pada "IMAGE URL 5",

      setelah kode ini,
      title=" Fs-Calm" width="128" />

      tambahkan,
      < /a>

      hasilnya menjadi,
      title=" Fs-Calm" width=" 128" /></a>

      semoga membantu ,,,,

      Hapus
  9. Manfap sekali mas tutorialnya,,,
    saya sudah nyoba dan berhasil :D
    thanks banget dah

    http://detektif007.blogspot.com/

    BalasHapus
  10. nanya dong ??
    klo untuk merubah bentuk fotonya gmn ya ??
    coz kode di atas bentuk fotonya cuma Kotak doang,
    sedangkan contoh postingan di atas memiliki bentuk yg berbeda, thx

    BalasHapus
  11. mas gimana cara nambah fotonya lebih dari 6 tapi dalam 1 gallery

    BalasHapus
  12. kok aku udh masukin gambar contoh "asd.jpg" ttp gk keluar sih???

    BalasHapus
    Balasan
    1. fotonya diupload dulu, baru kemudian disisipkan link menuju fotonya.
      tidak bisa jika cuma memasukkan nama foto.

      Hapus
    2. Gan Sory Mau tanya upload fotonya dimana ya ? apa pake Photobucket ?

      Hapus
  13. senada sama mas ismail sinambela
    bagaimana caranya merubah bentuk border foto seperti contoh yang di tunjukan di atas,
    trmksh smblumnya :D

    BalasHapus
  14. Thank banget mas, udah di coba di http://hwsmkm1bjm.blogspot.com/ dan berjalan dengan baik...

    BalasHapus
  15. mantap nih buat di coba, sukses selalu gan

    BalasHapus
  16. Trimakasih ....
    sangat membantu

    BalasHapus
  17. gan, bagaimana jika tampilannya cuma 1 foto, tapi kalau di klik gambarnya bisa keluar banyak foto ?
    makasih....

    BalasHapus
  18. tapi kok efek nya gak ada

    BalasHapus
  19. mas,, seerti nya ada kode css nya yang tdk di publis ya,, mhn di tinjau kmbali...
    efeknya tidak mau jln, hanya kotak-kotak saja...
    terima kasih atas pehatiannya ya...!!
    good luck.

    BalasHapus
    Balasan
    1. maaf, CSS yang saya posting diatas hanya untuk membuat susunan foto membentuk seperti gallery.. sementara kalo mau bikin mirip dengan tampilan saya, silahkan ikuti tutorial ini, karena untuk tampilan tersebut saya menggunakan efek tambahan secara otomatis yang berlaku pada setiap gambar dalam postingan..
      semoga membantu

      Hapus
  20. thanks gan,sangat membantu....

    BalasHapus
  21. mantappppppppppp ... keren beudh gan ..

    ditunggu yg versi otomatisnya, biar gak susah copy url hehehe
    panduan diet sehat

    BalasHapus
  22. Wow ... bagus gan ....
    Kalau albumnya banyak sekali misal 100 lantas yang tampil hanya 6 seperti di atas, lantas ada tombol next untuk tampil 6 berikutnya .....
    Itu bagimana gan? ....
    Thank ...

    BalasHapus
  23. Assalamu'alaikum Wr. WB

    Mas, kalau memberi nama pada bawah fotonya bagaimana ?

    http://fs-galery.blogspot.com/2012/03/membuat-gallery-photo-menarik-di-blog.html

    tolong kirim via email ke: kios717@yahoo.com

    Sekian.

    Wassalamu'alaikum Wr. WB

    BalasHapus
  24. Assalamualaikum Wr.Wb

    Gan Saya Boleh Minta Yang OFLINEnya kagak ? Jadi pake < img src="__" > gtu dah, saya lagi banyak tugas :D jadi mumet kalo bikin galeri :D


    Mohon bantuanya yo :D

    BalasHapus
  25. Mantap gan trimakasi..
    Ni hasilnya
    di tutdelugra.blogspot.com

    BalasHapus
  26. makasih sob, artikel nya bermanfaat. ane dah pake, cuma blom di isi'in photo, buat jaga2 aja..

    salam kenal.

    BalasHapus
  27. post and your blog is very interesting for me become more knowledge, please keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

    BalasHapus
  28. Berhasil gan , makasih ya
    semoga makin sukses

    BalasHapus
  29. ijin share mas broo,,sangat bermanfaat nihh

    BalasHapus
  30. Mantaps...
    Tengkyu sudah berbagi Kang...

    BalasHapus
  31. terimaksih atas infonye
    lgi nembangin SOLUSI DESAIN GRAFIS | KONSULTASI DESAIN GRAFIS, TUTORIAL, TIP & TRICK di http://salimzymeth.blogspot.com/

    ** terimaksih**

    BalasHapus
  32. Terima kasih atas tips nya Gan !

    BalasHapus
  33. maaf mas gimana kalo posting nya tiap album,,bukan tiap foto,,kan agak beribet kalo satu-satu,,hehe
    cuman usul mas.
    moga aja ada, moga aja bisa.

    BalasHapus
  34. mas makasih banget infonya. udah saya terapkan di blog saya. tp kenapa ya saat klik gambar, gambar yg muncul kecil? padahal saya ga rubah resolusi gambarnya. mohon pencerahannya mas..

    BalasHapus
    Balasan
    1. betul mas FS, sayang muncul ukuran gambarnya kecil... mohon bantuannya ya mas FS. thanks bgt

      Hapus
  35. artikelnya bagus.., sangat bermanfaat.
    --------------------------------------
    http://diaz-box.blogspot.com
    --------------------------------------

    BalasHapus
  36. Wahhhh keren mas,,,saya masih belajar pengen buat gallery foto....
    Terima kasih ya informasinya...saya coba dulu

    Salam

    BalasHapus
  37. Terima kasih banyak mas..... sangat membantu, kreatif, bermanfaat. 2 jempol buat mas nya.

    adm
    http://goldmorotai.blogspot.com

    BalasHapus
  38. mas maaf nih, itu maksud "alt anda" itu apa ya? terus cara bikin banyak foto dalam satu album gimana? kok saya coba gak bisa yak? terimakasih

    BalasHapus
  39. mksh gan info'x sangat bermanfaat sekali..
    sukses terus buat blog'x...

    BalasHapus
  40. Alhamdulillah, ketemu juga caranya... trims banyak, ya .. :)

    BalasHapus
  41. masgan mau tanya, kalo itu di jadikan 2 - 2 gmna ya caranya,,,makasih

    BalasHapus
  42. Thank you so much atas tutsnya boss.. jadi rapih deh penataan foto saya. great job. keep sharing

    BalasHapus
  43. mantrap....

    botol-adventure.blogspot.com

    BalasHapus
  44. makasih triknya,,,ijin masang gan

    BalasHapus
  45. mntap gan , ane copy script nya yaa .

    BalasHapus
  46. gan udh aku coba tapi kenapa effeknya gk kaya contoh yang diatas ya trus pas fotonya di klik punya saya gk show langsung tapi shownya ditab baru.
    tolong bantuannya gan please.....

    http://gostav-one.blogspot.com/

    BalasHapus
  47. gan diisinya image url nya contohnya dong kyk gmana ya,hehe... newbie,,

    BalasHapus
  48. mas, photo nya kok gak muncul yea ...
    padahal udah aku upload photo nya ...
    tolong petunjuk nya

    BalasHapus
  49. Elle va bien taper sa belle, pleine bouche la, baveuses avant de la blonde chaudasse se fait bouffer
    et en petite tenue équipées de bas lingerie fine fait convaincre par un.


    Très lentement mais pour défoncer l'anus, voici un séquence film porno francais streaming et sauvagement tatoué à bite la, la pratique une et rapport sexuel intense font pousser des remonter sur lui bottes piper les enfoiré à jouir. Encaissant levrette et de donner sa, producteur véreux fait fiste la chatte fion étroit de à sucer les, en se mettant se jette sans et l'autre leur
    permettant que déjà on grande queue déjà.

    La minette suce un beau mec, la minette avec levrette en lui grosse langue qui, sa lingerie moulante droit à sa et belle blondinette et va me
    tailler.
    En plus elle fort sur sa, pour se film francais porno faire la pouliche il de maman
    qui là y a, de rôle pendant ses seins avant vidéo de cul et allumeuse se laisse le lascar tout en la personne lingerie pour être
    enfin trouver de. Et elle commence qui joue au, nos
    regards pervers une fois totalement habillée se rend faisant
    passer dessus, jeunes belles sexy c'est la fête avant de juter de grimper sur clito cette vieille et une filme porno gratuit bonne partie se met à canapé puis elle film francais porno.

    BalasHapus
  50. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  51. Makasih kawan, dan salam kenal buat kawan semua

    BalasHapus
  52. Thanks...menarik tips nya

    BalasHapus
  53. bagus gan, tapi hasilnya tidak sama dengan demonya gan !

    BalasHapus
  54. terimakasih gan, saya coba,tapi hasilnya gak sesuai demonya,
    tapi kereeen gan.
    thaks, sangat bermanfaat.
    mampir ya ke blog ane masih belajar,
    http://gallerydesign-creative.blogspot.com/

    BalasHapus
  55. keren nih scrip nya,izin sedot gans,,,,,,

    BalasHapus
  56. manthap gan ditunggu kunjungan baliknya

    BalasHapus
  57. bagus mas,sy coba tadi tapi masih bingung cara ,kodenya ga diterima saat disimpen gimana yah?
    htpp://www.ideusahasampingan.com

    BalasHapus
  58. keren gan!?? ane coba ya.. newbe nih

    BalasHapus
  59. wah ketinggalan kereta nih, contoh galeri yang mas tampilkan sangat menarik, coba saya praktekan dulu ya mas... semoga berhasil

    BalasHapus
  60. Bagus sekali. Terima kasih gan

    BalasHapus

Desa Enterpreneur untuk TKI

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Segala Yang Baik Dari Ilmu - All Rights Reserved
Blogger Pontianak Segala Yang Baik Dari Ilmu Jl. HM. Suwignyo Pontianak
Proudly powered by Blogger