اسپویلر خوب چگونه پیوندها را از قالب استاندارد قدیمی بلاگر حذف کنیم

شما به دنبال یک اسپویلر معمولی هستید - یک عنصر صفحه HTML ساده که می تواند با کلیک بر روی آن باز شود و با کلیک بر روی آن بسته شود. پیداش کردی!

1. یک اسپویلر بسیار ساده JS+HTML (1 بار در هر صفحه)

اگر نیاز به جاسازی کد در یک صفحه HTML دارید که از هیچ فایل جاوا اسکریپت استفاده نمی کند، به سادگی این کد را در هر نقطه از صفحه مورد نیاز کپی کنید:

تابع openSpoiler(elem) (
document.getElementById("spioler").style.display="block";
document.getElementById("but_spo").style.display="none";
}
تابع closeSpoiler(elem)
{
document.getElementById("spioler").style.display="none";
document.getElementById("but_spo").style.display="block";
}

اگر به یک فایل *.js که به صفحه مورد نیاز متصل است دسترسی دارید، کد بالا را بدون تگ در ابتدا و بدون تگ در انتها در آن کپی کنید.

123

به جای 123 اطلاعات مورد نیاز خود را وارد کنید.
به جای "اطلاعات اضافی" می توانید از هر عبارتی استفاده کنید.

مثال:

او: وقتی گواهینامه ام را گرفتم نمی ترسی با من سوار شوی؟
او: نه
او: واقعا نمی ترسی؟
او: بله
او: وای، حداقل از من حمایت کردی.))) وگرنه همه می گویند که سفر با من ترسناک خواهد بود.
او: من فقط از مرگ نمی ترسم.

همچنین اگر می‌خواهید اسپویلر روی ماوس باز شود، می‌توانید این کد را تغییر دهید:

123

مثال:

- عزیزم، حالم خوب نیست. - زهر بنوش جان! - چه لعنتی؟ اوه - اوه، اشتباه گفتم. دمنوش های گیاهی بنوشید.

2. اسپویلر CSS+HTML (در هر صفحه چندین بار)

اسپویلر

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor، posuere mattis nunc. عدد صحیح eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.


Etiam congue، neque a commodo iaculis، nisl massa varius felis، eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum، faucibus lectus id، varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.

اسپویلر Contenido normal intercalado sin

ورودی(
نمایش: هیچ
}
ورودی + برچسب (
نمایش: بلوک؛
عرض: 200 پیکسل؛
حاشیه: 0 خودکار;
بالشتک: 5px 20px;
پس زمینه: #e1a;
رنگ: #fff;
text-align: center;
اندازه فونت: 24px;
حاشیه شعاع: 8 پیکسل.
مکان نما: اشاره گر
انتقال: همه 0.6;
}
ورودی: بررسی شده + برچسب (
رنگ: #333;
پس زمینه: #ccc;
}
ورودی ~ .اسپویلر (
عرض: 90%;
ارتفاع: 0;
سرریز: پنهان;
کدورت: 0;
حاشیه: 10 پیکسل خودکار 0;
بالشتک: 10 پیکسل؛
پس زمینه: #eee;
حاشیه: 1px جامد #ccc;
حاشیه شعاع: 8 پیکسل.
انتقال: همه 0.6;
}
ورودی: بررسی شده + برچسب + اسپویلر(
ارتفاع: خودکار؛
کدورت: 1;
بالشتک: 10 پیکسل؛
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor، posuere mattis nunc. عدد صحیح eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.

Etiam congue، neque a commodo iaculis، nisl massa varius felis، eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum، faucibus lectus id، varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.

اسپویلر 1

Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.

اسپویلر 2

3. Spoiler JS (jQuery)+HTML (در هر صفحه چندین بار)

مهم است که به تعداد عناصر هدر و ظرف احترام بگذارید. با رعایت سلسله مراتب HTML می توان از تو در تو استفاده کرد

اجازه دهید sp_content=$(".sp_content"),sp_title=$(".sp_title");
sp_content.hide();
sp_title.on("click",function())(
اجازه دهید inx=$(".sp_title").index(this);
$(sp_content).slideToggle(100)
})

