Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger'da Spoiler Butonu Nasıl Yapılır?


FacebookTwitterPinterestTumblrYazdır


Spoiler, özellikle bir filmin konusu ile ilgili detayları içeren ve insanların filmi izlemeden önce bu metni okurlar ise, alacakları keyfi etkileyebileceği düşünülen yazılar bütünü olarak tanımlanabilir. Spoiler butonu da, gizlenmiş içeriğin bulunduğu ve yalnızca istenilir ise tıklanarak okunabilmesine olanak sağlayan işlevsel bir özelliktir. Birçok film sitesinde de spoiler özelliği yaygın olarak kullanılmakta olup, bu özelliği kolayca Blogger üzerinde de kullanabilirsiniz. Adımları doğru tamamlamanız durumunda özelliği, blogunuzda problemsiz bir şekilde kullanmaya başlayabilirsiniz.

AYRICA: Blogger’da Arama Sonuçları için Listelenecek Yazı Sayısını Değiştirelim

Blogger için Spoiler Butonu Yapıyoruz

  • Temanızda jQuery kütüphanesi olduğundan emin olun. Yok ise öncelikle aşağıdaki kodu bulun.

<head>

  • Yukarıdaki kodun hemen altına ise aşağıdaki kodu ekleyin.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  • Temanızın CSS bölümüne aşağıdaki kodları ekleyin.

#spoiler {
text-align: left;
}
#spoiler button {
background: #CC0000;
color: #fff;
text-align: center;
margin: 0 auto;
border: none;
padding: 10px 25px;
margin: 5px auto;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
}
#spoiler button:hover, #spoiler button:focus {
background: #660000;
outline: none;
}
#spoiler-icerik {
padding: 15px;
margin-top:10px;
text-align: left;
background: #f9f9f9;
border-left:2px solid #ddd;
display:none;
}

  • Şablon > HTML'yi Düzenle bölümüne girerek, aşağıdaki kodu bulun.

</body>

  • Aşağıdaki kodu ise, yukarıdaki kodun hemen öncesine ekleyin.

<script>
$(document).ready(function() {
$("#spoiler").click(function() {
$("#spoiler-icerik").slideToggle("normal");
});
});
</script>

  • İçeriğinize spoiler butonu eklemek için "HTML" sekmesine geçiş yapın.
  • Aşağıdaki kodu kendinize göre düzenleyerek içeriğinizi yayımlayabilirsiniz.

<div id="spoiler"><button>Spoiler</button></div>
<div id="spoiler-icerik">
Gizli içerik bu alana gelecektir.
</div>

Not: Kırmızı renkli metni, gizlemek istediğiniz metin ile değiştirmeyi unutmayın.

Sonuç: Spoiler butonunun mevcut görünümü ise aşağıda yer almaktadır.


    • fatih
    • 19 Ekim 2016, 03:00

    bunu wordpresste yapsak çalışır mı ve tam olarak nasıl yapmalıyız ?

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık