الاثنين، 14 يوليو 2014

إضافة المشاركات الشائعة بشكل أنيق و جذاب

بقلم: BR MED يوم الاثنين، 14 يوليو 2014 القسم : 2 التعليقات
 السلام عليكم
كالعادة متابعي ورشة مدون الأوفياء اليوم سنرى كيفية التعديل على المشاركات الشائعة Popular Posts وجعلها جميلة وأكثر  إحترافية ، بحيث سنجعلها عبارة عن صور مصغرة بدون مقتطف ، هذه الطريقة تفيد جدا أكثر الأخوان الذين يرغبون في توفير المساحة  في مدونتهم ، الأن طريقة التركيب إن لم تكن قد أضفت أداة المشاركات الشائعة مسبقا فأضفها محافظا على الإعدادات التالية
بعد ذلك نذهب للقالب نقوم أولا بحفظ نسخة تفاديا لإي مشكل أو في حالة لم تعجبك الإضافة
نقوم بتحرير html ثم نبحث عن هذا الكود التالي أو جزء منه
<!-- (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/>
بعدها نقوم بإستبداله بالكود التالي : 
<!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
           
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3ctm1F7DZifX7U_cx0Q6ygOMNl9nFqC4e2pFy_9Z39wh4kvnJ_j2yMB5ETiSDLh-N9BUhhoxM5vs3P0usX8zFRHPX9aBNK2vqfEAdJRMRjIDfaFzrDASm9PY0d4s77SN3Um6e8F6QO4/s72-c/default.png'/>
       </b:if>
                  </a>
                </div>      
             </div>
            <b:else/>
و أخيرا نبحث عن الوسم التالي ]]></b:skin> للتعديل على الستايل
بعد أن تجده ضع هذا الكود فوقه مباشرة
.popular-posts ul li {padding-right:0px; margin:-7px 0 -7px 0; float:right;width:33%;list-style-type:none;border:none;line-height:0px}
.popular-posts ul li img {width:80px;height:80px;opacity:1;filter:alpha(opacity=100);background:#fff;border:1px solid #818181;padding:3px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.popular-posts ul li img:hover {background:#000;border:1px solid #000;}

مع كامل الشكر للأخ عمرو مصطفى مدير مدونة كن مدون الذي أفادنا بالأكواد ،هذا كل ما في موضوع اليوم أراكم في موضوع جديد بحول الله .

هناك تعليقان (2):

  1. شرح ممتاز ومجهود مشكووووووووووووووووووور

    ردحذف
    الردود
    1. تسلم أخي الكريم مرحبا بك في أي وقت =s

      حذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r