{"id":35,"date":"2022-08-08T01:48:22","date_gmt":"2022-08-08T01:48:22","guid":{"rendered":"https:\/\/shop737.com\/tutorial2\/?p=35"},"modified":"2022-08-08T01:48:22","modified_gmt":"2022-08-08T01:48:22","slug":"membuat-photo-gallery","status":"publish","type":"post","link":"https:\/\/shop737.com\/tutorial2\/membuat-photo-gallery\/","title":{"rendered":"Membuat Photo Gallery"},"content":{"rendered":"<p>(Langkah dibawah ini bisa dilakukan setelah anda login)<\/p>\n<p align=\"left\">Membuat halaman tersendiri yang menampilkan hanya foto-foto atau gambar seperti ini. Tampilan mobile friendly dan bisa diklik untuk menampilkan ukuran sebenarnya<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/57.jpg\" width=\"654\" height=\"321\" border=\"1\" \/><\/p>\n<p align=\"left\">1. Siapkan dulu photo-photonya di komputer atau HP anda dengan nama 1.jpg, 2jpg, 3jpg, &#8230;dst<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/59.jpg\" width=\"339\" height=\"259\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">2. klik menu Files &gt;&gt; Images<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/58.jpg\" width=\"658\" height=\"347\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">3. klik folder &#8220;gallery&#8221;<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/60.jpg\" width=\"423\" height=\"248\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">4. Upload gambar satu per satu, dengan klik\u00a0<em><strong>Upload file<\/strong><\/em>, lalu\u00a0<strong><em>Choose file<\/em><\/strong>\u00a0untuk pilih gambar, lalu\u00a0<em><strong>Upload file<\/strong><\/em><\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/61.jpg\" width=\"373\" height=\"251\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">5. kalau semua gambar sudah diupload, akan muncul seperti ini<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/62.jpg\" width=\"658\" height=\"325\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">6. Buka web anda dan klik halaman yang mau ditampilkan gallery<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/63.jpg\" width=\"655\" height=\"410\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">7. klik ikon edit yang ditunjuk dibawah ini<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/64.jpg\" width=\"469\" height=\"229\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">8. Copy-paste (copas) kode dibawah ini ke halaman tsb. copy kodenya sesuai jumlah gambarnya. Kalau gambar yang anda upload 10 gambar, maka copy 10 baris saja<\/p>\n<table border=\"1\" width=\"90%\">\n<tbody>\n<tr>\n<td bgcolor=\"#FFFFCC\" height=\"671\">&lt;a href=&#8221;userfiles\/images\/gallery\/1.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/1.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/2.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/2.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/3.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/3.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/4.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/4.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/5.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/5.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/6.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/6.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/7.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/7.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/8.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/8.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/9.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/9.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/10.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/10.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/11.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/11.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/12.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/12.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/13.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/13.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/14.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/14.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/15.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/15.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/16.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/16.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/17.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/17.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/18.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/18.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/19.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/19.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/20.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/20.jpg&#8221; width=&#8221;48%&#8221; height=&#8221;300&#8243; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p align=\"left\">\n<p align=\"left\">9. Tampilannya jadi seperti ini kalau dicopas, lalu klik OK<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/65.jpg\" width=\"849\" height=\"354\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">10. gambar sudah muncul, lalu klik Save (lihat gambar dibawah ini)<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/66.jpg\" width=\"608\" height=\"333\" border=\"1\" \/><\/p>\n<p align=\"left\">\n<p align=\"left\">Kalau mau tampilan gallery satu kolom saja dengan masing2 foto ada caption (keterangan foto) copy kode dibawah ini. Dan copy jumlah barisnya sesuai jumlah gambarnya juga<\/p>\n<table border=\"1\" width=\"90%\">\n<tbody>\n<tr>\n<td bgcolor=\"#FFFFCC\" height=\"573\">&lt;a href=&#8221;userfiles\/images\/gallery\/1.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/1.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/2.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/2.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/3.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/3.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/4.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/4.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/5.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/5.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/6.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/6.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/7.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/7.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/8.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/8.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/9.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/9.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&lt;a href=&#8221;userfiles\/images\/gallery\/10.jpg&#8221; target=&#8221;_blank&#8221;&gt;&lt;img src=&#8221;userfiles\/images\/gallery\/10.jpg&#8221; width=&#8221;100%&#8221; border=&#8221;0&#8243;&gt;&lt;\/a&gt;&lt;br&gt;&lt;center&gt;Rubah keterangan gambar disini&lt;\/center&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;br&gt;<\/p>\n<p>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p align=\"left\">yang satu kolom jadinya seperti ini<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shop737.com\/tutorial2\/lama\/images\/67.jpg\" width=\"473\" height=\"471\" border=\"1\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>(Langkah dibawah ini bisa dilakukan setelah anda login) Membuat halaman tersendiri yang menampilkan hanya foto-foto atau gambar seperti ini. Tampilan mobile friendly dan bisa diklik untuk menampilkan ukuran sebenarnya 1. Siapkan dulu photo-photonya di komputer atau HP anda dengan nama 1.jpg, 2jpg, 3jpg, &#8230;dst 2. klik menu Files &gt;&gt; Images 3. klik folder &#8220;gallery&#8221; 4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-tutorial-website","tag-membuat-photo-gallery"],"_links":{"self":[{"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":1,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/posts\/35\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shop737.com\/tutorial2\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}