عارض صور المشاركات الشائعه بطريقه احترافية



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



۞ مـثـال تـجـريـبـي  ۞


تركيب الإضافة

هذه الإضافة مناسبه لأن تكون في المكان العلوي البارز أعلى الجزء العلوي من المدونة أي في رأس الصفحة أسفل العنوان ، أما التركيب:

الخطوة الأولى:
  كالعادة ننسخ أولاً كود الأنماط CSS قبل نهاية إغلاق أنماط القالب كالتالي ، نبحث عن نهاية أنماط القالب :

]]></b:skin>
نضع فوقه مباشره ما يلي:
/* popularposts CSS  */
.featured_posts { float: right }
.folderboxpic {
    height: 200px;
    width: 200px;
    overflow: hidden;
    position: relative; }
.folderboxpic img {
    height: 200px;
    width: 200px;
    padding: 0;
    border: 1px solid gray; }
.article {
    display: block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    font-family: Open Sans,Arial,Verdana;
    text-overflow: ellipsis; }
.article .folderboxbackground {
    font-family: tahoma;
    color: #333333;
    font-size: 12pt;
    background: white;
    padding: 4px; }
.article .folderboxtitle {
    position: absolute;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in 0s;
    -moz-transition: all 0.4s ease-in 0s;
    -ms-transition: all 0.4s ease-in 0s;
    -o-transition: all 0.4s ease-in 0s;
    transition: all 0.4s ease-in 0s;
    width: 200px;
    height: 0px;
    display: block;
    text-align: center; }
.article:hover .folderboxtitle {
    opacity: 0.9;
    height: 100%; }



الخطوة الثانية:
اختر مكاناً مناسباً في رأس المدونة وانسخ الكود التالي بين بداية ونهاية قطاع section

<b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعه' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<div class='featured_posts'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>

  <b:if cond='data:showSnippets == &quot;false&quot;'>
  <!-- (1) No snippet/thumbnail -->
  <a expr:href='data:post.href'><data:post.title/></a>
  <b:else/>
  <!-- (2) Show only snippets -->
  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <div class='item-snippet'><data:post.snippet/></div>
  </b:if>
<b:else/>

  <b:if cond='data:showSnippets == &quot;false&quot;'>
  <!-- (3) Show only thumbnails -->
  <div class='item-thumbnail-only'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    </div>
    <div style='clear: both;'/>
  <b:else/>
  <!-- (4) Show snippets and thumbnails -->
    <div class='folderboxpic'>
    <a class='article' expr:href='data:post.href' rel='bookmark'>
    <b:if cond='data:post.thumbnail'>
    <img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='72' width='72'/>
    <b:else/>
    <img alt='no image' height='200' src='https://lh3.googleusercontent.com/-m_i5G9Ytac8/UsQUyNkck3I/AAAAAAAAAac/jzLbsVk7F7Y/no-image_alblogger.png' width='200'/>
    </b:if>
    <div class='folderboxtitle'><div class='folderboxbackground'><div id='tm-folderboxbackground-720'><data:post.title/></div></div></div>
    </a>
<div class='clear'/>
</div></b:if></b:if></div></b:loop></ul></div></b:includable>
   </b:widget>


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

عارض صور المشاركات الشائعه بطريقه احترافية




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

عارض صور المشاركات الشائعه بطريقه احترافية



الخطوة الرابعه (هام):
مصغرات صور بلوجر دائماً لها مقاس 72 بيكسل وعند تكبيرها الى 200 بيكسل مثلاً كما في إضافتنا هذه ستكون جودة الصور متدنيه وإذا كانت بارزه في واجهة المدونه فإن هذا عيب في نظري - كبير - ولحل هذه المشكلة وتفاديها قم بقراءة هذا الموضوع وانسخ إضافته البسيطة الى قالب المدونة :  إضافة: تكبير مصغرات صور بلوقر مع الحفاظ على جودتها ! 

وأذكر أيضاً أن المواضيع لن تظهر مباشره إلا بعد مرور وقت يكفي لتكون "مواضيع شائعه" !


تحياتي العاطرة 

التعليقات: 13

‎Mohamed Ahmed Abdullah Anan يقول... 4 يناير، 2014 12:55 م

جزاكم الله خيرا ..وزادكم الله علما ..ودوما لكم مزيد من الاحترام والتقدير ج7

جاسر الحربي يقول... 5 يناير، 2014 12:37 م

وجزاك الله خيراً كذلك ، وحياك الله دائماً ج5

Ahmad Alhariri يقول... 5 يناير، 2014 4:25 م

شكراً على جهدك اخي جاسر, ولكن وجدت اختلافاً بين الإضافة التي شرحتها هنا وبين الإضافة التي طلبتها.

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

جاسر الحربي يقول... 5 يناير، 2014 9:27 م

السلام عليكم

لاظهار الصورة في الصفحة الرئيسية فقط يمكن استخدام الجمل الشرطية التي باتت معروفه وهي كالتالي:

[code]<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

تضع الكود هنا

</b:section>
</b:if>[/code]

لابد أن تكون جملة الشرط نحنوي القطاع الذي يحتوي الاضافه

أما التأثير عند تمرير الموشر فهو ذاته ولا اجد اي فرق

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

ع2 تم تعديل قالب التجريبي

Ahmad Alhariri يقول... 6 يناير، 2014 12:20 م

شكراً لك اخ جاسر, أنا لا أبدل كثيراً في موقعي عادة, لذا ليس لدي خبرة كبيرة بالجمل الشرطية البرمجية ):

موقع نيل فلور يقول... 5 مارس، 2014 12:19 ص
أزال المؤلف هذا التعليق.
Mahmoud Saad يقول... 4 مايو، 2014 1:28 م

مشكور كتير

un4web يقول... 25 يونيو، 2014 7:20 م


مشكور
وي كير جيرماني مدير موقع

AyÔùB JM يقول... 28 يوليو، 2014 3:22 ص

مشكور
http://fatburningsecretss.blogspot.com

omnia mohamed يقول... 24 أغسطس، 2014 12:55 م



thank you

مدير موقع ماي سيربرايز my surprise mysurprise

عرب للمعلوميات يقول... 18 يناير، 2015 5:46 م

شكراً جزيلاً لك اخي الكريم مواضيعك قيمه نتمنى ان تشرفونا بطلتكم الى مدونتنا المتواضعة عرب للمعلوميات برامج شروحات ملحقات فوتوشوب مصادر مفتوحهhttp://arabinfoormatic.blogspot.com نسعد بزيارتكم

Ahmed Elserafy يقول... 25 يناير، 2015 4:52 م

شكرا
http://www.freeprograms7.com/2015/01/friv-flash-games.html
http://egyption-military.blogspot.com/2015/01/friv.html
http://g4arabs.blogspot.com/2015/01/friv.html

Gamal Ali يقول... 11 يونيو، 2015 2:04 م

مشكوووووووور

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك