بسم الله و الحمد لله و الصلاة و السلام على رسول الله.
مرحبا بكم في درس جديد وسريع من دروس بلوجر، والذي سنشرح فيه باذن الله طريقة تركيب سلايد شو احترافي وجميل لعرض اخر المواضيع.
طريقة التركيب سهلة، لانك لن تحتاج حذف اي كود من القالب، فقط يكفيك تطبيق بعض الخطوات البسيطة ويكون السلايد شو جاهز لعرض اخر مواضيع مدونتك.
لتركيب السلايد شو نذهب الى تخطيط ثم اضافة اداة ثم قم بوضع الكود التالي داخله، لكن قبل حفظ التغيرات قم بتغير المشار اليه بالالوان كالتالي.
رابط الصورة
رابط الصورة
وصف الموضوع
عنوان الموضوع
رابط الموضوع
بعد ذالك قم بتغيير كل ما تجده ب 300 الى الطول التي تريده.
ونفس الطريقة قم بتغيير كل ما تجده ب 600 الى العرض الذي تريده.
عنوان الموضوع
رابط الموضوع
بعد ذالك قم بتغيير كل ما تجده ب 300 الى الطول التي تريده.
ونفس الطريقة قم بتغيير كل ما تجده ب 600 الى العرض الذي تريده.
<!-- Development by : mobdi3explain.blogspot.com -->
<div id="templateify"> <nav class="templateifynav">
<ul>
<li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure><a href="#"><img src="رابط الصورة الأولى"/></a> <figcaption> <h4>عنوان 1</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption> </figure> </li>
<li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure><a href="#"><img src="رابط الصورة الثانية"/></a> <figcaption> <h4>عنوان 2</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption> </figure> </li>
<li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure><a href="#"><img src="رابط الصورة الثالثة"/></a> <figcaption> <h4>عنوان 3</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption> </figure> </li>
<li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure><a href="#"><img src="رابط الصورة الرابعة"/></a> <figcaption> <h4>عنوان 4</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption> </figure> </li>
<li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure><a href="#"><img src="رابط الصورة الخامسة"/></a> <figcaption> <h4>عنوان 5</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption> </figure> </li>
<li> <input type="radio" name="btn" value="six"/> <label for="btn"></label> <figure class="entypo-forward"><a href="#"><img src="رابط الصورة السادسة"/></a> <figcaption> <h4>عنوان6</h4> <nav role='navigation'> <p>وصف الموضوع </p> </nav> </figcaption></figure></li></ul></nav></div>
<style>
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300); @import url(http://weloveiconfonts.com/api/?family=entypo);
*,*:before,*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#templateify {
position: relative;
width: 600px;
height: 300px;
margin: 0 auto;
top: 100px;
background: white;
-webkit-box-shadow: 0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#templateify:after {
content: '';
position: absolute;
bottom: 24px;
right: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255,255,255,0.35);
z-index: 3;
}
#templateify ul {
list-style-type: none;
}
input[type="radio"],input[type="radio"] + label {
position: absolute;
bottom: 15px;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
}
input[type="radio"] {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 9;
}
input[value="one"],input[value="one"] + label {
left: 20px;
}
input[value="two"],input[value="two"] + label {
left: 128px;
}
input[value="three"],input[value="three"] + label {
left: 236px;
}
input[value="four"],input[value="four"] + label {
left: 344px;
}
input[value="five"],input[value="five"] + label {
left: 452px;
}
input[value="six"],input[value="six"] + label {
right: 20px;
}
input[type="radio"] + label {
background: rgba(255,255,255,0.35);
z-index: 7;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.15);
box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.15);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
[class*="entypo-"]:before {
position: absolute;
font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
left: 10px;
top: 5px;
font-size: 2rem;
color: rgba(255,255,255,0);
z-index: 1;
-webkit-transition: color .1s;
-moz-transition: color .1s;
-o-transition: color .1s;
-ms-transition: color .1s;
transition: color .1s;
}
a[class*="entypo-"]:before {
top: 8px;
left: 9px;
font-size: 1.5rem;
color: white;
}
a:hover[class*="entypo-"]:before {
color: white;
}
figure,figure img,figcaption {
position: absolute;
top: 0;
right: 0;
}
figure {
bottom: 0;
left: 0;
width: 600px;
height: 300px;
display: block;
overflow: hidden;
}
figure img {
bottom: 0;
left: 0;
display: block;
width: 600px;
height: 300px;
z-index: 1;
-webkit-transform: translateX(600px);
-moz-transform: translateX(600px);
-o-transform: translateX(600px);
-ms-transform: translateX(600px);
transform: translateX(600px);
-webkit-transition: all .15s .15s, z-index 0s;
-moz-transition: all .15s .15s, z-index 0s;
-o-transition: all .15s .15s, z-index 0s;
-ms-transition: all .15s .15s, z-index 0s;
transition: all .15s .15s, z-index 0s;
}
figcaption {
display: block;
width: 270px;
height: 300px;
padding-top: 20px;
background-image: -webkit-radial-gradient(rgba( 255,255,255,0.3), transparent);
background-image: -moz-radial-gradient(rgba( 255,255,255,0.3), transparent);
background-image: -o-radial-gradient(rgba( 255,255,255,0.3), transparent);
background-image: -ms-radial-gradient(rgba( 255,255,255,0.3), transparent);
background-image: radial-gradient(rgba( 255,255,255,0.3), transparent);
-webkit-background-size: 600px 600px;
-moz-background-size: 600px 600px;
background-size: 600px 600px;
background-repeat: no-repeat;
background-position: -300px -150px;
text-align: center;
z-index: 3;
-webkit-box-shadow: -5px 0px 20px rgba(0,0,0,0.1);
box-shadow: -5px 0px 20px rgba(0,0,0,0.1);
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
h4 {
display: inline-block;
padding: 0 15px;
color: white;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
font-size: 2rem;
}
figcaption nav ul {
display: block;
padding-top: 10px;
}
figcaption nav ul li {
display: inline-block;
margin-left: 5px;
}
figcaption nav ul li a {
position: relative;
display: block;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.2);
text-decoration: none;
color: white;
border-radius: 50%;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0);
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0);
-webkit-transition: all .15s;
-moz-transition: all .15s;
-o-transition: all .15s;
-ms-transition: all .15s;
transition: all .15s;
}
figcaption nav ul li a:hover {
background: rgba(255,255,255,0);
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,1);
box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,1);
}
figcaption p {
padding: 50px 15px;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
color: #333;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
background-image: -webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
background-image: -moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
background-image: -o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
background-image: -ms-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
background-image: linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
-webkit-background-size: 1px 100%;
-moz-background-size: 1px 100%;
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: 50% 0%;
}
input[type="radio"]:hover + label {
background: rgba(255,255,255,0.6);
}
input[type="radio"]:checked + label {
background: rgba(255,255,255,1);
-webkit-box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.3);
box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.3);
}
input[type="radio"]:checked ~ figure img {
z-index: 2;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
-ms-transform: translatex(0px);
transform: translatex(0px);
-webkit-transition: all .15s, z-index 0s;
-moz-transition: all .15s, z-index 0s;
-o-transition: all .15s, z-index 0s;
-ms-transition: all .15s, z-index 0s;
transition: all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
z-index: 3;
color: rgba(255,255,255,0.5);
-webkit-transition: color .5s;
-moz-transition: color .5s;
-o-transition: color .5s;
-ms-transition: color .5s;
transition: color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
z-index: 8;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: all .35s, .7s;
-moz-transition: all .35s, .7s;
-o-transition: all .35s, .7s;
-ms-transition: all .35s, .7s;
transition: all .35s, .7s;
}
h2 {
margin-top: 150px;
text-align: center;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
font-size: 1.2rem;
}
h2 a {
position: relative;
color: tomato;
text-decoration: none;
}
h2 a:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: tomato;
-webkit-transition: width .1s;
-moz-transition: width .1s;
-o-transition: width .1s;
-ms-transition: width .1s;
transition: width .1s;
}
h2 a:hover:after {
width: 100%;
}
body {
background: #f0f0f0;
}
html,body {
width: 100%;
height: 100%;
}
</style>
واخيرا قم بحفظ التغيرات واستمتع بالسلايد شو وهو يعرض اخر مواضيع مدونتك بشكل جميل وانيق، ولا تنسى متابعتنا على المواقع التالية لتتوصلوا كل ماهو جديد.