انشاء فهرس لمدونات بلوجر-خريطة الموقع

9:11 م غير معرف 1 Comments

انشاء فهرس لمدونات بلوجر-خريطة الموقع

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

نقوم بالتسجيل في بلوجر >> الصفحات >> انشاء صفحة جديدة >> HTML >> ثم ننسخ احد الاكواد التالية داخل محرر الHTML حسب رغبتك >>ثم نحفظ الصفحة

سنعرض هنا ثلاث نماذج لتصماميم خرائط الموقع ويمكنك اختيار افضلهم حسب رغبتك

النموذج الاول

معاينة

كود HTML

 <div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:right;
  margin:0 0 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:60%;
  background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0 0 2px 0;
  padding:5px;
}
</style>
<script>
var theTotalPosts  = 9999, // Tentukan jumlah maksimal posting
    theOptions     = "ترتيب حسب...",                //عنوان الاختيار الاول
    theSortPosts   = "ترتيب حسب الحروف الهجائية", // عنوان الاختيار الثاني
    theSortLabels  = "ترتيب حسب التسمية", // عنوان الاختيار الثالث
    theTitles      = "عنوان التدوينة",  // Header tabel 1
    theLabels      = "تسمية التدوينة",  // Header tabel 2
    theDates       = "تاريخ النشر",   // Header tabel 3
    theBlankLabels = "غير مصنف",   // Label kosong
    theSiteUrl     = "http://swe-up.blogspot.com"; // هنا تضع رابط مدونتك بدل رابط مدونتي
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjcTJUcVVQb3FlRlU"></script></div>

النموذج الثاني

معاينة

كود HTML

 <div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://dte-project.googlecode.com/svn/trunk/accordion-toc-skin.css" rel="stylesheet"></link>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">يحمل...</span></div>
<div class="credit-link">
<a href="http://www.sweup.com/" title=" طور بواسطة sweup">▶ sweup</a></div>
<script>
var toc_config = {
    url: 'http://swe-up.blogspot.com',  // هنا تضع رابط مدونتك بدل رابط مدونتي

    containerId: 'table-of-content',
    showNew: 10,
    newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">جديد</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjMUctanBZU3BRSkE"></script></div>

النموذج لثالث كما عرضه المهندس محمد جلال في مدونة ابواياد

معاينة

كود HTML

 <link rel="stylesheet" href="https://googledrive.com/host/0BxhNxbe6o2Qjb0VNNEJudWRZcGc"/>
<div dir="ltr" style="text-align: right;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">&#1575;&#1606;&#1578;&#1592;&#1585; &#1578;&#1581;&#1605;&#1610;&#1604; &#1575;&#1604;&#1575;&#1585;&#1588;&#1610;&#1601;</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://sweup.com/", // استبدل رابط مدونتك بدل من رابط مدونتي
    containerId: "tabbed-toc", 
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, //  ضع `true` لاضهار التاريخ بدل من false
    showSummaries: true, // ضع false لاظهار ملخص التدوينة بدل من  true
    numChars: 200, //عدد احرف الملخص 
    showThumbnails:  true, // ضع false لاخفاء صورة الموضوع بدل من true
    thumbSize: 40, // حجم صورة الموضوع
    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, // فتح الرابط في صفحة جديدة?
    maxResults: 99999, //العدد الاقصى للمواضيع في الفهرس
    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://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
</div>

لا تنسى ان تغير رابط مدونتك برابط مدونتي واي استفسار بخصوص الموضوع يمكنك وضعه اسفل التدوينة في تعليق وسنجيبك ان شاء الله