جديد تقنية الهواتف

تحميل تصاميم فهرس لمدونات بروغر

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

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

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

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

معاينة

كود html

رمز Code:

<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

رمز Code:

<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

رمز Code:

<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">انتظر تحميل الارشيف</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>

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

HTTP://WWW.ABOOMR.COM/