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

0

 

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

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

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

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

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

من لوحة تحكم المدونه …. اختر المظهر …. ثم اختر تعديل 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>

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

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

اتمنى أن أكون وفقت فى الشرح واستفدت منه .
مودتى لك

قد يعجبك ايضا

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More