Membuat Ribbon Gallery Image di Blog With CSS

Membuat Ribbon Gallery Image di Blog With CSS – setelah beberapa waktu lalu sudah mengulas mengenai CSS ribbon pada blog diantaranya pada tutorial yang berjudul:

- Style Ribbon Email Subscribe Blogger
- Membuat Sidebar Blog Dengan Efek Ribbon
- Membuat Sidebar Ribbon Pada Blog
- Membuat Efek Ribbon Pada Sidebar Blog
- Membuat Menu Horisontal Ribbon Style CSS3 di Blog

Setelah beberapa waktu lalu membaca komentar dari Mas Anton Setiawan, kini saya akan kembali membahas bagaimana cara untuk membuat ribbon CSS pada gallery image untuk di terapkan ke dalam postingan blog? Untuk menambahkan ribbon pada image yang terletak pada gallery blog caranya cukup mudah. Tentu sudah tidak asing lagi dengan istilah Pseudo Element, sebelum melanjutkan penjelasan lebih jauh terlebih dahulu saya akan sedikit membahas mengenai penggunaan Pseudo Element. Pseudo Element dalam CSS bisa diartikan tidak real atau bohongan (bukan sebenarnya), karena dengan menambahkan Pseudo Element seolah olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. Terdapat 4 Pseudo Element yang dikelompokkan menjadi dua bagian, yang pertama adalah Pseudo Element :before dan :after sedangkan yang kedua adalah Pseudo Element :first-letter dan :first-line. Dengan adanya Pseudo Element tersebut maka semakin memudahkan kita dalam mendeklarasikan style CSS. Tutorial untuk membuat ribbon pada gallery image ini saya memanfaatkan bagian Pseudo Element yang pertama, yaitu :before dan :after. Mungkin untuk yang mempunyai web/blog toko online maupun niche blog sejenisnya akan membutuhkan tutorial ini untuk membuat ribbon pada gallery image. Untuk lebih jelasnya, berikut tutorialnya untuk cara Membuat Ribbon Gallery Image di Blog With CSS.

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/AVvXsEhRho-Y3oXQFvmg3PHzceG4DlhNbUnwx6yCUoYayGtwSktQnpVuqi6ruymIIglVG1rXw-PUedAmo0MHwECr2xfDzdm-eyPhFq7_IkhMKIEmqc7oE8HtwwLF7PhGfpjcVzKYH4BchD843BE/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/AVvXsEhx0O1qUybNCrGxOr_ticR9zkdVCo350o4VCchMAaMvDCKYitBiu6brfLWOUNh8GShjHxyF7h3qlO5mSfFsG6fgdcZVm8szEonmoR8cohDf78lYn1eo10WITx3OftCYUx55xcztMX4FSBc/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/AVvXsEiXZ3R2uT9Rx18ypwMNlsH4xDFY1V_XYNCaKqn64HUPhQNxZl_lmnBjQ3azdZHdsbHvgkGG0x8yvTl1ZCOPra81NtdcWUB0qh7MDyVAjnFcYYOEsyBAnIb6U3CuZ8mDJBA-ZO8IiJcxHeI/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/AVvXsEjkJHlpwRhHga1ydxMsuCJGG9zI9wsjzxrcVJafyO8hOEZ7xrhUSNUS_JgmqC46tfjDqVgnQ8CnCCC68Y5k2Z1mrIN0hjtE_p8R3M_53_ngCP4jyY5qeTxpfsK4rUeJuArnv8AsCxX_jFA/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 Ribbon Gallery Image di Blog With CSS maka hasilnya akan seperti dibawah ini.

jersey 1

jersey 2

jersey 3

Ganteng

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.