Merhaba arkadaşlar,
Bu konuda MaxiGame'de kullandığımız JS (JavaScript) Spoiler BB Kodunu sizler ile paylaşacağım.
Spoilerin Kapalı Görünümü: http://i66.tinypic.com/jk7uvd.jpg
Spoilerin Açık Görünümü: http://oi67.tinypic.com/33cc5tg.jpg
Yapılacaklar 3 aşamadan oluşmaktadır, ilk aşamamız ile başlıyoruz:
İlk Aşama:
Öncelikle şu 2 görseli indirip ftpden images klasörüne veya herhangi bir yere atınız:
Daha sonra...
Admin Paneli > Kişisel BB Kodları > Yeni BBKodu Ekle'ye tıklıyoruz ve şu şekilde ayarlıyoruz:
Başlık: SPOILER
Tag: SPOILER
Replacement:
Kod:
<div class="spoilx"><div class="titleee"><img src="images/spoilermax.gif" />Gizlenmiş içeriği görüntülemek için tıklayın</div>
<div class="cont" style="display: none;">
<div align="left" style="padding: 5px 0px 5px 0px;">{param}</div>
</div>
</div>Örnek: [ SPOILER ]spoiler deneme[/ SPOILER ] boşluklar olmadan.
Açıklama: Boş bırakılacak
{option} kullanılsınmı? : Hayır
Tuş Grafiği (Opsiyonel): images/spoiler.gif
Remove Tag If Empty: Evet
Disable BB Code Within This BB Code: Hayır
Disable Smilies Within This BB Code: Hayır
Disable Word Wrapping Within This BB Code: Hayır
Disable Automatic Link Parsing Within This BB Code: Hayır
Bu şekilde ayarladıktan sonra "Kaydet" butonuna tıklayıp kaydediyoruz ve oradan çıkıyoruz.
İkinci Aşama:
Admin panelinden Stiller ve Temalar bölümünden "headinclude" temamızı bulup açıyoruz ve en altına şu kodu yazıp kaydediyoruz:
Kod:
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".titleee").click(function () {
$(this).next('.cont').slideToggle();
if($(this).html() == '<img src="images/spoilermax.gif">Gizlenmiş içeriği görüntülemek için tıklayın'){
$(this).html('<img src="images/spoilermax.gif">İçeriği gizlemek için tıklayın');
} else {
$(this).html('<img src="images/spoilermax.gif">Gizlenmiş içeriği görüntülemek için tıklayın');
}
});
});
</script>Üçüncü ve Son Aşama:
Yine Stiller ve Temalar bölümünden "additional.css" temamıcı bulup açıyoruz, en altına şunları yazıp kaydediyoruz.
Kod:
.spoilx
{
background-color: rgba(239, 239, 239, 0.31);font-family:tahoma;
margin: 10px 0px 0px 0px;
padding: 7px;
border: 1px solid rgb(255, 255, 255);
border-radius: 3px !important;
box-shadow: inset 1px 1px 4px rgba(100, 100, 100, 0.19) !important;
width: 95%;
}
.spoilx .titleee {
color: rgba(138, 138, 138, 1);
position: relative;
cursor:pointer;
top: -2px;
}
.spoilx .titleee img {
opacity: 0.6 !important;
position: relative;
top: 6px;
cursor:pointer;
}
.spoilx .titleee:hover {
color:#ff8000;font-weight:bold;
}
.spoilx .cont
{Bu işlemi yaptıktan sonra JS Spoiler BB Kodumuz kullanıma hazır olacaktır, güle güle kullanın.
