السبت, يوليو 23, 2011

إضافة مواضيع ذات صله بشكل جديد جدا وستايل انيق جدا

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

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

كيف أضيف موضوعات ذات صله إلى مدونتى على بلوجر :

1- إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.
ثم إبحث عن الكود
]]></b:skin>
وقم بوضع هذا الكود فوقه مباشرة
/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
2- والآن إبحث عن هذا الكود
 <b:includable id='backlinks' var='post'>
وقم بإستبداله بالكود التالى
<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg&quot;;
var maxresults=6;

</script>
<script src='http://f.cl.ly/items/0w31321a473E2G0m3S2U/related_post_with_hover.js' type='text/javascript'/>
        <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=6&quot;' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>
3- والآن الخطوه الأخيره وعليك فيها البحث عن أحد الأكواد التاليه فى كود قالب مدونتك
<div class='post-footer'>
        أو
<div class='post-footer-line post-footer-line-1'>
        أو
<div class='post-footer-line post-footer-line-2'>
        أو
<div class='post-footer-line post-footer-line-3'>
وقم بوضع الكود التالى أسفل الكود الذى تجده فى مدونتك من الاكواد السابقه
<b:include data='post' name='RelatedPosts'/>
4- والآن قم بحفظ القالب وشاهد مدونتك ... الإضافه تظهر فى مدونتك فى صفحات التدوينات اسفل التدوينه مباشرة.
وفى حال وجود اى أعطال أو أى عقبات أمام إضافتك لهذه الأكواد أو عدم ظهور الإضافه برجاء إبلاغنا.

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

22 تَعْلِيق:

  1. جارري تجربتها
    شكرا لك ^_^

    ردحذف
  2. ميرسى
    بس ممكن نشوف مثال !

    ردحذف
  3. بالتوفيق سبايدرمان وياريت تخبرنا عن النتيجه

    sossi تقدرى تشوفى المثال من الرابط ده

    http://moonlightdemo.blogspot.com/2011/02/sea-stet-iudico-cetero-cu-ut-mei-ferri_18.html

    ردحذف
  4. أثارت انتباهي كثيرا قبل مدة عندما شاهدتها في قالب moon light
    وعزمت على سحب الإضافة من القالب لكن ما شاء الله كفيت ووفيت ^_^"

    سؤال بسيط .. عندما أؤشر على أحد صور المواضيع بالإضافة يظهر عنوان الموضوع
    كيف أتحكم بعدد الحروف التي تظهر ؟ لأن بعض العناوين طويلة ولا تظهر بشكل جميل

    ردحذف
  5. للأسف الجافا سكريبت الخاص بالاضافه مصمم كده ومش ينفع اغير فيه .. عموما هى كويسه كده يا اسماء .. وشكرا على الكلام الجميل

    جربتى الجدول ؟؟ ياريت تشوفى التدوينه الاخيره هنا.

    ردحذف
  6. خسارة ملف الجافا الخاص بالإضافة أصبح لا يعمل ..!!!!

    هل أخذت نسخة احتياطية منه أخ ياسر ؟

    ردحذف
  7. للأسف لا .... هل توقف تماما ؟؟؟

    ردحذف
  8. أجل للأسف فالإضافة لا تظهر أبدا وملف الجافا معطل ،،

    راسلت مصمم الأداة لكن لم يرد للآن /:

    ردحذف
  9. اوك تابعيه وياريت تبلغينى لانى مش فاضى خالص اليومين دول ... ربنا يوفقك

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

    ردحذف
  11. شكرا على الموضوع لكن ملف الجافا لا يعمل من الممكن تعويضه بملف ستايل أخر

    ردحذف
  12. http://tunisie-direct.blogspot.com/2011/10/blog-post.html

    ردحذف
  13. اليك رابط موقعي learnwithme-adel.blogspot.com
    الكود لم ينجح معي فما الحل ارجو الحل السريع

    ردحذف
  14. انا اسف يا جماعه الجافاسكريبت اتحزف وللأسف لم أقم بعمل نسخه منه ولكن قريبا جدا سوف أقدم لكم اضافه تفوقها فى الامكانيات والشكل بإذن الله

    ردحذف
  15. يمكنك تعديل الأكواد بالعودة إلى الموضوع الأصلي للإضافة

    http://www.bloggerzbible.com/2011/03/new-stylish-related-posts-widget.html

    ردحذف
  16. أسماء || أم نضال || : شكرا جزيلا لقد قمت بتعديل الاكواد

    شكرا لمتابعتك ومساعداتك

    ردحذف
  17. شكرا تم تجربتها بنجاح

    ردحذف
  18. شكر اخى الاضافة جميله وشغاله تمام
    شاهدهافى مدونتى
    http://amar-nana.blogspot.com/

    ردحذف
  19. لم تعمل عندي؟؟
    http://dznewsinfo.blogspot.com/2012/03/blog-post_332.html

    ردحذف
  20. إقرأ التعليقات وأنت تعرف الحل

    ردحذف
  21. الكود دة مش موجود عندى

    فى حل لمموضوع دة

    ردحذف