فهرس لمدونات بلوجر بشكل حديث ومطور أضفه الأن لمدونتك وتمتع بمميزاته

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

وكما تعودنا هذا شرح فيديو لمعرفة كيفية عمل فهرس مرتب لمدونتك على بلوجر

الخطوة الأولى: إضافة كود CSS . ادخل قالب ثن تعديل HTML وابحث عن التالى
]]></b:skin>
ضع فوقه أو قبله كود الـ CSS التالى
/*Sitemap
----------------------------------------------- */
#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#111;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#333
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:#FFF
}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0;
padding:0;
list-style:none
}
#tabbed-toc .toc-tabs {
width:20%;
float:left
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#444;
color:#FFF
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#e74c3c;
color:#FFF;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0
/* cursor:text;
  */
}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #e74c3c;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7)
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#333;
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#f1f1f1;
font-size:10px;
color:#fff
}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {
background-color:#333;
color:#FFF;
outline:none
}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {
background-color:#222
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888
}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left
}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {
background-color:#111;
color:#ccc;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4)
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#DF1010;
color:#fff
}
#tabbed-toc .toc-content {
border:none
}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time {
display:none
}
}
@media only screen and (min-width:980px) and (max-width:1200px) {
#outer-wrapper {
overflow:hidden;
background:#fff;
width:100%;
margin:10px auto
}

الخطوة الثانية: إضافة صفحة فى أداة الصفحات Pages بعنوان Sitemap ومنع التعليقات عنها كما شرحنا بالفيديو السابق. ونضع الكود التالى داخلها ولكن يجب أن تضغط على وضع HTML كما وضحنا بالفيديو
<div dir="ltr" style="text-align: right;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">&#1575;&#1606;&#1578;&#1592;&#1585; &#1578;&#1581;&#1605;&#1610;&#1604; &#1575;&#1604;&#1575;&#1585;&#1588;&#1610;&#1601;</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://abu-iyad.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
</div>
ثم اضغط نشر للصفحة ويمكن ظهورها فى الصفحة الرئيسية اما عن طريق نسخ رابط الموضوع ووضعه فى أى مكان تُفضل أو ويمكنك إضافته فى أداة الصفحات نفسها بالطريقة المشروحة بكيفية التعامل مع أداة الصفحات. وأخيرا الشكر موصول للرائع Taufik Nurrohman على الكود. وهنيئا عليكم شكل خريطة - فهرس - مدوناتكم على بلوجر بطريقة لم ترها من قَبل. علما بأن الكود مُستخرج من قالب مدفوع.

هناك 11 تعليقًا:

  1. جزاك الله كل خير يا باشمهندس محمد

    ردحذف
  2. بصراحه حاجه فخمه بس عندى سؤال انا دلوقت احصل من اين على رابط site map علشان نرسله الى www.google.com/webmasters بحيث يسهل الكشف عن المدونه

    ردحذف
  3. السلام عليكم
    الله يعطيك العافية يبو اياد .. بدي اطلب منك خدمة لو سمحت ..
    كيف ممكن اضيف قائمة او تبويبة وتكون ( مشغل فيديو ) من اليوتيوب .. زي الي في مدونة المحترف ..
    انا بانتظار رد يبو اياد ..

    ردحذف
  4. موضوع مميز جزاك الله خير اخي



    لمن يريد الكتابة باللغة العربية
    arabic keyboard
    http://keys-web.net/

    ردحذف
  5. @mohamed jamal
    وعليكم السلام
    هل يمكنك تحديد مكان التبويب بالضبط؟ صورة ان امكن. بانتظارك

    ردحذف
  6. مشكككككككككككككككككككور والله عراسي يا اخ

    ردحذف
  7. مشكور على الاضافة الجميلة

    ردحذف
  8. جميله جداً..ولكن قم بالتوضيح للزوار ان رابط المدونة سيتم تغييره

    ردحذف
  9. بارك الله فيك وجزاك الله خير الجزاء والثواب
    تقبل تحياتي وشهر مبارك عليك وعلى عامة المسلمين
    http://abueltezam.blogspot.com/

    ردحذف
  10. متميز أخي أبو إياد دائما ربنا يحفظك.
    http://profit-tech.blogspot.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية