الشكل الجديد لأرشيف المدونة الخاص بالصفحة المستقلة

أرشيف المدونة او الإسم الآخر خريطة الموقع هو صفحة مستقلة يتم فيها عرض ليس فقط المواضيع القديمة والمؤرشفة مثلا بل هو مكان لتصفح كافة المواضيع القديمة والجديدة في آن واحد في صفحة واحدة وهي إضافة مميزة والأغلبية تشتغل بها

معاينة مباشرة للإضافة : هنـــــــــــــــــــــــــــــــــــا

كما ترون في الصورة الشكل مميز جدا ويتميز بـ :

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

والآن حان وقت شرح طريقة التركيب

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

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css">
#toc-outer {
color:black;
font:normal 11px/15px Arial,Sans-Serif;
height:auto;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:right;
}

#loadingscript {
padding:0px 0px;
height:37px;
text-indent:-9999px;
color:transparent;
background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: right;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
    font:bold 13px GE SS two medium;

}

.itemposts h6 a:hover {
color:#38f;
text-decoration:none;
}

.itemposts img {
background-color:#fff;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
float:right;
height:65px;
margin:0 0 5px 7px;
padding:3px;
width:65px;
z-indent:99999px;
}

.itemposts .iteminside {
font-family: GE SS two medium;
}


.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
    font:12px GE SS two medium;
}

.itemposts .itemfoot a.itemrmore {
color:#333;
float:left;
font-weight:bold;
text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
clear:both;
padding:10px 0;
}

#pagination,

#totalposts {
color:#000;
display:block;
font:12px GE SS two medium;
margin-bottom:10px;
text-align:center;
padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}</style>
<script>
var showPostDate   = false,
    showComments   = false,
    idMode         = false,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "تحميل...",
    totalPostLabel = "عدد المقالاات:",
    jumpPageLabel = "الصفحة",
    commentsLabel = "التعليقات",
    rmoreText      = "أكمل المقال",
    prevText       = "السابق",
    nextText       = "التالي",
    siteUrl        = "http://www.arabe-eye.com/",
    postPerPage   = 22,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script></div>