حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان احترافيه

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




كيفية اضافة هذا الارشيف لمدوناتكم

1-من لوحة التحكم >>> الصفحات
2 اضغط على صفحة جديدة واختر صفحة فارغة
3-  الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

اللون الاحمر


<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}
.toc-note {
padding: 5px 10px;
position: relative;
top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;
border: 1px solid #ddd;
color: #666;
padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;
border: 1px solid #ddd;
padding-right: 8px;
line-height: 30px;
font-size: 14px;}
.toc-entry-col1 a {
color: #E75139;}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;border: 1px solid #111;color: #fff;
text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;
color: #fff;padding-right: 8px;
font-size: 14px;}.toc-entry-col3 a { color: #fff; }
.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>

اللون الازرق

<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 14px;}
.toc-entry-col1 a {color: #018EC5;
}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
background: #018EC5;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 14px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>

</div>

اللون الرمادي


<style type="text/css">
#bp_toc {border: 0px solid #000;
background: none repeat scroll 0% 0% #FFF;
padding: 5px;margin-top: 10px;width: 100%;}
.toc-note {padding: 5px 10px;position: relative;top: -13px;}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
text-align: center;
background: none repeat scroll 0% 0% #E6E6E6;
box-shadow: 2px 2px 5px 5px #CCC inset;
color: #000;
padding-left: 2px;width: 58%;}
.toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}
.toc-header-col3 {width: 31%;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%;text-decoration:none;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;font-size:70%;
border: 2px solid white !important;background: #F6F6F6;
white-space:nowrap;}</style><br />
<div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>


وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,,  هذا كل شئ .... بالتوفيق للجميع

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

  1. شكرا لك جلال كنت انتضر هالضافه من زمان وهسه لقيته عندك شكرا جزيلا

    ردحذف
  2. رائع أخي بارك الله فيك

    ردحذف
    الردود
    1. الله يبارك في ايامك اخي شكرا لمرورك

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

    ردحذف
  4. أخي جلال .. نسيت تذكر خطوة استبدال رابط مدونتك .. يمكن أن تقف هذه عائقا مع المبتدئين :) ebd3h.blogspot.com

    ردحذف
    الردود
    1. السلام عليكم اين يتم استبدال رابط المدونة... لقد قمت بنسخ الكود كما هو ولم يعمل معي؟ هل من مساعدة.

      حذف
  5. شكرا لك اخي جلال اضافة اكثر من رائعة

    اتمنى زيارتي في مدونة مدون محترف و ترك تعليقك شرف لي

    ردحذف
    الردود
    1. و كل عام و انت بخير اخي جلال

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

    ردحذف
    الردود
    1. اخي الاضافه تعمل بكفائه ولكن اعتقد ان هناك تداخل بين اكواد الاضافه واكواد قالبك

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

      حذف
  7. اخى جلال انا قمت بمتابعة احدى دورات تكويد القالب ووجهاتنى مشكله وياريت لو تقدر تفيدنى فيها عند تكويد المشاركات فى القالب تكون المشاركات فى متداخله مع بعضها البعض مثل ما فى الصوره التاليه http://im62.gulfup.com/1ASB0G.png

    ولكنى ارجو منك المساعده تشرح لى كيف اقوم بعمل تباعد بين المشاركات حتى تكون كل مشاركه او تدوينه تكون مثل هذا الشكل http://im62.gulfup.com/fVX2Tu.png

    وشكرا لك اخى جلال وارجو ان يكون لديك الوقت لتساعدى لانى محتاج التعديل سريعا حتى اكمل باقى اقالب وشكرا لك مره اخرى على المساعدات التى تقمها فىى المدونه الرائعه (h)

    ردحذف
    الردود
    1. ضع رابط المدونه للمعاينة واعطائك الكود المناسب

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

    ردحذف
    الردود
    1. اخي الكريم كل الاكواد تعمل بكفائه دون نقصان او زياده بالاكواد وهي ايضا مجربه على اكثر من مدونه

      حذف
  9. رااااااااااااااااااااااائع واخيرا بعد طول غياب

    ردحذف
    الردود
    1. الاروع مرورك اخي :>) :>) :>) :>) :>)

      حذف
  10. أنا عندي مشكلة كبيرة
    وانا واثق مفيش حد هيقدر يحلها غير انت
    انا حملت قالب ورفعته للمدونة
    بس بيظهر اعلانات من جوجل
    كيفية حذف هذه الاعلانات ؟

    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
  11. ايه الحل
    http://im76.gulfup.com/YrG5Lq.png

    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
  12. لا مشكلة ازاي يعني القي نظرة
    http://im62.gulfup.com/ldaoOV.png

    ردحذف
    الردود
    1. ممكن رابط المدونة لاعطيك الحل

      حذف
    2. http://twaselegtm3y.blogspot.com/
      :-?

      حذف
    3. ابحث عن الكود
      featured واحذفه

      حذف
    4. ايحث عن هذا الكود
      column-center-outer
      وهذا الكود
      main section
      واحذف كل ما بينهما

      حذف
  13. شكرا يا اخي محمد :)

    ردحذف
  14. أزال المؤلف هذا التعليق.

    ردحذف
  15. أزال المؤلف هذا التعليق.

    ردحذف
  16. شكرا لك اخي العزيز ولكن لدي طلب وارجو ان لا تخذلني انا اريد ان اتبادل اعلانيا مع مدونتك وزرت صفحة في مدونتك تقول ان علي وضع اضافة حتى استطيع التبادل ووضعت هذه الاضافة ووضعت ايضا اسم مدونتك ورابطها وبنرها ارجو اضافة مدونتي لكم وان لا تردوني خائبا وشكرا
    اسم المدونة : مدونة الاحتراف
    رابط المدونة : www.Th3prof-Web.com
    رابط البنر : http://im58.gulfup.com/KsdLFC.png
    وشكرا لكم

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

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

    http://tsmem111.blogspot.com/

    ردحذف
  19. السلام عليكم اخي ممكن تحذف السلايد شو وتستبدله بسلايد شو تلقائي جميل منعندك واحذف لي هذه الاضافات التي محوطة باللون الازرق في الصورة
    اتمنى في اسرع وقت تكمله لاني محتاجة ضروري وتحذف ايضى حقوق بلوجر هاي تدعمه بلوجر
    شوف هذه الصورة اريد ان تحذف الاشياء المحوطة باللون الازرق
    رابط الصورة http://im46.gulfup.com/5Vq7kn.png
    رابط القالب http://www.gulfup.com/?EatlcU

    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
  20. شكرا لك اخي جلال البعداني
    موضوع اكثر من رائع
    ارجو ان تجيبني على سؤالي
    الان عندما اضع الارشيف .. يخرج خارج الاطار المحدد له .. ويدخل جزء منه الى اخر المواضيع
    هل هنالك حل لهذه المشكلة !؟

    ردحذف
    الردود
    1. ضع رابط لمعاينة المشكله

      حذف
  21. السلام عليكم جلال،
    عيدك مباؤك سعيد..
    لم أستطع التواصل معك عبر صفحة الأتصال..
    لقد قمت بإضافة رابط مدونتك على مدونتي بحكم جودة مقالاتك والقيمة المضافة التي تمنحها لزوارها..
    أرجو أن تطّلع على مدونتي..وتخبرني برأيك في محتواها..
    وإذا كان بالإمكان..وضع رابط لي على مدونتك..
    ليلة سعيدة
    رابط المدونة: مدونة أونزيم

    ردحذف
  22. غير معرف30/7/14 06:22

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

    ردحذف
  23. شكرا لك اخي جلال اضافة اكثر من رائعة

    ردحذف
  24. يا جلال انا حملت قالب وما عرفت كيف اضع الصور في سلايدرشو ارجو مساعدتي هذا رابط مدونتي http://islam-indz.blogspot.com/

    ردحذف
  25. أخي جلال اريد التواصل معك على الخاص

    ردحذف
  26. مشكور ياغالي واصل

    http://www.modawin-blogger.blogspot.com

    ردحذف
  27. استاذ جلال اريد قالب جديد
    رجاء التواصل معى عبر الاميل
    mohamed.eletreby11@yahoo.com
    او من هنا
    http://www.drossonline.com/p/blog-page.html

    ردحذف
  28. أزال المؤلف هذا التعليق.

    ردحذف
  29. السلام عليكم اخي جلال انا من متابعيك باستمرار ولقد استفدت من هده المدونة الرائعة اتمنىلها الاستمرار اخي لدي مشكل في مدونتي في خاصية تلخيص مواضيع الصفحة الرئيسية قمت باضافة الخاصية لكن لا تعمل في المدونة مع العلم ان القالب رفعته الى مدونة تجريبية اخرى وتعمل الاضافة جيدا لكن في المدونة الرئيسية لا تعمل ارجو منك مساعدتي ولك جزيلا الشكر وكل من لديه حل ارجو ان يساعدني رابط المدنة
    http://www.abounizar005.blogspot.com/

    ردحذف
  30. أزال المؤلف هذا التعليق.

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

    ردحذف
  32. مرحبا أخي فعلا سكريبت أكثر من رائع و مشكور جزيل الشكر . لكن أخي أنا عندي مدونة بالغة الأنجليزية يعني مافيش سكريبت للانجليزي مثل السكريبت الأزرق

    ردحذف
  33. أخ جلال كيف أجذف الأقسام من الفهرس -_-

    ردحذف
  34. شكرًا جزيلاً الإضافة الرائعة ،،

    ردحذف
  35. شكراً جزيلاً لك جزاك الله ﷻ خير عمل ومساعده طيبه اكثر من انها مجرد مقالة وبرمجة

    ردحذف
  36. مبدع بمعنى الكلمة ، أشكرك وجزاك الله خيراً .

    ردحذف
  37. أخي علما أن مدونتي بلإنجليزية هل يمكن وضع هذه الإضافة بالإنجليزية وشكرا

    ردحذف