مساحة إعلانية

الأربعاء، 8 يناير، 2014

الأربعاء، 8 يناير، 2014

آخر المواضيع مع خيارات التنقل نسخة سهلة التركيب

Recent post with navigation
كثير من المدونين يهتمون بإضافة آخر المواضيع لتحفيذ الزوار على تصفح مواضيعهم الأخيرة شرحنا من قبل أكثر من نوع من هذه الإضافة في هذا الموضوع ونوهنا ان الإضافات المتحركة لآخر المواضيع تكون أحيانا ثقيلة في التصفح ولكن البعض يريد عدد كبير من المواضيع لكن يستخدم الإضافة المتحركة كونها أقل حجماً من ان تكون جميع المواضيع ظاهرة دفعة واحدة لكن هناك اضافة أكثر تميزاً تجمع بين الحجم الصغير وفي نفس الوقت يمكن تصفح جميع المواضيع من خلالها وخفيفة عُرضت هذه الإضافة من قبل كثيراً لكن دائما ما كانت طريقة تركيبها صعبه بعض الشئ وتحتاج لتعديل في القالب ومن يرغب بحذفها عليه ان يتبع تلك الخطوات مرة أخرى لذلك تم تغيير اعدادات تركيب الإضافة والان يمكنك ببساطة إضافتها لآداة 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/-/# مع تعديل رمز # بإسم القسم
وتجربة مفيدة
 تحياتي

هناك 19 تعليقًا:

  1. السلام عليكم ورحمة الله وبركاته
    ماشاء الله عليك مبدع والإضافة جدا جميلة وحصرية
    والفكرة أجمل أشكرك أخي الغالي عمرو
    طرحت فأبدعت ودمت ودام عطائك
    وجزاك الله عنا خير الجزاء لك ودي واحترامي

    جاري التركيب في أمان الله

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله أخي الحبيب بدر
      شكرا يا غالي على مرورك ودعمك المستمر للمدونة

      حذف
  2. كيف تقوم بعمل مثل هذه المعاينة اخى الفاضل ؟؟

    ردحذف
    الردود
    1. اقوم بوضع الآداة في مدونة اخرى واضع الرابط هنا
      او ضح اكثر ان كان سؤالك عن شئ محدد

      حذف
    2. التفضيل هنا اخى
      http://2.bp.blogspot.com/-Sen0PYFwl1o/UuTtfFfbFiI/AAAAAAAAC1A/TJt0ENKpg80/s1600/26-01-2014+12-55-45+%D9%85.png

      حذف
    3. أخي الكريم هذا قالب سكويز بيج الخاص بي ولهذا تظهر الحقوق هذه حقوق القالب وليس طريقة عرض

      حذف
  3. السلام عليكم
    هل من الممكن ان تشرح لي كيف اجعل ه\ه الأداة تعرض مواضيع من قسم معين فقط وليس كل المواضيع
    وشكرا مسبقا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذه الآداة اخي الكريم ليس في تنسيقها تخصيص من قسم معين يمكنك مراجعة الأداة التالية بها الخاصية
      http://cnmu.blogspot.com/2013/06/Recent-Posts.html

      حذف
    2. أخي اقرأ التحديث الذي على الموضوع سيفيدك بإذن الله
      تحديث بتاريخ : 16/10/2014

      حذف
  4. الأداة فعالة يارب يحفظك اخي الفاضل
    زادك الله من فضله ورزقك الفردوس
    http://www-islamic-culture.blogspot.com/2015/09/blog-post_3.html

    ردحذف
  5. عمل رائع المشكلة أنه صور المواضيع لم تظهر ماهو السبب أخي ؟؟؟

    ردحذف
    الردود
    1. تأكد من رفع الصور على خدمة بيكاسا او مباشرة من بلوجر

      حذف
  6. الردود
    1. راجع هذا الموضوع اخي الكريم
      http://cnmu.blogspot.com/2013/04/Picasa.html
      يجب ان تكون الصور التي تستخدمها في موضوعك احجام مناسبه
      وتكون مرفوعة على مركز بلوجر الرسمي الممى بيكاسا والمذكور في الموضوع السابق او يمكنك ان ترفعها مباشرة على المركز من داخل الموضوع

      حذف
  7. هل هناك كود يجمع بين احدث المواضيع والمشاركات الشائعة فى اداة واحدة ؟

    ردحذف
    الردود
    1. لا أختي لأن كلتا الإضافتين مختلفتين تماماً

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©