حل مشكله الصوت الرسائل الصوتية في ماسنجر فيسبوك

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

أغلب الزوار لمدونتك يبحثون فيها فى الغالب عن قسم أو أقسام معينه ، ولكى نجعل اخفاء واظهر اقسام المدونه بيد الزائر ماعليك الا اتباع الخطوات التاليه بعد لكى نضيف زر مشاهدة الكل للإقسام بمدونتك ،بحيث يقوم الزائر بالضغط عليه حينما يرغب فى رؤية كافة الاقسام ويكون الظاهر من الاقسام عدد معين بسيط لايؤثر على واجهة مدونتك وشكلها الجمالى سواء عبر الديسكتوب أو الجوال.
إضافة زر مشاهدة الكل لأقسام مدونة بلوجر.-
من لوحة تحكم المدونه .... اختر المظهر .... ثم اختر تعديل HTML
ابحث فى القالب عبر الأمر Ctrl+F عن الكود التالى :-

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>...</b:widget>

ثم استبدل الكل كما بالصوره التاليه

بالكود التالى :-

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>CLOUD</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=10"'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'><data:label.count/></span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=10"'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
   <a class='btn-more' href='#' title='Show all label'>اظهار الكل</a>
  </div>
</b:includable>
    </b:widget>

ثم ابحث عن الوسم

</head>

وفوقه ضع الكود التالى :

<style type='text/css'>
/* CSS Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left}#Label1 .label-size{display:block;float:left;line-height:1.2;margin:0 5px 5px 0;font-size:13px;font-weight:600;z-index:9;transition:initial}#Label1 .label-size a,#Label1 .label-size span{background:#4e72f8;display:inline-block;color:#fff;border:1px solid #4e72f8;padding:6px 12px;font-weight:600;border-radius:3px;transition:all .3s}#Label1 .label-size a:hover{background:#4667e1;color:#fff;border-color:#4667e1;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#f8f8f8}
#Label1 .label-size:nth-child(n+7){display:none}#Label1.open .label-size:nth-child(n+7){display:block}#Label1 a.btn-more{background:#4e72f8;display:block;color:#fff;border:1px solid #4e72f8;font-weight:600;border-radius:3px;transition:all .3s;float:left;overflow:hidden;line-height:1.2;padding:6px 12px;font-size:13px;margin:0 5px 5px 0}#Label1 a.btn-more:hover{background:#4667e1;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}#Label1 .widget-content{max-height:110px;overflow:hidden;overflow-y:visible}
</style>

انتبه إلى الكود المميز ، (n + 7) يعني أنه سيتم عرض 6 ملصقات فقط بينما سيتم إخفاء التسمية السابعة وما إلى ذلك وسيتم عرض الكل عند النقر فوق الزر "إظهار الكل".
ثم ابحث عن الوسم التالى

</body>

اعلاه ايضا ضع الكود التالى :

<script type='text/javascript'>
//<![CDATA[
// Show all label
$("#Label1 .btn-more").on("click",function(e){e.preventDefault(),$(this).closest("#Label1").toggleClass("open")});
//]]>
</script>

وستكون النتيجه النهائيه كما بالصوره التاليه كمثال ..

اتمنى أن أكون وفقت فى شرح كيفية إضافة زر مشاهدة الكل لأقسام مدونة بلوجر
مودتى لك

تعديل المقال