كيفية اضافة صفحة خريطة الموقع sitemap بشكل انيق وجميل

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

عنوان الدرس : كيفية اضافة صفحة خريطة الموقع بشكل انيق وجميل .

بسم الله الرحمان الرحيم

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

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

ما هي صفحة خريطة الموقع او جدول المحتويات .

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

صفحة خريطة الموقع او جدول المحتوياتت : 

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

لمعاينة صفحة خريطة الموقع اضغط على الزر التالي : 

  معاينة صفحة خريطة الموقع

مميزات صفحة خريطة الموقع او خريطة المدونة : 

1. يتم اضافة مواضيعك الى خريطة الموقع تلقائيا بعد نشرها

2. المشاركات الجديدة الخاصة بمدونتك يضع بجانبها كلمة جديد 

3. جميع مشاركاتك تترتب حسب التسميات

4. خريطة الموقع لديها تصميم جيد ويتوافق مع جميع المدونات نظرا لالوانها الجذابة و المريحة

5. متجاوبة مع الهواتف النقالة اي مع الشاشات الصغيرة

والان مع شرح كيفية اضافة صفحة خريطة الموقع sitemap داخل المدونة .

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

اتبع الشرح التالي :

 من فضلك ضع اعجابك 

     اول شيئ قم بتسجيل الدخول في بلوجر .

     ثم قم بالذهاب الى الصفحات . 

     بعد ذلك قم بالضغط على زر انشاء صفحة جديدة .

     في الاصل ستجد تاليف قم بتحويله الى تحرير html .

     ثم قم بنسخ الكود التالي كاملا وقم بلصقه .

