<div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://swe-up.blogspot.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "المزيد &#9660;",
 frontText: "الى أعلى &uArr;",
 resetToc: "Reset",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2qiUjo-C76CQlKKUML2JXRD_6UEKDrfZ5CGnHy94tcbJHAnJBF8qN6T0-CAnbhCMFGDgs8v2ip9yrOZPbWuDgOWtFZ3GkMNV78WZloxoJMovKQzjCD5VZ_22SIMbBzdgkzhFOViQJVc/s1600/no+images+Variasi+Blogger.jpeg",
 loading: "<span>تحميل...</span>",
 searching: "<span>تحميل...</span>",
 noResult: "غير موجود !!"
};
//]]>
</script>

<br />
<div id="table-outer">
&nbsp; <br />
<table border="1" style="text-align: left;">
        <tbody>
<tr>
                <td><label for="orderFeedBy">تصنيف المشاركات:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">التدوينات الجديدة</option>
                        <option value="updated">التدوينات المحذتة</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">تصنيف المشاركات حسب الاقسام:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">تحميل...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">البحث المباشر:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<div style="text-align: left;">
<br /></div>
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script  type="text/javascript">

// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a></div>');

function getID(a) {
 return document.getElementById(a);
}

var head = document.getElementsByTagName('head')[0],
 tocContainer = getID('feedContainer'),
 feedNav = getID('feedNav'),
 orderByer = getID('orderFeedBy'),
 labelSorter = getID('labelSorter'),
 input = getID('postSearcher').getElementsByTagName('input')[0],
 resultDesc = getID('resultDesc'),
 nextPage, feedArchive, startPage = 0, filter = 0;

function showLabels(json) {
 var cat = json.feed.category, skeleton = "<select id='labelSorter' onchange='changeSort(this.value);'><option value='' selected disabled>الأقسام...</option>";
 for (var i = 0, cen = cat.length; i < cen; i++) {
  skeleton += "<option value='" + decodeURIComponent(cat[i].term) + "'>" + cat[i].term.toUpperCase() + "</option>";
 }
 skeleton += "</select>";
 labelSorter.innerHTML = skeleton;
}

function showFeedList(json) {
 var entries = json.feed.entry, postTitle, postUrl, postImage, postContent, commentNum, skeleton = "";
 if (json.feed.entry) {
  for (var i = 0; i < tocConfig.feedNum; i++) {
   if (i == json.feed.entry.length) {
    break;
   }
   postTitle = entries[i].title.$t;
   for (var j = 0, jen = entries[i].link.length; j < jen; j++) {
    if (entries[i].link[j].rel == 'alternate') {
     postUrl = entries[i].link[j].href;
     break;
    }
   }
   for (var k = 0, ken = json.feed.link.length; k < ken; k++) {
    if (json.feed.link[k].rel == 'next') {
     nextPage = json.feed.link[k].href;
    }
   }
   for (var l = 0, len = entries[i].link.length; l < len; l++) {
    if (entries[i].link[l].rel == 'replies' && entries[i].link[l].type == 'text/html') {
     commentNum = entries[i].link[l].title;
     break;
    }
   }
   postContent = ("summary" in entries[i]) ? entries[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,tocConfig.numChars) : "";
   postImage = ("media$thumbnail" in entries[i]) ? entries[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c") : tocConfig.noImage.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c");
   skeleton += "<li><div class='inner'>" +
   "<a href='" + postUrl + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
   "<a class='toc-title' href='" + postUrl + "' target='_blank'>" + postTitle + "</a><strong> - (" + commentNum + ")</strong><br>" +
   "<div class='news-text'>" + postContent + "&hellip;<br style='clear:both;'></div>" +
   "</div></li>";
  }
  resultDesc.innerHTML = (input.value !== '' && filter == 'search') ? "<span>Hasil penelusuran untuk kata kunci <strong>&#8220;" + input.value + "&#8221;</strong> (" + json.feed.openSearch$totalResults.$t + " Temuan)</span>" : "Total: " + json.feed.openSearch$totalResults.$t + " Artikel";;
  feedContainer.innerHTML += (nextPage) ? skeleton : "";
  if (nextPage && filter != 'search') {
   skeleton = (filter !== 0) ? "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>" : "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>";
  } else {
   skeleton = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
  }
  feedNav.innerHTML = skeleton;
  input.value = '';
  labelSorter.getElementsByTagName('select')[0].removeAttribute('disabled');
  orderByer.removeAttribute('disabled');
 } else {
  if (filter == 'search') {
   feedContainer.innerHTML = "";
   resultDesc.innerHTML = "";
   alert(tocConfig.noResult);
  }
  feedNav.innerHTML = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
 }
}

function initResult(archive) {
 var p, param;
 if (archive == 1) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p);
 } else if (archive == 2) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p).replace(/\?/, '/-/' + filter + '?');
 } else {
  param = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script";
 }
 param += "&callback=showFeedList";
 updateScript(param);
}

function removeScript() {
 var old = getID('temporer-script');
 old.parentNode.removeChild(old);
}

function buildLabels() {
 var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = tocConfig.url + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
 head.appendChild(s);
}

function updateScript(tail) {
 if (startPage == 1) {
  removeScript();
  startPage = 1;
 }
 feedNav.innerHTML = tocConfig.loading;
 feedArchive = (tocConfig.labelName !== false) ? tocConfig.url + "/feeds/posts/summary/-/" + tocConfig.labelName + tail : feedArchive = tocConfig.url + "/feeds/posts/summary" + tail;
 var toc_script = document.createElement('script');
  toc_script.type = 'text/javascript';
  toc_script.src = feedArchive;
  toc_script.id = 'temporer-script';
 head.appendChild(toc_script);
}

function changeSort(label) {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "Menghitung artikel&hellip;";
 feedNav.innerHTML = tocConfig.loading;
 var newScript = document.createElement('script'),
  labSorter = labelSorter.getElementsByTagName('select')[0],
  l = (label !== 0) ? '/-/' + label : "";
 newScript.type = 'text/javascript';
 newScript.id = 'temporer-script';
 newScript.src = tocConfig.url + '/feeds/posts/summary' + l + '?alt=json-in-script&max-results=' + tocConfig.feedNum + '&orderby=' + orderByer.value + '&callback=showFeedList';
 head.appendChild(newScript);
 labSorter.disabled = true;
 orderByer.disabled = true;
 filter = label;
}

function searchPost() {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "";
 feedNav.innerHTML = tocConfig.searching;
 var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.id = 'temporer-script';
  newScript.src = tocConfig.url + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input.value + '&max-results=9999&callback=showFeedList';
 head.appendChild(newScript);
 filter = 'search';
 return false;
}

getID('postSearcher').onsubmit =  searchPost;

orderByer.onchange = function() {
 changeSort(0);
}
initResult(0);
buildLabels();
</script></div>