إضافة مواضيع ذات صلة بشكليين

إضافة مواضيع ذات صلة بشكليين

يوجد الآن مشاهدة التعليقات : 38

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

الشكل الأول


الشكل الثاني



شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الشكل المختار فوقه أو ضعه بين <style> </style> فوق </head>
الشكل الأول
/* CSS Related Posts Ar1web */
#at-picture{background:#F9F9F9;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden}
#at-picture h2{font-family:Electrolize,ge_ss_tvbold;font-weight:700;font-size:15px;color: #e74c3c;}
#at-picture a{background:#FFFFFF;font-family:Electrolize,ge_dinar_oneregular;color:#716F6F;box-shadow:0 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 7px 5px 0;padding:6px;float:right}
#at-picture a img{width:100px;height:98px}.box-related{width:100px;padding-left:3px;height:50px;border:0 none;margin:0 0 5px;padding:0;line-height:normal;font-stretch:normal}#at-picture a:last-child{margin-right:0}
#at-picture a:nth-child(1):hover{box-shadow:0 -3px 0 #E50700 inset}#at-picture a:nth-child(2):hover{box-shadow:0 -3px 0 #0084C5 inset}#at-picture a:nth-child(3):hover{box-shadow:0 -3px 0 #6CAC00 inset}#at-picture a:nth-child(4):hover{box-shadow:0 -3px 0 #00C3B7 inset}#at-picture a:nth-child(5):hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:nth-child(1):hover,#at-picture a:nth-child(2):hover,#at-picture a:nth-child(3):hover,#at-picture a:nth-child(4):hover,#at-picture a:nth-child(5):hover,#at-picture a:hover{background:#fff}#at-picture img{width:100%;margin:0;padding:0}#posting{width:auto!important;max-width:100%;margin:15px 20px 15px 0}

