19 فبراير، 2016

مدون محترف سلايدر شو اضافة سلايدر شو تلقائي في بلوجر

اضافة سلايدر شو تلقائي في بلوجر

اضافة سلايدر شو تلقائي واحترافي يقوم بعرض المواضيع الجديدة بشكل سريع وفوري.

اضافة سلايدر شوّ تلقائيّ في بلوجر -جميعُنا نعرف أهمية السلايدر في المواقع فهي تجذب انتباه الزّائر وتزيّد من نسبة النّقر على المواضيع،هذا يؤدي إلى زيادة عدد مشاهدات المقالات في المدوّنة. السلايدرات يوجد لها أشكال كثيرة ومختلفة ولكنّها تنقسم إلى نوعين سلايدر شوّ تلقائيّ (يقوم بعرض صور وروابط المواضيع بشكل تلقائي)، سلايدر شوّ غير تلقائيّ (يجب وضع الصّور وروابط المواضيع بشكل يدوي). اليوم سوف نتعلّم كيفية اضافة سلايدر شوّ تلقائيّ جميل وبسيط، ويقوّم بعرض المواضيع الجديدة بمعنّى عند نشر مقال جديد على المدونة، سوف يظهر فورًا على السلايدر. وهو خفيف وسريع ولن يؤثر على سُرعة المدونة.


كيفية اضافة سلايدر شو تلقائي في بلوجر


  1. ادخل لوحة تحكم بلوجر.
  2. انقر على تبويب قالب.
  3. ثم اضغط على زر تحرير HTML.

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Slider */
.blog_featured_posts {display: inline-block;width: 100%;margin-top: 0px;margin-bottom: 4px;}
.blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;}
.blog_featured_post.first {width: 43%;margin-left: 9px;}
.blog_featured_post.second {width: 20.79%;margin-left: 9px;}
.blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;}
.blog_featured_post.third {margin-bottom: 9px;}
.blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;}
.blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;}
.blog_featured_post a:before {display: block;position: absolute;content: &#39;&#39;;right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 300px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;}
.blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;}
.blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 11px;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #f58220;}
.blog_contents span:after {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #f58220;left: -7px;bottom: 0;position: absolute;}
.blog_contents span:before {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #f58220;right: -7px;top: 0;position: absolute;}
.blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:12px;font-weight:700;margin-right: -30px;}
.blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-size:12px;font-weight:700;margin-right:-30px;}
.blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}

ابحث عن الوسم </head> و اضف الكود التالي فوقه
<!-- Slider -->
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
numposts1 = 4;
numposts11 = 1;
newsize = 400;
function recentposts1(json) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array;
if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
else maxpost = json.feed.entry.length;
document.write('<div class="blog_featured_posts">');
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var tag = entry.category[0].term;
var pcm;
var posturl;
var cropsize = newsize;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href;
break
}
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
pcm = entry.link[k].title.split(" ")[0];
break
}
if ("content" in entry) var postcontent = entry.content.$t;
else if ("summary" in entry) var postcontent = entry.summary.$t;
else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++) if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
var daystr = day + " " + m + " " + y;
if (i == 0) {
var st = "#FF3D66";
var trtd = '<div class="blog_featured_post first"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 1) {
var trtd = '<div class="blog_featured_post second"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 2) {
var trtd = '<div class="blog_featured_post third"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 3) {
var trtd = '<div class="blog_featured_post fourth"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
j++
}
document.write('</div>')
};
//]]>
</script>

الكود الثالث وهو الخاص بعرض السلايدر في المدونة ويُمكنك وضعه في المكان الذي يُناسبك.
لكنّ أفضل مكان هو فوق المواضيع مُباشرًة لذلك ابحث عن الوسم <div id='content-wrapper'> و اضف الكود التالي فوقه
<div class='blog_featured_posts' id='blog_featured_posts'>
<div class='ct-wrapper'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
  </b:if>
  </div>
</div>

