شريط الصور المتحركة لتدوينات |
معاينة |
ثم ضع الكود التالي فوقه :]]></b:skin>
لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9DaqcRGSCQ01gOrfNDapf1-PwXHCCy0GrUTRuBDxjPGK6jd8sfrGhbTgzdvwAz8w__vyreHGe7mqElQlV02z7jzkhRl0IMVv9xI0skdfwd5mrCNEkkxRwSHRsnpUGJ5o1jdbkhvWo3w/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
والآن قم بالبحث عن الكود التالي:
ثم ضع الكود التالي فوقه :</head>
الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين<!-- JavaScript Slider -->
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>
<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCiDC3IOGk9uA8drApD23vxnn9VVUIOf_RIsXk-kMVlAukLH0E07U1JkU0TNPiWY35dG0pE5AEaT0PWT3PNg_r3ZymYwenpMOBk8ga6gSxj1mqUCcpM-dqLwJYNk4f033e70fmcrRpS4/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC-W0Uy19RA8IbpgTCJtjaNZoap_Bpcr5_RgrfamCEjoy-h6QenAFzcvb4TDo25iyQAANU_TvDEgvdTHyQCfx84SridE6Yy9NAEyqMUsNy8-8VtkVzFTvgpGtBMeQRNRHZ3lSOlMTI3Z4/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
Speed:1500 : سرعة تحرك الصور
moveby:1 : عدد الصور التي يتخطاها عند تحرك الصور
هذه القيم يمكنك تغييرها حسب رغبتك
قم بحفظ القالب ثم انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 2nd -->
<!-- 3th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 3th -->
<!-- 4th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 4th -->
<!--5th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 5th -->
<!--6th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 6th -->
<!--7th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of 7th -->
<!--8th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYREEoniZmGdJccw0MaS5unkPmpC2x6EVgZJdfJW4Ql3gJscZKdWSFFIuysJBdopRR1c2Fl2GqL0X62ZfNnwqhok5PfS4KQwb8Ne1lWeGhs0HLplUXXucSwSxOzyhAYQjSFc3a9GiFd8/s320/httptop-new-now.blogspot.com.jpg" height="110" /> </a>
</div>
<!-- end code of 8th -->
<!--9th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYREEoniZmGdJccw0MaS5unkPmpC2x6EVgZJdfJW4Ql3gJscZKdWSFFIuysJBdopRR1c2Fl2GqL0X62ZfNnwqhok5PfS4KQwb8Ne1lWeGhs0HLplUXXucSwSxOzyhAYQjSFc3a9GiFd8/s320/httptop-new-now.blogspot.com.jpg" height="110" /> </a>
</div>
<!-- end code of 9th -->
<!--10th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYREEoniZmGdJccw0MaS5unkPmpC2x6EVgZJdfJW4Ql3gJscZKdWSFFIuysJBdopRR1c2Fl2GqL0X62ZfNnwqhok5PfS4KQwb8Ne1lWeGhs0HLplUXXucSwSxOzyhAYQjSFc3a9GiFd8/s320/httptop-new-now.blogspot.com.jpg" height="110" /> </a>
</div>
<!-- end code of10th -->
<!--11th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/search/label/news" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUrin1xozPLHMoim1EDnZovay7yEPinV02ncwB08LmCqkxmMQ5tdgWu80wS2aO9VLsU9v_bQsy2MvBpKHmkh3x__wVmzirpu_w4GDxdhar9W-MQNhLjoeWT91sOs7YrAkjhMtSrm9hz4/s320/news.jpg" height="110" /> </a>
</div>
<!-- end code of11th -->
<!--12th Template -->
<div class="panel">
<a href="http://top-new-now.blogspot.com/2011/11/top-new-nowblogspotcom.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-4Wu7dgwHhQsKsOG4XDMdFDcOJiU7RDHygMDtVizA1PPjIvdVZkOqxZ_8TVgNaXrGY5YJiNrs9LNEV_pzDc7stKU-bhokGrVijNVSVwoE5kIuEUoRkGqbGhGgACW4236ZskgwmQQ7Gc/s320/%25D9%2585%25D9%2586%25D8%25A8%25D8%25B9+%25D8%25A7%25D9%2584%25D9%2585%25D8%25B9%25D8%25B1%25D9%2581%25D8%25A9.jpg" height="110" /> </a>
</div>
<!-- end code of 12th -->
</div></div></div>
وأخيرا قم بتبديل الروابط ذات اللون الاحمر بروابط مدونتك والروابط ذات اللون الازرق بروابط الصور
0 Comments:
إرسال تعليق