اضافة احترافيه بـ 5 أقسام تعمل يدويا بتاثير رائع جدا

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

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

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

صورة من الإضافة

شرح التركيب

• الإضافة سهله جدا فى تركيبها فلن تجد أى صعبه فى تركيبها فهى فقط تتمثل فى كودين وسوف يكون عليك الأمر سهل جدا لأن الأضافة فى نصفها الأخر تعمل من التخطيط.

سوف تقوم أول شئ بالبحث عن هذا الوسم فى قالب مدونتك

]]></b:skin>

ثم تقوم بوضع الكود التى فوقه. 

.tabs-frame {

  width: 100%;
  overflow: hidden;
  height: 440px;
}
.tabs-frame .tab {
  position: relative;
  float: right;
  width: 50px;
  height: 50px;
  margin-right: 16px;
}
.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 #fff;
  background: #009688;
  display: block;
  -webkit-transition: .15s linear;
}
.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #fc6e51;
}
.tabs-frame .tab .tab-button:hover {
    background: #fc6e51;
}
.tabs-frame .tab .tab-frame {
  position: absolute;
  top: 100%;
  right: 0;
  width: 310px;
  border-radius: 5px;
  background: #01579B;
  display: block;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  text-align: justify;
  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%);
}
section#tab_frame_2 {
  right: -65px;
}
section#tab_frame_3 {
  right: -132px;
}
section#tab_frame_4 {
  right: -200px;
}
section#tab_frame_5 {
  right: -265px;
}
.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 #01579B;
  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: 20px;
  color: #fff;
  text-align: justify;
  font-size: 14px;
}

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

<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>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.     </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>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.     </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>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.     </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>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.     </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>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.     </p>    </section>  </article></section>

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

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