السلام عليكم ورحمة الله وبركاته
اليوم سوف نتعرف على كيفية إضافة تأثير الإظهار والإخفاء على محتوى التدوينة أو المشاركة لمدونات بلوجر .
1- أدخل إلى مدونتك | أختر لوحة التحكم >> قالب >> تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- إضف الكود التالي فوقه :
#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;} 4- إبحث عن الوسم : </head>
5- أضف الكود التالي فوقه ك
<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> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
6- إحفظ القالب .
7- عندما تريد إخفاء أو ظهار محتوى التدوينة أستخدم هذا الكود في " HTML " :
<div id="content-spoiler">
<button>ضع هنا عنوان التدوينة</button></div>
<div id="spoilerpanel">
ضع هنا وصف أو شرح التدوينة
<div class="separator" style="clear: both; text-align: center;"><a href="رابط الموضوع المراد شرحه" style="margin-left: 1em; margin-right: 1em;"><img src="رابط الصورة" style="border: none;" /></a></div>
ضع هنا تكملة الوصف أو الشرح
</div>
</div> وأخيراً نترككم برعاية الله وتوفيقه
ليست هناك تعليقات:
إرسال تعليق