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

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

مسار الموضوع في مدونات بلوجر يعتبر من الإضافات التي تريح الزائر من البحث في أدوات المدونة

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

وما الى ذلك لكن هذه معلومة خاطئه كما قلت فائدة هذه الإضافة الأساسية هي التسهيل على الزائر وهذه فائدة كبيرة

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

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

لتركيب الإضافة فقط ابحث عن الكود التالي

  <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#xm3lmasar {
  background-color: #ddd;
  display: block;
  font-size: 12px;
  margin: 10px 0;
  padding: 5px 0;
  border: 2px solid #000000;
width:100%;
}
#xm3lmasar .masarhome {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYF7T11rW2Nkh1V5SGnWy1GyveNC5lRGHxGpHeN2_-HnCOLAIcUtf9wcYZh4XoxfBWtkiyep1DeaabC9ZyUTtvQf4iVqFILfKU1wZ2PfDfgL715_urNRJEBQjCIZO_n637ejjSdlk50g0/s1600/home-xm3lwmyat.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #000;
margin: 0 10px 3px 5px;
padding-right: 20px;
}
#xm3lmasar .masarhome:hover {color:#555;}

#xm3lmasar .post-labels {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOhC2-O1d5O0f1p0mxTFhK5cvliJsMPsHKR6gMtJX3Jjg4xlw933z1EYamIQ107AuOcoBvNzUlLxcAYLYsD77RzkhhWn6WYTTeIex6hg-GrezXSMgGzZlVWRBpi8iRpwZ3K_WGuVXhXT8/s1600/pin-xm3lwmyat.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 20px;
padding-top: 2px;

}

#xm3lmasar .post-labels a {
background-color: #000;
border-radius: 2px;
color: #ff7;
display: inline-block;
float: none;
font-size: 11px;
font-weight: bold;
padding: 2px;
margin-left: 3px;
text-decoration: none;
margin-top: -3px;
}

#xm3lmasar .post-labels a:hover {background-color:#555;}
#xm3lmasar .masartitle {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyW9lZwlEKiS4aYnDlM5lROPCnEpaZLM8RzgtUIaDvjLg3jPvYB45R-6HCiifHacz-AOL4F0RU4oI2KtjQHaSZ4BxRZWydEgXAjiN76ayPjta6PEMIrALRctxOGAxpSDt3gf9pRRxqKAQ/s1600/text-xm3lwmyat.png") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #555;
padding-right: 20px;
padding-top: 2px;
font-family: fantasy;
}
</style>
<div id="xm3lmasar">
<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 لون خلفية الأقسام
هذا #ff7 لون رابط الاقسام  
هذا 11 حجم خط روابط الأقسام
هذا #555 لون خلفية الأقسام عند تمرير الماوس 
أما الثلاث روابط المعلمة باللون الوردي هي روابط الأيقونات غيرها بروابط أخرى مناسبة يفضل ان يكون حجمها 16x16

ومن تواجه مشكلة باب التعليقات مفتوح دائماً

 5  بضغطة زر تشارك الفائدة وتدعم المدونة


المصدر اضغط هنا