سلايدر شو يدوى أحترافى لعرض الصور

أهلا بكم أعزائى الاحباء فى هذه الاضافة الجميلة وهى عبارة عن سلايدر شو أحترافى لعرض الصور طريقة عمله تضع روابط الصور يدويا على الاكواد ثم يعمل تلقائيا لعرض الصور.

الان للشرح:

معاينة الاضافة

أدخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة

ثم أنسخ هذا الكود فوقها

[code type="هذا الكود من مدونة البروفيسور الصغير"]@import url('reset.css');
/* General Demo Style */

.container{
position:relative;
}
a{
color: #fff;
text-decoration: none;
}
.clr{
clear: both;
}
.main{
position:relative;
width:680px;
margin: 0 auto;
}
h1{
margin:0px;
padding:20px 20px 10px 20px;
font-size:34px;
color:#333;
text-shadow:1px 1px 1px #fff;
text-align:left;
font-weight:400;
text-align:center;
}
h1 span{
display:block;
font-size: 14px;
font-family: Georgia, serif;
font-style: italic;
color:#b2891b;
padding-top:10px;
}
/* Header Style */
.header{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.header a:hover{
color: #fff;
}
.header span.right{
float: right;
}
.header span.right a{
float: none;
display: inline;
}

.more{
position:relative;
clear:both;
font-family:'Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size: 11px;
padding: 5px 0px 10px;
width: 540px;
margin: 0 auto;
}
.more ul{
display:block;
text-align:center;
height: 30px;
}
.more ul li{
display: block;
padding: 4px 2px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#b2891b;
color:#fff;
text-shadow:none;
}
@charset "UTF-8";

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
}

article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
display:block;
}
table{
border-collapse:collapse;
border-spacing:0;
}
strong,b,mark{
font-weight:bold;
font-style:inherit;
}
em,i,cite,q,address,dfn,var{
font-style:italic;
font-weight:inherit;
}
abbr[title],dfn[title]{
cursor:help;
border-bottom:1px dotted;
}
ins{
border-bottom:1px solid;
}
a,u,ins{
text-decoration:none;
}
del,s{
text-decoration:line-through;
}
pre,code,samp,kbd{
font-family:monospace;
}
small{
font-size:0.75em;
}
img{
border:none;
font-style:italic;
}
input,
select,option,optgroup,
textarea{
font:inherit;
}

h1,p,
.slider{
margin-bottom:24px;
margin-bottom:2rem;
}

html{
font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
color:#333;
padding:5% 25% 5% 5%;
overflow:hidden;
}

body {width: 100%;
margin: -6% 20% 0% 15%;}

small{
color:#999;
}
a{
color:#09f;
}

.slider{
overflow:hidden;
width:100%;
position:relative;
}
.panes{
list-style:none;
position:relative;
width:500%;
overflow:hidden;

-webkit-transform: translateZ(0);
-webkit-animation: slider 20s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
-moz-animation: slider 20s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
-ms-animation: slider 20s cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite;
-o-animation: slider 20s cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite;
animation: slider 20s cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite; /* easeInOutQuart */

-webkit-animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
-moz-animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite;
-ms-animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite;
-o-animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite;
animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)infinite; /* easeInOutQuart */

}
.panes > li{
position:relative;
float:left;
width:20%; /* 100 / number of panes */
}
.panes > li > a{
display:block;
}
.slider img{
display:block;
width:100%;
max-width:100%;
}
.slider h2{
font-family: 'Open Sans',Arial,Helvetica,sans-serif;

font-size:1.3em;
padding:0.5em;
position:absolute;
left:10px;
bottom:10px;
left:10px;
text-align:left;
color:#fff;
background-color:rgba(0,0,0,0.75);
}

@-moz-keyframes slider{
0%, 15%,100% { left: 0 }
20%, 35% { left: -100% }
40%, 55% { left: -200% }
60%, 75% { left: -300% }
80%, 95% { left: -400% }
}

@-webkit-keyframes slider{
0%, 15%,100% { left: 0 }
20%, 35% { left: -100% }
40%, 55% { left: -200% }
60%, 75% { left: -300% }
80%, 95% { left: -400% }
}

@keyframes slider{
0%, 15%,100% { left: 0 }
20%, 35% { left: -100% }
40%, 55% { left: -200% }
60%, 75% { left: -300% }
80%, 95% { left: -400% }
}

/* play/pause commands */

.play_commands {
position: absolute;
width: 22px; height: 22px;
top: 25px; right: 25px;
z-index: 10;
text-indent: -9999px;
border:0 none;
opacity: 0;

-webkit-transition: opacity 1s, right 1s;
-moz-transition: opacity 1s, right 1s;
transition: opacity 1s, right 1s;
}
.play { right: 55px; cursor: default; }

.slider:hover { border:0 none; }
.play_commands:focus { outline:0; }

