آخر المقالات

السبت، 19 سبتمبر، 2015

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

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

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

الان للشرح:

معاينة الاضافة
  • أدخل على بلوجر ثم قالب ثم تحرير 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]

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

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



[code type="كود html من مدونة البروفيسور الصغير"]











Pause
Play


  • A Bubble on Flower

    slide 1

  • A Small Elephant

    slide 2

  • A yellow Flower

    slide 3

  • A Pink Flower

    slide 4

  • A Bubble on Flower

    slide 5


[/code]

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

ليست هناك تعليقات:

إرسال تعليق

المتابعون

المشاركات الشائعة

قوالب مميزة

قالب بساطة تكويد : البروفيسور الصغير