آخر المواضيع

الخميس، 23 أبريل 2020

شرح عمل فهرس لمدونة بلوجر, خريطة الموقع بطريقة سهلة وجميلة .



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

أولا :
من لوحة تحكم بلوجر .. اضغط على الصفحات ثم إنشاء صفحة جديدة ..
وقم بتحويل خانة الكتابة إلى ( HTML )

وضع الكود التالي مع استبدال رابط الموقع الملون بالأحمر برابط مدونتك :

<div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#bp_toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:300px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
 text-align: center;
 background: #E6E6E6;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 2px 2px 5px 5px #CCCCCC;
       
        box-shadow: inset 2px 2px 5px 5px #CCCCCC;
  color: #000000;
  padding-left: 2px;
  width:150px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  width:100px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:70%;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
border: 2px solid white !important;
-webkit-border-radius: 10px;
border-radius: 10px;
 background: #F6F6F6;
 white-space:nowrap;
}
</style>
<div id="bp_toc">
..إنتظر قليلا لتحميل الفهرس..</div>
<script src="https://cdn.rawgit.com/DrRO/condaianllkhir/master/TOC.js" type="text/javascript"></script>
<script src="https://www.eshrag.net/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
<a href="http://www.condaianllkhir.com/" rel="nofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>&nbsp;
<br />
<div>
</div>
</div>
وهكذا ستظهر لك نتيجة العمل بالشكل التالي .

ليست هناك تعليقات:

إرسال تعليق