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??