vBulletin Spoiler BBCODE

[erkolay]

vBulletin Spoiler BBCODE

vBulletin forumlarınızda uzun alıntılar, çok fazla görsel barındıran sunumlar yaparken Spoiler kullanımı önerilir. Bu sayede sayfadaki yüklenme süresi düşer. Aşağıdaki görselerde de görüldüğü gibi mesajlara sadelik kazandırır.

https://resim.webmaster.bbs.tr/image.uploads/14-07-2015/original-4bbbc4a762f4e95b5ce427e89c335f42.png

https://resim.webmaster.bbs.tr/image.uploads/14-07-2015/original-de6d3f5fe074e87194ca55cb0e8faef0.png

Peki Spoiler BBCODE nasıl eklenir?

Admin Panel'de Kişisel BBcode'lar menüsünü açalım ve Yeni BBCode Ekle'ye tıklayalım. Açılan sayfada şu bilgileri ekleyip kaydedelim.

Başlık : Spoiler
BB Kodu Etiket Adı : Spoiler
Replacement :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(
function()
{
$("input.changevalue").toggle(
function()
{
$(this).val('Devamına bak');
},
function()
{
$(this).val('Devamına bak');
}
);
}
);
</script>
<style>
.eti-ket_spoiler {
background-color: #CDE1F7;
border: 1px solid #7998AD;
border-radius: 5px;
margin: 30px 10px 0;
padding: 5px 10px; }
.eti-ket_spoiler h4 {
color: #7998AD;
font-size: 13px;
font-style: italic;
text-align: right; }
.eti-ket_spoiler_box {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #7998AD;
border-radius: 5px;
display: block;
max-height: 550px;
overflow: auto;
padding: 10px;
width: 98%;
margin-top: 5px;
display: none;}
</style>
<div class=" eti-ket_spoiler">
<span style=" background: none repeat scroll 0 0 #CDE1F7;border-radius: 5px;border-top: 1px solid #7998AD; float: left;margin-top: -20px;padding: 0 5px;">
<img src="images/visible.png" alt="Spoiler"/>
</span>
<h4>
<input type="button" class="changevalue" value="Devamına bak" style=" background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: medium none; color: #7998AD; cursor: pointer; font-size: 15px; font-style: italic; text-align: right; " onclick="$(this).parents('.eti-ket_spoiler').find('.eti-ket_spoiler_box').toggle('slow');">
</h4>
<div class="eti-ket_spoiler_box">
{param}
</div>
</div>

Örnek: [ Spoiler ]İçerik[ /Spoiler ] (Buradaki boşluklar olmayacak. Boşluk bırakmazsak örnek kodu göremezsiniz.
Açıklama: İçeriği kapanır açılır pencere ile gizleyebilir küçültebilirsiniz
{option} kullanılsınmı? : Hayır
Tuş Grafiği (Opsiyonel) : images/spoiler.png (Ekteki iki ikonu indirip, FTP'de images klasörüne atın)
Boş ise Etiketi Kaldır: Evet
Diğer Seçenekler : Hayır.

Kaydet deyin. Hepsi bu kadar.

spoiler ikonunu indirin:

[deniz]

Çok güzel bir kod, eline sağlık usta.