تبادل اعلاني جديد من الوليد نت مجانا

أدخل كلمات بحثك

كيفية عمل محتوى مخفي بشكل جذاب وجميل

كيفية عمل محتوى مخفي بشكل جذاب وجميل


كيفية عمل محتوى مخفي بشكل جذاب وجميل



كود لعمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء Hide and show وتفيد هذه الطريقة في المدونات التي تكون مواضيعها طويلة فيمكن إستخدامها لإخفاء جزء من الموضوع أو للمدونات التي تكتب القصص او المحتويات التشويقية كأن تكتب قصة وعند الوصول لجزء معين تخفيه أو تخفي صورة يمكنك معاينته عبر الرابط التالي


موقع الوليد نت / فن التصميم والابداع



شرح طريقة التركيب



قم بالدخول إلى لوحة تحكم المدونة
اختر قالب 
ثم انقر فوق تحرير HTML
الان ابحث عن الوسم
 ]]></b:skin> 
و اضف الكود التالي فوقه

#flippy {
text-align: center;
}
#flippy button {
background: #aa65c7;
color: #fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
font-family: Droid Arabic Kufi;
box-shadow: 0px 3px 0px 0px #883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
background: #9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: right;
background: #f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}

التنسيق هذ اللون هو لون خلفية الزر استبدل
 #aa65c7
عند تغيير الخلفية يجب تغيير
#883da7 
بلون اغمق من الخلفية بشيء بسيط لأنه الخط الملون في اخر الزر
هذا اللون هو لون خلفية الزر عند مرور الماوس
 #9e4fbf
لتغيير حجم الخط استبدل الرقم الذي باللون الاحمر
 14px 
لتغيير نوع الخط استبدل
 Droid Arabic Kufi
 بالخط الموجود في مدونتك


الان ابحث عن الوسم
 </body>
 و اضف الكود التالي فوقه

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



الان طريقة الاستخدام


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


<div id="flippy"><button>إظهار / إخفاء</button></div>
<div id="flippanel">
هنا نكتب النص او اكواد الصور المراد إخفائها
</div>

يمكنك استبدال إظهار / إخفاء بالكلمة التي تعجبك
يجب استبدال هنا نكتب النص او اكواد الصور المراد إخفائها بالنص او الشيء المراد إخفائه

يمكن وضع اكثر من زر في الموضوع على حسب ما تريد فقط عليك استبدال المعرفات

flippy , flippanel

مع تغيير الوان الزر كما في الاعلى و مع القليل من الخبرة في CSS يمكن تنسيق الزر بشكل اجمل بالتوفيق




كيفية عمل محتوى مخفي بشكل جذاب وجميل كيفية عمل محتوى مخفي بشكل جذاب وجميل Reviewed by al walid net on 6:50:00 ص Rating: 5
اظهار التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لاضافة كود حوله اولا بمحول الاكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
محول الأكوادمحول الأكواد الإبتساماتالإبتسامات

   
تجدونا هنا

إنضم إلينا


Join on this site

للحصول على كل جديد المدونة

Mohon Aktifkan Javascript!Enable JavaScript