<div dir="rtl" style="text-align: right;" trbidi="on"> </p> <p style="text-align: justify;"> <div dir="rtl" style="text-align: right;" trbidi="on"> </p> <p style="text-align: justify;"> <br /></div> </p> <p style="text-align: justify;"> <style></p> <p style="text-align: justify;"> /* Skin for Blogger Tabbed Layout TOC */</p> <p style="text-align: justify;"> #tabbed-toc {</p> <p style="text-align: justify;">   margin: 0 auto;</p> <p style="text-align: justify;">   background-color: #FFFFFF;</p> <p style="text-align: justify;">   border: 4px dashed rgb(48, 167, 229);</p> <p style="text-align: justify;">   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);</p> <p style="text-align: justify;">   -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);</p> <p style="text-align: justify;">   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);</p> <p style="text-align: justify;">   overflow: hidden;</p> <p style="text-align: justify;">   position: relative;</p> <p style="text-align: justify;">   color: #333;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .loading {</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   padding:5px 10px;</p> <p style="text-align: justify;">   font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;</p> <p style="text-align: justify;">   color:white;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc ul,</p> <p style="text-align: justify;"> #tabbed-toc ol,</p> <p style="text-align: justify;"> #tabbed-toc li {</p> <p style="text-align: justify;">   margin:0 0;</p> <p style="text-align: justify;">   padding:0 0;</p> <p style="text-align: justify;">   list-style:none;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .toc-tabs {</p> <p style="text-align: justify;">   width:20%;</p> <p style="text-align: justify;">   float:right;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .toc-tabs li a {</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;</p> <p style="text-align: justify;">   height:28px;</p> <p style="text-align: justify;">   overflow:hidden;</p> <p style="text-align: justify;">   text-overflow:ellipsis;</p> <p style="text-align: justify;">   color: #434B50;</p> <p style="text-align: justify;">   text-transform:uppercase;</p> <p style="text-align: justify;">   text-decoration:none;</p> <p style="text-align: justify;">   padding:0 12px;</p> <p style="text-align: justify;">   cursor:pointer;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .toc-tabs li a:hover {</p> <p style="text-align: justify;">   background-color:rgba(110, 193, 255, 0.68);</p> <p style="text-align: justify;">   color:white;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .toc-tabs li a.active-tab {</p> <p style="text-align: justify;">   background-color: #6EC1FF;</p> <p style="text-align: justify;">   color:white;</p> <p style="text-align: justify;">   -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);</p> <p style="text-align: justify;">   -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);</p> <p style="text-align: justify;">   box-shadow:-2px 2px 2px rgba(0,0,0,.5);</p> <p style="text-align: justify;">   position:relative;</p> <p style="text-align: justify;">   z-index:5;</p> <p style="text-align: justify;">   margin:0 0 0 -1px;</p> <p style="text-align: justify;">   /* cursor:text; */</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .toc-content,</p> <p style="text-align: justify;"> #tabbed-toc .divider-layer {</p> <p style="text-align: justify;">     width: 80%;</p> <p style="text-align: justify;">   float: left;</p> <p style="text-align: justify;">   background-color: white;</p> <p style="text-align: justify;">   border-right: 2px dotted #30A7E5;</p> <p style="text-align: justify;">   -webkit-box-sizing: border-box;</p> <p style="text-align: justify;">   -moz-box-sizing: border-box;</p> <p style="text-align: justify;">   box-sizing: border-box;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .divider-layer {</p> <p style="text-align: justify;">   float:none;</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   position:absolute;</p> <p style="text-align: justify;">   top:0;</p> <p style="text-align: justify;">   left:0;</p> <p style="text-align: justify;">   bottom:0;</p> <p style="text-align: justify;">   -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);</p> <p style="text-align: justify;">   -moz-box-shadow:0 0 7px rgba(0,0,0,.7);</p> <p style="text-align: justify;">   box-shadow:0 0 7px rgba(0,0,0,.7);</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel {</p> <p style="text-align: justify;">   position:relative;</p> <p style="text-align: justify;">   z-index:5;</p> <p style="text-align: justify;">   font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li a {</p> <p style="text-align: justify;">  display: block;</p> <p style="text-align: justify;">   position: relative;</p> <p style="text-align: justify;">   font-weight: bold;</p> <p style="text-align: justify;">   font-size: 14px;</p> <p style="text-align: justify;">   color: #434B50;</p> <p style="text-align: justify;">   line-height: 40px;</p> <p style="text-align: justify;">   height: 35px;</p> <p style="text-align: justify;">   padding: 0 12px;</p> <p style="text-align: justify;">   text-decoration: none;</p> <p style="text-align: justify;">   outline: none;</p> <p style="text-align: justify;">   overflow: hidden;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li time {</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   font-style:italic;</p> <p style="text-align: justify;">   font-weight:normal;</p> <p style="text-align: justify;">   font-size:10px;</p> <p style="text-align: justify;">   color:#666;</p> <p style="text-align: justify;">   float:left;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li .summary {</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   padding:10px 12px 10px;</p> <p style="text-align: justify;">   font-style:italic;</p> <p style="text-align: justify;">   border-bottom:4px solid #275827;</p> <p style="text-align: justify;">   overflow:hidden;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li .summary img.thumbnail {</p> <p style="text-align: justify;">   float:right;</p> <p style="text-align: justify;">   display:block;</p> <p style="text-align: justify;">   margin:0 0 0 8px;</p> <p style="text-align: justify;">   padding:4px 4px;</p> <p style="text-align: justify;">   width:72px;</p> <p style="text-align: justify;">   height:72px;</p> <p style="text-align: justify;">   border:1px solid #dcdcdc;</p> <p style="text-align: justify;">   background-color:#fafafa;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li:nth-child(even) {</p> <p style="text-align: justify;">   background-color: #CAE6F2;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li a:hover,</p> <p style="text-align: justify;"> #tabbed-toc .panel li a:focus,</p> <p style="text-align: justify;"> #tabbed-toc .panel li a:hover time,</p> <p style="text-align: justify;"> #tabbed-toc .panel li.bold a {</p> <p style="text-align: justify;">   background-color:#333;</p> <p style="text-align: justify;">   color:white;</p> <p style="text-align: justify;">   outline:none;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> #tabbed-toc .panel li.bold a:hover,</p> <p style="text-align: justify;"> #tabbed-toc .panel li.bold a:hover time {</p> <p style="text-align: justify;">   background-color:#222;</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> @media (max-width:700px) {</p> <p style="text-align: justify;">   #tabbed-toc {</p> <p style="text-align: justify;">     border:2px solid #333;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .toc-tabs,</p> <p style="text-align: justify;">   #tabbed-toc .toc-content {</p> <p style="text-align: justify;">     overflow:hidden;</p> <p style="text-align: justify;">     width:auto;</p> <p style="text-align: justify;">     float:none;</p> <p style="text-align: justify;">     display:block;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .toc-tabs li {</p> <p style="text-align: justify;">     display:inline;</p> <p style="text-align: justify;">     float:right;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .toc-tabs li a,</p> <p style="text-align: justify;">   #tabbed-toc .toc-tabs li a.active-tab {</p> <p style="text-align: justify;">     background-color:#224C19;</p> <p style="text-align: justify;">     -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);</p> <p style="text-align: justify;">     -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);</p> <p style="text-align: justify;">     box-shadow:2px 0 7px rgba(0,0,0,.4);</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .toc-tabs li a.active-tab {</p> <p style="text-align: justify;">     background-color:white;</p> <p style="text-align: justify;">     color:#333;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .toc-content {</p> <p style="text-align: justify;">     border:none;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;">   #tabbed-toc .divider-layer,</p> <p style="text-align: justify;">   #tabbed-toc .panel li time {</p> <p style="text-align: justify;">     display:none;</p> <p style="text-align: justify;">   }</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> </style></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <div id="tabbed-toc"> </p> <p style="text-align: justify;"> <span class="loading">Loading...</span></div> </p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <script type="text/javascript"></p> <p style="text-align: justify;"> var tabbedTOC = {</p> <p style="text-align: justify;">     blogUrl: "<font color="#ff0000">http://alkhayro.blogspot.com</font>", // Blog URL</p> <p style="text-align: justify;">     containerId: "tabbed-toc", // Container ID</p> <p style="text-align: justify;">     activeTab: 1, // The default active tab index (default: the first tab)</p> <p style="text-align: justify;">     showDates: false, // `true` to show the post date</p> <p style="text-align: justify;">     showSummaries: false, // `true` to show the posts summaries</p> <p style="text-align: justify;">     numChars: 200, // Number of summary chars</p> <p style="text-align: justify;">     showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)</p> <p style="text-align: justify;">     thumbSize: 40, // Thumbnail size</p> <p style="text-align: justify;">     noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL</p> <p style="text-align: justify;">     monthNames: [ // Array of month names</p> <p style="text-align: justify;">         "يناير",</p> <p style="text-align: justify;">         "فبراير",</p> <p style="text-align: justify;">         "مارس",</p> <p style="text-align: justify;">         "ابريل",</p> <p style="text-align: justify;">         "ماي",</p> <p style="text-align: justify;">         "يونيو",</p> <p style="text-align: justify;">         "يوليوز",</p> <p style="text-align: justify;">         "غشت",</p> <p style="text-align: justify;">         "شتنبر",</p> <p style="text-align: justify;">         "اكتوبر",</p> <p style="text-align: justify;">         "نونبر",</p> <p style="text-align: justify;">         "دجنبر"</p> <p style="text-align: justify;">     ],</p> <p style="text-align: justify;">     newTabLink: true, // Open link in new window?</p> <p style="text-align: justify;">     maxResults: 99999, // Maximum post results</p> <p style="text-align: justify;">     preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")</p> <p style="text-align: justify;">     sortAlphabetically: true, // `false` to sort posts by published date</p> <p style="text-align: justify;">     showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked</p> <p style="text-align: justify;">     newText: " - <em style='color:red;'>جديد</em>" // HTML for the "New!" text</p> <p style="text-align: justify;"> };</p> <p style="text-align: justify;"> </script></p> <p style="text-align: justify;"> <script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script></div> </p> <p style="text-align: justify;">

و الان بقيت خطوة واحدة فقط وهي قم باستبدال هذا الرابط الموجود داخل الكود السابق برابط مدونتك http://alkhayro.blogspot.com 

اما الان قم بالضغط على نشر و شكرا .

شكرا لتتبعكم درس اليوم الى درس قادم وشكرا .

تم بعون الله

 اذا اعجبك الدرس شاركه مع اصدقاءك