من أفضل الإضافات (Plugins) للمدونات هي السلايدرات (Sliders) والتي تقوم بعرض المقالات بطريقة جذابة تضمن لك زيادة قراء هذه المقالات, ناهيك عن الجمالية التي تضيفها للمدونة, من يصنع هذه السلايدرات يقوم بإستخدام CSS3 و JavaScript وJQuery ليقوم بعمل الحركات (Animation) الجذابة, وطبعاً مع تعدد نظم التدوين تعددت طرق التركيب, وتعددت المزايا وسهولة التعديل, فمثلاً مع نظام ووردبريس (WordPress) يمكنك إضافة الآلاف من السلايدرات بعدة ضغطات, أما مع بلوجر (Blogger) فالطريقة معقدة قليلاً للذين ليس لهم أي فكرة عن لغات التوصيف والتنسيق الخاصة بالويب مثل HTML و CSS ولكن بإذن الله سوف نشرح لك عزيزي القارئ أسهل طريقة نعرفها و سوف نعرض لك بعض السلايدرات (Sliders) الخاصة ببلوجر مجاناً
لنبدأ:
الخطوة الأولى:
يجب عليك تحديد المكان الذي سوف تضع فيه السلايدر مثلاً: نحن في إحسان تك قمنا بوضع السلايدر الخاص بنا في تحت الشعار وداخل الـ (Content) فلا يجوز لك وضع السلايدر في آخر المدونة لأن مهمة السلايدر هي عرض أبرز المقالات بشكل سريع عند دخول المستخدم إلى الموقع.
الخطوة الثانية:
بعد أن قمت بتحديد المكان, يجب عليك القيام بإنتقاء السلايدر المناسب لمدونتك, يوجد العديد من السلايدرات ولكن نحن أنتقينا لك بعضها, ولن أقول لك أنها الأفضل ولكن هذا ما وجدناه وأعجبنا, <قائمة السلايدرات في النهاية> وسوف نطبق على هذا المثال:
هذا مثال حي على السلايدر
وهذا الكود الخاص به:
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jVro6o25-lGsDYJLNR2HfGzspFs6xyhWJaWCP8sNhyphenhyphenO2QymFbUwTINMEEIC5ehIJoU7FY7gIOLcdgmvE0GyDudQH93im7-xPSShhlcApnO6DAhOp0gTVuIHeDkqyWuiieO-0fi1JAOmk/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4aAvO5k1euKOKyssTX8yT2b-pRlApqrZufC8IrKEGdK1JNAQbkw-sgZaFPTuiQZgPse6K955gaq65Y9eDR4QPJUosHL7AvFHPW9NWvO859b-IQKLGg3ou9aJjalxCe3ZciaztBXs8WcQ/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMiH37TL-Y26_DYrIMkyX5Pwm3hp6jmIN5WD0FamiyffnIvMH6TR1hbU9R3ytNzBiiOG37so7hhFTsEQBTsznbjtOLxD1ZR6m2NwzFWeRDueWKsdAE3lpFSF3ehP3aVOQtCjG4-YO8Aie/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUzSIEyZIyQkMx0xjbPYz5oTS5rygLoDIxLOV1aYNqGbzG57sF5VwpbTVqBoRocVzEO2s5lRMbsbj4VkUymQi4wbhqTCKeuxF0oz9cMOJV5__SXD2ZFshvhpBOl_fOPBCvWEDCn_34_sJ/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bKrVTEULTBzQAxsWzF_P-G-grfoKf2FKCtukSW3DYQ3W6o9UY41zmC3qfW2RHfuJNpPvVA7HTleA37G1ghdxTbmZLrRR8zYHnJRVsE75lLUpOvvOOUEsbnCTCtAaOT1a7xAIfp0iijF7/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi7KoMqYPKi9IWmyreDK_1vpCeEQAg6p7IskHhACTaPT_-pmlndJYczwDfpixNCkxz2EqADjpWy8e4wgi1xQf-asTjbvfvcYmVpoPydM4qyD7JBIjWE2A9MHnMbY5gfJ5_6y5NxCYq2N1Y/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRiBnuI-yvPjjuE9mwt9KsYQQgzIXm0sBPd74zdZH070zFqvyMQQXGHyfdlAdnT8mrc1tySxfFegJ0YB6E4ISTIkyv3TzGSfMG1ucH_Xdd2PrV2jMs0rd_TTK_k1dKWRo_HduHiEz6RvU/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
عندما نريد تركيب السلايدر يجب أن نفصل أكواد ال CSS ونضعها في مكان محدد ويجب أن نفصل أكواد HTML ونضعها في المكان الذي نريد للسلايدر أن يظهر فيه:
أكواد ال CSS بين جملة وسمي <style></style> إنسخ الأكواد ذات اللون الأزرق وأدخل إلى لوحة تحكم مدونتك>قالب>تصميم ثم إضغط على متقدم وسوف تجد مربع يطالبك بإضافة أكواد CSS, أضف الأكواد التي نسختها من هنا وإضغط على تطبيق و لكن إحذر من الأخطاء, وبعد هذا نأتي إلى الخطوة الثالثة والأخيرة.
الخطوة الثالثة:
يجب عليك إضافة أكواد HTML الخاصة بالسلايدر في المكان الذي تريد للسلايدر أن يظهر فيه:
إنسخ الأكواد التي باللون الأخضر من فوق ومن ثم إذهب إلى قالب>تحرير HTML وسوف يظهر لك كل أكواد مدونتك
والآن نأتي إلى أصعب عملية في هذه (الدويخة), وهي البحث عن المكان أي الكود المحدد الذي سنضع تحته كود السلايدر ليظهر في المكان الذي نريده, إضغط على Ctrl+f للبحث ثم أدخل هذه الجملة class='container' وإبحث فإن وجدتها فقد حالفك الحظ وإن لم تجدها أمامك حللان: الأول أن تتعلم أساسيات HTML و CSS والثاني وهو الأسهل أن تقوم بطرح نسخة من قالبك في أحد المدونات وتطلب منهم إرشادك إلى المكان المحدد, بعد أن تقوم بوضع الكود في المكان المرغوب إضغط على حفظ وإذهب إلى المدونة ستجد أن السلايدر قد تم إضافته وبقي عليك تغير الصور فقط :)
........................................
........................................
وفي النهاية إذا كان لديك ملاحظة, أو سلايدر جميل تود أن تشاركنا به, أو إستفسار فلا تخجل من طرحه في الأسفل :)
0 التعليقات: