Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Ribbon Gallery Image di Blog With CSS

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://lh5.googleusercontent.com/-GUsoxIKzOMo/UlGYYaay8NI/AAAAAAAAGSM/vmp1bSgVLCk/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://lh3.googleusercontent.com/-kvH2AWhwyiY/UlGYXTromKI/AAAAAAAAGR4/k82NyHSHm9c/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://lh5.googleusercontent.com/-GN-2uh24F1Y/UlGYYA2z62I/AAAAAAAAGSI/wcuCvgqGTVQ/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://lh5.googleusercontent.com/-H655ZupL7fc/UlGYXuyZzGI/AAAAAAAAGR8/HpnCY-gg4lQ/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.


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.

Berlangganan artikel via email

50 Response to "Membuat Ribbon Gallery Image di Blog With CSS"

Keren juga ya mas dibalut ribbon...btw itu gambar yg terakhir apa juga masuk di gambar postingan mas hehehe

Balas

mas admin narsis juga ya :D
keren mas :D

Balas

Keren ni ribbon mantap euy, cocok ni buat template percobaan template Bpress
http://jpb-template-roject1.blogspot.com/

Balas

Harus donk kang biar keren hehe...

Balas

Setelah dilihat-lihat keren juga yah tampilan ribonnya, jadi lebih menarik :)

Balas

ckckck bener2 ganteng mas andes. ^^

Balas

weww kereeen sekali mas...

Balas

Narsis ga cuma di facebook doank ya mas....tp di blog juga wkwkwk

Balas

gambar yang ke empat (pojok kanan bawah) kayanya salah masuk tempat hehe.. :)
unik juga image pake ribbon

Balas

mantap kang liat-liat aja nih .. baju bolanya ..

Balas

sambil menyelam minum air itu namanya hehe...

Balas

kaya bintang holiwut yah mas hehe...

Balas

Keren mas tutornya..

Balas

hasilnya keren sekali, sungguh ganteng seperti adminnya. terimakasih.

Balas

itulah seninya blogging mas, bebas tanpa batas mengapresiasikan karya

Balas

dari pada di taruh gambar porno mas ntar melanggar hukum :)

Balas

semoga lekas kelar mas templatenya, saya juga lagi mau poles yang kemaren

Balas

lumayanlah mas semoga bisa menjawab pertanyaan Mas Anton Setiawan

Balas

cuma buat menanggapi yang request aja mas

Balas

wah keren banget hasil nya. Berupa gambar ribbon. kalau proses nya pasti sulit banget ya mas. Apalagi judul nya ke inggris-inggrisan. Bikin puyeng kepala hehe :D

Balas

Biar hening namun bising ya mas :)

Balas

Kalo melanggar biar sy cabut pentil ban nya...hehe :)

Balas

Masih saydara sama mas Anthonie bukan hehe :)

Balas

Minum bandrex mbak Rin..biar ilang puyeng nya..hehe :)

Balas

Banyak istilah dan hal baru yg blm pernah sy dapet sebelumnya..
karena sering dapet pencerahan dari mas
Andes...minimal sy jd sedikit2 tau... :)
lanjut master :)

Balas

Kunjungan Malam Mas. maaf nih agak jarang on blog
Karena sedikit aktivaitas, di rumah jadi baru singgah
Lagi di artikel yang Baru dan, baru juga aku kenal
Ijin belajar lagi nih Mas...

Balas

Kalau belum seger juga Minum Wedang Bajigur
Pasti lebih seger dan lebih fresh hhh

Balas

bisa ada slendang nya , keren kayak admin nya

Balas

sendiri tapi meriah hehehehe

Balas

wah asyik donk kalo bisa request di sini hehe :D

Balas

dengan senang hati.. hehe

Balas

gambar ke-4, fakta tuh. muehehe

Balas

setelah menyimak dengan seksama udah seperti proklamasi kemerdekaan.. dan melihat satu persatu tampilan foto jersey bolanya.. eh yang terahi ada yang beda footonya.. ada labelnya "ganteng"... cuit cuit...... hehehehehe

Balas

