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

خاصية التلميحات من الخواص المميزه لتوضيح كثير من الاشياء سواء للروابط سواء كانت على كتابة أو صور فهي تفيد بتنبيه القارئ عند مروره على رابط او صوره لكي يفهم ما معناه او ما سيحدث عند الضغط عليه خصوصاً للمواقع المعلوماتية والإخباريه أو مواقع التي تستخدم صور وروابط بشكل كبير فهذه الخاصية تكون مفيده جداً هناك عدة طرق لإستخدام وعمل تلك الخاصية أشهرها وأكثرها امكانيات هي عبر تقنية JQuery لكنها قد تسبب بعض الثقل وقد تكون بها بعض الصعوبه في الإستخدام أما عن طريق CSS لإهي ستكون خفيفة جداً وسهلة في الإستخدام ويمكنك معاينة الفكرة بتمرير الماوس هنا وهذا مثال آخر على رابط لكن على صورة ومع عدد كلمات أكثر
شرح التركيب
أضف الكود التالي فوق الوسم ]]></b:skin>
.cnmutip{display: inline;position: relative;}استبدل هذا الكود rgba(0, 0, 0, 0.6 بلون يناسبك كخلفية للتلميحات او اتركه كما هو ان اردت اللون شفاف قليلا
.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;
}
الرقم 200 هو عرض التلميحات يمكنك زيادته او انقاصه
الرقم 10 هو حجم الخط
أما هذا #fff هو لون الخط
طريقة الإستخدام
أضف الكود التالي في اى مكان تريد وأنت تكتب الموضوع مع تغيير صندوق الكتابة من وضع تأليف الى وضع HTML
<a class="cnmutip" href="#" title="*****" target="_blank">000</a>
استبدل # بالرابط
واستبدل ***** بما تريد كتابته في التلميحات
واستبدل 000 بكلمة او صورة التي سيمرر القارئ عليها مؤشر الفأرة
ويمكنك تكرار الكود كما تريد وبالتوفيق
والله مبدع كا العادة أخي عمرو شكرا لك علي هذا الموضوع القيم تحياتي
ردحذفربي يعزك أخي الغالي محمد وشاكر لمرورك العطر يا طيب
حذفاكثر من رائع 100 من 100
ردحذفمشكور لمرورك الكريم أخي الحبيب أحمد =r
حذفشكرا لك اخي على درس كعادتك مبدع وفقك الله
ردحذفمشكووور اخي الكريم على الطريقة
ردحذفشكراً للمرور العطر إخواني الكرام ربي يوفقكم =r
ردحذفأخى عمرو نريد كود التبادل الاعلانى المطور
ردحذفلكى أقوم بتبادل اعلانى مع بعض المدونات لو سمحت
راجع هذا الموضوع أخي الكريم
حذفhttp://cnmu.blogspot.com/2013/01/Changed-Banners.html
ههههههههههههه والله نفس النصيحة التى نصحتها ايا
حذفشكرا , هذا موضوع مفيد جدا لي ...
ردحذفالشكر لله يا طيب تحياتي
حذفالسلام عليكم اخي الكريم.
ردحذفهل يمكنني ازالة التلميح الافتراضي ، وابقاء التلميح الخاص بكم ، لأنه يظهر تلميحين عند وضع المؤشر فوق الرابط =f
وعليكم السلام ورحمة الله وبركاته
حذفالتلميح الإفتراضي في هذا النسق يظهر تلقائياً فلا يمكن ازالته التلميح الخاص بنا هو لزيادة الوضوح ووضع مظهر جمالي
إضافة رائعة أخي يسلموا
ردحذفلكن ساخرج قليلا عن الموضوع أريد ان اعرض المدونات على شكل شبكة مثل مدونتك الرجاء ما هي الطريقة اخي إن أمكن وشكرا
لا يوجد طريقة فهذا يكون جزء من التصميم ويجب ان يكون القالب مصمم هكذا
ردحذفحسنا أخي القالب بتصميم والتصميم بأكواد لابأس إن لم ترد إعطائي الطريقة سأحترم ردك لكن توجد طريقة وجربت طرق من مواقع عرضت الطريقة الشبكية لكن أفلحت بعض الشيء معي لكن ليس كما اريد على كل حال شكرا أخي
حذفأخي كل شئ بتصميم هو مستخدم فيه اكواد لكن ليس كل شئ قابل للشرح والتطبيق على كل القوالب هناك اضافات قابلة للشرح فأقوم بشرحها لكم في المواضيع وهناك امور ليست قابلة للشرح يعني شرحها لا ينفع إلا لشخص واحد فقط وقالبه وهذا امر انا لا اقدمه وهو ما يخص خدمات الدعم الفني , لانني لو قدمت شروحات ضخمه خاصة لكل شخص لن اجد وقت لعمل اى شئ فيوميا تاتي الى عشرات الطلبات من تلك النوعية لو لبيت 20 طلب يوميا متوسط نصف ساعة لكل طلب وطلب مثل طلبك هذا يحتاج ثلاث ساعات لضبط شرح خاص به يعني لو طلبات مثله ساحتاج يوميا 60 ساعة اليوم كله 24 ساعه من اين سآتي بالبقية
حذفلذلك يرجى تقدير الأمر مع تمنياتي لك بالتوفيق
بتمني من معاليك تساعدني قالب مدونتي http://hasanamen.blogspot.com.eg/
ردحذفلايعمل علي الهواتف المحموله بشكل سليم ودخلت علي ادوات مشرفي المواقع وقالي الخط صغير وتهيئة الاطارات ومش عارف اصلح القالب ممكن قالب جميل من حضرتك
ربنا يعزك اخي الكريم انا اخوك عمرو وفقط لا معاليك ولا غيره يا غالي ^_^
حذفبالنسبة لطلبك يا طيب حقيقة سأعتذر منك لان هذه من امور الدعم الفني بل جعل قالب متجاوب هذا من الامور الضخمة فلا اقدم هذا النوع من الطلبات عبر المدونة
لكن يمكنك تفعيل نموذج الهاتف في القالب
من الإعدادات حرر نموذج الجوال ثم اختار
نعم اظهار نموذج الجوال على اجهزة الجوال واختر نموذج من نماذج بلوجر
وعندما تريد المعاينة عليك التجربة من هاتف لأن بعض المواقع الخاصه بالتحليل قد لا تقرأ نموذج الجوال