عرب بلوجر: برمجة سلايد شو تلقائى فى بلوجر

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

بعدما قمنا بإنشاء قائمة بلوجر متوافقة مع الموبايل فى الدروس السابقة فى هذا الدرس سوف نعمل على برمجة سلايد شو تلقائى لمدونات بلوجر احترافى.

خطوات برمجة سلايد شو تلقائى

1- اول شئ سنقوم بتسجيل الدخول الى مدونتنا فى بلوجر.

2- فى لوحة تحكم بلوجر ستجد على يمين الصفحة كلمة المظهر قم بالضغط عليها بعد ذلك اضغط على السهم الذى بجواركلمة تخصيص فى وسط الصفحة واختر كلمة تعديل html.

3- الان سوف يظهر لك جميع الاكواد الخاصة بقالبك الان سوف نستدعى جميع المقالات الموجودة بمدونتك اذا لم تقم بنشر اى تدوينة فيجب عليك الان نشر بعض التدوينات عن طريق الضغط على كلمة مشاركة جديدة فى اعلى الصفحة وانشاء بعض التدوينات ثم بعد ذلك ترجع مرة اخرى الى تعديل html وتستكمل معنا الخطوات الان قم بنسخ تلك الاكواد ووضعها فى قالبك قم بوضعها اسفل الصفحات الرئيسية مثلا.

<div class='blog-main-posts'>

<b:section id='main-posts' name='جميع المقالات'>

<b:widget id='Blog1' type='Blog'></b:widget>

</b:section>

</div>

4- الان اذا قمت بعرض مدونتك ستجد جميع مقالاتك معروضة امامك ننتقل الى الخطوة التالية.

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

<div class='blog-simple-slider'>

<b:section id='simple-slider' name='سلايد شو'></b:section>

</div>

6- قم بحفظ تلك الاكواد عن طريق الضغط على ايقونة فى اعلى يسار الصفحة بعد ذلك قم بالرجوع الى الوراء واضغط على كلمة تنسيق وبعد ذلك ستجد قسم فى وسط الصفحة اسمه سلايدر وتحته قليلا ستجد كلمة اضافة اداة قم بالضغط عليها ستظهر لك نافذة منبثقة اختر منها كلمة نص ثم اكتب بداخل العنوان اى كلمة فلتكن تلك الكلمة سلايد شو صور.

7- بعد ذلك ستقوم بوضع الاكواد الخاصة json and javascript المسؤلة عن جلب عناوين المواضيع والصورة الخ من مدونتا قم بنسخ تلك الاكواد ووضعها قبل قفل وسم </body>.

<script>

//<![CDATA[

function slideInfo(json) { // start json function

var slideResult = "";

for (var i=0; i<json.feed.entry.length; i++){ // start loop

var slideTitle = json.feed.entry[i].title.$t;

var slidetitleUrl = json.feed.entry[i].link[4].href;

var slideImg = json.feed.entry[i].media$thumbnail.url.replace("s72-c/","");

slideResult += "<div class='box' onclick='changeImg(this)'><a href='"+ slidetitleUrl +"'>"+ slideTitle +"</a><img src='"+ slideImg+ "' /></div>";

} // end loop

var slidePlace = document.querySelector('.blog-simple-slider .slideContent').innerHTML = slideResult;

var slideBase = document.querySelector('.blog-simple-slider .slideDefaultImg').innerHTML =

"<img id='zaki' class='baseImg' src='"+ slideImg +"'/><a id='baseTitle' class='baseHref' href='"+ slidetitleUrl +"'>"+ slideTitle +"</a>";

} // end json function

function changeImg(event) {

document.querySelector('.slideDefaultImg .baseImg').src = event.children[1].src;

document.querySelector('.slideDefaultImg .baseImg').href = event.children[1].href;

document.getElementById('baseTitle').innerHTML = event.children[0].innerHTML;

document.getElementById('baseTitle').href = event.children[0].href;

}

var slideJsonUrl = "<script src='https://ararblearnblogger.blogspot.com/feeds/posts/default?alt=json-in-script&callback=slideInfo&max-results=4'></"+"script>";

document.write(slideJsonUrl);

//]]>

</script>

8- الان سوف يعمل معك السلايدر ولكنك تحتاج الى شئ اخر وهو تنسيق السلايدر عن طريق اكواد css سوف تقوم ايضا بنسخ تلك الاكواد ولصقها بين وسم b:skin.

/* start blog-simple-slider */

.blog-simple-slider{border-bottom:5px solid #10ac84;text-align:center;}

.blog-simple-slider .slideDefaultImg{position:relative;}

.blog-simple-slider .slideDefaultImg img{border:3px dashed #10ac84;width: 500px;height: 361px;}

.blog-simple-slider .slideDefaultImg a{display: block;position: relative;top: -42px;background: #1dd1a1;

width: 11%;padding: 6px 10px;margin: 0 auto;color: #FFF;border-radius: 5px;}

.slideContent .box{display:inline-block;}

.slideContent a{display:none;}

.slideContent img{display:inline-block;width:180px;height:180px;cursor:pointer;border:4px solid #FFF;}

.slideContent img:hover{border:4px solid #10ac84;}

/* end blog-simple-slider */

9- الان قم بحفظ الاكواد عبر الضغط على ايقونة فى اعلى يسار الصفحة وقم بعرض مدونتك ستجد الان السلايدر يعمل ومنسق بشكل بسيط.

ملاحظة

يجب عليك مشاهدة الفيديوهات التالية حتى تستوعب تلك الاكواد.

المواقع المذكورة فى الشرح موقع صور وموقع ومولد النص العربى و json viewer

فيديوهات توضيحية

برمجة سلايد شو تلقائى فى بلوجر الجزء الاول