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

مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين

by homeblogger

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>مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم بكل ماهو جديد في عالم التدوين مدونة هزم بلوجر مدونة عربية عصرية تهتم...

CSS

/* 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;
}