Mungkin untuk yang mempunyai web/blog toko online maupun niche blog sejenisnya akan membutuhkan tutorial ini untuk membuat gallery gambar. Untuk lebih jelasnya, berikut tutorialnya untuk cara Membuat Gallery Gambar di Blog.
1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode
Setelah anda Membuat Gallery Gambar di Blog maka hasilnya akan seperti dibawah ini.
Dari tutorial di atas jika anda tidak ingin memasukan kode CSS ke dalam template blog maka gabungkan saja seluruh kode CSS dan HTML. Caranya seperti biasa, jangan lupa tambahkan
1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode
]]></b:skin> kemudian Simpan template..ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; } .ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; } .ribbon-gallery img:hover { border:5px solid #52e052; } .ribbon-gallery p { display: inline; } .ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); } .ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; } .ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 108px; z-index: 1; right: -7px; border: 7px solid; border-color: transparent transparent transparent #CC0000; }4. Selanjutnya copy kode HTML berikut ini lalu taruh ke dalam entri posting mode HTML (bukan Compose).
<div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfc9QJrhkBxu6pA9aax1SpjaP0zL-a1XT8fMRgO0CvjhcXnazzR_bksh641tNnq8Z69OWCvTqMuuvbvqodj3oImnDF7ptPOPjoKcO5UQCfn8bJhr3xBEue0iIFzqTjbxqT5fMAohvdPwk/h400/Milan.jpg" alt="" /></a> <p><span>jersey 1</span></p> </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-64mETtnScrx_TS4ph09hzUC-7tO1k_paoypYjdewnWW0MWSypPb2kmTMA6Re2gyAQ_aoF_wvq8r__quc_ZWJUP3Gs64exlx7BcuxoxgNgtTDX-OGZljBggXpl1SYRXfjewF26opIo40/h400/Chelsea.jpg" alt="" /></a> <p><span>jersey 2</span></p> </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTe-YUmgODr1Blq6OzUEUSv_FgLfOVcPEIsrMWNrIQWBf5lHoCmTXqay8gO80ov5s5xzJzACfPsXzy04WQxhmNSlT2wry58dO8kAi5jiZ0ucmMpmLlMO8VNiVRQiNT7gOceYyXOfVVXRs/h300/Barcelona.jpg" alt="" /></a> <p><span>jersey 3</span></p> </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiftg1VsD1YZ5L_xl2ng-596yz_nmsWT69bjsClixWoXOWbxY6VyGSdRhgmMEZglWjHGIy2QdOlaj9U7Msw9W74mSVHn8yPKwWjYIJY1kcxWNT-TDjEmx7GHyat_P5Lpyz0F7pTHH-QRU/h400/Mas-Andes.JPG" alt="" /></a> <p><span>Ganteng</span></p> </div>Diatas hanya terdapat empat gambar saja, jika ingin menambahkan gambar lebih banyak lagi maka copy kode yang berwarna merah lalu paste dibawahnya sebanyak yang anda inginkan.
Setelah anda Membuat Gallery Gambar di Blog maka hasilnya akan seperti dibawah ini.
Dari tutorial di atas jika anda tidak ingin memasukan kode CSS ke dalam template blog maka gabungkan saja seluruh kode CSS dan HTML. Caranya seperti biasa, jangan lupa tambahkan
<style type="text/css" scoped> pada awal kode CSS dan tambahkan </style> pada akhir CSS. Selanjutnya taruh kode HTML dibawahnya, lalu masukan kode tersebut kedalam postingan mode HTML.
