اضافة أداة متعددة التبويب الى مدونات بلوجر

adel    أبريل 17, 2012    أدوات بلوجر , دروس بلوجر    3 تعليقات   

قد يهمك ايضًا

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

كيفية اضافة الأداة؟

1. نقوم بتسجيل الدخول الى لوحة التحكم بمدونة بلوجر
2. من لوحة التحكم نختار -قالب-تحرير HTML-
3. قم بتعليم "توسيع عناصر واجهة المستخدم"
4. ابحث عن الكود التالي : </head> 
5. نقوم بلصق الكود التالي فوقه مباشرة

<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id) 
{ 
  var Tabtampil = document.getElementById(TPID); 
  var TTs = Tabtampil.firstChild; 
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling; 
  var TT = TTs.firstChild; 
  var i   = 0; 
  do 
  { 
    if (TT.tagName == "A") 
    { 
      i++; 
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");"; 
      TT.className = (i == id) ? "Active" : ""; 
      TT.blur(); 
    } 
  } 
  while (TT = TT.nextSibling); 
  var Halamans = Tabtampil.firstChild; 
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling; 
  var Halaman = Halamans.firstChild; 
  var i    = 0; 
  do 
  { 
    if (Halaman.className == 'Halaman') 
    { 
      i++; 
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px"; 
      Halaman.style.overflow = "auto"; 
      Halaman.style.display  = (i == id) ? 'block' : 'none'; 
    } 
  } 
  while (Halaman = Halaman.nextSibling); 
} 
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id); 
} 
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1); 
document.write('');}
//]]>
</script>

6- نقوم بحفظ قالب المدونة.

 ننتقل الأن الى المرحلة الثانية وهي اضافة الكود HTML الى المدونة.

1- من لوحة التحكم نختار التخطيط-ثم نختار-اضافة اداة-HTML/JavaScript-نقوم بلصق الكود التالي ونضغط على حفظ.

<style type="text/css"> 
div.TabTampil div.TTs 
{height: 24px; overflow: hidden; } 
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active 
{ background-color: #eee; } 
div.TabTampil div.Halamans 
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;} 
div.TabTampil div.Halamans div.Halaman 
{ height: 100%; padding: 0px; overflow: hidden; } 
div.TabTampil div.Halamans div.Halaman div.Alas 
{ padding: 3px 5px; } 
div.TabTampil div.TTs a 
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left; 
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif; 
font-size: 11px; font-weight: 900; color: #000000} 
</style> 
<form action="tabtampil.html" method="get"> 
<div id="TabTampil" class="TabTampil"> 
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div> 
<div style="width: 300px; height: 300px;" class="Halamans"> 
<div class="Halaman"> 
<div class="Alas"> 
<br/> 
Tab 1 content goes here
</div> 
</div> 
<div class="Halaman"> 
<div class="Alas"> 
<br/>

Tab 2 content goes here

</div> 
</div> 
<div class="Halaman"> 
<div class="Alas"> 
<br/>

Tab 3 content goes here
</div> 
</div> 
</div> 
</div> 
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

نقوم الأن بالتعديلات اللازمة

1- نبحث عن Tab 1 , Tab 2  , Tab 3 ونقوم باستبدال كل واحد من هذه الرموز بعنوان الأداة المراد اضافتها مثلا :

Tab 1 = المشاركات الشائعة
 Tab 2 = أخر التعليقات
 Tab 3 = أرشيف المدونة

2- نبحث عن الرموز التالية ونقوم باستبدالها بأكواد الإضافات أو الأدوات التي نود ظهورها على المدونة كالأتي :

Tab 1 content goes here = كود الأداة " المشاركات الشائعة"
 Tab 2 content goes here=  كود الأداة "اخر التعليقات"
 Tab 3 content goes here = كود الداة "أرشيف المدونة"

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