.slider:hover .pause,
#sl_play:target ~ .slider:hover .pause,
.play_commands:focus{
opacity: 1;
}
.sl_command:target ~ .slider:hover .pause,
#sl_pause:target ~ .slider:hover .pause {
opacity: 0;
}
.pause:after,
.pause:before {
position: absolute;
display: block;
content: " ";
top:0;
width:38%;
height: 22px;
background: #fff;
background: rgba(255,255,255,0.5);
}
.pause:after {
right:0;
}
.pause:before {
left:0;
}
.play {
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 20px solid #fff;
border-left: 20px solid rgba(255,255,255,0.5);
border-bottom: 10px solid transparent;
opacity: 0;
}
.play:hover,
.play:focus {
border-bottom: 10px solid transparent;
}

.sl_command { display: none; }
.sl_command:target ~ .slider .panes,
.sl_command:target ~ .slider .dots_commands li:first-child a:after
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}

#sl_play:target ~ .slider .panes,
#sl_play:target ~ .slider .dots_commands li:first-child a:after
{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
.sl_command:target ~ .slider .pause { opacity:0; }
.sl_command:target ~ .slider .play { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ .slider .pause { opacity:0; }
#sl_play:target ~ .slider .play { opacity:0; right: 55px; cursor: default;}

/* for navigation dots styles */

.dots_commands {
position: relative;
top: -32px;
padding:0; margin:0;
text-align:center;

}
.dots_commands li {
display:inline;
padding:0; margin:0;
list-style:none;
}
.dots_commands a {
position: relative;
display:inline-block;
height:12px; width: 12px;
margin: 0 3px;
text-indent: -9999px;
background: #000;
border-bottom:0;
opacity:0.7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

z-index:25;
}
.dots_commands li + li a {
z-index:10;
}
@-moz-keyframes dotser {
0%, 100% { opacity: 1; left: 0; }

15% { opacity: 1; left: 0; }
17% { opacity: 0; left: 0; }
18% { opacity: 0; left: 18px; }
20% { opacity: 1; left: 18px; }

35% { opacity: 1; left: 18px; }
37% { opacity: 0; left: 18px; }
38% { opacity: 0; left: 36px; }
40% { opacity: 1; left: 36px; }

55% { opacity: 1; left: 36px; }
57% { opacity: 0; left: 36px; }
58% { opacity: 0; left: 54px; }
60% { opacity: 1; left: 54px; }

75% { opacity: 1; left: 54px; }
77% { opacity: 0; left: 54px; }
78% { opacity: 0; left: 72px; }
80% { opacity: 1; left: 72px; }

95% { opacity: 1; left: 72px; }
97% { opacity: 0; left: 72px; }
98% { opacity: 0; left: 0; }
}
@-webkit-keyframes dotser {
0%, 100% { opacity: 1; left: 0; }

15% { opacity: 1; left: 0; }
17% { opacity: 0; left: 0; }
18% { opacity: 0; left: 18px; }
20% { opacity: 1; left: 18px; }

35% { opacity: 1; left: 18px; }
37% { opacity: 0; left: 18px; }
38% { opacity: 0; left: 36px; }
40% { opacity: 1; left: 36px; }

55% { opacity: 1; left: 36px; }
57% { opacity: 0; left: 36px; }
58% { opacity: 0; left: 54px; }
60% { opacity: 1; left: 54px; }

75% { opacity: 1; left: 54px; }
77% { opacity: 0; left: 54px; }
78% { opacity: 0; left: 72px; }
80% { opacity: 1; left: 72px; }

95% { opacity: 1; left: 72px; }
97% { opacity: 0; left: 72px; }
98% { opacity: 0; left: 0; }

}
@keyframes dotser {
0%, 100% { opacity: 1; left: 0; }

15% { opacity: 1; left: 0; }
17% { opacity: 0; left: 0; }
18% { opacity: 0; left: 18px; }
20% { opacity: 1; left: 18px; }

35% { opacity: 1; left: 18px; }
37% { opacity: 0; left: 18px; }
38% { opacity: 0; left: 36px; }
40% { opacity: 1; left: 36px; }

55% { opacity: 1; left: 36px; }
57% { opacity: 0; left: 36px; }
58% { opacity: 0; left: 54px; }
60% { opacity: 1; left: 54px; }

75% { opacity: 1; left: 54px; }
77% { opacity: 0; left: 54px; }
78% { opacity: 0; left: 72px; }
80% { opacity: 1; left: 72px; }

95% { opacity: 1; left: 72px; }
97% { opacity: 0; left: 72px; }
98% { opacity: 0; left: 0; }
}
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
position: absolute;
top: 0; left: 0;
content: " ";
width: 9px; height: 9px;
background: #ccc;
z-index:20;
border: 2px solid #000;
opacity: 0.7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
.dots_commands li:first-child a:after {
-webkit-animation: dotser 20s infinite;
-moz-animation: dotser 20s infinite;
animation: dotser 20s infinite;
}
.dots_commands li:first-child a:before {
display:none;
}

.more ul li a{
color:#555;
float:left;
background:#fff;
width:40px;
padding: 2px 5px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}[/code]

ثم أحفظ القالب وأذهب الى التخطيط ثم أختار المكان التى تريد فيه الاضافة ثم أختار تحرير ثم