سلايد شو أحترافي لمدونة بلوجر 2015 بلمليح

بسم الله الرحمن الرحيم

والصلاة والسلام على خير خلق الله , محمد عليه الصلاة والسلام .

السلام عليكم ورحمة الله وبركاته .

سلايد شو أحترافي لمدونة بلوجر 2015 :

اليوم معنا سلايد شو جميل وأحترافي  يعمل على بلوجر وعلى اي موقع أخر يستعمل لغات css و html و js .

السلايد شو بسيط وتركيبه سهل بأذن الله للكل .

صورة من السلايد شو :

 طريقة تركيب السلايد شو  :

    اذهب الى التخطيط
    ثم إضافة اداة .
    أختر اداة html/javascript
    الصق هذا الكود بداخلها مع تعديل ما سأذكر .

<!-- Development by : 7lolblogger.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>عنوان 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>عنوان 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>عنوان 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>عنوان 1</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>

 التعديلات :

لتغيير الارتفاع قم بالبحث عن 300 ستجد 14 واحدة قم بتغيرها كلها للارتفاع الجديد .

لتغيير العرض قم بالبحث عن 600 ستجد 10 قم بتغيرها كلها للعرض الجديد .

          رابط الصورة

         وصف الموضوع

         رابط الموضوع

        عنوان الموضوع

شاركه على جوجل بلس

الكاتب mol

انا محمد من المغرب عمري 17 عاما مهنتي هيا اصلاح الهواتف والحواسب وهذا الموقع انشاته لكي اشارك معكم اشياء الذي اتمتع بها اتمنا ان يعجبكم الموقع ❤ مرحبا ب💪جميع المهووسين الالعاب و التقنية لا 🙅تنسى ذكر الله