Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat efek bingkai pada gambar ataupun photo di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kaki ini yuk langsung aja kita bahas bersama sama
Refrensi
Dalam membuat sebuah artikel apapun itu, pastinya admin membutuhkan sebuah refrensi semisal apa yang sedang populer saat ini? itulah yang admin bahas, terkadang juga apapun yang pengen admin bahas akan admin bahas meskipun hal yang tidak populer bagi sebagian orang, suka suka admin aja gitu lah, oke sama hal nya dengan postingan kali ini dalam membuat efek bingkai diblogger admin mencomot sebuah refrensi sekaligus source kodenya dari blognya mbak igniel, jika penasaran kunjungi aja websitenya langsung oke
Bingkai Foto
Bingkai foto di blogger terbentuk dari border box yang di buat sedikit berbeda hingga menyerupai sebuah bingkai (frame) yang meliputi sebuah photo ataupun gambar di blogger dan dalam penyebutan yang lain bisa di sebut sebagai gaya rahphoto106
Menggunakan CSS
Dalam membuat serta menampilkan bingkai pada sebuah photo ataupun gambar di blogger hanya di perlukan kode CSS di dalam pembuatan nya, so jadi tampilan nya akan sangat ringat dan juga cepat saat efek bingkai pada gambar di blogger di tampilkan
Contoh Tampilan
Jika kamu penasaran bagaimana kah contoh tampilan dari efek bingkai di blogger tersebut kamu bisa melihatnya seperti pada tampilan di bawah ini
![My camera My camera](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePBEi5pMM5cGRopKYJhA0LSm804tT28kbIhqycDbXzVZOjDsKOQJZqJUAfVvAh8GgQi1cstxDKUeWB1ZzuGoqyoMNarZXClmct04fRkl-AIv276u4zAHspi--X2MWRoHHa7Txy2YQRzKuNY-_SYRjM38_QIQhHPFJuOKQnYrlGH0LSWDZJ9stPwu1/s1600/images%20%2816%29.jpeg)
Info: Bagaimana sobat icloudZer keren sekali yak tampilan dari efek bingkainya
Cara pembuatan
Baiklah admin bakalan menjabarkan mengenai bagaimana kah caranya membuat tampilan dari efek bingkai rahphoto106 di blogger, perhatikan langkah demi langkah yang bakakan admin jelaskan di bawah ini
Kode CSS
Langkah pertama seperti biasanya kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>
/* Polaroid Photo Effect by ICloudice.com */
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');figure, figcaption {display: block;}#rahphoto106{width:100%;padding:0px 10px;margin:auto;text-align: center;}#rahphoto106 img{max-width: 100%;width: 100%;height: auto;}#rahphoto106 figure{position:relative;width: auto;max-width: 600px;margin: 20px auto 0px;padding: 6px 8px 10px 8px;display:inline-block;-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);background-color: #f80000;-webkit-transform:rotate(-1deg);-moz-transform: rotate(-1deg);-o-transform: rotate(-1deg);-ms-transform: rotate(-1deg);transform: rotate(-1deg);-webkit-backface-visibility:hidden;}#rahphoto106 figure:nth-child(even) {margin:20px 18px 20px 25px;-webkit-transform:rotate(2deg);-moz-transform: rotate(2deg);-o-transform: rotate(2deg);-ms-transform: rotate(2deg);transform: rotate(2deg);-webkit-backface-visibility:hidden;-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);}#rahphoto106 figure:before {content: '';display: block;position: absolute;left: 5px;top: -10px;width: 75px;height: 25px;z-index: 1;background-color: rgba(222,220,198,0.7);-webkit-transform: rotate(-12deg);-moz-transform: rotate(-12deg);-o-transform: rotate(-12deg);-ms-transform: rotate(-12deg);}#rahphoto106 figure:nth-child(even):before {left:unset;right:10px;top:-10px;width: 55px;height: 25px;z-index: 1;-webkit-transform: rotate(12deg);-moz-transform: rotate(12deg);-o-transform: rotate(12deg);-ms-transform: rotate(12deg);}#rahphoto106 figcaption{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23fff'/%3E%3C/svg%3E") left 2px / 1.28rem no-repeat;margin-top:1rem;padding-left:1.76rem;text-align:left;width: 100%;height:100%}#rahphoto106 figcaption{text-align:center;font-family: cursive, Arial, Helvetica, sans-serif;color:#fefefe;font-style:italic;letter-spacing:0.09em;margin-top:10px;}
Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Koe HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML di bawah ini kemudian kamu bisa meletakkan nya sesuai keinginan kamu aja
<div id="rahphoto106">
<figure>
<img src="URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
<figcaption>Caption gambar</figcaption>
</figure>
</div>
Info: Fungsi dari kode HTML di atas adalah untuk menampilkan bingkai gambar tersebut
Penjelasan kode
Sedikit admin jelaskan bahwa untuk menambahkan jumlah efek bingkai lebih dari satu gunakan kode seperti contoh di hawah ini
<div id="rahphoto106">
<figure>
<img src="URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
<figcaption>Caption gambar</figcaption>
</figure>
<figure>
<img src="URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
<figcaption>Caption gambar</figcaption>
</figure>
<!-- tambahkan lagi <figure> disini yak -->
</div>
Info: Bagaimana sobat sudah mengerti kan, semoga bermanfaat