Blogger İçerik Gizleme Buton Yapımı Spoiler Efektli Buton Kodları

Blogger Efekli Göster Gizle Butonu Spoiler Buton Kodları Ve Yapımı 
Merhaba Sizlere bu yazımda spoiler butonu yapımını anlatıcam. Bir çoğumuz sayfamızdaki bazı resim, yazı ve içerikleri bazu durumlarda gizlemek isteriz. Kendimden Örnek vermek gerekirse ben 5 6 tane paylaştığım resim'min alt alta kapladığı yeri hiç sevmem. Yada mesela bi konu hakkında bi yazı yazdınız ve bu film olabilir yada bir kitap hakkında olabilir bunu ziyaretçilerinize "Spoiler" başlığı altında göstermek yerine aşagıdaki anlatacağım yolla düzgün bi şekilde gizleye bilirsiniz. Umarım beğenirsiniz fazla uzatmadan anlatıma geçiyorum. Aşagıya bir demo koydum beğenirseniz kendi sitenizede uygularsınız.
Demo / Önizle

Blogunuza içerik spoilerini eklemek için aşağıdaki adımları izleyin

1.Adım  Blogger Hesabınızda oturum açın ve Blogger Panelinize Girin

2.Adım Şablon >HTML Düzenleye tıklayın

3.Adım Şimdi CTRL+F (Windows İçin) CMD+F (Mac İçin) Tuşu İle Arama Penceresini açın ve  ]]></b:skin> bu kodu aratın

4.Adım Alttaki kodu kopyalayıp ]]></b:skin> bu kodun üzerine yapıştırın.

#content-spoiler {text-align:center;}
#content-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;
color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;
font-size:14px;transition:all .3s ease-out}
#content-spoiler button:hover, #content-spoiler button:focus 
{outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;
border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}

5.Adım Adım Şimdi CTRL+F (Windows İçin) CMD+F (Mac İçin) Tuşu İle Arama Penceresini açın ve </head> bu kodu aratın

6.Adım Alttaki kodu kopyalayıp </head> bu kodun üzerine yapıştırın.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" 
type="text/javascript"></script>

<script type="text/javascript">
//Spoiler
$(document).ready(function(){$("#content-spoiler").click(function()
{$("#spoilerpanel").slideToggle("normal")})});
</script>

7.Adım Şablonu Kaydedip çıkabilirsiniz.

Not : Temada en son Jquery içeriyorsa, aşağıdaki Jquery dosyasını eklemek zorunda deyilsiniz.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Nasıl Çalışır Hale Getirilir ?

Bu Özel butonu kulanmak için.Blog yazısı yazarken kodu HTML görünümünde eklemeniz gerekmektedir.Yazı editöründen HTML modunu seçin.Simdi aşağıda vermiş olduğum kodu ekleyin:

<div id="content-spoiler">
<button>Spoiler</button></div>
<div id="spoilerpanel">
GİZLEMEK İSTEDİĞİNİZ YAZILAR BURAYA
<div class="separator" style="clear: both; text-align: center;"><a href="Resim Url" 
style="margin-left: 1em; margin-right: 1em;"><img src="Resim Url" 
style="border: none;" /></a></div>
GİZLEMEK İSTEDİĞİNİZ YAZILAR BURAYA
</div>
</div>

💢Resim Url Yazan yere eklemek istediğiniz resmi tam adresini yazınız.Eger Resmi Manuel olarak eklemek istiyorsanız o kısımdaki kodları kaldırıp resmi ekleyebilirsiniz.
Evet Spoiler Butonunuz Hayırlı Olsun Anlatıcaklarım Bu Kadar Umarım Faydalı Olmuştur Takıldıgınız Yapamadığınız veya Sorularınız Olursa Aşağıya Yorum Olarak Belirtiniz.TeknoWin İyi Günler Diler💢