For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat efek bingkai ngezoom (polaroid) pada gambar di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat efek bingkai polaroid pada gambar ataupun photo di blogger, dan menariknya efek hingkai polaroid ini memiliki efek zoom ketika disentuh araupun di klik

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 berbagai blog dan website yang membahas seputar efek bingkai polaroid ini, mungkin belum mendapatkan inspirasi sehingga harus menemukan berbagai refrensi untuk di bahas dalam sebuah artikel

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 polaroid

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

Hackers
Hackers

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 */
.rahphoto106{width:100%;text-align:center}.rahpolaroid{background:#fefefe;padding:1rem;-webkit-box-shadow:0 10px 6px rgba(0,0,0,.3);-moz-box-shadow:0 10px 6px rgba(0,0,0,.3);box-shadow:0 10px 6px rgba(0,0,0,.3)}.rahpolaroid>img{width:100%;max-width:100%;height:auto}.rahcapt{font-size:1.5rem;text-align:center;line-height:2em}.rahphoto1212 .rahpolaroid:before{content:'';position:absolute;z-index:-1;transition:all 0.40s}.rahphoto1212{filter:grayscale(100%);margin:25px;width:60%;display:inline-block;transition:all 0.35s}.rahphoto1212:first-child{margin:0 25px 25px 0}
.rahphoto1212:last-child{margin:25px 0 0 25px}.rahphoto1212:nth-of-type(2n+1){transform:rotate(5deg)}.rahphoto1212:nth-of-type(2n+2){transform:rotate(-5deg)}.rahphoto1212:nth-of-type(2n+1).rahpolaroid:before{transform:rotate(6deg);height:20%;width:47%;bottom:30px;right:12px;box-shadow:0 2.1rem 2rem rgba(0,0,0,0.4)}
.rahphoto1212:nth-of-type(2n+2).rahpolaroid:before{transform:rotate(-6deg);height:20%;width:47%;bottom:30px;left:12px;box-shadow:0 2.1rem 2rem rgba(0,0,0,0.4)}
.rahphoto1212:hover{filter:none;width:100%;margin:0;border:1px solid#ccc;box-sizing:border-box;transform:rotate(0deg);transition:all 0.40s}
.rahphoto1212:hover.rahpolaroid:before{content:'';position:absolute;z-index:-1;transform:rotate(0deg);height:60%;width:60%;bottom:0%;right:10%;box-shadow:0 1rem 3rem rgba(0,0,0,0.2);transition:all 0.35s}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML di bawah ini kemudian kamu bisa meletakkan nya sesuai keinginan kamu aja

<div class='rahphoto106'>
<div class='rahphoto1212'>
<div class='rahpolaroid'>
<img alt='Judul gambar seo' src='url_gambar'>
<div class='rahcapt'>Judul Gambar</div>
</div>
</div>
</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 class='rahphoto106'>
<div class='rahphoto1212'>
<div class='rahpolaroid'>
<img alt='Judul gambar seo' src='url_gambar'>
<div class='rahcapt'>Judul Gambar</div>
</div>
</div>
<!-- Tambahkan kode seperti di bawah ini -->
<div class='rahphoto1212'>
<div class='rahpolaroid'>
<img alt='Judul gambar seo' src='url_gambar'>
<div class='rahcapt'>Judul Gambar</div>
</div>
</div>
<!-- and kode -->
<!-- Ulangi seperti contoh di atas -->
</div>

Info: Bagaimana sobat sudah mengerti kan, semoga bermanfaat

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.