تدوينة جديدة ومفيدة لاصحاب المدونات حيث سنتطرق لكيفية عرض مشاركات مدونتك بشكل جميل ومنظم باكثر من طريقة فيما يسمى فهرس مدونتك او خريطة الموقع حيث سنعرض 3 تصاميم ويمكنك اختيار التصميم الذي يعجبك وتطبقه على مدونتك
نقوم بالتسجيل في بلوجر >> الصفحات >> انشاء صفحة جديدة >> HTML >> ثم ننسخ احد الاكواد التالية داخل محرر الHTML حسب رغبتك >>ثم نحفظ الصفحة
سنعرض هنا ثلاث نماذج لتصماميم خرائط الموقع ويمكنك اختيار افضلهم حسب رغبتك
النموذج الاول
معاينة
كود html
رمز Code:
#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;
}
النموذج الثاني
معاينة
كود HTML
رمز Code:
يحمل...
▶ sweup
النموذج لثالث كما عرضه المهندس محمد جلال في مدونة ابواياد
معاينة
كود HTML
رمز Code:
انتظر تحميل الارشيف
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: " -
جديد" // HTML for the "جديد" text
};
لا تنسى ان تغير رابط مدونتك برابط مدونتي واي استفسار بخصوص الموضوع يمكنك وضعه اسفل التدوينة في تعليق وسنجيبك ان شاء الله
انشاء فهرس لمدونات بلوجر-خريطة الموقع ~ sweup.com</div></div>
أكثر...