إضافة كود آخر المشاركات لمدونات بلوجر شكل جديد متحرك مع التخصيص


السلام عليكم ورحمة الله وبركاته


قدمنا لكم في مواضيع سابقة عن إضافة آخر المواضيع لمدونات بلوجر بشكل تلقائي لكن اليوم موضوعنا هو نفس المواضع السابقة عن أكواد أخر المشاركات أو آخر التدوينات, لكن بشكل جديد رائع يعرض الصور بحجم أكبر ومعتمة مع إضافة النص في وسط الصورة مما يعطيها شكل جميل وحديث كما أنها تتحرك حوالي كل 7 ثواني لتظهر المواضيع الأقدم منها

مثال حي عن الكود:


كيفية الإضافة إلى مدونتك

إذهب إلى لوحة تحكم مدونتك -->> تخطيط -->> ثم أنقر على إضافة أداة ثم أختر من بين الأداوت أداة HTML/JavaScript

ثم ألصق الكود التالي داخل الأداة:

<center>
<div id="featuredpostside"></div>
<script type="text/javascript">function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};</script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://mdadalgled.blogspot.com/",
MaxPost:4,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<style scoped="" type="text/css">
/*
by madad2.com
*/
#featuredpostside {
height: 500px;
overflow: hidden;
}
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px 'Open Sans',sans-serif;;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 1000px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 25%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border-radius: 3px 3px 3px 3px;
    margin-top: -5px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
   color: white;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
padding: 0px;
position: absolute;
left: 5%;
top: 40%;
width: 90%;
z-index: 2;
background: rgba(0, 0, 0, 0.4)url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKD5JRzhoWBDOwxq-WzXtPNDestrWY1snADY-YWH0IJeTe7ErEmOKkJaxRFAlcs_OWfYd56accKyTEJwPyTrhiZKbE8FKg0D5b2y6F_IKJdRXIHxK7DlFjVrkKIGfJAV3QUAXSm7RKa_8/s1600/Opacity.png)
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}

.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
  background: none repeat scroll 0 0 #004489;
bottom: 218px;
padding: 8px;
position: relative;
right: 10px;
border-top-left-radius: 5px;
}
.autname {
background: none repeat scroll 0 0 #004489;
top: -3px;
padding: 8px;
position: relative;
left: 138px;}
</style>
</center>
التخصيص:
غير http://mdadalgled.blogspot.com/ برابط مدونتك
عدد المشاركات MaxPost:4 يمكنك تغيير الرقم 


مشاركات أقدم المقال التالي
13 تعليق
  • المجهول
    المجهول 21‏/06‏/2014، 11:36:00 م

    اهلا اخى
    المدونة جميلة وانا باشكركم جدا لانكوا افاتدونى جدا
    وممكن طلب
    ممكن شرح كامل للمبتدأيين عن كيفية استخدام مشرف المواقع وكيف اثبت ملكيتى لهذا الموقع
    وما هو معنى فهرسة المواضيع وارشفتها
    وما هو السيو ممكن شرح مفصل
    وما هو السى بانل ممكن شرح مفصل
    وكيف احجز دومين مجانى وكيف اركبه
    وانا اعتذر عن كتر اسئلتى و انا متشكر جدا
    والله يعطيك العافية لتفيد ناس اكتر

    • مداد الجليد
      مداد الجليد 22‏/06‏/2014، 5:47:00 م

      ان شاء الله بأقرب وقت اخي العزيز وشكرا لمتابعتك المستمرة اتمنى لك دوام الصحة والعافية.

  • المجهول
    المجهول 22‏/06‏/2014، 7:46:00 م

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

    • مداد الجليد
      مداد الجليد 23‏/06‏/2014، 10:42:00 م

      وأنت بألف خير شكرا لك اخي الكريم

    • مداد الجليد
      مداد الجليد 23‏/06‏/2014، 11:30:00 م

      أخي كل ماتحب معرفته عن اداوت مشرفي المواقع موجود هنا
      https://support.google.com/webmasters/?hl=ar
      لا تحتاج شرحي

  • المجهول
    المجهول 24‏/06‏/2014، 2:42:00 م

    انا اسف لاطالتى معك لكن انا لا استطيع ان اثبت ملكيتى للموقع الذى اكتبه
    ممكن شرح الطريقة الموصى بها فى ادوات مشرف المواقع

  • المجهول
    المجهول 24‏/06‏/2014، 2:51:00 م

    الموصى بها: تحميل ملف HTML تحميل ملف HTML إلى موقعك على الويب.

    1. نزل ملف التحقق من خلال HTML هذا. [google38bd7f697e3a801a.html]

    2. حمّل الملف إلى ‪http://aks-android.blogspot.com/‬

    3. أكد التحميل الناجح عن طريق زيارة ‪http://aks-android.blogspot.com/google38bd7f697e3a801a.html‬ في المتصفح.

    4. انقر على التحقق أدناه.

    للحفاظ على التحقق، لا تزل ملف HTML، حتى بعد نجاح عملية التحقق.

    انا عايز شرح ازاى اعمل البتاعة دى
    وازاى حمّل الملف إلى ‪http://aks-android.blogspot.com/‬

    • مداد الجليد
      مداد الجليد 24‏/06‏/2014، 8:26:00 م

      من المفترض إذا كنت تستخدم بلوجر أن تضاف أي مدونة تلقائيا على حسابك
      لكن إذا تعذر عليك اضف موقعك ثم أختر طرق بديلة ثم علامة HTML ثم انسخ الكود وقم بإضافته أسفل الرمز <head> بعد ذلك إضغط على حفظ القالب ثم إضغط على تأكيد في أداوت مشرفي المواقع

  • المجهول
    المجهول 24‏/06‏/2014، 10:45:00 م

    يظهر لى
    تعذر التحقق من موقعك: ‪http://aks-android.blogspot.com/‬
    وانا عملتها وسيبتها نص ساعة وبعدين يظهر لى تعذر التحقق من موقعك

    • مداد الجليد
      مداد الجليد 25‏/06‏/2014، 5:35:00 م

      مدونتك غير موجودة يا أخي

  • المجهول
    المجهول 26‏/06‏/2014، 2:46:00 م

    اها صح
    انا اسف على الازعاج
    انا كنت غيرت رابط المدونة

  • Unknown
    Unknown 13‏/12‏/2015، 8:03:00 م

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

    • مداد الجليد
      مداد الجليد 13‏/12‏/2015، 10:22:00 م

      واياك اخي حسان
      لا يمكن تخصيص فهو سكربت يعرض حسب التغذية

أضف تعليق
عنوان التعليق