كود أداة أحدث المواضيع بطريقة حديثة وجميلة لمدونات بلوجر

متابعينا متابعي مدونة المبدع الفلسطيني نرحب بكم من جديد وكما وعدناكم متابعينا في تدوينة سابقة بتطوير مدونات بلوجر وأننا سنركز على إضافات بلوجر الحديثة التي تجعل من المدونة وكأنها موقع، بعيداً عن النمط الدارج في أغلب المدونات كمدونة بدائية، ولكننا اتفقنا أن ننتقل إلى أرقى من ذلك، فأتيتكم اليوم بإضافة كود لأداة من أروع أدوات بلوجر ألا وهي أداة أحدث المواضيع حيث أن هذه الأداة تتيح للزائر تصفح جميع مواضيع المدونة بدون أن تقوم الصفحة بالتحديث أو أن ينتقل الزائر من صفحة إلى صفحة أخرى، وإنما التنقل من خلال ثلاث أيقونات موجودة في نفس الأداة وهي (الصفحة السابقة - الرئيسية - الصفحة التالية) لا أريد أن أطيل عليكم، دعونا نبدأ الآن لإضافة هذه الأداة:

1-  الدخول إلى لوحة بلوجر بعد تسجيل دخول حسابك.

2- نذهب إلى "تصميم" ثم "تحريرHTMAL" ثم ضع علامة "صح" على توسيع القالب الخاص بالمدونة التي سنضيف بها هذه الأداة.

3- خذ نسخة احتياطية من القالب لإستعادته إن حدث خطأ ولا تستطيع إصلاحه فتقوم باستعادة القالب الذي ستحفظه أنت.

4- بعد الخظات السابقة التي قمت بها، ضع الكود التالي فوق الرمز  ]]></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:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#FDC9F9}
.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/AVvXsEhHXkpcuLgH1lYg1BKS0oDm4tyrLY9tMhQwu4cB46jNMaQ5EIoT9VyAx-B0eUBeLMdpqbdWFUJGsQCeC88wl93iOvRv0R37AyXBatystNmISaNXbxuCYqMdgHoAwuFLDdk-0fvop5O5pts/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:left}
#mas-navigasifeed .previous{float:right}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

 الأرقام التي باللون الأحمر في الكود السابق هي عبارة عن طول وعرض الصورة المصغرة.

5- أدخل الكود التالي فوق الرمز </head> :

<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "http://malzaq.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/AVvXsEj-RXJu9oqjflfkAAXGw0M5EzRHDaPLGnktJbBvftmZrBPi058HebQqcFWCmPa81OSjGU8ty_Q1aQf1rPHcqR4fxnSrZWxsnLkP8VwHK3phopxpGM7Ibf2xZpi1hzvtRENUI5Al0Q95iBA/s1600/no+image.jpg";

}

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>

ملاحظة:

ا- رقم 5 الموجود باللون الأخضر في الكود السابق عبارة عن عدد المواضيع التي ستكون ظاهرة على الأداة.

ب- الرابط الموجود باللون الأحمر عبارة عن عنوان المدونة أو الموقع فقم بوضع رابط المدونة الخاص بك التي تريد أن تضيف بها هذه الأداة.

6- بعد أن تقوم بحفظ القالب، توجه إلى "عناصر الصفحة" ثم انقر فوق "إضافة أداة" ثم "HTML/Javascript" وقم بوضع الكود التالي بها ثم قم بحفظ الأداة:

<div id="terbaru"></div>

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

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