أحدث المواضيع

سلايدر شو إحترافي 2016




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

معنا اليوم سلايدر شو جديد يعمل بطريقة سهلة ورائعة ويمكنك إضافته بكل سهولة من خلال أداة html/javascript , ليعطي للقالب شكلا جماليا رائعا وجذاب 


طريقة التركيب 

- إذهب الى لوحة التحكم << التخطيط <<ثم اختر أداة html/javascript
- ضع هذا الكود التالي داخل الأداة وقم بتغير مايلزم وسوف أذكره أسفل الكود 


 
<!-- Development by : mohtarefnetdz.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> 



المصدر:http://www.madad2.com//2015/02/Slide-show-Professional-for-blogger-blogspot-2015-new2.html#.VNOgMtWUf7A#ixzz3QtIpxN6m

- لتغير الطول والعرض قم بتغيير 
width: 600px;

 height: 300px;


- قم بتغيير مايلزم مكان عنوان الموضوع ورابط الصورة ووصف توضيحي ورابط الموضوع مكان ماهو موضح بالألوان .



2 تعليق على " سلايدر شو إحترافي 2016 "

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×