اضافة اخر المواضيع مع خيار التنقل الجديد

السلام عليكم ورحمة الله وبركاتة . اعزائي زوار ومتابعي مدونة تعلم الاحتراف  اليوم مع تدوينه جديده واجدد اعتذاري الشديد عن عدم استطاعتي خلال تلك الايام من الرد علي الاستفسارات التي تاتيني من حضراتكم نظرا لضيق الوقت وظروف العمل . اضافة اليوم في اخر اصدار لها مع خيار للتنقل بمعنى انه يتم عرض عدد معين من التدوينات عباره عن رابط ومختصر وصوره للموضوع واسفل الاداه خيار التنقل للامام او للخلف مع خيار اوسط بالرجوع لصفحة الاضافه الرئيسيه . والان الى شرح طريقة التركيب على مدونات بلوجر
الاصدار الاخير من اضافة اخر المواضيع مع خيار التنقل الجديد : اول شئ نقوم بتسجيل الدخول الى لوحة تحكم بلوجر ثم الذهاب الي وضع تحرير HTML ثم الضغط على علامة توسيع القالب ومن ثم البحث عن الوسم التالي ]]></b:skin> ثم نضع قبله مباشرة الكود الموجود بالاسفل 

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:300!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8yHsoI4_5fhNzKlRAJ8rMtnlu0TM8nY1kKik7zrwtKigLTTk9UxpKiIPCqha3lAqxMQetU8sMgA5AtOH-V2j491p1QOD-w9fIC3ZTHz8W5JKqkZLGvqBl78Zz8fdcUWokVuGf_0mQS7U/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

يعد ذلك نبحث مجددا عن هذا الوسم </head> ونضع قبلة مباشرة الكود التالي

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://tqarob.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdorywzlUAgcdP1FvkDlalM4WFzou6B8HTM-CPiDHXyXTE0C9wFoPhpG3dKaJGoc3rvgwWD_IumVYYBwTOa4jrIoMK1NyoKmFnSlVHsIdRnF8Qxi5XTgcyR9F0QSwW5CXdfGNEOY4QJVQB/d/noimagethumb.gif";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; السابق</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; السابق</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>التالي&#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>التالي&#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>الرئيسية</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

  ثم نقوم بحفظ القالب والذهاب بعد ذلك الى عناصر تصميم الصفحه حيث تكمن الاضافات ونقوم بفتح اداه جديد من نوع جافا سكربت ونضع فيها الكود الموجود في الاسفل مع مراعاة ان يتم وضع الكود في المكان المرغوب ظهور الاضافه فيه ويستحب ان يكون في السايدبار اى القائمه الجانبيه

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

نقوم بعد ذلك بحفظ الاداه ومعاينة الصفحه الرئيسية للمدونه .. بالتوفيق للجميع .

تصنيف : اضافات بلوجر