Kunjungi Balik yah Blog saya? Jangan Lupa Comment back n Follow yah . . Ini Postingan terbaru kami " Trik Pintar Dalam Mencontek " - http://mafiasitez.blogspot.com/2013/10/trik-pintar-dalam-mencontek.html

Balas

haahahaha yang ada tulisan ganteng nya itu loh yang kurang bagus :D

Bercanda mass :D

Balas

itu yang paling ganteng :| .

Balas

Bebas gaya juga ya mas hehehe

Balas

Klu gambarnya Mas Parno kayaknya ga melanggar hukum tuh..selamat hari raya idul adha mas

Balas

Keren keren... oh ya.. soal navigasi berwarna.. saya barusan koment tuh Mas Andes.. maaf baru mampir lagi...

Balas

Harus membuka kamus mas bud, biar bisa tahu istilah baru. ^^

Balas

Request donk mas. Gimana caranya membuat Add To Cart. Biasanya widget itu ada di web toko online :)

Balas

ah udah banyak blog yang bahas seperti itu mbak, ikuti blog ini saja
http://asmabintang12.blogspot.com/2010/04/tutorial-membuat-blog-jadi-toko.html

tapi kalo umpama mbak ririn mau membangun toko online beneran, misal ada kesulitan bisa contact nanti saya bantu :) insya allah..
biar ga masukin kode secara manual

Balas

Ok terimakasih banyak mas. Langsung menuju ke TKP.... Sebenarnya bukan saya yang ingin membuat toko online mas, tapi teman saya nich hehehe maaf ya mas udah merepotkan :)

Balas

Keren Banget blognya ...ajarin aku dong bagaimana cara memperbaiki tampilan bloggku. Makasih sebelumnya. Salam !

Balas

Datang lagi Mas di artikel Mas Andes. Membuat Ribbon Gallery
Di simpen dulu script nya, nanti kalau ada waktu senggang di
Praktekan terima kasih Mas Andes.

Balas

cara mengubah ukuran gambar.nya gmana ya mas?

Balas

width ama height.. tapi kalo udah ngerubah ukuran gambar ntar di sesuaikan juga kalo ribbonnya tidak pas

Balas

klo untuk di tampilan awal blog tetapi hanya beberapa posting saja / yg dipilih saja untuk dipasang ribbon bagaimana ya caranya mas

Balas

lumayan panjang mas caranya. langkah yang pertama Aktifkan Tautan Judul dan Tautan Lampiran ada di dasbor blogger masuk menu setelan.
https://1.bp.blogspot.com/-NH0tLdxJTtQ/VzuUWM3pu5I/AAAAAAAAAR8/5avl9JZwuKgnYIp79PjjsR0ztuC7kl0VQCLcB/s1600/Untitled-1.png
kalo sudah nanti pada menu posting isikan tautan judul dan lampiran.
https://2.bp.blogspot.com/-7D6SMZsWrac/VzuUWKUnZVI/AAAAAAAAAR4/ICWVZqhNmbEUT7Q7kDz9X3X5OM56l88AgCLcB/s1600/Untitled-2.png
untuk membuat ribon dan menampilkannya gunakan tag kondisional (dalam hal ini perlu mempelajari jenis mimeType) dan css untuk mengatur tampilannya. contoh singkatnya seperti ini:
<b:loop values='data:post.enclosures' var='enclosure'>
<!-- misalkan gallery gambar dengan satu jenis / mime -->
<b:if cond='ddata:enclosure.mimeType == &quot;image/jpeg&quot;'>
<a class='ribbon' expr:href='data:enclosure.url' rel='enclosure'>Gallery</a>
</b:if>
<!-- galeri gambar dengan menggabungkan beberapa jenis / mime -->
<b:if cond='data:enclosure.mimeType in {&quot;image/jpeg&quot;, &quot;image/gif&quot;,&quot;image/png&quot;}'>
<a class='ribbon' expr:href='data:enclosure.url' rel='enclosure'>Gallery</a>
</b:if>
</b:loop>

atur tampilannya dengan CSS
<style type='text/css'>
.ribbon{

/** .... bla bla bla ... **/

}
</style>

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Ribbon Gallery Image di Blog With CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode