توجد اخطاء حاليا في جوجل مشرفي الموقع

كيفية عمل قائمة محتويات الموضوع لمدونات بلوجر 

كيفية عمل قائمة بها اسماء الفقرات وعند الضغط علي اي فقرة تذهب اليك عند الفقرة التي قمت بالضغط عليها ؟  

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

او يمكنك معاينة الاضافة من خلال هذه الصورة 

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

الشرح 

1- قم بالدخول لتعديل قالبك من خلال المظهر ثم تعديل HTML 

2- بعدها ابحث عن <head/> وضع هذا الكود قبله 

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>   
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  <script type='text/javascript'>         //<![CDATA[   
  function mbtTOC() {var mbtTOC=i=headlength=gethead=0;   
  headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)   
  {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}   
  //]]>    
  </script>  

3- ثم قم بالبحث عن }]]></b:skin> وضه هذا الكود قبلها ايضا 

.mbtTOC{border:5px solid #f7f0b8;
      box-shadow:1px 1px 0 #EDE396;
      background-color:#FFFFE0;
      color:#707037;
      line-height:1.4em;
      margin:30px auto;
      padding:20px 30px 20px 10px; 
      font-family:oswald, arial;display: block;
      width: 70%;} 
      .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}   
      .mbtTOC ul {list-style:none;}   
      .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; 
      margin:0 0 0 30px;font-size:15px;}   
      .mbtTOC a{color:#0080ff;text-decoration:none;}   
      .mbtTOC a:hover{text-decoration:underline; }  
      .mbtTOC button{background:#FFFFE0; 
      font-family:oswald, arial; font-size:20px;
 position:relative; 
 outline:none;cursor:pointer; border:none; 
 color:#707037;padding:0 0 0 15px;}   
.mbtTOC button:after{content: "\f0dc"; 
 font-family:FontAwesome; position:relative; 
 left:10px; font-size:20px;}
 

هذه اكواد الستايل الخاصة بالاضافة لو لديك خبرة في ال CSS تستطيع التعديل علي شكل الاضافة 

4- قم بالبحث عن هذا الكود <data:post.body/> وقم باستبداله بهذا الكود 

<div id='post-toc'><data:post.body/></div>

ملحوظة : قد تجد العديد من هذا الكود , لا مشكلة ان قم باستبدالهم جميعا 

 5- قم بحفظ قالبك وهنا لن تحتاج للتعديل علي المظهر مرة اخري 

اذهب الي المشاركات ثم قم بانشاء مشاركة جديدة أو قم بالتعديل علي القديمة 

ثم قم بفتح ال html  مثل هذه الصورة 

وقم باضافة هذا الكود اعلي الصفحة 

  <div class="mbtTOC">
<button onclick="mbtToggle()">محتويات الموضوع</button>
<ol id="mbtTOC"></ol>
</div>   

وبامكانك استبدال كلمة محتويات الموضوع باي كلمة تريدها 

ثم قم بجعل الفقرات قم بتحولها لـ (عنوان) 

وببعد الانتهاء من كتابة الموضوع قم باضافة هذا الكود اخر الصفحة في ال html 

<script>mbtTOC();</script> 

وسيكون موضوعك مثل هذا في الصفحة 

 

كما في الصورة التي في الاعلي قم كل فقرة بعنوان وقم بحفظ القالب 

 ,وكالعادة في نهاية الموضوع  ان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا , او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO  لاتتردد في كتابته في التعليقات