المشاركات الشائعة بشكل مميز مصغرات فقط

تعديل جميل على إضافة المشاركات الشائعة الخاصة بمنصة بلوجر Blogger سنعطيها شكل مميز ونجعلها عبارة عن مصغرات فقط Popular Posts Only  Thumbnail وهذا الشكل يتناسب مع المدونات التي ترغب في توفير مساحة

إن لم تكن إضافة المشاركات الشائعة موجوده في مدونتك قم بإضافتها ثم طبق الخيارات التالية عليها

ثم قم بالدخول لتحرير القالب وخذ نسخة إحتياطية لتجنب حدوث اخطاء ثم إضغط على سهم توسيع الستايل

وفوق الوسم ]]></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;}

ثم إبحث عن هذا الكود أو جزء منه حتى تجده

<!-- (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/AVvXsEh1906tuxvvi2enHwq9zaZwXc88A9fs_Ph0SLQy8_Nyn99vt41tgsRoFbKUobD6tOMXWCPCgj0pCSl7XLlEMHE3Sh5cwN0awFwZcJLA3t_aLwcbTQ4p4SQ7aA207FRRhwZxGUyMNC6sq2Q/s72-c/default.png'/>
       </b:if>
                  </a>
                </div>       
             </div>
            <b:else/>

منشورة في: blogger widget, إضافات بلوجر, دروس