تركيب slideshows لمدونة بلوجر رقم 1

مكتبة الدروس
دروس مدونة بلوجر

تركيب عارض الشرائح لمواضيعك بطريقة بسيطة

أولاً : انتقل الى https://www.blogger.com

ثانياً : نختار تخطيط >> اضافة أداة >> نختار HTML/JavaScript

ثالثاً : نضع الكود التالي

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/2tuqn164c49bv4l/mbt-slider-0-01-jis.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/t2e14sks1ufhcwp/mbt-slider-0-02-jis.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/q81tdxkefnkwyxj/mbt-slider-0-03-jis.js" type="text/javascript"/></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'fade',
timeout: 4000,
delay: 0,
speed: 1000,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});

/* ]]> */

</script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.featuredposts{border:3px solid #FCC83F;width:608px;background:#FFFFCB;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:2px solid #FCC83F; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:2px solid #2A0000; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#663200;font:bold 17px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#663200;text-decoration:none;}
.fp-title a:hover{color:#B68264;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#84501E;padding:0;margin:0;font:15px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSsAdd7y2lP3H90Q7_3lRMFw1e0K-uilug13Uiusl2LHrvNvE-QncCOXpwCr7IZAHJCcIa48qWB1auq0YhCHsXLIdYTvcA0CyuO7lEVtCrs0XPq19Ex4A05gbaPvDrd-Sauzh39m-qjY/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Uze476Re77dW3BblmesSrrhJh_TISyFKbsF_7XGHAaRVxFiQoySQpJWfKV4TAIPNscusBfrqo8Ma9S9swDdqaNjqgfV1N8RuKVHuQl57jx3ob0TIglZhtrurDy_qjGXdQLDhzIIQ5mI/s1600/featured-prev-24work-1.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOQab0_n79TxsQpWhTzb5TljjMt3Sl6yOVAxkBw0jalR6fodZn5-ZBjyyRpvBYw8DJ5zaOjKuyyW6jlz3FPaVeImkuIkF1N-_s2mXeqbLZNJP7evI75jVQQccUbRCw-Kcp3HT3zWj6KI/s1600/featured-next-24work-1.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}
</style>



<div class="featuredposts clearfix">
<div class="fp-slides">
<div class="fp-post">
<div class="fp-thumbnail"><a href="رابط موضوع 1" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6W5SyHOPJhJIqh1-HYrCQPQE2lICUKaAVL00Hn2NpC3ksSgjNKvL7Mq0h4ZBu8QWdaCVcsfy4RQ0bFYffeoG4UhrTPlI5XZP6oi0yzAeyh81iu7pACwL_7WgOjaTl6wmFCtOhv0XX5vo/s1600/4.jpg" height="266"/></a></div>
<h3 class="fp-title"><a href='رابط موضوع 1' target='_blank'>عنوان الموضوع رقم 1</a></h3> <p> وصف الموضوع رقم 1 </p>
</div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="رابط موضوع 2" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9JV8Ote8RY0HAjjG72aJtCXcU_y9X6QH-jEP57Lw_cGfuhyBK-WMICyeOHSUTlq2AkxHia-3hER-Nc_UZjyWxgLdtw8UWqr9uhZp8kUQt-UAs_iR-R1-0xfITtWIxWfyv1vk5uGRo9I/s1600/2.jpg" height="266"/></a></div>
<h3 class="fp-title"><a href='رابط موضوع 2' target='_blank'>عنوان الموضوع رقم 2</a></h3> <p> وصف الموضوع رقم 2 </p>
</div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="رابط موضوع 3" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipopcMl0ApNCWRkCIEBWvaONzpG5xOw_C_3iB1xGDp90MGyP5_8GuG6n0Ca2Nk7RrEMD-CIOvh26FlAoyxC9Xy5Opv_HJeBiYTKM_R0NOF1PZA_OH63zxkK6GSl_TXmbBjuoVhyIfLcQY/s1600/3.jpg" height="266"/></a></div>
<h3 class="fp-title"><a href='رابط موضوع 3' target='_blank'>عنوان الموضوع رقم 3</a></h3> <p> وصف الموضوع رقم 3 </p>
</div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="رابط موضوع 4" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9JV8Ote8RY0HAjjG72aJtCXcU_y9X6QH-jEP57Lw_cGfuhyBK-WMICyeOHSUTlq2AkxHia-3hER-Nc_UZjyWxgLdtw8UWqr9uhZp8kUQt-UAs_iR-R1-0xfITtWIxWfyv1vk5uGRo9I/s1600/2.jpg" height="266"/></a></div>
<h3 class="fp-title"><a href='رابط موضوع 4' target='_blank'>عنوان الموضوع رقم 4</a></h3> <p> وصف الموضوع رقم 4 </p>
</div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="رابط موضوع 5" target="_blank"><img alt="How To Add Animated Flash Clock To Your Blogger Blog" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrHBMAzi6sOTQFLGtq8fS2rKvp1MwQviMvNZSSP99HldPkVQdfWwE94m551qTPVyyXz4LUM3nnqUarku-_gEuPDfM2xii_6XGgEEe9Xn4b6A7Zk6-PO6APoICZyizTV9S62LJGIJC9tg/s1600/1.jpg" height="266"/></a></div>
<h3 class="fp-title"><a href='رابط موضوع 5' target='_blank'>عنوان الموضوع رقم 5</a>  </h3> <p> وصف الموضوع رقم 5 </p>
</div>

</div>
<div class="fp-nav clearfix">
<span class="fp-pager"></span>
<a class="fp-next" href="#fp-next"></a>
<a class="fp-prev" href="#fp-prev"></a>

</div>
</div>

قم بالتعديل كما هو موضح بالكود 

ملاحظة : لإجراء بعض التعديلات على لون الخلفية ولون الخط

1) لتغيير لون الخلفية  background:#FFFFCB

2) لتغير لون الخط لعنوان الموضوع   color:#663200

3) لتغير لون الخط لوصف الموضوع  color:#84501E

انتهى