مذكرات تاني سميرة

سنتعلم اليوم اضافة " تاب" tab  لمدونة بلوجر ، هذه الإضافة متميزة لأنها تمكنك من وضع عدة مواضيع في صفحة واحدة ، كما في المثال الموجود في هذه الصفحة  .

كيفية تركيب الإضافة 

افتح مشاركة أو صفحة جديدة ثم تحرير HTML ، وضع الكود التالي :

<div dir="ltr" style="text-align: left;" trbidi="on">

<style>
.skin1.top .tabs_header {
 margin: 0px;
 padding: 0px;
 list-style: none;
}
.skin1.top .tab_header_item {
 float: right;
 margin: 0px;
}
.skin1.top .tab_content {
 clear: right;
 display: none;
}
/* skin2 */
.skin1.top.tabs_wrapper {
 border: 1px solid #ddd;
 border-top: none;
}
.skin1.top .tabs_header {
 overflow: visible;
 min-height: 40px;
 margin-bottom: 20px;
 padding-right: 9px;
 border-top: 4px solid <b>#CD0000</b>;
 background: url(images/tabs_header_top.png) 0px bottom repeat-x;
}
.skin1.top .tab_header_item {
 margin-right: 1px;
 background: none;
 position: relative;
 top: -13px;
 padding-top: 12px;
}
.skin1.top .tab_header_item.tab_selected {
 background: #CD0000;
 -webkit-border-bottom-left-radius: 9px;
 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomleft: 9px;
 -moz-border-radius-bottomright: 9px;
 border-bottom-left-radius: 9px;
 border-bottom-right-radius: 9px;
}
.skin1.top .tab_header_item.tab_selected a {
 color: #fff;
}
.skin1.top .tab_header_item.tab_selected span.header_item_before {
 position: absolute;
 top: 0px;
 right: -9px;
 width: 9px;
 height: 9px;
 display: block;
 background: url(images/header_item_bottom_left.png) 0px 0px no-repeat;
}
.skin1.top .tab_header_item.tab_selected span.header_item_after {
 position: absolute;
 left: -9px;
 top: 0px;
 width: 9px;
 height: 9px;
 display: block;
 background: url(images/header_item_bottom_right.png) 0px 0px no-repeat;
}
.skin1.top .tab_header_item a {
 padding: 0px 20px;
 font: bold 14px Arial, Helvetica, sans-serif;
 line-height: 41px;
 color: #333;
 text-decoration: none;
 outline: 0;
}
.skin1.top .tab_content {
 font: 14px/24px Arial, Helvetica, sans-serif;
 color: #777;
 padding: 5px 30px;
}
</style>
<br />
<div class="tabs_holder">
<ul dir="rtl" style="text-align: right;">
<li><a href="https://www.blogger.com/blogger.g?blogID=7120168226293004800#your-tab-id-1">الفاتحة</a></li>
<li class="tab_selected"><a href="https://www.blogger.com/blogger.g?blogID=7120168226293004800#your-tab-id-2">الناس</a></li>
</ul>
<div class="content_holder">
<div id="your-tab-id-1">
<div dir="rtl" style="text-align: right;">
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (1).الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (2) الرَّحْمَنِ الرَّحِيمِ (3) مَالِكِ يَوْمِ الدِّينِ (4) إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ (5) اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ (6) صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ (7)صدق الله العظيم  </div><b></b>
</div>
<div id="your-tab-id-2">
<div dir="rtl" style="text-align: right;">
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ قُلْ أَعُوذُ بِرَبِّ النَّاسِ (1) مَلِكِ النَّاسِ (2) إِلَٰهِ النَّاسِ (3)مِنْ شَرِّ الْوَسْوَاسِ الْخَنَّاسِ (4) الَّذِي يُوَسْوِسُ فِي صُدُورِ النَّاسِ (5) مِنَ الْجِنَّةِ وَالنَّاسِ (6)صدق الله العظيم  </div>
</div>
</div>
<!-- /.content_holder -->
</div>
<!-- /.tabs_holder -->
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://onlinehtmltools.com/tab-generator/skinable_tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $('.tabs_holder').skinableTabs({
    effect: 'slide_right',
    skin: 'skin1',
    position: 'top'
  });
</script>

 </div>

التعديل على الكود

#CD0000 لون خلفية العناوين.

في هذا المثال لدينا عنوانين هما الفاتحة  و الناس

يمكنك تغيير السورتين المكتوبتين بالأزرق بأي موضوع تريد ، أو استبدلهما بكود صورة أو تطبيق آخر.

كما يمكنك تغيير لون الخط ...الخ

الموضوع حصري في موقع فيزياء تلمسان.

لا تنسى كتابة تعليق