طريقة اضافة زر اظهار و اخفاء الواجهة الى بلوجر

طريقة اضافة زر اظهار و اخفاء الواجهة الى بلوجر - مرحبا بكم زوار مدونة كورد ويب في شرح جديد و اضافة جديدة على مدونة كورد ويب طريقة اضافة زر اخفاء و اظهار الواجهة  و الكثير من المدونين يحتاجون هذه الاضافة 👌 خاصة الذين ينشرون القوالب و هذه الاضافة ستساعدك على تقصير طول تدوينتك ✅ حيث اذا اردنا ان نضهر للزائر الواجهة الكاملة لقالب مثلا فواجهة القالب طويلة جدا وهذا ما سيجعل التدوينة اطول لذا فاحضرت لكم اليوم هذه الاضافة. 💡

• معاينة

طريقة اضافة زر اظهار و اخفاء الواجهة

1. اذهب الى لوحة التحكم ثم قالب ثم تحرير HTML
2. ابحث عن  </head>  وضع فوقه هذا الكود

 <style>
/* زر اظهار و اخفاء الواجهة th3kurdi.blogspot.com */
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-size:14px;background-color:#f48878;font-family:tahoma;color:#fff!important;padding:8px 12px!important;text-transform:uppercase;border-radius:2px;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;background-color:#3695DB;color:#fff;}
#flippanel {padding:0;text-align:right;}
#flippanel {display:none;}
#flippanel img {margin:10px auto;}
</style> 

3. ثم ابحث عن  </body>  وضع فوقه هذا الكود

 //Spoiler
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
}); 

4. اضغط على حفظ

كيفية استخدام الزر

عند كتابة موضوع انتقل الى وضع HTML وضع فيها الكود التالي

 <div id="flippy" style="text-align: center;">
<button>اظهار / اخفاء الواجهة</button></div>
<div id="flippanel" style="text-align: center;">
<img src="http://b.top4top.net/p_2294sqx1.jpg" alt="Mountain View" style="float:center;;">
</div> 

قم بتغيير ما باللون الاحمر ليتناسب معك
الاول قم بتغييره الى اي اسم تريد
و الثاني قم بتغييره الى رابط الصورة التي تريد ان تضهر عند الضغط على الزر
واذا تريد موقع لرفع الصور أضغط هنا
و الى هنا ينتهي شرحنا لا تنسى الانضمام الى المدونة في السايدبار لتحصل على جديدنا