كيفية إضافة تأثير إظهار وأخفاء على محتوى التدوينة لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

اليوم سوف نتعرف على كيفية إضافة تأثير الإظهار والإخفاء على محتوى التدوينة أو المشاركة لمدونات بلوجر .

أنقر للمعاينة

click to view

- طريقة التركيب :

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> 

وأخيراً نترككم برعاية الله وتوفيقه