recent
أخبار ساخنة

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

Walid Al-Bana
الصفحة الرئيسية

كيفية عمل محتوى مخفي بشكل جذاب وجميل
كود لعمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء 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 يمكن تنسيق الزر بشكل اجمل بالتوفيق


google-playkhamsatmostaqltradent