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

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

فهرس التدوينات هي من الصفحات المهمة في مدونات بلوجر

وكثيرا ما أرى مدونات بدون تلك الصفحة الهامة

و لهذا الأمر قمت بإعداد هذه التدوينة

التي سأقدم فيها نموذج احترافي للفهرس الذي يمكنك إضافته إلى مدونتك

عاينه من هنا

معاينة الفهرس

لإضافة تابعني عبر هاتين الخطوتين البسيطتين
1... اتجه الى قالب  ثم تحرير HTML ثم قم بالبحث عن هذا الوسم </head>
و ألصق قبله/فوقه الكود التالي

 <style>

#show-cat{float:right;margin:20px 0 20px 5%;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc;text-align:center;}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-left:1px solid #ccc;border-bottom:0px solid #ccc;border-right:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:right;width:69%;line-height:1.6em;text-align:right;font-size:15px;}
#show-post ul li{list-style-type:none;margin-right:-40px;text-align:right;}
#navi-cat{padding:20px 0}
#navi-cat a{margin-left:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:left}

@media screen and (max-width:768px){
    #show-cat{width:35%;}
    #show-post{width:59%;}
}
@media screen and (max-width:480px){
    #show-cat{width:100%;margin:20px 0}
    #show-post{width:100%;}
}

    </style>
 

2... الأن قم بإنشاء صفحة جديدة و لتسميها الفهرس أو خريطة المدونة حسب  رغبتك
و أنتقل الى وضع HTML وقم بمسح جميع الأكواد الموجودة و قم بإضافة الكود التالي
مع تغيير http://arabic3professional.blogspot.com  برابط مدونتك

 <div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://arabic3professional.blogspot.com/';cat_numb=12;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div> 

وقم بالحفظ, و مبروك عليك الفهرس الجديد
أتمنى أن تكون التدوينة قد نالت استحسانكم
ألقاكم في تدوينة اخرى
في أمان الله