مسار الموضوع في مدونات بلوجر يعتبر من الإضافات التي تريح الزائر من البحث في أدوات المدونة او اجزائها عن أقسام الموضوع
فائدة هذه الإضافة الأساسية هي التسهيل على الزائر وهذه فائدة كبيرة لا يستهان بها فمن واجبك كمدون ان تريح زائر مدونتك وهو يتصفحها لكي يبقى بها وقت اطول
لتركيب الإضافة فقط ابحث عن الكود التالي
<b:includable id='post' var='post'>
وأضف بعده مباشرة الكود التالي
<b:if cond='data:blog.pageType == "item"'>
<style>
#cnmumasar {
background-color: #ddd;
display: block;
font-size: 12px;
margin: 10px 0;
padding: 5px 0;
width: 100%;
}
#cnmumasar .masarhome {
background: url("https://lh3.googleusercontent.com/-CnMJ5rXyu10/VR7MIGHMNKI/AAAAAAAAAQE/V9TBcMTIoC8/s16/home.png") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #000;
float: right;
margin: 0 10px 0 5px;
padding: 0 20px 0 0;
}
#cnmumasar .masarhome:hover {color:#555;}
#cnmumasar .post-labels {
background: url("https://lh6.googleusercontent.com/-27rhGHNvBa4/VR7MIFVbJUI/AAAAAAAAAQQ/iX8Hq7rNk94/s16/attach_2.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 20px;
}
#cnmumasar .post-labels a {
background-color: #000;
border-radius: 2px;
color: #fff;
display: inline-block;
float: none;
font-size: 10px;
font-weight: bold;
padding: 0 3px 2px;
}
#cnmumasar .post-labels a:hover {background-color:#555;}
#cnmumasar .masartitle {
background: url("https://lh5.googleusercontent.com/-g9j2SOHg6sE/VR7MIPJOXbI/AAAAAAAAAQM/A3V1gTwxbtU/s16/text.png") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #555;
padding-right: 20px;
}
</style>
<div id="cnmumasar">
<span><a class='masarhome' href='/'>الرئيسية</a></span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>
</b:if>
</span>
<span class='masartitle'><data:post.title/></span>
</div>
</b:if>
<style>
#cnmumasar {
background-color: #ddd;
display: block;
font-size: 12px;
margin: 10px 0;
padding: 5px 0;
width: 100%;
}
#cnmumasar .masarhome {
background: url("https://lh3.googleusercontent.com/-CnMJ5rXyu10/VR7MIGHMNKI/AAAAAAAAAQE/V9TBcMTIoC8/s16/home.png") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #000;
float: right;
margin: 0 10px 0 5px;
padding: 0 20px 0 0;
}
#cnmumasar .masarhome:hover {color:#555;}
#cnmumasar .post-labels {
background: url("https://lh6.googleusercontent.com/-27rhGHNvBa4/VR7MIFVbJUI/AAAAAAAAAQQ/iX8Hq7rNk94/s16/attach_2.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 20px;
}
#cnmumasar .post-labels a {
background-color: #000;
border-radius: 2px;
color: #fff;
display: inline-block;
float: none;
font-size: 10px;
font-weight: bold;
padding: 0 3px 2px;
}
#cnmumasar .post-labels a:hover {background-color:#555;}
#cnmumasar .masartitle {
background: url("https://lh5.googleusercontent.com/-g9j2SOHg6sE/VR7MIPJOXbI/AAAAAAAAAQM/A3V1gTwxbtU/s16/text.png") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #555;
padding-right: 20px;
}
</style>
<div id="cnmumasar">
<span><a class='masarhome' href='/'>الرئيسية</a></span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>
</b:if>
</span>
<span class='masartitle'><data:post.title/></span>
</div>
</b:if>
التنسيق
هذا #ddd هو لون الخلفيةهذا 12 هو حجم الخط
هذا #000 لون رابط الرئيسية
هذا #000 لون خلفية الأقسام
هذا 10 حجم خط روابط الأقسام
هذا #555 لون خلفية الأقسام عند تمرير الماوس
أما الثلاث روابط المعلمة باللون الوردي هي روابط الأيقونات غيرها بروابط أخرى مناسبة يفضل ان يكون حجمها 16x16
الإبتساماتإخفاء