إضافة سليدر صحيفة في قوالب بلوجر

في هذا الشرح الجديد سأشرح لكم طريقة إضافة سليدر صحيفة في قوالب بلوجر بطريقة جد سهلة و يضهر فقط في الصفحة الرئيسية

أولا : نأخذ نسخة إحتياطية للقالب في حال حدوث مشاكل

تانيا : نفتح إدارة المدونة في بلوجر

ثالثا : نذهب إلى قالب تم تحرير HTML

رابعا : نبحث عن هذا الكود

1	]]></b:skin>

و نضع فوقه / قبله هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}
.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrdtWCa6EREPb5majsw1arspE35OLK6wgEb3_y2t0T6kQai6f6oSvpd305bWckqCkwADi2UOQ4Y9YXJHo3TjyfpXIi3CsdkHPvMpuabj-7KRbGfTaJ64TYLJenu7mPUSKhBHoGQlvVQ8/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}
.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}
.ei-slider-large li img{width:100%;}
.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}
.ei-title h2,.ei-title h3{text-align:right;}
.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}
.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0;}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;max-height:100px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

ثم نبحث عن هذا الكود

</head>

و نضع فوقه هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14

و نغيير التصنيف الموجود من كل إلى أي تصنيف موجود في مدونتك

و أخيرا نقوم بالبحث عن

1	<b:section class='main' id='main' showaddelement='no'>

و نضع فوقه هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<b:if cond='data:blog.url == data:blog.homepageUrl'>
< div class='ei-slider' id='ei-slider'>
< script src='http://yourjavascript.com/3411331121/slide1.js'/>
< script type='text/javascript'>
var showpostsummary = true;
var numchars = 100;
< /script>
< ul class='ei-slider-large'>
< script type='text/javascript'>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs2\"><\/script>");
</script>
< /ul>
< script src='http://yourjavascript.com/1134333271/slide2.js'/>
< script type='text/javascript'>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs22\"><\/script>");
</script>
< /div>
< script type='text/javascript'>
jQuery(function() {
jQuery('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
speed : 800,
titlesFactor : 0.60,
titlespeed : 1000,
thumbMaxWidth : 100
});
});
</script>
< div style='clear: both;'/>
</b:if>

و تم الإنتهاء من إضافة السليدر

ملاحضة : إذا لم يعمل السليدر تحقق من أنه لا توجد أي مكتبات جيكويري أخرى في القالب

åäÇ ÇÚáÇä ÇÏÓäÓ

الكاتب: معاذ غازي

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

تابعني
fb
tw
gl

السبت، 28 ديسمبر 2013