إ ضافة تبويب بصيغة CSS داخل التدوينة لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

اليوم سوف نتعرف  في درسنا هذا على إضافة التبويب بصيغة CSS   داخل التدوينة ، مما  يساعد المدون على تبويب التدونية إذا كانت مطولة ويقسمها الى تبويبات .

أنقر للمعاينة

إ ضافة تبويب بصيغة CSS داخل التدوينة

- طريقة تركيب الإضافة داخل قوالب بلوجر :

1- أدخل إلى مدونتك >> ثم أختر تحرير قالب .

2- إبحث عن الوسم :  ]]></b:skin>  واللصق الكود التالي فوقه .

  /* Frame */
.tabs-frame {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 50px;
    margin: auto;
    display: block;
    text-align: Right;
}
/* Tabs */
.tabs-frame .tab {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
/* Tabs Radio */
.tabs-frame .tab .radio {
    display: none;
}

.tabs-frame .tab .tab-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    border-radius: 100%;
    border: 0 double #f74545;
    background: #f74545;
    display: block;
    -webkit-transition: .15s linear;
}

.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #f74545;
}

.tabs-frame .tab .tab-button:hover {
    background: #f74545;
}

/* Tabs Frame */
.tabs-frame .tab .tab-frame {
    position: absolute;
    top: 100%;
    left: -126px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    text-align: Right;
    line-height: normal;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
    -webkit-transition: opacity .3s linear,
    -webkit-transform .3s linear;
    -webkit-transform: translate(0, -10%);
}

.tabs-frame .tab .tab-frame:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
}

.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}

.tabs-frame .tab .tab-frame p {
    padding: 0 20px;
    margin: 20px 0;
}  

2- كيفية استخدام الإضافة : استخدم هذا الكود في وضع HTML

<section class="tabs-frame">
  <article class="tab">
    <input type="radio" id="tab_1" class="radio" name="tab_group_1" />
    <label for="tab_1" class="tab-button"></label>
    <section id="tab_frame_1" class="tab-frame">
      <p>...التبويب 1...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_2" class="radio" name="tab_group_1" />
    <label for="tab_2" class="tab-button"></label>
    <section id="tab_frame_2" class="tab-frame">
      <p>...التبويب 2...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked />
    <label for="tab_3" class="tab-button"></label>
    <section id="tab_frame_3" class="tab-frame">
      <p>...التبويب 3...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_4" class="radio" name="tab_group_1" />
    <label for="tab_4" class="tab-button"></label>
    <section id="tab_frame_4" class="tab-frame">
      <p>...التبويب 4...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_5" class="radio" name="tab_group_1" />
    <label for="tab_5" class="tab-button"></label>
    <section id="tab_frame_5" class="tab-frame">
      <p>...التبويب 5...</p>
    </section>
  </article>
</section>
 

التعديلات :

- عدّل ماهو باللون الأحمر بالنص الذي تريد إظهاره بالتبويبات  .

 وأخيراً نترككم برعاية الله وتوفيقه