إنشاء فهرس بشكل إحترافي

إنشاء فهرس بشكل إحترافي

يوجد الآن مشاهدة التعليقات : 27

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين

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

الشكل الأول


 
<style>
/* CSS Sitemap Ar1web */
#bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;}
.toc-header-col1 {padding:10px!important;line-height:15px;background-color:#e74c3c;width:250px;transition:all 0.3s ease-in-out;}
.toc-header-col2 {padding:10px!important;line-height:15px;background-color:#6cd9dd;width:75px;transition:all 0.3s ease-in-out;}
.toc-header-col3 {padding:10px!important;line-height:15px;background-color:#44cc9a;width:125px;transition:all 0.3s ease-in-out;}
.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;}
.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:15px;text-transform: lowercase;text-decoration:none;color:#fff;font-family:Electrolize,ge_ss_tvbold;font-weight:400;letter-spacing:0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:89%;;transition:all 0.3s ease-in-out;}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fff;}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:89%;}
.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:89%;}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f6af54;}
span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff;
color:#666;}
#bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;}
#bp_toc tr:nth-child(even) {background:#fafafa}
#bp_toc tr:nth-child(odd) {background:#eee}
</style>
<div id="bp_toc">
جاري تحميل الفهرس....</div>
<script src="https://ar1web-com.googlecode.com/svn/Hm/ihussam-sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

الشكل الثاني

* غير realmag-ar1web.blogspot.com برابط موقعك
 
<style>
/* CSS Sitemap Ar1web */
#tabbed-toc {width:100%;margin:0 auto;background-color:#09C;overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading {display:block;padding:5px 10px;font-family:&#39;Open Sans&#39;,Sans-Serif;font-weight:400;font-size:10px;color:#fff;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs {width:25%;float:left}
#tabbed-toc .toc-tabs li a {display:block;font-family:Electrolize,ge_ss_threeregular;font-weight:400;font-size:10px;height:31px;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;padding:6px 12px;cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {background-color:#1083A9;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab {background-color:#747474;color:#fff;position:relative;z-index:5;margin:0 -1px 0 0}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {width:75%;float:right;background-color:#fff;border-left:5px solid #747474;box-sizing:border-box}
#tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0;right:0;
bottom:0;}
#tabbed-toc .panel {position:relative;z-index:5;font-family:&#39;Open Sans&#39;,Sans-Serif;font-weight:400;font-size:10px;}
#tabbed-toc .panel li a {display:block;position:relative;font-weight:700;font-size:11px;
color:#7E7C7C;line-height:30px;height:30px;padding:6px 12px;text-decoration:none;outline:none;font-family: Electrolize,droid arabic kufi;
overflow:hidden}
#tabbed-toc .panel li a em {background:#F03232;color:#fff!important;padding:2px 4px;border-radius:3px;font-style:normal;}
#tabbed-toc .panel li time {display:block;font-style:italic;font-weight:400;font-size:10px;
color:#666;float:right}
#tabbed-toc .panel li .summary {display:block;padding:10px 12px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;
padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even) {background-color:#f0f0f0;font-size:10px;
color:#fff}
#tabbed-toc .panel li:nth-child(odd) {background-color:#f9f9f9;font-size:10px;
color:#fff}
#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:#747474;color:#fff;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#444;}
</style>
<div id="tabbed-toc">
<span class="loading">جاري التحميل...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://realmag-ar1web.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: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    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:red;'>جديد!</em>" // HTML for the "جديد!" text
};
</script>
<script src="https://ar1web-com.googlecode.com/svn/Hm/sitemapv2.js" type="text/javascript"></script>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. OMRAN ALHARIRI1/16/2015

    شكرا لك اخي نريد المزيد من حصرياتك

    ردحذف
  2. ممم، ظهرت لي بعض الأخطاء للأسف :/

    شوف، هذا القالب بتاعي وضعته في bloc-note

    و ممتن إن عدلت عليه و أضفتَ الشكل الأول فهو الأفضل

    وشكراً لك دائماً يا الغالي !

    http://www.samaup.com/do.php?id=25681

    ردحذف
  3. حمل القالب :http://www.gulfup.com/?nam68g
    وركبه بعدها توجه لصفحات في تبويب هتملل ضع به هذا الكود:

    جاري تحميل الفهرس....

    ردحذف
  4. السلام عليكم كيف احذف او اجد كود الصوره المنبثقه في قالب Minima هذه هي الصوره

    ردحذف
  5. asd123fghasdfgh1/17/2015

    السلام عليكم


    ممكن طريقة حذف كلمة ( جديد! ) - الشكل الثاني

    ردحذف
  6. asd123fghasdfgh1/17/2015

    السلام عليكم

    1- ممكن طريقة حذف كلمة ( جديد! ) - الشكل الثاني

    2- ممكن طريقة اضافة ظل للزر

    ردحذف
  7. في الكود ستجد كلمة "جديد!" بالأسفل متكررة ثلاث مرات إحذفها فقط.
    هذا هو كود الإنعكاس : -webkit-box-reflect:below -3px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4)))
    يضاف في الكود الذي تريده وضعه عليه

    ردحذف
  8. إبحث عن هذا الإسم : photoviewer.js
    ثم إحدف الكود بكامله هو هذا


    بعدها إبحث عن : CSS Image Lightbox Dark ثم إحدف بكامله الذي أسفله

    ردحذف
  9. إن شاء الله أخي

    ردحذف
  10. asd123fghasdfgh1/17/2015

    شكرا

    ردحذف
  11. ahmedhegazy1/18/2015

    اكثر من رائع شكرا لك

    ردحذف
  12. صديقي العزيز اين الرد ؟؟

    ردحذف
  13. تابع الصورة وبدل الرقم 3 "نعم" ضع "لا" واحفظ الإعدادات

    ردحذف
  14. شكرا صديقي انحلت المشكله تحياتي

    ردحذف
  15. عرب تيم1/31/2015

    يا حسام انا اريد اداة المشاركة التالى و المشاركة السابقة مثل اللى موجوده فى قالبك

    ردحذف
  16. asd123fghasdfgh2/13/2015

    يا اخي حاولت ان اضع الكود و لم يحدث شي


    عندي فكرة : ارفع لي الكود مع الزر ( زر واحد يكفي ) على مركز الخليج


    لكي لا تتعب معاي

    ردحذف
  17. Zied Zaabi2/22/2015

    شكرا
    www.blogger-scholars.ga

    ردحذف
  18. aitlkadi redwan4/26/2015

    شكرا لك اخي

    ردحذف
  19. اخى الرابط الثانى لا يعمل :(

    ردحذف
  20. عذراً لا يظهر scroll bar على يسار الفهرس والتدوينات تأخد مساحة كبيرة للأسفل، كيف يمكن عمل ذلك؟

    ردحذف
    الردود
    1. اضف الكود التالي اسفل <style> :

      #bp_toc{max-height: 700px; overflow: auto;}

      يمكنك التعديل على الإرتفاع بزيادة أو نقصان في الرقم 700

      حذف
    2. للأسف لم يعمل :( لكن شكرا لك

      حذف
    3. أي شكل استعملت؟

      حذف
  21. اصبح لا يعمل الفرس معي : https://ar1web-com.googlecode.com/svn/Hm/ihussam-sitemap.js
    هل تم تعيير سكريبت ؟

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم