مساحة إعلانية

الأحد، 8 يونيو، 2014

الأحد، 8 يونيو، 2014

اضافة تلميحات على روابطك CSS فقط

Tooltip CSS only
خاصية التلميحات من الخواص المميزه لتوضيح كثير من الاشياء سواء للروابط سواء كانت على كتابة أو صور فهي تفيد بتنبيه القارئ عند مروره على رابط او صوره لكي يفهم ما معناه او ما سيحدث عند الضغط عليه خصوصاً للمواقع المعلوماتية والإخباريه أو مواقع التي تستخدم صور وروابط بشكل كبير فهذه الخاصية تكون مفيده جداً هناك عدة طرق لإستخدام وعمل تلك الخاصية أشهرها وأكثرها امكانيات هي عبر تقنية JQuery لكنها قد تسبب بعض الثقل وقد تكون بها بعض الصعوبه في الإستخدام أما عن طريق CSS لإهي ستكون خفيفة جداً وسهلة في الإستخدام ويمكنك معاينة الفكرة بتمرير الماوس هنا وهذا مثال آخر على رابط لكن على صورة ومع عدد كلمات أكثر



http://cnmu.blogspot.com

شرح التركيب

أضف الكود التالي فوق الوسم ]]></b:skin>
 .cnmutip{display: inline;position: relative;}
.cnmutip:hover:after {
  background:rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  bottom: 36px;
  color: #fff;
  content: attr(title);
  display: inline-block;
  font-size: 10px;
  left: 20%;
  padding: 3px 8px 4px;
  position: absolute;
  text-align: center;
  width: 200px;
  z-index: 98;
}
 استبدل هذا الكود rgba(0, 0, 0, 0.6 بلون يناسبك كخلفية للتلميحات او اتركه كما هو ان اردت اللون شفاف قليلا
الرقم 200 هو عرض التلميحات يمكنك زيادته او انقاصه
الرقم 10 هو حجم الخط
أما هذا #fff هو لون الخط

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

أضف الكود التالي في اى مكان تريد وأنت تكتب الموضوع مع تغيير صندوق الكتابة من وضع تأليف الى وضع HTML
 <a class="cnmutip" href="#" title="*****" target="_blank">000</a>

استبدل # بالرابط
واستبدل ***** بما تريد كتابته في التلميحات
واستبدل 000 بكلمة او صورة التي سيمرر القارئ عليها مؤشر الفأرة
ويمكنك تكرار الكود كما تريد وبالتوفيق

هناك 20 تعليقًا:

  1. والله مبدع كا العادة أخي عمرو شكرا لك علي هذا الموضوع القيم تحياتي

    ردحذف
    الردود
    1. ربي يعزك أخي الغالي محمد وشاكر لمرورك العطر يا طيب

      حذف
  2. اكثر من رائع 100 من 100

    ردحذف
    الردود
    1. مشكور لمرورك الكريم أخي الحبيب أحمد =r

      حذف
  3. شكرا لك اخي على درس كعادتك مبدع وفقك الله

    ردحذف
  4. مشكووور اخي الكريم على الطريقة

    ردحذف
  5. شكراً للمرور العطر إخواني الكرام ربي يوفقكم =r

    ردحذف
  6. أخى عمرو نريد كود التبادل الاعلانى المطور
    لكى أقوم بتبادل اعلانى مع بعض المدونات لو سمحت

    ردحذف
    الردود
    1. راجع هذا الموضوع أخي الكريم
      http://cnmu.blogspot.com/2013/01/Changed-Banners.html

      حذف
    2. ههههههههههههه والله نفس النصيحة التى نصحتها ايا

      حذف
  7. شكرا , هذا موضوع مفيد جدا لي ...

    ردحذف
  8. السلام عليكم اخي الكريم.
    هل يمكنني ازالة التلميح الافتراضي ، وابقاء التلميح الخاص بكم ، لأنه يظهر تلميحين عند وضع المؤشر فوق الرابط =f

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      التلميح الإفتراضي في هذا النسق يظهر تلقائياً فلا يمكن ازالته التلميح الخاص بنا هو لزيادة الوضوح ووضع مظهر جمالي

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

    ردحذف
  10. لا يوجد طريقة فهذا يكون جزء من التصميم ويجب ان يكون القالب مصمم هكذا

    ردحذف
    الردود
    1. حسنا أخي القالب بتصميم والتصميم بأكواد لابأس إن لم ترد إعطائي الطريقة سأحترم ردك لكن توجد طريقة وجربت طرق من مواقع عرضت الطريقة الشبكية لكن أفلحت بعض الشيء معي لكن ليس كما اريد على كل حال شكرا أخي

      حذف
    2. أخي كل شئ بتصميم هو مستخدم فيه اكواد لكن ليس كل شئ قابل للشرح والتطبيق على كل القوالب هناك اضافات قابلة للشرح فأقوم بشرحها لكم في المواضيع وهناك امور ليست قابلة للشرح يعني شرحها لا ينفع إلا لشخص واحد فقط وقالبه وهذا امر انا لا اقدمه وهو ما يخص خدمات الدعم الفني , لانني لو قدمت شروحات ضخمه خاصة لكل شخص لن اجد وقت لعمل اى شئ فيوميا تاتي الى عشرات الطلبات من تلك النوعية لو لبيت 20 طلب يوميا متوسط نصف ساعة لكل طلب وطلب مثل طلبك هذا يحتاج ثلاث ساعات لضبط شرح خاص به يعني لو طلبات مثله ساحتاج يوميا 60 ساعة اليوم كله 24 ساعه من اين سآتي بالبقية
      لذلك يرجى تقدير الأمر مع تمنياتي لك بالتوفيق

      حذف
  11. بتمني من معاليك تساعدني قالب مدونتي http://hasanamen.blogspot.com.eg/
    لايعمل علي الهواتف المحموله بشكل سليم ودخلت علي ادوات مشرفي المواقع وقالي الخط صغير وتهيئة الاطارات ومش عارف اصلح القالب ممكن قالب جميل من حضرتك

    ردحذف
    الردود
    1. ربنا يعزك اخي الكريم انا اخوك عمرو وفقط لا معاليك ولا غيره يا غالي ^_^
      بالنسبة لطلبك يا طيب حقيقة سأعتذر منك لان هذه من امور الدعم الفني بل جعل قالب متجاوب هذا من الامور الضخمة فلا اقدم هذا النوع من الطلبات عبر المدونة
      لكن يمكنك تفعيل نموذج الهاتف في القالب
      من الإعدادات حرر نموذج الجوال ثم اختار
      نعم اظهار نموذج الجوال على اجهزة الجوال واختر نموذج من نماذج بلوجر
      وعندما تريد المعاينة عليك التجربة من هاتف لأن بعض المواقع الخاصه بالتحليل قد لا تقرأ نموذج الجوال

      حذف

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

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©