مكتبة الدروس
دروس مدونة بلوجر
دروس مدونة بلوجر
تركيب عارض الشرائح لمواضيعك بطريقة بسيطة
أولاً : انتقل الى 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/AVvXsEgEzuQcSxnqHikkHWfs_XMeVmFLCR3ZnjwCWlBcpJYpNewYMvCscP0s8h_AxbRoA9tY7L5Z6-g337slPFxnDUbWcvc5BXxbGqyc9WADQgrFfLBeNazrs8CICuf_mbAB_mw3fsM8-y4rXdY/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/AVvXsEj0aw7XBfDj3gIOlZqiBD2R3Dtgy71_IpwiIMmDfesJ9dXIWPz8xKV6mBEAUoj9x2Dgs_zZ1EfNeyn9Xgh02bn1lo8HBTbFeEG_Or83irBpbYzmOqv9I6s8gcxr7ZYUVvSCFg4RC_daGns/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/AVvXsEjPEEzyMN9DHhzX_4j9K5gWZouqOUb_Ei8ak0KCLIpcrMNhn2qandll7Y75eC3rWzyb84yT6D4b_VzjNcnVlv9yoY6d9lS1dhEDHrJ9q9otO1Hjvn6_n3ENi5pW1lhIzVuy8zVhs-iWVfU/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/AVvXsEhyYDPHcnfMRD9qAusPhFjibs7GINm6cM1pnwB6MIyE5OT_f0JDRNOgf7pDmWSGN8w9mTrC1gHMeZaof3jjC-JRw7rCtaZsc3GhVG8iQH1c3hZ44WvoPxFC-LoLnk5ejcIi3bPT2gGn-Yo/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/AVvXsEh3pAQkKVmEIfhB2JE3fWC64LnoFmCBS17D60EbViuFwYCbB9gAlZeMOETVYbhac_KaOh9nlPxMgb5o2h1Csp8cqb0Gzl-w8lmgHpl_AewpMVGZhyphenhyphenML3EjPaOi9a9wP0E9Skr5TKS3Jjow/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/AVvXsEix1J2DXxEjPJFiQTR1Ab2ss2dO0dcdKqZmdhPf-USQmx2r-G7h6BXsTKT3lQbmlLPU_uqhGq3O44_-g_s3YoVt6-XcAu6R-5ybdnbkaApha05FCsZP0QHsgPM_Q5o448lPo0g7KaZy14s/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/AVvXsEh3pAQkKVmEIfhB2JE3fWC64LnoFmCBS17D60EbViuFwYCbB9gAlZeMOETVYbhac_KaOh9nlPxMgb5o2h1Csp8cqb0Gzl-w8lmgHpl_AewpMVGZhyphenhyphenML3EjPaOi9a9wP0E9Skr5TKS3Jjow/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/AVvXsEg9brbNK83fKHYcUCwfkTRjwvQCb9KJ5XWESgEQWEKEmpDnxtj26uhrfoTJmSUBWvzdV1QN1nyjvEpKqRouTw-Po-iSk26Qf3GhaIZuIfq6ER8lJ88MmsSHI8MEmXZxOCHqOrT1zadhTUQ/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>
<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/AVvXsEgEzuQcSxnqHikkHWfs_XMeVmFLCR3ZnjwCWlBcpJYpNewYMvCscP0s8h_AxbRoA9tY7L5Z6-g337slPFxnDUbWcvc5BXxbGqyc9WADQgrFfLBeNazrs8CICuf_mbAB_mw3fsM8-y4rXdY/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/AVvXsEj0aw7XBfDj3gIOlZqiBD2R3Dtgy71_IpwiIMmDfesJ9dXIWPz8xKV6mBEAUoj9x2Dgs_zZ1EfNeyn9Xgh02bn1lo8HBTbFeEG_Or83irBpbYzmOqv9I6s8gcxr7ZYUVvSCFg4RC_daGns/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/AVvXsEjPEEzyMN9DHhzX_4j9K5gWZouqOUb_Ei8ak0KCLIpcrMNhn2qandll7Y75eC3rWzyb84yT6D4b_VzjNcnVlv9yoY6d9lS1dhEDHrJ9q9otO1Hjvn6_n3ENi5pW1lhIzVuy8zVhs-iWVfU/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/AVvXsEhyYDPHcnfMRD9qAusPhFjibs7GINm6cM1pnwB6MIyE5OT_f0JDRNOgf7pDmWSGN8w9mTrC1gHMeZaof3jjC-JRw7rCtaZsc3GhVG8iQH1c3hZ44WvoPxFC-LoLnk5ejcIi3bPT2gGn-Yo/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/AVvXsEh3pAQkKVmEIfhB2JE3fWC64LnoFmCBS17D60EbViuFwYCbB9gAlZeMOETVYbhac_KaOh9nlPxMgb5o2h1Csp8cqb0Gzl-w8lmgHpl_AewpMVGZhyphenhyphenML3EjPaOi9a9wP0E9Skr5TKS3Jjow/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/AVvXsEix1J2DXxEjPJFiQTR1Ab2ss2dO0dcdKqZmdhPf-USQmx2r-G7h6BXsTKT3lQbmlLPU_uqhGq3O44_-g_s3YoVt6-XcAu6R-5ybdnbkaApha05FCsZP0QHsgPM_Q5o448lPo0g7KaZy14s/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/AVvXsEh3pAQkKVmEIfhB2JE3fWC64LnoFmCBS17D60EbViuFwYCbB9gAlZeMOETVYbhac_KaOh9nlPxMgb5o2h1Csp8cqb0Gzl-w8lmgHpl_AewpMVGZhyphenhyphenML3EjPaOi9a9wP0E9Skr5TKS3Jjow/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/AVvXsEg9brbNK83fKHYcUCwfkTRjwvQCb9KJ5XWESgEQWEKEmpDnxtj26uhrfoTJmSUBWvzdV1QN1nyjvEpKqRouTw-Po-iSk26Qf3GhaIZuIfq6ER8lJ88MmsSHI8MEmXZxOCHqOrT1zadhTUQ/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
انتهى
0 التعليقات: