احصائيات المدونة

الأحد، 26 يونيو، 2011

ضع وصفاً لكل رابط من روابط مدونتك بكل احترافية

السلام عليكم .. عودة من جديد ..,

قد يكون العنوان مبهم بعض الشيء ,, بصراحة لم أجد عنوان أنسب من هذا لإضافة اليوم .
إضافة اليوم هي عبارة عن وصف على شكل سحابة يظهر عند تأشير الماوس على رابط أو صورة يريد كاتب المدونة أن يظهر لهاً
وصفاً ولأن الصورة أبلغ بـ 1000 مرة من الكلام فوضعت لكم المثالين كالتالي :

مثال الإضافة

أتوقع بعون الله أن المعلومة وصلت .. أما تركيب الإضافة فلا تكيلوا له أي هم فقط تابعوا الموضوع .

مميزات الإضافة :

- كالعادة المزيد والمزيد من الإحترافية لمدونتك .
- اختصار مساحات الموضوع ووضع الوصف بشكل سلس .
- وضع وصف صريح لأي جمله في الموضوع دون عناء التنسيق .
- سهلة التركيب .
- خفيفة الحجم .

تابع قراءة الموضوع لتعرف طريقة التركيب





طريقة تركيب الإضافة .

من لوحة التحكم الرئيسية توجة الى تصميم ثم تحرير HTML .
وعن طريق البحث قم بالبحث عن :




</head>

 
وفوقه تماما " قبله " نضع الكود التالي :






<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sv_TISo06uI/AAAAAAAAALc/9dj1-t3hN6o/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat bottom;
}
</style><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>



ونقوم بحفظ القالب .

الان الشرح الأهم كيف نضع الوصف داخل الموضوع .
اكتب موضوعك بشكل عادي كأي موضوع اخر وعند الرغبة في كتابة جمله موصوفه قم باضافة الكود التالي لكن الاهم ان تضيفها وانت تستخدم المحرر على شكل html وليس " تأليف " 



الكود الأول " وصف جملة فقط "





<a href="الرابط الذي تريد توجيه الزائر له هنا" class="tt">الجملة التي تريد وضع الوصف عليها<span class="tooltip"><span class="top"></span><span class="middle">الوصف المنبثق الذي سيظهر للزائر</span><span class="bottom"></span></span></a>


الكود الثاني " وصف صورة فقط "




<a href="الرابط هنا" target="_blank" class="tt"><img src="رابط الصورة هنا" /><span class="tooltip"><span class="top"></span><span class="middle">الرسالة المنبثقه هنا</span><span class="bottom"></span></span></a>




 فقطـ :) هذا كل مافي الأمر ..
إذا استصعب عليكمـ أي أمر لا تترددوا في السؤال .
دمتم بود .




بقلمي محمد نجد الحسين .
حصري لمنتديات بلوجر بالعربي
 



تعليق واحد على ضع وصفاً لكل رابط من روابط مدونتك بكل احترافية

شكرا
http://ps-tek.blogspot.com

إرسال تعليق

تابع كل جديد برسالة الكترونيه لـ إيميلك فورا

 
تعريب : باسم
تطوير : محمد نجد
  
  
هذه المدونة بدعم : منتديات بلوجر بالعربي