إضافة فهرس لمدونات بلوجر بشكل أنيق و احترافي

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

طريقة التركيب :


لإضافة الفهرس الى مدونة بلوجر إتبع التعليمات التالية :

  1. توجه الى مدونتك >> ثم الصفحات .
  2. أضف صفحة جديدة .
  3. إنتقل الى وضع HTML .
  4. قم بنسخ ولصق كود الفهرس التالي .
<style> #bp_toc {
background:transparent; width:100%;
color:#999; margin-top:10px;
margin:0 auto; padding:5px;}
.toc-header-col1 {
padding:10px!important;
line-height:15px;
background-color:#e74c3c;
width:250px;
transition:all 0.3s ease-in-out;
}
.toc-header-col2 {
padding:10px!important;
 line-height:15px;
background-color:#6cd9dd;
width:75px;
transition:all 0.3s ease-in-out;
}
.toc-header-col3 {
padding:10px!important;
line-height:15px;
background-color:#44cc9a;
width:125px;
transition:all 0.3s ease-in-out;
}
.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
opacity:0.9;
}
.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:15px;
text-transform:
lowercase;
text-decoration:none;
color:#fff;
font-family:Electrolize,ge_ss_tvbold;
font-weight:400;
letter-spacing:0.5px;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:89%;;transition:all 0.3s ease-in-out;}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
background:#fff;
}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:89%;} .toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
padding:10px;
font-size:89%;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{
text-decoration:none;
color:#666;
transition:all 0.3s ease-in-out;
}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{
color:#f6af54;
}
span.toc-note {
padding:10px;
margin:10px 0;
display:inline-block;
background:#fff;
color:#666;
}
#bp_toc table {
width:100%;
margin:0 auto;
border-collapse:collapse;
border-spacing:0;
border-color: transparent;
}
#bp_toc tr:nth-child(even) {
background:#fafafa
}
#bp_toc tr:nth-child(odd) {
background:#eee
}
</style>
<div id="bp_toc"> جاري تحميل الفهرس....</div>
<script src="https://ar1web-com.googlecode.com/svn/Hm/ihussam-sitemap.js" type="text/javascript">
</script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript">
</script>

الي هنا ينتهي موضوعنا اليوم

أبلغ عن رابط لا يعمل

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



sentiment_satisfied الأبتسامات