Blogger animasyonlu göster gizle butonu , blogger spoiler buton kodu , göster gizle buton kodu , spoiler buton yapımı ,animasyonlu göster gizle buton yapımı ,TeknoWin
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💢
Axact

Admin Ælis

TeknooWin.blogspot.com Bir çok konuda fikir sahibi olduğu kategorilere yönelip kullanıcıya en iyi ve en özgün bilgiyi sunmayı amaç edinmiştir.TeknoWin Olarak Güncel Haber , Teknoloji , İnternet , Program İndirme , Blogger Konuları , Blogger Temaları Magazin Haberleri , İlginç Bilgiler ,Pratik Bilgiler ve Çözümler , Program Hataları ve Çözümleri Film İndir ve Dizi İndir Oyun İndir , Film Dizi Hakkında Öneriler , Videolar Komik Gifler Fotograflar Tüm Bu Kategorileri Baz Alan Genel Güncel Paylaşım ve Portal Sitesidir...

Yorum Yap:

0 Hiç Yorum Yapılmamış İlk Yorumu Sen Yapmak İstermisin:

Yorum yazabilmek için:
Yorumlama biçimi seçeneklerinden profil üyeliğiniz yoksa; Adı/URL profilini seçip kendi belirlediğiniz isimle URL kısmını boş bırakarak yorum yazabilir ya da Anonim profili seçeneği ile isimsiz olarak yorum yapabilirsiniz.