السلايدر قد يختلف حجمه على حسب حجم القالب الذي تستخدمه.
إذا واجهت صعوبة في تركيب السلايدر أترك تعليق وسوف اقوم بالدخول إلى مدونتك واعطائك المقاسات المُناسبة.
مواضيع ذات صلة
اضافة سلايدر شو تلقائي في بلوجر
4 / 5
بواسطة

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

  1. الردود
    1. مرورك الجميل اخي اصيل =r

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

    ردحذف
    الردود
    1. وعليكم السلام
      السلايدر يظهر فقط في الرئيسية
      ولا يظهر في صفحات الموضيع أو لصفحات الثابتة

      حذف
  3. شكرا لك سلايدر شو رائع ومتناسق =d

    ردحذف
    الردود
    1. لا شكر على واجب صديقي =s
      مرورك الرائع =r

      حذف
  4. ممتاز اخو وشكرأ لك y=
    بس كان نفسي تعمل كورس ف شروحات لعمل قالب بلوجر r=

    ردحذف
    الردود
    1. لا شكر على واجب صديقي =s
      المشكلة انا وقتي ضيق جدًا ولو قمت بعمل الكورس لن أكمله =v

      حذف
  5. اخي نتمنى ان تعرب لنا قالب vikka المقدم من arlina desing

    ردحذف
    الردود
    1. اهلًا صديقي
      القالب موجود مُعرب في كثير من المدونات =a

      حذف
  6. لم اجد الكود div id='content-wrapper

    ردحذف
    الردود
    1. اهلًا أخي
      قد تكون اكواد مدونتك مختلفة
      ليس من الضروري أنّ يكون نفس الموجود في الموضوع
      جرب ابحث عن <div id='main'>
      وقُم بوضع الكود تحته

      حذف
  7. جبته منين ده =d , من مدونة اجنبيه ؟

    ردحذف
  8. chokran ya akhi jazaka min khayr

    ردحذف
    الردود
    1. لا شُكر على واجب صديقي
      =s

      حذف
  9. akhi 3aziz ladaya mochkil fi fahm risala min google wa akhaf takon khatira 3ala modawanati

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

      حذف
  10. بصراحة سلايدر رائع ومدونة منسقة وجميلة شكرا على الإضافة

    ردحذف
    الردود
    1. لا شكر على واجب
      ومرورك هو الرائع =s

      حذف
    2. صراحة لم افهم
      أتمنى الكتابة باللغة العربية

      حذف
  11. السلام عليكم اخى حقيقه جزاك الله خيرا على ما تقدم..

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أهلًا أخي محمود
      أعتذر منك صديقي ولكنّ لا نستطيع
      فنحن نطرح فقط القوالب التي نقوم بتعريبها أو تصميمها

      حذف
  12. اخي حملت قالب vikka من احد المواقع المواقع المعروفة لكن المشكل هو انني لا اجد في تخطيط القالب مكان لاضافة بانر اعلاني امام اللوغو بينما في النسخة الاجنبية يوجد شاهد الصورة لتفهم اكثر
    https://drive.google.com/file/d/0B9m2kyyBRxJVMXhFWjVWYzlWN2c/view

    هل يوجد حل لهذا المشكل يا اخي ؟؟

    ردحذف
    الردود
    1. أهلًا صديقي قد يكون مُعرب القالب قام بمسحها
      أو قام بعمل تعديلات على القالب خاطئة
      الحل يجب عليك إعادة إضافتها من جديد

      حذف
    2. ولاكن كيف ذلك ??

      حذف
    3. عن طريق إضافة section جديد في منطقة الهيدر الخاصة باكواد HTML

      حذف
  13. شكرا على سلايدر شو الجميل
    ولكن أنا عاوز يظهر فى صفحات المواضيع ازاى

    ردحذف
    الردود
    1. في الكود الثالث يوجد

      <b:if cond='data:blog.pageType == &quot;index&quot;'>

      قم بمسحه + مسح هذه </b:if>
      جرب وردلي خبر

      حذف
  14. الكود الدي سوف نبحث عنه لم اجده

    ردحذف
    الردود
    1. هذا الكود يختلف من قالب لآخر
      لذلك ابحث عن <div id='content-wrapper'>
      وقم بإضافة الكود الأخير تحته

      حذف
  15. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. لأنك تستخدم قالب هوت ماج
      لذلك يجب مسح السلايدر لقديم وتركيب السلايدر الجديد

      حذف
  16. اخي السلايدر اكبر من عرض القالب
    ماذا افعل

    ردحذف
    الردود
    1. حاول التلاعب باكواد width
      اضغط بزر الماوس الايمن على السلايدر واضغط على افحص العنصر
      سوف تظهر لك اكواد ابحث عن اكواد السلايدر وتلاعب باكواد width
      ثم ادخل القالب وعدل عليها

      حذف
  17. وكيف يمكن جعله يعرض موضوعات قسم معين

    ردحذف
    الردود
    1. فقط يعرض مواضيع تلقائية وهي أحدث المواضيع
      لا تستطيع جعله يعرض مواضيع قسم معين

      حذف
  18. اخي انا لم استطع تغيير عرض السلايد لا اعرف اي كود اغير به جربت ولكن فشلت =x

    ردحذف
    الردود
    1. شوف ابحث عن .blog_featured_post.first
      سوف تجد بعدها width: 43%; غير 43 بما تريد وهي المسؤولة عن الصورة الكبيرة اليُمنى
      .blog_featured_post.second سوف تجد بعدها width: 20.79%; غير رقم 20 وهي الصورة التي بجانب الكبيرة
      .blog_featured_post.third, .blog_featured_post.fourth وهي المسؤول عن الصورة الصغير استبدل 34.126%

      حذف
  19. اخي لم تنفع الصورة على اليمين الكبيرة لا تتغير ولكن كل ما اغير في الارقام ينزاح كل السلايدر الى اليمين ويترك فراغ

    ردحذف
    الردود
    1. للأسف هنا عليك التعديل على الـ margin و الـ padding
      لذلك يجب ان تتعلم بعض الشيء عن CSS

      حذف
  20. لقد اختفى السلايدر اخي

    ردحذف
    الردود
    1. بسبب تعديلات انت قمت بها
      حاول تركيبه بشكل صحيح

      حذف
  21. اخي العزيز ، السلايدر يظهر على الموبايل و هو غير متجاوب ! كيف اخفيه على الهاتف بارك الله فيك

    ردحذف
    الردود
    1. للأسف السلايدر غير متجاوب ومن اجل اخفاءه يجب أن تٌضيف اكواد التجاوب
      @media only screen and (max-width:1220px){
      .blog_featured_post.third, .blog_featured_post.fourth {width: 33.9%;height: 163px;}}

      @media screen and (max-width:1024px) {
      .blog_featured_posts {display: none;}}

      @media only screen and (max-width:768px) {
      .blog_featured_posts {display: none;}}

      @media screen and (max-width:640px) {
      .blog_featured_posts {display: none;}}

      @media screen and (max-width:480px) {
      .blog_featured_posts {display: none;}}

      @media screen and (max-width:320px) {
      body{background:#fff}
      .blog_featured_posts {display: none;}}

      حذف
    2. بارك الله فيك ... هل اضيفها مع اكواد css. للسلايدر

      حذف
    3. نعم صديقي اضفها مع اكواد الـ CSS الخاصة بالسلايدر

      حذف
  22. هل ممكن نجعله يعرض قسم معين

    ردحذف
  23. السلايد شو لم يضهر ابدا وتبعت الخطواط كلها

    ردحذف
    الردود
    1. قد تكون المشكلة من طريقة التركيب
      حاول تركيب السلايدر بشكل صحيح

      حذف
  24. هل يصلح في قالب المحترف

    ردحذف
    الردود
    1. كل السلايدرات تصلح في كل القوالب
      ولكن تحتاج إلى تعديل في الأبعاد

      حذف
  25. اخي في القالب خاص بي
    لا توجد كلمة <div id='content-wrapper>
    ممكن الحل

    ردحذف
    الردود
    1. قد يكون اسم الكود مختلف في مدونتك
      لذلك يجب ان تبحث عن اسم الكود

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r