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
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.
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 Girin2.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>
<div id="content-spoiler">💢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.
<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>
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💢
Hiç yorum yok:
Yorum Gönder