.sp_title(پس‌زمینه:#ff002a;رنگ:#fff;بالشتک:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px; مکان نما: اشاره گر)
.sp_content(پس‌زمینه:#fff;رنگ:#000;بالشتک:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc)

عنوان اسپویل

محتوای اسپویل

عنوان اسپویل 1

محتوای اسپویل 1

عنوان اسپویل 2

محتوای اسپویل 2

4. Spoiler JS (jQuery)+HTML v2 (در هر صفحه چندین بار)

مهم است که به تعداد عناصر هدر و ظرف احترام بگذارید. با رعایت سلسله مراتب HTML می توان از تو در تو استفاده کرد
کتابخانه jQuery نیز باید به صفحه اضافه شود:

اجازه دهید sp_content2=$(".sp_content2"),sp_title2=$(".sp_title2");
sp_content2.hide();
sp_title2.on("click",function())(
اجازه دهید inx=$(".sp_title2").index(this);
if($(sp_content2).css("display")==="هیچکدام")(
$(sp_content2).slideUp(100);
$(sp_content2).slideDown(100);
)دیگر(
$(sp_content2).slideUp(100);
}
})

.sp_title2(پس‌زمینه:#0086ff;رنگ:#fff;بالشتک:7px 6px; margin-top:4px;-webkit-border-radius:3px;border-radius:3px; مکان نما: اشاره گر)
.sp_content2(پس‌زمینه:#fff;رنگ:#000;بالشتک:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc)

عنوان اسپویل

محتوای اسپویل

عنوان اسپویل 1

محتوای اسپویل 1

عنوان اسپویل 2

محتوای اسپویل 2

5. Spoiler JS (jQuery)+HTML. دکمه ها (چند بار در هر صفحه)

مهم است که به تعداد عناصر هدر و ظرف احترام بگذارید. با رعایت سلسله مراتب HTML می توان از تو در تو استفاده کرد
کتابخانه jQuery نیز باید به صفحه اضافه شود:

اسپویلر 1 اسپویلر 2 اسپویلر 3


Spoiler 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci doloremque, exercitationem totam nostrum accusantium illo quibusdam sunt fugit a consectetur libero ea minima velit eaque iure ut odit eum suscipit!


Spoiler 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut suscipit distinctio debitis ea voluptates alias delectus quia voluptas vitae، nisi atque laudantium repudiandae deleniti، natus fugiat، quo، esse rem.


Spoiler 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates، aperiam، itaque. Possimus، quas perspiciatis، illum assummenda odit amet obcaecati corporis، dolores aperiam a illo repellendus sit، commodi repellat quam suscipit؟

بدن (
فونت: 16px/1.5em "Segoe UI", Arial, sans-serif;
پس زمینه: #bfb6a0;
رنگ: #fff;
عرض: 60%;
حاشیه: 20 پیکسل خودکار؛
}
.spoiler-link(
صفحه نمایش: inline-block;
text-decoration: هیچ;
رنگ: #fff;
پس زمینه: #b63333;
بالشتک: 10px 25px;
مرز-شعاع: 3px;
text-shadow: 0 1px 0 #8c1111;
حاشیه پایین: 1px جامد #8c1111;
-webkit-transition: همه 0.6s ease.
انتقال: همه 0.6s سهولت.
}
.spoiler-link:hover (
پس زمینه: #8c1111;
}
.اسپویلر-لینک + .پیوند اسپویلر (
حاشیه سمت چپ: 5px;
}
.spoiler-link--active (
پس زمینه: #4f9c3d;
حاشیه-رنگ: #2d751c;
text-shadow: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover (
پس زمینه: #2d751c;
}
.اسپویلر(
پس زمینه: #fff;
رنگ: #907c6b;
padding: 25px;
margin-top: 25px;
مرز-شعاع: 3px;
حاشیه پایین: 1px جامد #999;
}
.spoiler__title(
حاشیه بالا: 0;
فونت-وزن: 200;
رنگ: #b63333;
}

$(تابع())(
$(".اسپویلر").hide();
$(".spoiler-link").on("click", function(e) (
var idSpoiler = $(this).attr("href")،
classSelect = "spoiler-link--active";
$(this).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
});
});