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

مشاهدة مثال حي للاضافه ◄

كيفية اضافة هذه الاداة لمدوناتكم

انتقل إلى لوحة تحكم مدونتك

     HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر

 والآن الصق داخل المستطيل الكود التالي 

<style type="text/css">
.top-commentators {margin: 3px 0px;border-bottom: 1px dotted #CCC;font-family: arial;color: #FF764C;}.top-commentators b{color: rgb(132, 132, 132);}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;}.top-commentators .commenter-link-name {padding-left:0;}
</style>
<script type="text/javascript">
var maxTopCommenters = 8; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] ([user]) ([count]) ';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrRBsMo9tmfqSjNTBC-oIZGwJjETNwR-F-gJIlIo8dAPZZCNHSHWKox0Xmqz76l6_gkL27KzI2O4DTotzoZdraslZEOBh4z1njLxflgm9Mb335qkdstIU5qtW0ZHJaNyT4WMJ4H684QNi/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXxEiaBcB79qQ026EKI-NuN6SHMhg-bD3S4cfLaKFeP22LkTmsJ1bmral6ceEbPehHWT30zbUjNq74s8MnSoAZzMR-mkiN3lUVuvs8c2qnOWIxya0kzVUbao53OlQAZe2HzUWkpTUyuki/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
   
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

محترف البرامج

كيفية اضافة شريط احدث الاخبار الى مدوناتكم

</head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كوداللون الاحمر

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كوداللون الاخضر

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px; 
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

<div class='main-outer'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://alb33dani.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }              
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); }); 
//]]>
</script>
</b:if></b:if>

 ]]></b:skin>

