Cara MemasangSpoiler di Postingan atau Artikel Blog – Kali ini saya akan membagi tips blogger yang sangat unik dna menarik untuk sobat terapkan di Sebuah Postingan Blog sobat. Spoiler berfungsi untuk menarik turunkan sebuah artikel apabila artikel sobat sangat panjang, sehingga jika kode Spoiler ini di terapkan maka akan lebih meng efisienkan atau simpelkan artikel blog sobat. selengkapnya silahkan sobat demo berikut ini.
Bagaimana?, tertarik untuk mencobanya?. Silahkan simak cara pembuatan nya berikut ini.
1. Buka Blogger sobat > Pergi kemenu Template > Edit HTML > terapkan kode CSS berikut ini sebelum kode </style> atau ]]></b:skin>
Baca juga : Cara Menampilkan Widget Tertentu di Halaman Tertentu
Baca juga : Cara Menampilkan Widget Tertentu di Halaman Tertentu
#flippy {
text-align: center;
}
#flippy button {
background: #aa65c7;
color: #fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 0px 3px 0px 0px #883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
background: #9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: #f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}
2. selanjutnya untuk kode jQuery terapkan sebelum </body>
</body>
<script>
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>
3. langkah selanjutnya terapkan kode di bawah ini di dalam postingan teb HTML.
<div id="flippy"><button>Cekidot</button></div>
<div id="flippanel">
---ISI KONTEN ANDA TERAPKAN DISINI---
</div>
Baca juga : Cara Membuat Tool Parse HTML Pada Halaman Statis
Demikianlah Tutorial mengenai Cara Memasang Spoiler di Postingan atau Artikel Blog, yang harus sobat ketahui. Semoga dapat memberikan ilmu yang bermanfaat.
0 Komentar