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

الثلاثاء، 11 يونيو، 2013

الثلاثاء، 11 يونيو، 2013

التحكم الكامل في إضافة آخر المواضيع

recent post with thumbnail blogger
اضافة آخر المواضيع تعتبر اضافة فرعية نظراً لانها ليست أساسية في بلوجر بالإضافة أن آخر المواضيع طبيعي تظهر في الصفحة الرئيسية لكنها تكون حيوية داخل المواضيع أو في المدونات التي تحدث بإستمرار مثل المدونات الإخبارية ولكن أحيانا أيضا تكون قوية حينما يتم عرض آخر المواضيع من قسم معين فهذا يساعد في التركيز على قسم وتقوية الزيارات اليه لكن دعونا اولا نتكلم عن انواع اضافة آخر المواضيع , وأنا أحب تصنيف إضافة آخر المواضيع إلى 4 انواع


آخر المواضيع العادية

وهي عبارة عن اضافة تحتوي عناوين آخر المواضيع فقط
يميزها الخفه والسرعه يعيبها عدم جذب الإنتباه

آخر المواضيع مع مصغرات

وهي كالسابقه لكنها تتيح نبذه من الموضوع وصورة مصغره وهي الافضل سواء في العرض او جذب الإنتباه

آخر المواضيع مصغرات فقط 

جيده في المدونات التي تهتم بشكل المصغرات وتجعلها تدل على المحتوى أما المدونات التي لا تهتم بالصور المصغره لن تكون جيده في عرضها

آخر المواضيع المتحركه

تميزها الحركة في عرض عدد أكبر من المواضيع لكنها الأسوأ من حيث السرعه والثقل

لذا اخترت لكم أفضل نوعين للحديث عنهما وهما
آخر المواضيع مع مصغرات , وآخر المواضيع مصغرات فقط

نيدأ مع آخر المواضيع مع المصغرات