.featuredpost.box_skitter.box_skitter_home.maxxiz-theme{padding:4px; background-color:#FDFDFD; box-shadow:0 1px 5px #BDBDBD; -moz-box-shadow:0 1px 5px #BDBDBD; -webkit-box-shadow:0 1px 5px #BDBDBD; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; height:350px; position:relative; z-index:88; margin-bottom:15px}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button, 
.box_skitter_home.maxxiz-theme .info_slide_dots{background-color:#F3F3F3; background:-moz-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFF),color-stop(100%,#F3F3F3)); background:-webkit-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-o-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-ms-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:linear-gradient(top,#FFF 0%,#F3F3F3 100%); transition:background-color linear .3s; -moz-transition:background-color linear .3s; -webkit-transition:background-color linear .3s; -o-transition:background-color linear .3s; outline:0}
#autorslidertop{padding:4px; border:1px solid #DDD; background-color:white; box-shadow:0 1px 5px rgba(0,0,0,.15); -moz-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden; position:relative; width:100% !important; height:100% !important; max-width:100%}
.box_skitter .image{overflow:hidden; max-width:100%; max-height:100%; height:350px}
.box_skitter .image > a{display:block; height:350px}
.box_skitter .image img{display:none; width:100%; height:100%; max-height:100%}
.box_skitter .box_clone{position:absolute; top:0; left:0; width:100px; overflow:hidden; display:none; z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute; top:0; height:350px; left:0; z-index:19; max-width:710px; width:710px}
.box_skitter .prev_button{position:absolute; top:50%; left:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .next_button{position:absolute; top:50%; right:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .info_slide{position:absolute; top:15px; left:15px; z-index:100; background:#000; color:#FFF; font:padding:5px 0 5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:0.75}
.box_skitter .info_slide .image_number{background:#333; float:left; padding:2px 10px; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00; float:left; padding:2px 10px; margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative; overflow:hidden; height:50px}
.box_skitter .info_slide_thumb{-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; overflow:hidden; height:45px; top:auto; bottom:-5px; left:-5px; padding:5px; opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden; width:70px; height:40px; position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute; top:-50px; left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute; bottom:60px; left:50px; background:#ccc; background:-moz-linear-gradient(-90deg,#555,#fff); background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff)); width:200px; height:10px; overflow:hidden; text-indent:-9999em; z-index:101; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; cursor:pointer; border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute; bottom:-40px; z-index:151; padding:5px 0 5px 5px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333; float:left; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:18px; height:18px; text-indent:-9999em; outline:0; overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00; float:left; margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80; position:absolute; bottom:0; left:0; display:none}
.loading{position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px; color:#FFF; text-indent:-9999em; overflow:hidden; background:#FFF no-repeat left top; width:32px; height:32px}
.label_skitter{z-index:150; position:absolute; bottom:0; left:0; color:#FFF; display:none; opacity:0.9}
.label_skitter p{padding:5px; margin:0}
.info_slide *{}
.box_skitter .progressbar{background:#000; position:absolute; bottom:5px; left:10px; height:5px; width:940px; z-index:99; border-radius:20px}
.preview_slide{display:none; position:absolute; z-index:999; bottom:40px; left:-40px; width:100px; height:50px; border:3px solid #FFF; background:rgba(0,0,0,.5); -moz-box-shadow:rgba(0,0,0,0.7) 0 0 10px; -webkit-box-shadow:rgba(0,0,0,0.7) 0 0 10px; box-shadow:rgba(0,0,0,0.7) 0 0 10px; overflow:hidden}
.preview_slide ul{width:100px; height:50px; padding:0; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0}
.preview_slide ul li{width:100px; height:55px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block}
.preview_slide ul li img{position:absolute; top:0; left:0; height:55px; width:100px}
#overlay_skitter{position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_sOwx2X7KRqddOhr3UcbksEyEHOcAb_shwv4_IbKb1k18Hnpce8NYvpWQiyatcW16-47nSAX48PAPt0cRPX42g-sXVcqiAxxkgWGX3_kO7zHZV-5B85AFPEeab75oTdCuOSB2iwYX7c/s1600/anim_loading_sm_082208.gif); background-position:center center; background-repeat:no-repeat}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button, 
.box_skitter_home.maxxiz-theme .info_slide_dots{border:1px solid #FFF; box-shadow:0 1px 3px #BDBDBD; -moz-box-shadow:0 1px 3px #BDBDBD; -webkit-box-shadow:0 1px 3px #BDBDBD; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0}
.box_skitter_home.maxxiz-theme .info_slide{}
.box_skitter_home.maxxiz-theme .info_slide_dots{    bottom:-14px;     height:30px;     padding:0px 4px;     z-index:99}
.box_skitter_home.maxxiz-theme .info_slide_dots span{transition:background linear .3s; -webkit-transition:background linear .3s; -moz-transition:background linear .3s; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVTu7vBO8Q1zSHie3D7nz30mwwDfZQMiA5C_0e-vqrV1u0wFrQjrlamTU6tDrIey9EXA_Rd8kMtqL__CR588PIaAsfbdrSQ-PKdBZ9L6lYptWnBjOS6dzUW-LdqEiBId0AxsAiOnHylkM/s1600/light-overlay.png); background-repeat:repeat-x; background-position:left -13px; background-color:#d1d1d1; color:#777; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-bottom:1px solid #FFF; display:block; width:10px; height:10px; text-indent:-9999px; float:left; margin:10px 6px 0 6px}
.box_skitter_home.maxxiz-theme .info_slide_dots span:hover{background-color:#777}
.box_skitter_home.maxxiz-theme .info_slide_dots span.image_number_select{background-color:#1ABFC6; border:none; width:14px; height:14px; margin:8px 3px 0 3px; box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button{display:block; width:75px; height:22px; line-height:30px; text-decoration:none; font-size:10px; text-transform:uppercase; transition:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; text-indent:0; bottom:-11px; top:auto; color:#777; z-index:98; cursor:pointer}
.box_skitter_home.maxxiz-theme .prev_button:hover, 
.box_skitter_home.maxxiz-theme .next_button:hover, 
.box_skitter_home.maxxiz-theme .prev_button:active, 
.box_skitter_home.maxxiz-theme .next_button:active{opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button{right:25.5%; padding-right:5px; text-align:right; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button span{padding-right:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ88nU_8_Bz3FsU_zSYDv7-ZVbe7JMEcU7Hp7Avsw_Rk9Y2PSI9p5iS_mSlr4Eivm_4oRegskdyiqrP7YQbfVoUSxh89neR1q15FOSFUO7KDX8Z2h8kcaZvNyTKgb3oz8GsBwDGC300kw/s1600/nav-next.png) no-repeat left top; background-position:right center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .prev_button{left:25.5%; padding-left:5px; text-align:left; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .prev_button span{padding-left:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnd6XzpTKQuLeFxTZ4yu6Cm13VAjjAMy-R0oHtUZGrXP4RN0x-b1dL9jq_M40YhsY1zbAt2YBnlQ9MuafhCOAbGr3qn4UYSZ7VrS90zMHuK0T8q1Y_PeMK1GuamRJIwXcjD50yAQ8jZg/s1600/nav-prev.png) no-repeat left top; background-position:left center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .label_skitter{width:90%; padding:0; left:50%; margin-left:-45%; bottom:10%; text-align:right; height:auto; color:white}
.box_skitter_home.maxxiz-theme .label_skitter .inner{padding:5px 8px 5px; background:#1ABFC6; border-right:5px solid white; border-left:5px solid white}
.box_skitter_home.maxxiz-theme .label_skitter p{padding:0; margin-top:5px; margin-bottom:5px; font-size:11px; text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.maxxiz-theme .label_skitter strong{margin-top:0; line-height:20px !important; font-size:15px; text-shadow:0 1px 0 rgba(0,0,0,.3); color:white}
.box_skitter_home.maxxiz-theme .label_skitter a{color:#fff; text-decoration:none; font-family:arial,tahoma; font-size:17px; text-shadow:1px 1px #00D2D9}
.box_skitter_home.maxxiz-theme .label_skitter a:hover{color:#00D2D9}
.box_skitter_home.maxxiz-theme .info_slide_thumb{background-color:#FFF}
.box_skitter.maxxiz-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date, 
.box_skitter .container_skitter .cm{font-size:8px}
.box_skitter .container_skitter .date span{margin-right:3px}
#autoslidenya .widget-content, 
#manualslidenya1 .featuredarea{margin:0; padding:2px}
#manualslidenya1 .featuredarea{margin:0 0 15px}

</head>

  
<div id='main-wrapper'>

  
<div id='main-wrapper'>
          او
<div id='content'>
          او
<div id="content"></div>
          او
<div class='column-center-inner'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='clear'/>
<div id='featpost'/>
<script type='text/javascript'>
jQuery(&quot;#featpost&quot;).AutofeaturedPost({
blogURL: &quot;http://alb33dani.com/&quot;,
MaxPost:10,
tagName: &quot;قوالب بلوجر&quot;
});
</script>
<div class='clear'/>
</b:if>

كيفية اضافة هذا الارشيف لمدوناتكم

3-  الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}
.toc-note {
padding: 5px 10px;
position: relative;
top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;
border: 1px solid #ddd;
color: #666;
padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;
border: 1px solid #ddd;
padding-right: 8px;
line-height: 30px;
font-size: 14px;}
.toc-entry-col1 a {
color: #E75139;}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;border: 1px solid #111;color: #fff;
text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;
color: #fff;padding-right: 8px;
font-size: 14px;}.toc-entry-col3 a { color: #fff; }
.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>

اللون الازرق

<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 14px;}
.toc-entry-col1 a {color: #018EC5;
}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
background: #018EC5;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 14px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>

</div>

اللون الرمادي

<style type="text/css">
#bp_toc {border: 0px solid #000;
background: none repeat scroll 0% 0% #FFF;
padding: 5px;margin-top: 10px;width: 100%;}
.toc-note {padding: 5px 10px;position: relative;top: -13px;}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
text-align: center;
background: none repeat scroll 0% 0% #E6E6E6;
box-shadow: 2px 2px 5px 5px #CCC inset;
color: #000;
padding-left: 2px;width: 58%;}
.toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}
.toc-header-col3 {width: 31%;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%;text-decoration:none;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;font-size:70%;
border: 2px solid white !important;background: #F6F6F6;
white-space:nowrap;}</style><br />
<div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>