الشكل الثاني
/* CSS Related Posts Ar1web */
.related-post{margin:10px 0;}
.titlehead{margin:0 4px 10px;font-size:15px;border-bottom:3px solid #ecf0f1;color:#E74C3C;font-weight:700;padding-bottom:2px;font-family:Electrolize,ge_ss_tvbold;}
.titlehead span{border-bottom:3px solid #E74C3C;padding-bottom:4px;}
.related-post{margin:1em auto 0;background: #F5F5F5;border: 1px solid #ddd;}
.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-3 .related-post-item{float:right;width:299px;height:auto;margin:0 3px;margin-bottom:-993px;padding-bottom:999px;outline:0;}
.related-post-style-3 .related-post-item:first-child{border-left:none;}
.related-post-style-3 .related-post-item-thumbnail{max-width:none;max-height:none;padding:0;float:right;margin-right:10px;}
.related-post-style-3 .related-post-item-title{font-weight:500;font-size:14px;margin-right: 10px;font-family: Electrolize,ge_dinar_oneregular;}
div.rel-item-post{background:#FFF9E2;padding:8px;border:1px solid #EEDFB2;}
div.rich-snippet{padding:7px 7px 20px;margin:10px 0;background:#eee;border-top:1px solid #DBDBDB;font-size:12px;color:#525252;line-height:1.6em;font-family: Electrolize,ge_ss_threeregular;border: 1px solid #DFDDDD;}
div.st_share{margin:10px 0;}
div.rich-snippet span{color:#727272;}
2. ابحث عن ضع بعده [ أسفل] الشكل المختار
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك

الشكل الأول
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script> var defaultnoimage = &quot;http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png&quot;; var maxresults = 5; var splittercolor = &quot;#d3d3d3 &quot;; var relatedpoststitle = &quot;تدوينات ذات صلة :&quot;; </script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/rehm.js' type='text/javascript'/>
<div id='at-picture'>
    <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
    </div>
</b:if>
الشكل الثاني
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>&quot;,
numPosts: 6,
summaryLength: 0,
titleLength: &quot;auto&quot;,
thumbnailSize: 65,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>
</b:if>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. لا يمكن اخي فهي تلقائية

      حذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. وضعت الشكل الثاني
      سنغير مكان أكواد Css ابحث عن .slidebox { فوقها ضع اكواد Css لشكل الثاني إذ لازال نفس المشكل اخبرني

      حذف
    2. أزال المؤلف هذا التعليق.

      حذف
    3. جرب وضع كود الجافاسكريبت فوق </head هو الكود الأخير في الشكل الثاني
      script src='https://ar1webcom.googlecode.com/svn/Hm/related%20posts.js

      حذف
    4. أزال المؤلف هذا التعليق.

      حذف
    5. لقد عدلت اكواد Css انسخها من جديد .. بإذن الله ستشتغل

      حذف
    6. أزال المؤلف هذا التعليق.

      حذف
    7. ابحث عن .widget .post-body ul ثم احذف الكود التالي
      padding: 0 2.5em;

      حذف
  3. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. جربت الكود في عدة قوالب يشتغل تمام ، الكود الذي لم تجده هو مخفي عندك داخل اكواد جيكويري هو الذي يعطي الشكل بذلك المنظر متكرر .. تبقى تجربة أخرى هي إخفائه ضع الكود الأتي فوق ]]> أو ضمن أكواد المواضيع ذات صلة
      .widget .post-body ul {display:none;}

      حذف
    2. أزال المؤلف هذا التعليق.

      حذف
    3. :) تأكد من ان الأداةتعمل بقالب اخ ضعها بقالب اخر .. الكود الذي لم أجده هو الذي فيه المشكل .. سأقوم بالببحث عن المشكل سأراسلك إذا كان أي جديد .

      حذف
    4. أزال المؤلف هذا التعليق.

      حذف
    5. تلك المسافة غير مدرجة ضمن الأكواد .. وجدت حل لمشكلتك السابقة اتمنى أن تنجع مع كل المواضيع طبق التالي ابحث عن
      .related-post-style-3 .related-post-item
      ضع هذا الكود بدل الموجود width: 269px عدلت فقط على المسافة جربها ورد علي

      حذف
    6. أزال المؤلف هذا التعليق.

      حذف
    7. لا لم احذف أي تعليق .. اظنه الكود الذي أضفته كنت اعدل على التعليقات غيرت الأكواد عندما كنت تعلق ، خطأ مطبعي :p

      حذف
  4. =D شكرا لك اخي

    ردحذف
  5. yasmine Ahmed12/27/2014

    لو سمحت انا محتاجة اضافة الشكل بتاع مدونتك وجزاك الله خيرً

    ردحذف
  6. ilyas_aouadi3/21/2015

    http://tknielantrnat.blogspot.com/

    ردحذف
  7. مرحبا اخي
    انا اضفت هذه الإضافة لمدونتي .. طبعا اضفت الشكل الثاني
    لكن حصلت معي مشكلة
    وهي ان المواضيع ذات الصلة اضافة الى ظهورها اسفل التدوينة
    فهي تظهر ايضا في الصفحة الرئيسية اسفل عناوين التدوينات وايضا تظهر بشكل غير مرتب في الحالتين
    فما الحل لطفا

    ردحذف
  8. أهلا وسهلاً بسيطة أخي أضف هذا الكود في أول الكود الثاني هكذا :




    النتيجة ستكون هكذا



    ...............................


    إذا للاحظت في الشكل الأول فهو محدد باللون البرتقالي
    أتمنى أن تكون وصلتك الفكرة

    ردحذف
  9. اشكرك على الرد يا طيب وفعلا نجحت العملية :)

    لكن مازالت هناك مشكلة وهي ظهور المواضيع بصورة مخربطة احيانا كما في هذه الصورة

    http://www6.0zz0.com/2015/04/23/15/935340732.jpg

    وهذا رابط مدونتي للاطلاع عن كثب :)

    http://overallappstore14.blogspot.com/



    وهل توجد طريقة لتحدد عدد الحروف لكل موضوع يظهر في الاضافة ؟؟


    اشكرك مجددا وتقبل احترامي

    ردحذف
  10. دخلت ووجدتها مصلوحة قمت بإصلاحها؟ تمام ... قد عدلت على كود العنوان لكي يظهر بشكل متناسق ما عليك إلا البحث عن هذا المعرف : .titlehead وضع هذا الإعدادات بدل الموجودة :
    margin: 10px 10px 10px;
    padding-bottom: 9px;
    بالنسبة للحروف فهي تقرأ تلقائياً لا يمكن التعديل عليها

    بالتوفيق لك.

    ردحذف
  11. اخي عذرا فاني اتعبتك
    لكن اتمنى لو توضح اكثر لاني طبقت اللي فهمته لكن بقت المشكلة


    شكرا على وقتك

    ردحذف
  12. المشكل في طول العنوان لذلك يصبح صندوق بعيداً عن صندوق الحل سينجح بـ99% وسيبقى البعد بين الصناديق بمسافات قليلة تابع معي إبحث عن :
    .related-post-style-3 .related-post-item-title
    ستجد هذا الكود في السطر: margin-right: 10px
    غيره بهذا : margin-left: 30px;

    ردحذف
  13. اخي للاسف بقيت نفس المشكلة
    حتى بعد التعديل

    http://www9.0zz0.com/2015/04/28/18/996237518.jpg

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

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

    ردحذف
  16. لم يتركب لي، هل يمكنك تركيبها لي؟

    ردحذف
  17. لم يتغير شئ بتاتا *-*
    أين تكمن المشكلة ؟

    ردحذف
  18. للأسف أخي لم تشتغل معي

    ردحذف
  19. المشكلة في الكود المخزن سحابيا . . . غيره أخي

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم