Blogger Spoiler Slayt İçerik Eklentisi

Blogger içeriklerine spoiler (spoyler) uygulama - Bu yazımızda bir blog yazısına slayt etkisi ile spoiler (spoyler) uygulaması nasıl oluşturulur, basit blogger ipuçlarını paylaşacağız.

Blogger Slayt Tarzı Spoiler (Spoyler) Yazılara Nasıl Uygulanır?

İlk olarak blogger hesabınız ile oturum açın, açılan sayfada blogunuzu seçin ve blogunuzun arayüzünde bulunan menülerden Şablon > HTML'i Düzenle > CTRL+F yardımıyla </style> yada ]]></b:skin> kodunu bulun ve aşağıdaki CSS kodlarını </style> yada ]]></b:skin> kodu içerisine ekleyin.

#spoiler {
    text-align: center;
}
#spoiler button {
    background-color: #e74c3c;
    box-shadow: 0px 3px 0px 0px #CE3323;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
}
#spoiler button:hover,
#spoiler button:focus {
    background-color: #FF6656;
    outline: none;
}
#spoiler button:active {
    transform: translate(0px, 3px);
    -webkit-transform: translate(0px, 3px);
    box-shadow: 0px 1px 0px 0px;
}
#spoiler-panel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}
#spoiler-panel {
    padding: 24px;
    display: none;
}

Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

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

Blogunuzda oluşturmuş olduğunuz içeriklere spoiler (spoyler) uygulamak için aşağıdaki HTML kodu yeni içerik oluşturma sayfasında HTML bölüme ekleyin ve spoiler (spoyler) içerisinde görünmesini istediğiniz içerikleri HTML kod içerisinde belirtilen yere ekleyin.

<div id="spoiler">
    <button>Butona Tıkla</button>
</div>
<div id="spoiler-panel">
    <---İçerikleri-Buraya-Ekleyin--->
</div>

Uygulama örneğine burada ulaşabilirsiniz:

Ön İzleme

Böylece blogger bir yararlı ipucunu daha öğrenmiş oldunuz.