-->

April 11, 2017

Selamat pagi sobat, di pagi ini saya akan membagikan Tutorial sederhana sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar pada postingan Amp, ya begitulah kira-kira pembahasan kali ini Sesuai dengan nama judul postingan yaitu Cara Membuat Efek Blur (Samar) Pada Gambar Postingan Blog AMP yang jelas gambar tersebut sepintas akan terlihat Blur/Buram dan akan terlihat lebih jelas atau terang setelah di klik oleh mouse.

Fungsi ini mirip dengan show hide pada Spoiler atau Accordian. Karna ini menggunakan CSS dan tidak menggunakan Javascriptberarti bisa diterapkan di AMP HTML.

Pasti sobat penasaran ingin melihat hasilnya dan tertarik ingin memasangnya juga. Ok langsung saja ke pembahasan membuat efek gambar postingan blur/buram di blog Amp.

Supaya menyakinkan sobat bisa lihat Demo di bawah

Demo


Tampilkan

Cara Membuat Efek Blur (Buram) Pada Gambar Postingan Blog AMP

Langsung saja berikut langkah-langkahnya:

1. Sobat copy paste CSS di bawah ini, dan simpan style amp-custom untuk halaman postingan 
#blr {
position: relative;
z-index:9999;
top:0px;
}

input[type=checkbox] + .blu {
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
background:transparent;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
margin:40px 0 15px 0;
} 

input[type=checkbox]:checked + .blu {
-moz-filter: blur(0);
-webkit-filter: blur(0);
-o-filter: blur(0);
filter: blur(0);
background:transparent;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
margin:10px 0 0 0;
}

Untuk mengatur tingkat keburaman ubah saja nilah filternya
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);

2. Setelah itu copy kode HTML di bawah ini di halaman postingan yang sobat inginkan: 

<input id='blr' name='blr' title='' type='checkbox'/> Tampilkan
<div class='blu'>

Konten -isi dengan Teks, Gambar atau Video

</div>

Selamat Mencoba.

Sumber : http://www.mbahas.com

Amp, Blogger, CSS, Tutorial

You Might Also Like:

Next Post
Previous Post
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre>or<pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser

Tambahkan Komentar Tutup Komentar

Disqus Comments