مساحة إعلانية

الأحد، 20 يوليو، 2014

الأحد، 20 يوليو، 2014

الفهرس المبوب بألوانك المفضلة

Tabbed Blogger Site Map widget
فهرس جديد ينضم لإضافات الفهارس السابقة التي أضفناها لكم يتميز هذا الفهرس بانه يعمل بتقنية التبويبات أى يعتبر كل قسم تبويب مستقل بمواضيعه الخاصة ويظهر المواضيع التابعة للقسم عند تنشيط التبويب الخاص بها تم ضبط مظهر الفهرس ليكون سهل التعديل عليه وسيتم شرح طريقة تنسيقه باللون الذي تريده لكن أولا يمكنك معاينة الفهرس من الروابط التالية
كود الفهرس أضفه في صفحة ثابتة بعد تحويل صندوق الكتابة من وضع تأليف الى وضع HTML
احذف أى شئ موجود به ثم اضف الكود

<style>
/* cnmu.blogspot.com style Tabbed Layout TOC */

#tabbed-toc {
  background-color: #004DAC;
  border: 5px solid #1E78DF;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #333333;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px/normal Droid Arabic Kufi;
  color:white;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc .toc-tabs {
  width:20%;
  float:right;
}

#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 12px/30px Droid Arabic Kufi;
  height:30px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabbed-toc .toc-tabs li a:hover {
  background-color:#1E78DF;
  color:#fff;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color: #1E78DF;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  margin: 0 -1px 0 0;
  position: relative;
  z-index: 5;
}

#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:left;
  background-color:white;
  border-right:5px solid #1E78DF;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Droid Arabic Kufi;
}

#tabbed-toc .panel li a {
  color: #000000;
  display: block;
  font: bold 10px/25px Droid Arabic Kufi;
  height: 25px;
  outline: medium none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
}

#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:left;
}

#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}

#tabbed-toc .panel li .summary img.thumbnail {
  float:right;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabbed-toc .panel li:nth-child(even) {
  background-color:#D5E8FE;
}

#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:right;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#1E78DF;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<div id="tabbed-toc"><span class="loading">يرجى الإنتظار ...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://cnmu.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "جديد!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:#F2000C;'>جديد!</em>" // HTML for the "New!" text
};

</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2014/tabbed-toc.js"></script>
أول شئ عدل هذا الرابط http://cnmu.blogspot.com  برابط مدونتك
تم اعدادا الفهرس باللون الأزرق كلون افتراضي كونه من أكثر الالوان انتشاراً لكن يمكنك تعديل الألوان بإتباع التالي
هذا اللون #004DAC هو لون خلفية التبويبات
هذا #1E78DF هو اللون العام للقالب يفضل أن يكون درجة أفتح من اللون الذي ستختاره للخلفية
وهذا #D5E8FE هو لون خلفية روابط المواضيع وهذا يفضل ان يكون درجه فاتحه جداً من اللون لاذي ستختاره
الرقم 20 هو مقاس شريط التبويبات
والرقم 80 هو مقاس خانة الروابط
ان صغرت أحدهم قم بزيادة الآخر والعكس صحيح المهم أن يكون المجموع الكلي 100
وهذا #F2000C هو لون كلمة جديد
دمتم في امان الله

هناك 26 تعليقًا:

  1. موضوع رائع دائما متميز اخى ارجو وضع بصمتك بمدونتى

    ردحذف
    الردود
    1. أشكرك اخي أحمد على مرورك الكريم
      وموفق بإذن الله

      حذف
  2. تعجز الكلمات عن وصفك أخي عمرو والله أبدعت

    ردحذف
    الردود
    1. ربي يبارك فيك أخي محمد
      بدعمكم نستمر =r

      حذف
  3. ماشاء الله عليك غايه في الروعه بالتوفيق يالغالي =r

    ردحذف
    الردود
    1. سررت بمرورك أخي علاء
      ودي وتقديري =r

      حذف
  4. راااااااااااااااااااااااااااااااااااااااااااااائع ومبدع والله عجزت عن استخراجة من قالب اجنبى
    =q

    ردحذف
    الردود
    1. =s الحمد لله أخي ها هو متاح للجميع
      شكراً لمرورك يا طيب

      حذف
  5. يعطيك الف عافية اخي عمرو فعلا فهرس اكثر من جميل
    دائما تبدع بمواضيعك

    =r

    ردحذف
    الردود
    1. شكراً على ذوقك أخي منير تحياتي لك =r

      حذف
  6. أزال المؤلف هذا التعليق.

    ردحذف
  7. مشكوررررررررررر يغالى تمت الإضافة فى مدونتى
    g-a3.blogspot.com

    ردحذف
  8. اقل كلمة توصفك ... مبدع ما شالله عليك

    ردحذف
    الردود
    1. الله يعزك أخي الكريم
      شكراً لمرورك يا طيب

      حذف
  9. السلام عليكم اخيي العزيز
    عندي استفسار بسيط
    كيف اقوم بعمل صفحة كامله خاصة بمدونتي مثل هذه الصفحة
    http://cnmu.blogspot.com/p/preview.html?url=http://cnmu-test2.blogspot.com/2013/01/blog-post_8404.html

    ردحذف
    الردود
    1. او بمعني اصح
      صفحة بدون اي اضافات فارغة تماما

      حذف
    2. وعليكم السلام ورحمة الله وبركاته
      عمل صفحة فارغة بدون اضافات لا يمكن شرحه لأنه يختلف من قالب لأخر اما نظام صفحة المعاينة نفسه راجعه من هنا
      http://cnmu.blogspot.com/2013/02/Redirection-for-Demo-and-Download.html

      حذف
  10. موضوع جميل وبه الكثير من العمل بارك الله لك ...لكن عندى سؤال :الفهرس يأخذ تلقائيا من اقسام المدونة وانا كنت انوى الغاء هذا القسم لان وضعت بدلا منه اضافة تحت الهيدر تغنى عنة واود الالغاء منعا لتكرار الروابط طبقا لتعليمات seo ما رايك:http://menshawy-b.blogspot.com

    ردحذف
    الردود
    1. أخي القسم الذي تلغيه تلقائيا لن يجلبه الفهرس ولا توجد مشكله في الغاءه الامر يعود لك

      حذف
  11. السلام عليكم اخيي العزيز
    عندي استفسار بسيط لا استطيع انتقال الى التسميات .: NOUVELE ONGLET
    صفحة فارغة

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

      حذف
  12. أخي كيفي يمكني أن أضيف اليها تصنيفات مخصصة ليس جميع التصنيفات وشكرا لك

    ردحذف
    الردود
    1. لا ينفع هذا الامر اخي فالفهرس معد ليعرض جميع الأقسام ولا ينفع إستثناء احدها

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      يمكنك انشاء لكل كاتب تسمية خاصة تضيف لها مواضيعه
      ثم استخدم آداة آخر المواضيع من تسمية ذلك الكاتب
      مثال للإضافة
      http://cnmu.blogspot.com/2013/06/Recent-Posts.html
      اما الفهرس ليخصص من قسم معين يحتاج الامر خدمة دعم فني وانا لا اقدم تلك الخدمة عبر المدونة اقدمها فقط مدفوعة عبر خمسات
      دعم فني

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©