تركيب 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/AVvXsEjvQdMZ5Cve9VlfFOmKJr-tbVHlIwJSEkX1aNBDfsxdLAdDxyBsHJlMy2sep3vJdv1_7MLnLp4NK7MJPD1xXmq5eQn7CdWDV6aNN_A08R7wN0FSXWO2Hv9YgmlFNR5yYUE02wf57AoeYt4/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/AVvXsEhsRFCey-Tq2SWJWhnrheCC_s7jGgctEtSLpyNidkmw_v4GbPNDsITBEOjDy6OtWTxe0sdssWS52dg_HB1So5vyUBz5q1tI3YeRbEU4JXcGBK5qY9C2jA5BYhp1esr0GZAdyXuUVJ_LmXI/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/AVvXsEhIpSPPqRJoBiqNt9JB0Hxynpjd-cYqvZjlRWUIxo7LLVI9q240UJVf8ytYYof247y2P7v7qNCHKdmbhgKpXBYexT4hPRlDbOt4J3wuK_hCb81ugWHgFXyQ1ar4yRfC9qHUV1SW-m_JXig/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/AVvXsEh8dYnyfPKJxPpiQj-3VE_sleMAwma5O9TuF8JqPtrKH8Y8o_KxIuT9GepcqNfF19uZRQ1JqNVaILye615htOMAQFqmIMT5MOnOXIQo6PVe2IhVAwVfkL44XQcTmGOQJMt8tvVkT543CJA/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/AVvXsEgVV8KSrsNct7U098YmZNHJ6nUL5XQgwRAb88uGeSD-vuvC9yGhearrKe_xAvq2-7P0fgdDl3XspNFzcNv0JENAhAEnBme7KWWFDAOiY5KGT4JInKC6hOsaa6wlOrLewwHI1UyusyD3iMk/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/AVvXsEj_JWq5ypru2TPfeCSo0vPMs1ZOaFgYZWt5xDlFsMLCxo8pLjdpHrXHifiySe7NpvTaHlCy3sOhQhtCgfBE5kJ5xgcQHmn7zFt7aYV25KsPGVILo8XZpDlQihdpy0y2XQ7fr2rYVv2AIb4/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/AVvXsEgVV8KSrsNct7U098YmZNHJ6nUL5XQgwRAb88uGeSD-vuvC9yGhearrKe_xAvq2-7P0fgdDl3XspNFzcNv0JENAhAEnBme7KWWFDAOiY5KGT4JInKC6hOsaa6wlOrLewwHI1UyusyD3iMk/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/AVvXsEhWeTGGWTDkOibfvKtCb8q3Vbb-onfPOl-7UMHDeN6SU5QM_S2UYmbws3N5I5eGKmY5LunVl05jBNNPnij06gzLoI1rtwV0_Lciu-Sv6IKjExi-ayZXgcxH_7n0qYMMbDd6HnJshgYJnQs/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/AVvXsEjvQdMZ5Cve9VlfFOmKJr-tbVHlIwJSEkX1aNBDfsxdLAdDxyBsHJlMy2sep3vJdv1_7MLnLp4NK7MJPD1xXmq5eQn7CdWDV6aNN_A08R7wN0FSXWO2Hv9YgmlFNR5yYUE02wf57AoeYt4/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/AVvXsEhsRFCey-Tq2SWJWhnrheCC_s7jGgctEtSLpyNidkmw_v4GbPNDsITBEOjDy6OtWTxe0sdssWS52dg_HB1So5vyUBz5q1tI3YeRbEU4JXcGBK5qY9C2jA5BYhp1esr0GZAdyXuUVJ_LmXI/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/AVvXsEhIpSPPqRJoBiqNt9JB0Hxynpjd-cYqvZjlRWUIxo7LLVI9q240UJVf8ytYYof247y2P7v7qNCHKdmbhgKpXBYexT4hPRlDbOt4J3wuK_hCb81ugWHgFXyQ1ar4yRfC9qHUV1SW-m_JXig/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/AVvXsEh8dYnyfPKJxPpiQj-3VE_sleMAwma5O9TuF8JqPtrKH8Y8o_KxIuT9GepcqNfF19uZRQ1JqNVaILye615htOMAQFqmIMT5MOnOXIQo6PVe2IhVAwVfkL44XQcTmGOQJMt8tvVkT543CJA/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/AVvXsEgVV8KSrsNct7U098YmZNHJ6nUL5XQgwRAb88uGeSD-vuvC9yGhearrKe_xAvq2-7P0fgdDl3XspNFzcNv0JENAhAEnBme7KWWFDAOiY5KGT4JInKC6hOsaa6wlOrLewwHI1UyusyD3iMk/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/AVvXsEj_JWq5ypru2TPfeCSo0vPMs1ZOaFgYZWt5xDlFsMLCxo8pLjdpHrXHifiySe7NpvTaHlCy3sOhQhtCgfBE5kJ5xgcQHmn7zFt7aYV25KsPGVILo8XZpDlQihdpy0y2XQ7fr2rYVv2AIb4/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/AVvXsEgVV8KSrsNct7U098YmZNHJ6nUL5XQgwRAb88uGeSD-vuvC9yGhearrKe_xAvq2-7P0fgdDl3XspNFzcNv0JENAhAEnBme7KWWFDAOiY5KGT4JInKC6hOsaa6wlOrLewwHI1UyusyD3iMk/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/AVvXsEhWeTGGWTDkOibfvKtCb8q3Vbb-onfPOl-7UMHDeN6SU5QM_S2UYmbws3N5I5eGKmY5LunVl05jBNNPnij06gzLoI1rtwV0_Lciu-Sv6IKjExi-ayZXgcxH_7n0qYMMbDd6HnJshgYJnQs/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
انتهى
تعليقات
إرسال تعليق