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

الأحد، 26 مايو، 2013

الأحد، 26 مايو، 2013

إضافة مواضيع ذات صلة مع تأثير التلميحات

 Related Posts blogger Widget With Tooltips
تتعدد إضافات مواضيع ذات صلة وكل منها له ما يميزه وهذه الإضافة حقاً مميزة فهي لا تاخذ حيز ويسهل التحكم بها وتم تنسيقها بشكل جميل وستضيف لمسه جمالية وفائدة الى مدونتك وأيضا سنتطرق لبعض التنسيقات عليها تجعلها أكثر تلائماً مع الوان قالبك وما يميز تلك الإضافة هو تاثير التلميحات أو ما يسمى بــ  ToolTips وهو أن الإضافة عبارة عن صور فقط وهكذا لا تشغل مكان كبير في القالب وعند تمرير الماوس يظهر تلميح بعنوان الموضوع لكن ملاحظة هناك من قد تعجبه هذه الإضافة وهو لديه إضافة أخرى لذا يجب عليه حذفها لسببين الاول حتى لا تسبب ثقل في التصفح والثاني لان أغلب إضافات مواضيع ذات صلة وسوم تنسيقها متشابهه وقد يحدث تلف في شكل الإضافتين والآن مع طريقة التركيب

قم بالدخول الى تحرير القالب ولا تنسى نسختك الإحتياطية ثم قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع
ثم فوق الوسم ]]></b:skin> أضف الكود التالي
/* Related Posts Widget cnmu.blogspot.com
----------------------------------------------- */

.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
box-shadow:none;
}
.related-post {
 float: right;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 4px 8px 6px 0;
 background: #fff;
padding:3px 0 3px 3px;
border:1px solid #000;
 }
.related-post .related-post-title {
 display: none;
 float: right;
 background: #000;
 color: #fff;
border:2px solid #ccc;
border-radius:4px;
 text-shadow: none;
 font-weight: bold;
 padding: 6px;
 position: absolute;
 top: -20px;
 right: -5px;
 z-index: 2;
 width: 110px;
 -webkit-box-shadow: 0 0 2px #444;
 -moz-box-shadow: 0 0 2px #444;
 box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}
#related-posts h3 {background:#ddd; padding:4px 12px 4px 12px; color:#000; font-size:15px; font-weight:bold; display:inline; text-align:right; border:2px solid #000; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;float:right; margin:10px;}

بعض التنسيقات :

الرقم 98 الاحمر عدله في المرتين لتغير ارتفاع الصور
الرقم 98 الأزرق عدله في المرتين أيضا لتغير عرض الصور
الثلاث الألوان المحدده في الأكواد التالية قم بتغييرها لتعديل الوان التلميحات
 background: #000; الخلفية
 color: #fff; لون الخط
border:2px solid #ccc; إطار التلميحات

 وهذه الأكواد لتعديل الوان كلمة مواضيع ذات صلة
background:#ddd; الخلفية
color:#000  لون الخط
border:2px solid #000;  لون الإطار

ثم ننتقل للكود التالي
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='related-posts'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>مواضيع ذات صلة</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;لا يوجد مواضيع ذات صلة لهذه الفئة</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
 </div>
   </b:if>
     <div class='clear'/>
يمكنك تعديل العبارات المحدده باللون الأحمر بعبارات أخرى
والرقم 5 عدله لزيادة او إنقاص عدد المواضيع المعروضه
وأضف الكود السابق تحت أحد الأكواد التالية 
<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>
ملاحظة في حالة عدم ظهور الإضافة فالسبب يكون أن الوسم متكرر في القالب أحدهم فعال وتظهر تحته الإضافة والآخر ليس كذلك وحينها تنقل الكود تحت الآخر وتركيب موفق بإذن الله

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

  1. كالعاده تبهرنا بمواضيعك الجميله شكراً لك اخي

    ردحذف
    الردود
    1. حياك الله أخي صلاح
      واسعدني مرورك يا طيب
      ودي وتقديري

      حذف
  2. جميل و مفيد و خفيف على القلب هذا ما يمكنني ان اصف به الموضوع اخي عمرو وفقنا الله و اياك لما نحب

    ردحذف
    الردود
    1. اللهم آمين
      أكرمك الله اخي الحبيب سعيد
      وجزيل الشكر على مرورك العطر

      حذف
  3. السلام عليكم ورحمة الله وبركاتة
    أولاً أسف أخي عمرو على التأخير في الرد عليك لأني عندي مشكلة في النت
    وتانيا اشكرك اخي عمرو على هذه الاضافة والدروس المفيدة التي تتحفنا بها
    بارك الله فيك وجزاك الله خيرا و احسن الله اليك اخى الطيب وجعل اعمالك كلها خالصة لوجهه الكريم
    بنتظار جديدك دوما تقبل أسمى و أرق تحياتى

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

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حبيبي بدر أعزك الله يا طيب
      وشكرا جزيلا على تشجيعك المستمر للمدونة
      ربي يبارك فيك

      حذف
  5. أخي مشكور على الاضافة اولا لكن لماذا تظهر بكل سطر 4 فقط يعني اربعة و تنتقل الى السطر الذي بعده

    ردحذف
    الردود
    1. مرحبأ بك
      هذا بسبب عرض قالبك إن لم يكن القالب بعرض كافي لظهور أكثر من أربعه فتظهر أربعه وينتقل الباقي في سطر آخر

      حذف
  6. ممكن شرح لمواضيع ذاتت صلة المفعلة فى مدونتك الأن ؟؟

    ردحذف
    الردود
    1. حاضر أخي محمود قريباً بإذن الله ساعد شرح خاص بها

      حذف
  7. السلام عليكم اخي شكرا لك على لاضافة و قد جربتها على عديد من مدونات ونجحت فقط مشكل واحد وجهنى في مدونة الالعاب بحيت صورة اللعبة على تضهر و هدا هو متال على دالك و اسف لا اقصد اي اشهار او اي شئ من هذا القبيل
    http://www.al3b-net.blogspot.com/2014/05/5.html
    ملاحضة قمت بتعديل على لاضافة و ازلت كلمة مواضع دات صلة حتى تتناسب مع تصميم انا اشك من شئ واحد وهو ما ساضعه لك في الصور اسفله لاني اعتقد هو الدي يمنع من ضهور الصور
    http://store2.up-00.com/2014-06/1401824612861.jpg

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله يا طيب انا افرق تماما بين الإشهار وبين الروابط التي تخص الموضوع الإشهار هو ما اجده من بعض الاشخاص يكتب تعليق ويضع به رابط مدونته دون داعي اما غير ذلك لا توجد اى مشاكل في الروابط سوى التي قد تعرض مواد بها مخالفات للشريعة الإسلامية انا طبعا لدي تحفظ على الألعاب من هذا الأمر لكن امر وقاعدة عامه اخي الحبيب عدم ظهور الصور في اى من اضافات بلوجر يرجع السبب عادة الى مركز الرفع فبعض مراكز الرفع لا تنسجم مع إضافات بلوجر وبالتالي يجب رفع الصور على مركز بيكاسا فهو الاكثر انسجاما مع بلوجر راجع هذا الموضوع يا طيب
      http://cnmu.blogspot.com/2013/04/Picasa.html

      حذف
  8. السلام عليكم اخي بصراحة جربت و نجحت محاولة وفقك الله اخي و جزاك كل خير

    ردحذف

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

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