بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
MODIFIKASI SPOILER berguna untuk membuat artikel atau gambar dalam postingan disembunyikan sementara. Hal ini bertujuan supaya tampilan di postingan menjadi lebih pendek dan tidak melebar kemana-mana. Karena sebagian besar dan rata-rata, para blogger menyukai artikel yang jelas, padat dan ringkas bukan?. Nah inilah fungsi utama dari spoiler.
Dengan system buka tutup yang dipergunakan dalam trik ini, maka artikel yang terlalu panjang kebawah bisa dipersingkat dengan menggunakan metode ini. Uniknya lagi, bidang yang ada dalam spoiler hidden bisa ditentukan sesuai dengan kemauan kita. Sehingga tidak melebar kekanan yang pastinya akan memakan bidang sidebar. Keren bukan?
Kreasi dari spoiler juga akan kami tampilkan disini. Sekarang ini, spoiler menggunakan CSS yang sudah dimodifikasi sedikit untuk memberikan sentuhan gradient pada bidang dalam spoiler. Gradient atau warna arsiran membuat warna yang ada pada spoiler menjadi cantik dan menarik. Bukan warna solid yang diterapkan disini.
Baca Juga :
Sehingga nanti dalam spoiler itu akan nampak gradient warna background yang akan mempercantik tampilannya. Selain memperpendek artikel, funginya juga memperindah. Seperti apa sih bentuknya.
Yuk kita buat bersama-sama dengan cara dibawah :
Modifikasi Spoiler Show Hidden dengan CSS
Langsung ke Postingan Baru
Tempelkan kode dibawah pada mode Tampilan HTML, bukan
<a aiotitle="click to expand" href="javascript:togglespoiler('Alifacode')">
<img alt='Spoiler Show Hidden' height='75' src='https://blogger.googleusercontent.com/img/a/AVvXsEgr_GPu72hZYTxBp8dk5ID8Ss8C_XAFR9VkfxkGGi36T1tRXbwDTNVOBnUvpFbydLsWlqU68iiCPrf_21dsCmbTrZEDE7TxlCxKZOk_fMp8wC-ZXp_mkdd6XBExReKhaLsvEOr9Oswc1i0MA5hrW0fPfKv47yj64jzg_HXnA9mGMcobW-1y47s-Hv6Piw' width='350'/></a>
<div class="spoilerhidden" id="Alifacode">
<div style="background-image:linear-gradient(96deg, rgba(236,90,90,1) 15%, rgba(220,236,21,1) 50%, rgba(226,115,10,1) 85%); border:2px dotted #D64541; margin:15px 15px 15px 15px; padding:15px 15px 15px 15px; border-top-right-radius:20px; border-bottom-left-radius:20px; box-shadow:0px 0px 10px #fff;">
Alifacode memberikan spoiler show hidden ini buat kamu semua. Digunakan untuk memperpendek artikel yang terlalu panjang kebawah dan disembunyikan dengan widget ini. Semoga mempertambah cantik blog kalian semua. Selamat mengerjakan ya</div></div>Catatan :
Untuk tulisan : Alifacode memberikan spoiler show hidden ini buat kamu semua. Digunakan untuk memperpendek artikel yang terlalu panjang kebawah dan disembunyikan dengan widget ini. Semoga mempertambah cantik blog kalian semua. Selamat mengerjakan ya .. Ganti dengan tulisan artikel yang akan kamu posting dan kamu berikan di spoiler.
Nah kalo sudah tinggal save artikel kamu dan publikasikan. Jadi deh ada spoilernya sehingga artikel kamu menjadi pendek. Sekian artikel tentang Modifikasi Spoiler Show Hidden dengan CSS. Semoga bermanfaat dan membuat postingan blog kamu menarik. Selamat mengerjakan. Wassalam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Modifikasi Spoiler Show Hidden dengan Trik CSS dan Javascript . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
