عرض المشاركات الشائعة في بلوجر بطريقة رائعة وجديدة 2018



قم بتغيير شكل المشاركات الشائعة على مدونة بلوجر بشكل شبكة جميل جدا مناسب على الجوال والكمبيوتر 


طريقة التركيب

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

2. الآن إنتقل إلى المظهر أنقر على تحرير html ثم أنقر نقرة بزر الماوس على الأكواد في القالب ثم أنقر على مفتاح الإختصار في لوحة مفاتيح الكمبيوتر ctrl و F ثم أدخل في مربع البحث الرمز
]]></b:skin>

3. قم بإضافة الكود التالي فوق الرمز ]]></b:skin> مباشرةً

#PopularPosts1{width:300px}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;counter-reset:popcount}
.PopularPosts .widget-content ul li{padding:0;height:90px;overflow:hidden;position:relative;width:calc(50% - 5px);float:right;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.PopularPosts .widget-content ul li:nth-child(odd){margin:0 5px 10px 0;}
.PopularPosts .widget-content ul li:nth-child(even){margin:0 0 10px 5px;}
.PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:12px;font-weight:500;}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0}
.PopularPosts .widget-content ul li:hover img{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
.PopularPosts .widget-content ul li img{width:100%;height:90px;padding-left:0;transition:all .6s ease-in-out;}
.PopularPosts .item-thumbnail{float:none;margin:0 0 -4px}
.PopularPosts .item-title{padding:5px;position:absolute;bottom:-200px;right:0;left:0;text-align:right;background:rgba(0,0,0,.5);transition:all .3s ease-in-out;line-height: 1;}
.PopularPosts .item-thumbnail:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;width:30px;height:30px;line-height:30px!important;text-align:center;background:rgba(0,0,0,.5);right:0;top:0;color:#fff;font-size:20px;font-weight:900;line-height:1;z-index:2}
.PopularPosts .item-title a:hover{color:pink}
.PopularPosts .item-snippet{display:none}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0px}

4. الآن حدد من الإنتقال إلى أداة أداة PopularPosts1 حددها وقم بحذفها ثم أضف الكود التالي بدلًأ منها كما بالصورة التالية:
إستبدلها بالكود أدناه
<b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعة' type='PopularPosts' version='1'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (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/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 300,)                                  : data:post.thumbnail' var='image'>
            <img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' width='300'/>
    </b:with>
         </a>
        </div>
      </b:if>
   <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
           </b:if>
          </div>
         <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

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

بأمان الله 👍😍




مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق