
كثير من المدونين يهتمون بإضافة آخر المواضيع لتحفيذ الزوار على تصفح مواضيعهم الأخيرة شرحنا من قبل أكثر من نوع من هذه الإضافة في هذا الموضوع ونوهنا ان الإضافات المتحركة لآخر المواضيع تكون أحيانا ثقيلة في التصفح ولكن البعض يريد عدد كبير من المواضيع لكن يستخدم الإضافة المتحركة كونها أقل حجماً من ان تكون جميع المواضيع ظاهرة دفعة واحدة لكن هناك اضافة أكثر تميزاً تجمع بين الحجم الصغير وفي نفس الوقت يمكن تصفح جميع المواضيع من خلالها وخفيفة عُرضت هذه الإضافة من قبل كثيراً لكن دائما ما كانت طريقة تركيبها صعبه بعض الشئ وتحتاج لتعديل في القالب ومن يرغب بحذفها عليه ان يتبع تلك الخطوات مرة أخرى لذلك تم تغيير اعدادات تركيب الإضافة والان يمكنك ببساطة إضافتها لآداة HTML/JavaScript فقط لا تحتاج اى تعديلات على القالب
وهذا هو الكود
<style>
#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:85px; background:#fff;}
.mas-elemen img{background:#ddd;padding:3px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #bbb;}
.mas-elemen h6,.mas-elemen h6 a{font-size:13px!important;font-weight:300!important;margin:0;color:#111}
.mas-elemen:hover {background: #ECF7FF;border: 1px solid #46B6FC;transition: all 0.7s ease 0s;}
.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://lh3.googleusercontent.com/-OMCT2Ge0LS0/UskwP_kWQoI/AAAAAAAAC7A/Y7clJWi1tNs/s55/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;background:#fff;}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:bold!important;display:inline-block;padding:5px 10px; text-decoration:none;}
#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 {color:#088EDC !important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://cnmu.blogspot.com";
var charac = 55;
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://lh3.googleusercontent.com/-w--hCn9RYyQ/UskwP6tSIWI/AAAAAAAAC68/ONRgcNuu3_4/s133/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'>السابق ◄</a>";
} else {
showblogfeed += "<span class='noactived previous'></span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>► التالي</a>";
} else {
showblogfeed += "<span class='noactived next'></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); }
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E")); //]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
وكما تعودنا في كن مدون لا تكتمل الإضافة إلا بإعدادات تجعلها تتناسب مع جميع القوالب في الشكل والالوان وهذه هي الإعدادات
هذا هو #ccc لون الإطار
وهذا هو #fff لون الخلفية وهو مكرر مرتين مرة لخلفية المشاركات ومرة لخلفية ازرار التنقل
اما هذا الرقم 85 هو ارتفاع كل مشاركة
الرقم 70 المكرر هو طول وعرض الصور المصغرة
وهذا هو #ddd لون خلفية الصور الصغرة
وهذا #bbb لون اطار الصور الخارجي
هذا هو حجم الخط 13
هذا هو #ECF7FF لون الخلفية عند تمرير الماوس
وهذا لون الإطار عند التمرير #46B6FC
هذا هو #c3c3c3 لون اطار ازرار التنقل
هذه أهم التنسيقات في الآداة
وطبعاً لا تنسى تغيير http://cnmu.blogspot.com برابط مدونتك
والرقم 5 هو عدد التدوينات الظاهرة
والرقم 55 هو عدد حروف المقتطف الظاهر من الموضوع
تحديث بتاريخ : 16/10/2014
لجعل الآداة تجلب المواضيع من جزء قسم معين استبدل default
بـ default/-/# مع تعديل رمز # بإسم القسم
وطبعاً لا تنسى تغيير http://cnmu.blogspot.com برابط مدونتك
والرقم 5 هو عدد التدوينات الظاهرة
والرقم 55 هو عدد حروف المقتطف الظاهر من الموضوع
تحديث بتاريخ : 16/10/2014
لجعل الآداة تجلب المواضيع من جزء قسم معين استبدل default
بـ default/-/# مع تعديل رمز # بإسم القسم
وتجربة مفيدة
تحياتي
السلام عليكم ورحمة الله وبركاته
ردحذفماشاء الله عليك مبدع والإضافة جدا جميلة وحصرية
والفكرة أجمل أشكرك أخي الغالي عمرو
طرحت فأبدعت ودمت ودام عطائك
وجزاك الله عنا خير الجزاء لك ودي واحترامي
جاري التركيب في أمان الله
وعليكم السلام ورحمة الله وبركاته
حذفحياك الله أخي الحبيب بدر
شكرا يا غالي على مرورك ودعمك المستمر للمدونة
كيف تقوم بعمل مثل هذه المعاينة اخى الفاضل ؟؟
ردحذفاقوم بوضع الآداة في مدونة اخرى واضع الرابط هنا
حذفاو ضح اكثر ان كان سؤالك عن شئ محدد
التفضيل هنا اخى
حذفhttp://2.bp.blogspot.com/-Sen0PYFwl1o/UuTtfFfbFiI/AAAAAAAAC1A/TJt0ENKpg80/s1600/26-01-2014+12-55-45+%D9%85.png
أخي الكريم هذا قالب سكويز بيج الخاص بي ولهذا تظهر الحقوق هذه حقوق القالب وليس طريقة عرض
حذفالف شكر الكـ
ردحذفتشرفت بمرورك أخي الكريم
حذفالسلام عليكم
ردحذفهل من الممكن ان تشرح لي كيف اجعل ه\ه الأداة تعرض مواضيع من قسم معين فقط وليس كل المواضيع
وشكرا مسبقا
وعليكم السلام ورحمة الله وبركاته
حذفهذه الآداة اخي الكريم ليس في تنسيقها تخصيص من قسم معين يمكنك مراجعة الأداة التالية بها الخاصية
http://cnmu.blogspot.com/2013/06/Recent-Posts.html
شكرا
حذفأخي اقرأ التحديث الذي على الموضوع سيفيدك بإذن الله
حذفتحديث بتاريخ : 16/10/2014
الأداة فعالة يارب يحفظك اخي الفاضل
ردحذفزادك الله من فضله ورزقك الفردوس
http://www-islamic-culture.blogspot.com/2015/09/blog-post_3.html
عمل رائع المشكلة أنه صور المواضيع لم تظهر ماهو السبب أخي ؟؟؟
ردحذفتأكد من رفع الصور على خدمة بيكاسا او مباشرة من بلوجر
حذفلم أفهم
ردحذفراجع هذا الموضوع اخي الكريم
حذفhttp://cnmu.blogspot.com/2013/04/Picasa.html
يجب ان تكون الصور التي تستخدمها في موضوعك احجام مناسبه
وتكون مرفوعة على مركز بلوجر الرسمي الممى بيكاسا والمذكور في الموضوع السابق او يمكنك ان ترفعها مباشرة على المركز من داخل الموضوع
هل هناك كود يجمع بين احدث المواضيع والمشاركات الشائعة فى اداة واحدة ؟
ردحذفلا أختي لأن كلتا الإضافتين مختلفتين تماماً
حذف