السلام عليكم ورحمة الله وبركاته .
في درسنا اليوم سوف نتعرف على طريقة إضافة سلايد شو ذاتي التحكم لمدونات بلوجر ، سلايد شو في قمة الإحترافية يضفي على مدونتك لمسة أحترافية جمالية .
طريقة التركيب :
2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML
4- اضف الكود التالي فوقه .
/* ================= Supported layout/pattern: ================= */
/* -------- [1]. CSS Compressor -------- */
/* a. Normal */
#foo{margin:0;padding:0} /* comment */
#foo:focus{outline:none}
/* b. Strip all comments */
#foo{margin:0;padding:0}
#foo:focus{outline:none}
/* c. Super compact */
#foo{margin:0;padding:0}#foo:focus{outline:none}
/* d. Keep indentation inside `@query {}` */
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
@media screen and (max-width:400px){
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
}
/* -------- [2]. CSS Beautifier -------- */
/* a. Normal */
#foo {
margin:0;
padding:0;
}
#foo:focus {
outline:none;
}
/* b. Replace double space indentation with a tab character or 4 spaces */
#tab-character {
margin:0;
padding:0;
}
#four-space {
outline:none;
}
/* c. Break multiple selector */
#foo,
#bar,
.walaaa {
margin:0;
padding:0;
}
/* d. Space after `:` and `,` */
#foo {
margin: 0 auto;
background-image: linear-gradient(top, #333, #555);
color: rgba(0, 0, 0, .4);
}
/* e. Inline bracket for single property */
#foo .bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('img/bg-image.png') no-repeat 0 0;
}
#foo .bg-1 {background-position:0 0;}
#foo .bg-2 {background-position:100% 0;}
#foo .bg-3 {background-position:100% 100%;}
#foo .bg-4 {background-position:0 100%;}
/* f. Remove the last semicolon in single property */
#foo .bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('img/bg-image.png') no-repeat 0 0;
}
#foo .bg-1 {background-position:0 0}
#foo .bg-2 {background-position:100% 0}
#foo .bg-3 {background-position:100% 100%}
#foo .bg-4 {background-position:0 100%}
/* g. Inline layout mode */
#foo .bg { position:absolute; top:0; right:0; bottom:0; left:0; background:white url('img/bg-image.png') no-repeat 0 0; }
/*CONTAINER*/
.cont { margin:20px auto; display:block; width:60%; height:40%; border:solid 2px #e0e0e0; overflow:hidden; }
img { width:25%; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; display:inline-block; float:left; margin:0; padding:0; }
.image { display:block; width:400%; height:40%; }
/*BUTTON PLAY&STOP*/
.menu { position:absolute; width:94px; height:30px; margin:2px; z-index:1; }
.tooltip { width:80px; height:40px; margin-top:-34px; margin-left:-94px; display:inline-block; float:left; border-radius:2px; background:#fff; z-index:-10; opacity:.8; -webkit-animation:tool ease-in 16s; -webkit-animation-fill-mode:forwards; animation:tool ease-in 16s; animation-fill-mode:forwards; }
.tooltip > p { font-size:1em; font-weight:bolder; color:#F00; }
.tooltip:after { content:""; position:absolute; width:0; height:0; border-top:5px solid transparent; border-left:10px solid #fff; border-bottom:5px solid transparent; margin:-24px 40px; }
.hideStop,.hidePlay,.hidePause { width:30px; height:30px; margin-top:-30px; border-radius:15px; display:inline-block; float:left; z-index:999; opacity:.3; }
.hideStop { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePlay { margin-left:32px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePause { margin-left:64px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; }
.butPlay,.butStop,.butPause { width:30px; height:30px; border-radius:15px; z-index:2; margin-left:2px; background:rgba(75,78,67,.6); display:inline-block; float:left; }
.butPlay { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butStop { margin-left:0; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPause { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPlay:hover { background:transparent url(http://s45.radikal.ru/i109/1310/98/4834faaaa287.png) 0 0 no-repeat; background-size:100%; }
.butStop:hover { background:transparent url(http://i021.radikal.ru/1310/2f/d8b2c38314ff.png) 0 0 no-repeat; background-size:100%; }
.butPause:hover { background:transparent url(http://s019.radikal.ru/i621/1310/ed/b9bfce7c1a1a.png) 0 0 no-repeat; background-size:100%; }
/*BOTTOM LINE*/
.aline { position:absolute; visibility:hidden; width:60%; height:10px; }
.line { position:absolute; height:10px; background:#222; opacity:.3; z-index:1; }
.aline > .bord { display:inline-block; float:left; width:25%; height:10px; border-bottom:2px solid #e0e0e0; }
.bord > span { width:2px; height:10px; display:inline-block; float:right; background-color:#e0e0e0; }
.bord:last-child > span { width:0; height:0; }
/*PAGGINATION*/
.but { position:relative; width:100%; height:20px; margin-top:-21px; float:left; text-align:center; z-index:100; }
.select_but { display:inline-block; width:16px; height:16px; border-radius:8px; background:rgba(0,0,0,.8); z-index:5; }
.select_but > div { width:10px; height:10px; border-radius:5px; background:#fff; margin:3px; display:none; }
.select_but:hover { background:rgba(255,255,255,.6); cursor:pointer; }
/*SLIDE MANAGE*/
.right,.left { width:64px; height:64px; margin-top:15%; display:inline-block; opacity:.9; cursor:pointer; }
.left { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/leftarrow.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-left:12%; float:left; }
.right { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/monotone_arrow_right.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-right:12%; float:right; }
.right:hover { background-color:#68D9EE; -webkit-animation:anim-right ease .3s; animation:anim-right ease .5s; }
.left:hover { background-color:#68D9EE; -webkit-animation:anim-left ease .5s; animation:anim-left ease .5s; }
.int { display:none; }
/*INPUT PLAY&STOP&PAUSE CHECKED*/
#play:checked ~ .brain .cont .menu { margin-top:16px; }
#play:checked ~ .brain .cont .menu .hidePause { visibility:hidden; }
#play:checked ~ .brain .cont .menu .butPlay { visibility:hidden; }
#play:checked ~ .brain .cont .menu .hidePlay { visibility:visible; }
#play:checked ~ .brain .cont .aline { visibility:visible; }
#play:checked ~ .brain .cont .but .select_but > div { display:block; }
#play:checked ~ .brain .cont .aline .line { -webkit-animation:linew 16s ease-out infinite; animation:linew 16s ease-out infinite; }
#play:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; }
#play:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; }
#play:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; }
#play:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; }
#play:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; }
#stop:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .butStop { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .hideStop { visibility:visible; }
/*#stop:checked ~ .brain .cont .aline .line { width:0; -webkit-animation:none; animation:none; }
*/
#pause:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#pause:checked ~ .brain .cont .but .select_but > div { display:block; }
#pause:checked ~ .brain .cont .aline { visibility:visible; }
#pause:checked ~ .brain .cont .menu { margin-top:16px; }
#pause:checked ~ .brain .cont .line { -webkit-animation:linew 16s linear infinite; animation:linew 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .cont .but .select1 > div { display:block; }
#slide1:checked ~ .brain .manage_one { display:inline-block; }
#slide2:checked ~ .brain .cont .image { margin-left:-100%; }
#slide2:checked ~ .brain .manage_two { display:inline-block; }
#slide2:checked ~ .brain .cont .but .select2 > div { display:block; }
#slide3:checked ~ .brain .cont .image { margin-left:-200%; }
#slide3:checked ~ .brain .manage_tre { display:inline-block; }
#slide3:checked ~ .brain .cont .but .select3 > div { display:block; }
#slide4:checked ~ .brain .cont .image { margin-left:-300%; }
#slide4:checked ~ .brain .manage_for { display:inline-block; }
#slide4:checked ~ .brain .cont .but .select4 > div { display:block; }
/*ANIMATION*/
@-webkit-keyframes tool {
0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
@keyframes tool {
0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
/*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew {
0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@-webkit-keyframes alls {
0% { margin-left:0; } 23% { margin-left:0; -webkit-filter:blur(0px); } 24% { -webkit-filter:blur(10px); } 25% { margin-left:-100%; -webkit-filter:blur(0px); } 48% { margin-left:-100%; -webkit-filter:blur(0px); } 49% { -webkit-filter:blur(10px); } 50% { margin-left:-200%; -webkit-filter:blur(0px); } 73% { margin-left:-200%; -webkit-filter:blur(0px); } 74% { -webkit-filter:blur(10px); } 75% { margin-left:-300%; -webkit-filter:blur(0px); } 98% { margin-left:-300%; -webkit-filter:blur(0px); } 99% { -webkit-filter:blur(10px); } 100% { margin-left:0; -webkit-filter:blur(0px); }
}
/*ANIMATION PAGINATION*/
@-webkit-keyframes sel1 {
0% { opacity:1; } 24.9% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel2 {
0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; } 49.9% { opacity:1; } 50% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel3 {
0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; } 74.9% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel4 {
0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; } 99.9% { opacity:1; } 100% { opacity:0; }
}
/*ANIMATION MANAGE*/
@-webkit-keyframes anim-right {
0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@-webkit-keyframes anim-left {
0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
@keyframes linew {
0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@keyframes alls {
0% { margin-left:0; } 23% { margin-left:0; } 25% { margin-left:-100%; } 48% { margin-left:-100%; } 50% { margin-left:-200%; } 73% { margin-left:-200%; } 75% { margin-left:-300%; } 98% { margin-left:-300%; } 100% { margin-left:0; }
}
@keyframes sel1 {
0% { opacity:1; width:10px; height:10px; border-radius:5px; } 24.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 25% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel2 {
0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; width:10px; height:10px; border-radius:5px; } 49.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 50% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel3 {
0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; width:10px; height:10px; border-radius:5px; } 74.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 75% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel4 {
0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; width:10px; height:10px; border-radius:5px; } 99.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 100% { opacity:0; }
}
@keyframes anim-right {
0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@keyframes anim-left {
0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
/*TRANSITION*/
.image,.menu { -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; }
.int { -webkit-transition:background-color 300ms ease-in-out; -moz-transition:background-color 300ms ease-in-out; -ms-transition:background-color 300ms ease-in-out; -o-transition:background-color 300ms ease-in-out; transition:background-color 300ms ease-in-out; }
@media screen and (max-width:900px) {
.right,.left { width:50px; height:50px; }
}
@media screen and (max-width:700px) {
.right,.left { width:30px; height:30px; }
}
@media screen and (max-width:430px) {
.right,.left { width:20px; height:20px; } .icon > img { width:34px; height:34px; }
}
input { display:none; }
p { font-family:Calibri; text-align:center; font-size:.8em; }
a { color:#FC8570; font-weight:bold; text-decoration:none; }
strong { color:#FFE000; }
.wrapper { height:100%; width:100%; }
.brain { text-align:center; margin:0 auto; } 5- بعد ذلك اذهب إلى تخطيط ثم أختر إضافة أداة :
6- اضف الكود التالي في صندوق الأداة ثم احفظ .
<div class="out-wrapper">
<div class="wrapper">
<!-- INPUT FOR BUTTON SELECT SLIDE -->
<input type="radio" name="next" id="slide1" checked>
<input type="radio" name="next" id="slide2">
<input type="radio" name="next" id="slide3">
<input type="radio" name="next" id="slide4">
<!-- INPUT FOR BUTTON STOP&PLAY -->
<input type="radio" name="sto" id="play">
<input type="radio" name="sto" id="stop" checked>
<input type="radio" name="sto" id="pause">
<div class="brain">
<label for="slide4" class="int manage_one left"></label>
<label for="slide2" class="int manage_one right"></label>
<label for="slide1" class="int manage_two left"></label>
<label for="slide3" class="int manage_two right"></label>
<label for="slide2" class="int manage_tre left"></label>
<label for="slide4" class="int manage_tre right"></label>
<label for="slide3" class="int manage_for left"></label>
<label for="slide1" class="int manage_for right"></label>
<!-- CONTAINER -->
<div class="cont">
<!-- BUTTON PLAY&STOP -->
<div class="menu">
<label for="stop" class="butStop" onclick=""></label>
<label for="play" class="butPlay" onclick=""></label>
<label for="pause" class="butPause" onclick=""></label>
<span class="hideStop"></span>
<span class="hidePlay"></span>
<span class="hidePause"></span>
<span class="tooltip"><p>أزرار التحكم!</p></span>
</div>
<!-- IMAGE -->
<div class="image">
<img src="ضع رابط الصورة هنا" class="oneP" alt="Flash">
<img src="ضع رابط الصورة هنا" class="twoP" alt="Superman">
<img src="ضع رابط الصورة هنا" class="threeP" alt="Team">
<img src="ضع رابط الصورة هنا" class="fourP" alt="Joker">
</div>
<!-- ANIMATION LINE -->
<div class="aline">
<div class="line"></div>
<div class="bord"><span></span></div>
<div class="bord"><span></span></div>
<div class="bord"><span></span></div>
<div class="bord"><span></span></div>
</div>
<!-- BOTTOM LINE -->
<div class="but">
<label for="slide1" class="select_but select1" onclick=""><div></div></label>
<label for="slide2" class="select_but select2" onclick=""><div></div></label>
<label for="slide3" class="select_but select3" onclick=""><div></div></label>
<label for="slide4" class="select_but select4" onclick=""><div></div></label>
</div>
</div>
</div>
</div>
</div> 
:) :) :)
ردحذفللمزيد إدهب إلى http://www.profexplain.com/
ردحذف