كود الإضافة أضفه الى آداة HTML/JavaScript
<style>img.recent_thumb {background:#fff;padding:2px;width:64px;height:64px;border:1px solid #777;float:left;margin:5px 10px 5px 0;}.recent_posts_with_thumbs {float: left;margin: 5px 0px 5px 0px;padding: 0;font-size:15px;font-family:Arial;}ul.recent_posts_with_thumbs li {padding:5px; height:85px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='https://cnmu.googlecode.com/svn/trunk/Recent-Posts.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 60;
</script>
<div id="sai">
<script src='http://cnmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

شرح التنسيق

هذا الكود width:64px هو عرض الصورة المصغرة غير الرقم 64 لتغيير عرض الصورة
هذا الكود height:64px هو ارتفاع الصورة المصغره غيره أيضا بحسب ما تريد
ان ردت الصورة المصغرة جهة اليمين غير float:left  الى float:right
واستبدل هذه الأرقام  5px 10px 5px 0  بهذه   5px  0 5px 10px
هذا الرقم 15px هو حجم الخط
وهذا هو font-family:Arial; نوع الخط استبدل الوسم بوسم الخط الذي تريده
وهذا هو height:85px; ارتفاع كل مشاركه قم بزيادة الرقم بحسب ما تريد
الرقم 5 هو عدد المشاركات المعروضه
والرقم  60 هو عدد حروف النبذه من كل مشاركة
ثم استبدل http://cnmu.blogspot.com  برابط مدونتك
ملاحظه ان ردت عرض المواضيع من قسم معين استبدل الكود التالي default
بهذا الكود default/-/#
مع مراعاة تغيير علامة # برابط القسم
مثال
http://cnmu.blogspot.com/feeds/posts/default/-/Facebook?orderby
رابط القسم هو المعلم بالأزرق
لكن الأقسام التي تكون بالعربية لا تكون كلمة بل رموز كهذه
%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1
كيفية الحصول عليها , عند نسخ رابط القسم ستجده بشكل مثل التالي
http://cnmu.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5
نحن نريد الأكواد التي تقع بين العلامتين ذوات اللون الأحمر
مثال كامل للمعاينة بعد إضافة القسم
<div id="sai">
<script src='http://cnmu.blogspot.com/feeds/posts/default/-/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

ننتقل الى آخر المواضيع مصغرات فقط


كود الإضافة ضعه في آداة HTML/Java Script
<style text-type="CSS">
img.label_thumb {float:right;padding:2px;background:#fff;border:1px solid #000;width:78px;height:78px;margin-right:10px;margin-top:5px;margin-bottom:5px; }
img.label_thumb:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.8 }
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
var numposts = 9;
</script>
<script type="text/javascript" src="http://cnmu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=labelthumbs"></script>

طريقة التنسيق


هذا الكود width:78px;  عرض الصور المصغرة
وهذا هو ارتفاعها height:78px
والرقم 9 هو عدد المواضيع التي ستظهر في الإضافة
أيضا استبدل رابط مدونتي برابط مدونتك وان اردت عرض مواضيع من قسم معين قم بتطبيق نفس الشرح الخاص بالإضافة السابقة

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


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

  1. السلام عليكم و رحمة الله و بركاته
    بارك الله فيك اخي عمرو على اضافة رآائعة
    وجزاك خير الجزاء وجعله في ميزان حسناتك
    -----------------------------------
    اخي عمرو أتمنى ان تعطني نصائحك وقترحاتك حول مدونتي أتمنى
    ان اعرف ملاحظتك اخي عمرو وشكرآ وتقبل مروري www.albidaya1.com




    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته , حياك الله يا طيب والف مبروك الدومين
      المدونة جيده حبيبي ومنسقه ولا اجد سلبيات لأذكرها ربي يوفقك يا غالي

      حذف
  2. السلام عليكم و رحمة الله و بركاته
    اعجبتني الاضافة الثانية كثيرا
    تحياتي لك وبالتوفيق

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

      حذف
  3. الله يبارك فيك اخي عمرو ربنا يحفظك ويخليك
    وفتح الله علينا وعليك في كل خير إن شاء الله

    ردحذف
  4. جزاك الله كل خير على الشرح الأكثر من رائع
    ونتمنى إبداء رأيك في المدونة ورأيك في القالب اخذته من الاخ باسم هدية
    Neoxwin

    ردحذف
    الردود
    1. وجزاك الله بالمثل أخي الكريم وبالتوفيق بإذن الله

      حذف
  5. شرح رائع جدا جزاك الله خير
    كعادتك قمة الإبداع ماشاء الله عليك
    ودي واحترامي جزيل الشكر
    دمت في حمى الرحمن

    ردحذف
    الردود
    1. وجزاك الله بالمثل اخي الحبيب بدر
      تحياتي لك يا طيب

      حذف
  6. شكرا على الموضوع الرائع.

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

      حذف
  7. كيف احذف الصور من الاداة الاولي لتبقي عناوين المواضيع فقط اخي الكريم

    ردحذف
    الردود
    1. بعد هذا الكود أخي 5px 10px 5px 0; أضف الكود التالي
      display: none;
      وستختفي الصور

      حذف
  8. جميل اخي وهل من طريقة الاخفاء وصف الموضوع اي النبذة

    ردحذف
    الردود
    1. جرب ان تجعل الرقم 60 في هذا الجزء var numchars = 60;
      الى صفر

      حذف
  9. شكراً جزيلاً لك أخي الكريم , كيف يمكنني أن أضع بين كل مشاركة و مشاركة خط رفيع ؟ ليكون بمثابة الفاصل , وكيف يمكنني جعل الخط متساوي مع الصورة أنظر إليه هنا ستجد الخط مرتفع عن الصورة و هذا يشوه الأمر .

    شكراً لك

    المعاينة : www.Ebda2.net

    ردحذف
    الردود
    1. في هذا الكود اخي
      margin:5px 10px 5px 0;
      اتبدل الرقم 5px الاول بصفر
      واستبدل هذا الكود
      ul.recent_posts_with_thumbs li {padding:5px; height:85px;}
      بهذا
      ul.recent_posts_with_thumbs li {
      border-bottom: 1px solid #ddd;
      height: 85px;
      margin-top: 5px;
      padding: 2px;
      }

      حذف
    2. شكراً جزيلاً لك صديقي العزيز عمرو , شكراً لك .. =r

      أخي عمرو لو سمحت استفسار بسيط بالنسبة لك على ما أظن وإن كان خارج الموضوع .

      لا أريد الهوفر للعنواين في الأداة فهو يظهر بشكل سريع مثل البرق بحيث يصبح سيء , كيف يمكنني أن أوقف تأثير الهوفر على العناوين في الأداة هذه ؟

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

    ردحذف
    الردود
    1. لا يوجد أخي في الآداة تحديد لعدد حروف العناوين العنوان يعرض كاملا

      حذف

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

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