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

<div class='widget-content'>
<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  // ----- Tabs -----
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  // ----- Pages -----
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<script type="text/javascript">
div.TabView div.Tabs
{
  height: 24px;
  overflow: hidden;
}
div.TabView div.Tabs a
{
  float: right;
  display: block;
  width:  90px;
  text-align: center;
  height:      24px;
  padding-top: 3px;
  vertical-align: middle;
border: solid 0px #3F3F3F;
border-bottom-width: 0;
  text-decoration: none;
  font-family: tahoma,"Times New Roman", Serif;
  font-weight: 900;
  color: #ccc;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #ccc;
}
div.TabView div.Pages
{
  clear: both;
  border: 0px solid #ccc;
  overflow: hidden;
}
div.TabView div.Pages div.Page
{
  height: 100%;
  padding: 0px;
  overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
  padding: 3px 5px;
}
</script>
<style>
div.TabView div.Tabs
{
  height: 24px;
  overflow: hidden;
}
div.TabView div.Tabs a
{
  float: right;
  display: block;
  width:  94px;
  text-align: center;
  height:      24px;
  padding-top: 3px;
  vertical-align: middle;
border: 0px solid #3F3F3F;
border-bottom-width: 0;
  text-decoration: none;
  font-family: tahoma,"Times New Roman", Serif;
  font-weight: 840;
  color: #fff;
}


div.TabView div.Tabs , div.TabView div.Tabs a.Active
{
background-color: #fff;
color: #666;
}


div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #689EAC;
font-weight: bold;
color:#fff;
}
div.TabView div.Pages
{
  clear: both;
  border: 0px solid #404040;
  overflow: hidden;
}
div.TabView div.Pages div.Page
{
  height: 100%;
  padding: 0px;
  overflow: hidden;
border: solid 0px #3F3F3F;
}
div.TabView div.Pages div.Page div.Pad
{
  padding: 3px 5px;
border: solid 0px #B0EAB0;
}


</style>

<div class="TabView" id="TabView">
<!-- *** Tabs ************************************************************** -->
<div class="Tabs" style="width: 304px;">
    <a>القسم الاول</a>
<a>القسم الثاني</a>
  <a>القسم الثالث</a>
</div>
<!-- *** Pages ************************************************************* -->
<div class="Pages" style="width: 304px;  height: 267px;">


  <!-- *** Page1 Start *** -->
  <div class="Page">
  <div class="Pad">


<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>
<script src="http://tqarob.com/feeds/posts/default/-/تنسيق القالب?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>




  <!-- *** Page1 End ***** -->
  </div>
  </div>

  <div class="Page">
  <div class="Pad">
  <!-- *** Page2 Start *** -->

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>
<script src="http://toppreparation.blogspot.com/feeds/posts/default/-/اضافات css?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>


  <!-- *** Page2 End ***** -->
  </div>
  </div>


  <div class="Page">
  <div class="Pad">
  <!-- *** Page3 Start *** -->

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>
<script src="http://tqarob.com/feeds/posts/default/-/اكواد Html?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

  <!-- *** Page3 End ***** -->
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  </div>
  </div>

</div>
</div>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
<div class='clear'></div>

قبل حفظ الاداه قم بمشاهدة العليمات التي بالاسفل والتي ستساعدك في تخصيص الاداه بما يتناسب مع مدونتك :
1- لتغيير اسماء الاقسام الظاهره في التبويبات ابحث في الكود عن
 <a>القسم الاول</a>
<a>القسم الثاني</a>
  <a>القسم الثالث</a>  وقم بتغيير المسميات كما يحلو لك .
2- ابحث داخل الكود عن toppreparation ستجدها مكرره ثلاث مرات غيرهم برابط مدونتك وفي كل مره ستجد في نهاية الرابط اسم قسم من اقسام مدونتي قم فقط بتغيير الاسم باسم القسم الموجود في مدونتك ( التسميه ) والتي ترغب في عرض المواضيع من خلاله .
3-  للتحكم في الادوات التي تظهر تحت العنوان قم بالبحث عن
var numposts = 3;    الرقم 3 مسؤل عن عدد التدوينات المعروضه في كل قسم . ( غيره كيفما تشاء ) .
var showpostthumbnails = true;  هذا الخيار خاص باخفاء او عرض الصوره بجانب العنوان ( الافتراضي تظهر لاخفائها غير true الى false .
var displaymore = false;    لاخفاء او عرض عبارة اقرأ المزيد .
var displayseparator = false;   لعمل فواصل بين المواضيع .
var showcommentnum = true;  لاظهار / اخفاء عدد التعليقات.
var showpostdate = true;   لاظهار / اخفاء  تاريخ نشر الموضوع.
var showpostsummary = false;  لاظهار / اخفاء وصف قصير للموضوع.
var numchars = 200;  لتحديد عدد الحروف ( ليس ذات اهميه مادمت لم تفعل الخيار الموجود اعلاه) .
* ملحوظه * المتغيرات الموجوده في الاعلى متكرره ثلاث مرات في الكود لذلك مفروض عليك حين التعديل على واحد من الثلاثه ان تفعل بالمثل مع البقيه كى تحافظ على تنسيق الاضافه وتظهر بشكل جيد واخيرا للتحكم في ارتفاع وعرض الاضافه ككل قم بالبحث عن 
width: 304px وغير الرقم الى عرض القائمه الجانبيه لمدونتك . ستجد الكود مكرر مرتين غير الاثنين بالتساوي . ولتغيير الارتفاع ابحث عن  height: 267px وغير الرقم بما يناسبك 
لاتنسو زيارة صفحتنا على الفيسبوك والاشتراك عبر البريدالالكتروني للتوصل باخرالمستجدات كان معكم اخوكم ابراهيم اوليلي.. انتهى .