اضافة المشاركات الشائعة متعددة الالوان في مدونات بلوجر 2013

السلام عليكم  . زوار هذه المدونة المتواضعة . اسعد الله اوقاتكم بكل خير . في هذا الموضوع ساشرح طريقة .  اضافة المشاركات الشائعة . الاضافة جميلة و متعددة الالوان . كالصورة المبينة اعلاه .  تابع الشرح  >>> 

خطوة 1 : 
سجل دخولك في لوحة تحكم بلوجر ثم قالب ثم تحرير HTML

خطوة 2 : 
ابحث عن هذا الكود (ctrl+f)

 /* Variable definitions

   ====================

ملاحظة : ان لم تجد الكود السابق . قم بالبحث عن هذا الكود :

  <b:skin><![CDATA[/* 

ويجب أن ينتهي مع هذا الرمز:

  ----------------------------------------------- */

خطوة 3 : 

انسخ هذا الكود والصقه بعد  ]]></b:skin> مباشرة 

 <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">

<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>

<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>

<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>

<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>

<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>

</Group>

الخطوة 4 : 

ابحث عن هذا الوسم : 

 ]]></b:skin>

الخطوة 5 : 

فقط فوق الوسم السابق او قبله  الصق الكود التالي : 

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

الخطوة 6  : 

الان ابحث عن هذا الكود : 

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

الخطوة 7 : 

و احذفها حتى تصل هذه العلامة : 

 </b:widget>

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

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

  <b:if cond='data:title'><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 == &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='item-content'>

              <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 class='item-snippet'><data:post.snippet/></div>

            </div>

            <div style='clear: both;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

الخطوة 8 :

 بعد ان حذفت الكود الذي في الاعلى الصق هذا الكود مكانه 

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

   <b:if cond='data:title'>

    <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 == &quot;false&quot;'>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        <b:else/>

         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>

        </b:if>

       <b:else/>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <b:if cond='data:post.thumbnail'>

          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>

         <b:else/>

          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmCbTMHUZgX5Lo1rFxKwCN9_5akaxRbEnURmnhXpkh9Bzz4LUS5mf42T7_zzrGDHKllynQR1miVTxl9WsDF7Kar5anqOPSQOQxD8ja8O7EVbWkLilmyomsjeNzsXthr7aXaoIJykDJ4Y/s1600/default.jpg'/>

         </b:if>

         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        <b:else/>

         <b:if cond='data:post.thumbnail'>

          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>

         <b:else/>

          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmCbTMHUZgX5Lo1rFxKwCN9_5akaxRbEnURmnhXpkh9Bzz4LUS5mf42T7_zzrGDHKllynQR1miVTxl9WsDF7Kar5anqOPSQOQxD8ja8O7EVbWkLilmyomsjeNzsXthr7aXaoIJykDJ4Y/s1600/default.jpg'/>

         </b:if>

         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        </b:if>

       </b:if>

      </li>

     </b:loop>

    </ul>

   </div>

  </b:includable>

</b:widget>

الخطوة 9 : 

احفظ القالب 

اعدادت : 

اذهب الى التخطيط ثم اضغط تحرير في اداة المشاركات الشائعة واختار عدد المشاركات التي ستظهر 5 مشاركات فقط 

الان اعمل حفظ واستسمتع بالاضافة : 

اي استفسار او اي مشكلة تواجهك الرجاء ترك تعليق اسفل الموضوع 

وشكرا :) 

منشورة في: