728x90 AdSpace

Add Breadcrumb Navigation For Blogger اضافة شريط التسلسل للتدوينات الى بلوجر جديد

السلام عليكم ورحمة الله وبركاته ؛ سوف اشرح فى هذا الموضوع طريقة لمستخدمى مدونات بلوجروهى التسلسل للتدوينات او ما يسميها البعض ( أضافة اين تقرأ الأن) ؛ لها اهمية كبيره لزوار المدونة لان هذه الاضافة تجعله يعرف اين موقعه بالتحديد داخل المدونة
Add Breadcrumb Navigation For Blogger اضافة شريط التسلسل للتدوينات الى بلوجر جديد
كما انه تجعله متفاعلا اكثر فى تصفح المدونة حيث تعلمه ما هى أقسام المدونة وتكون هذه الاضافة على النحو التالى
يكون شكل الاضافة مثل هذه التى على مدونتى او كشكل موضح لها
الصفحة الرئيسية >> التسمية >> عنوان الموضوع
ولاضافة ذلك اتبع الخطوات التالية :
  • سجل دخولك الى لوحة تحكم المدونة بلوجر
  • اختر التبويب ( قالب) على يمين لوحة التحكم
  • اضافط على ( نسخ احتياطية/ استعاده) ؛ ثم اضغط على (تنزيل النموذج الكامل) وذلك لاسترجاع القالب مره اخرة فى حالة حدوث خطأ لا قد الله.
  • نرجع الى التبويب (قالب)
  • نختار ( تحرير HTML)
  • نضغط على (
<b:include data='top' name='status-message'/>
ونقوم بإستبداله بهذا الكود التالى :
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
  •  ثم نقوم بالبحث عن الكود التالى:
<b:includable id='main' var='top'>
  •  ونستبدله بهذا الكود
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop><b:else/>
&#187; Uncategorized
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span></p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if></b:if></b:if></b:if>
</b:includable>
<b:includable id='main' var='top'>
 الان اخر خطوه وهى خطوة (شكل الاضافة) css 
  • ابحث عن الكود 
]]></b:skin>
  •  ثم ضع فوقه مباشره الكود الاتى


/* www.bloggertofree.com */
.breadcrumbs {
    margin: 0 0 7px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:12px;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
} /* www.cairo-pro.blogspot.com */

* والان قم بالحفظ وشاهد شكل الاضافة ؛ واى أستفسار بخصوصها اكتبها وان شاء الله بجاوبكم عليها ؛ بالتوفيق
جهاد حسين

شاب مصرى بدأت فى عالم الكمبيوتر بالتعديل على نسخ الويندوز ؛ ومن ثم اتجهت الى تصميم برامج للويندوز #اعمالى ؛ وكان لابد من أيجاد موقع لعرض برامجى وتقديم ما أعرفه لمساعده المستخدمين وللأستفاده من تجاربهم ولذلك قمت بأنشاء المدونة ولكى امتلك موقع مختلف أنجرفت مع تيار تصميم المواقع . عملت فى مجال صيانة أجهزه أبل (أيفون - أيباد - أجهزه الماك ) . والأن عدت الى عالم التدوين .

  • تعليقات بلوجر
  • تعليقات فيسبوك

2 التعليقات: