لعلي انبهرت بتصميمات آبل 

اغلبنا شاهد وصف العناصر في الشريط السفلي لـ نظام ماك من آبل

و هي مبهرة جداً

هنا بإمكاننا تطبيقها على مواقعنا

الاصل

 

التقليد بالـ css3  و html5 و الـ jQuery

 

 

 

يمكنك المعاينة قبل البدء بالدرس

معاينة

 

 

 

 

الشرح سيكون لتطبيقها على قوالب الووردبريس و بإمكان اي مستخدم آخر لغير الووردبريس ان يطبقها على اي سكربت

 

اولاً ستحتاج الى الجافا الخاص بعرض الفقاعة 

تحميل الجافا

 

 

 

قم بحفظة و نقلة الى مجلد الجافا في قالبك

مثال

http://www.your-blog.com/wp-content/themes/your-theme/js/

 

 سنستدعيه لاحقاً

 

اضف الخصائص التالية الى ملف ستايل قالبك

.tooltip, .arrow:after {
  background: black;
  border: 2px solid white;
}

.tooltip {
  pointer-events: none;
  opacity: 0;
  display: inline-block;
  position: absolute;
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  margin-top: 20px;
  text-align: center;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  font-stretch: condensed;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  -webkit-box-shadow: 6px 5px 9px -9px black,
                      5px 6px 9px -9px black;
  -moz-box-shadow: 6px 5px 9px -9px black,
                   5px 6px 9px -9px black;
  box-shadow: 6px 5px 9px -9px black,
              5px 6px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}
.tooltip.active {
  opacity: 1;
  margin-top: 5px;
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
.tooltip.out {
  opacity: 0;
  margin-top: -20px;
}

 

 

 

نقوم الآن بفتح ملف الهيدر و نستدعي الجافا الذي وضعناه في مجلد /js/

إنسخ الكود التالي و إلصقة قبل إنتهاء الوسم  

 

 

 

 

الآن نأتي لتحديد مكان ظهور الفقاعة على العناوين التي بها روابط

فمثلاً هذة الطريقة لا تصلح لعرض وصف التصنيف في النافابار

 

يمكننا تحديد المكان عبر عناصر التكويد

 

سأوضح الطريقة

 

مثلاً انا في قالبي هذا لا اريد فقاعة وصف العناوين تظهر في منطقة الهيدر

 

 

 

و اريدها ان تظهر بعد الهيدر 

 

 

 

إذاً نقوم بأمر الجافا ان يُظهر الفقاعة في منطقة entry

و يكون شكل الكود كالتالي

 

 

 

بهذا إنتهينا من الدرس

 

في حالة عدم نجاح تطبيق الدرس معك فهناك تعارض بين المكتبات المُستخدمة في قالبك

لحل هذا التعارض هناك شرح قم بتطبيقة

 

حل التعارض