Cara Mudah Membuat Spoiler di Blog Terbaru

Cara Mudah Membuat Spoiler di Blog Terbaru
spoiler di blog
Cara Mudah Membuat Spoiler di Blog Terbaru - Anda tahu spoiler? spoiler sendiri mempunyai arti pembeberan, selebihnya sendiri anda bisa lihat di wikipedia ya karena saya kali ini tidak membahas tentang arti dari spoiler. Namun, saya akan membahas tentang cara mudah membuat spoiler di blog terbaru.

Baca Juga: Cara Mencari Gambar Tanpa Hak Cipta di Google

Jika anda pengguna forum-forum indonesia maupun luar, pasti anda tahu yang namanya spoiler. Ya, ketika kita mengklik spoiler tersebut maka akan muncul beberapa penjelasan bisa berupa teks, gambar, atau video. Nah, kali ini saya akan membuat seperti itu. Jika anda pengguna kaskus maka anda tahu juga spoiler. Sebenarnya saya akan membuat gaya spoiler seperti kaskus. Namun, desainnya itu terlihat biasa-biasa saja.

Dan saya meniru dari mbak arlina dari blognya yaitu www.arlinadzgn.com. Saya lihat tutorial pembuatan spoilernya sangat mudah sekali dan desainya sangat bagus juga. Maka dari itu saya hari ini akan share cara mudah membuat spoiler di blog terbaru ala arlina.

Ok, silahkan anda ikuti tutorial dibawah ini untuk mengetahui cara-caranya.

  • Pertama copy code dibawah ini 

#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;
}

  • Masuk menu Tata Letak > Edit HTML > Pastekan tepat diatas </style> 
    Cara Mudah Membuat Spoiler di Blog Terbaru
    pastekan diatas </style>
  • Setelah itu copy code dibawah ini 

<script>

$(document).ready(function() {

    $("#flippy").click(function() {

        $("#flippanel").slideToggle("normal");

    });
});
</script>

  • Kemudian pastekan diatas </body> 
    cara mudah membuat spoiler di blog terbaru
    pastekan diatas </body>
     
  • Untuk di postinganya, copy code dibawah ini 

<div id="flippy"><button>Cekidot</button></div>

<div id="flippanel">

---ISI KONTEN ANDA TERAPKAN DISINI---

</div>

  •  Dan pastekan di HTML pada postingan. Ubah kata-kata "isi konten anda terapkan disini" dengan kata-kata di spoiler anda. Dan ganti kata "Cekidot" dengan kata-kata anda sendiri 
    Cara Mudah Membuat Spoiler di Blog Terbaru
    post
  • Selesai, nah ini contoh dari cara membuat spoiler diatas


cewek mainin burung
mainin burung
Baca Juga: Cara Mengatasi Rasa Malas Menulis Artikel Blog

Nah, begitulah kira-kira cara mudah membuat spoiler di blog terbaru. Mudah-mudahan bisa bermanfaat bagi kita semua. Dan jika anda menyukai postingan saya kali ini tolong bagikanlah. Dengan anda membagikan postingan saya, saya akan merasa senang. Dan saya mohon maaf apabila ada tutorial saya yang kurang lengkap. Saya mohon maaf yang sebesar-besarnya

Subscribe to receive free email updates:

0 Response to "Cara Mudah Membuat Spoiler di Blog Terbaru"

Post a Comment