كود سلايدرشو احترافي لمدونات بلوجر - مستر جيك
كود سلايدرشو احترافي لمدونات بلوجر

كود سلايدرشو احترافي لمدونات بلوجر

شارك المقالة
سلايد شو سلايد شو المحترف سلايد شو بلوجر سلايد شو سلايد شو المحترف سلايد شو بلوجر سلايد شو بلوجر سلايد شو احترافي سلايد شو جاهز سلايد شو المحترف سلايد شو ووردبريس سلايد شو بلوجر تلقائي سلايد شو بلوجر 2016 سلايد شو افتر افكت سلايد شو html سلايد شو احترافي بلوجر سلايد شو يعمل تلقائياَ بالأقسام التسميات لمدونة بلوجر سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا سلايد شو كل يوم معلومة طبية سلايد شو لا يعمل سلايد شو ووردبريس سلايد شو ووردبريس معرب سلايد شو دريم ويفر سلايد شو اخباري وورد بريس سلايد شو لمدونة ورد بريس سلايد شو عرب ويب سلايد شو هسبريس هاك سلايد شو هاك سلايد شو 2013 ماهو سلايد شو تحميل هاك سلايد شو ترايدنت هاك سلايد شو هاك سلايد شو للجيل الرابع سلايد شو ميكر سلايد شو منتدى العاشق سلايدشو مدونة المحترف سلايد شو متحرك سلايد شو مجانا سلايد شو مميز سلايد شو موقع سلايد شو معرب سلايد شو مثل الجزيرة نت سلايد شو مدونة سلايد شو لعرض الصور سلايد شو بلوجر سلايد شو للاعراس سلايد شو للورد بريس سلايد شو للمنتدى سلايد شو للموقع سلايد شو للبوابة العربية سلايد شو لموقعك سلايد شو للمواقع سلايد شو للتمبلر سلايد شو كلية الطب سلايد شو كود سلايد شو كل يوم معلومة طبية برنامج سلايد شو كامل كود سلايد شو html كيفية عمل سلايد شو كود سلايد شو احترافى كود سلايد شو جاهز كود سلايد شو للموقع كيف اعمل سلايد شو سلايد شو قناة العربية سلايد شو قالب المحترف سلايد شو قالب قالب بلوجر سلايد شو قوالب سلايد شو سلايد شو فلاش سلايد شو فوائد القراءة سلايد شو فيديو سلايد شو في بلوجر سلايد شو المحترف سلايد شو بلوجر سلايد شو المحترف سلايد شو بلوجر سلايد شو عربي سلايد شو عرب ويب سلايد شو عرس اغاني سلايد شو عرس كيفية عمل سلايد شو طريقة عمل سلايد شو شرح عمل سلايد شو شرح عمل سلايد شو بال jquery كيفية عمل سلايد شو بالدريم ويفر عمل سلايد شو اون لاين سلايد شو المحترف سلايد شو بلوجر سلايد شو المحترف سلايد شو بلوجر سلايد شو طب بغداد طريقة عمل سلايد شو طريقة عمل سلايد شو للموقع طريقة عمل سلايد شو بالدريم ويفر طريقة عمل سلايد شو بالفوتوشوب طريقة تركيب سلايد شو طريقة اضافة سلايد شو الى بلوجر طريقة وضع سلايد شو طريقة تصميم سلايد شو طريقة عمل سلايد شو للورد بريس سلايد شو المحترف سلايد شو بلوجر سلايد شو المحترف سلايد شو بلوجر سلايد شو صغير شرح عمل سلايد شو شرح برنامج سلايد شو شرح عمل سلايد شو بال jquery شرح تركيب سلايد شو شرح برمجة سلايد شو شرح تصميم سلايد شو شرح برنامج سلايد شو للايفون شرح تركيب سلايد شو ووردبريس شرح سلايد شو شرح عمل سلايد شو بالفرونت بيج سلايد شو سهل التركيب سكربت سلايد شو سيريال برنامج سلايد شو سلايد شو جافا سكربت سلايد شو رائع سلايد شو تلقائي رائع لمدونات بلوجر ربط سلايد شو بقاعدة بيانات سلايد شو ذاتي التشغيل سلايد شو ذاتي التشغيل لمدونة بلوجر سلايد شو دريم ويفر درس عمل سلايد شو درس تصميم سلايد شو سلايد شو خفيف سلايد شو المحترف سلايد شو بلوجر سلايد شو خفيف احترافي لمدونة بلوجر 2014 سلايد شو المحترف سلايد شو بلوجر حذف سلايد شو حذف سلايد شو بلوجر حل مشكلة سلايد شو سلايد شو جاهز سلايد شو جيكوري سلايد شو جي كويري سلايد شو جوملا سلايد شو جافا سكربت سلايد شو جوملا 1.5 سلايد شو جوملا 3 سلايد شو جميل كود سلايد شو جاهز تحميل سلايد شو جملة سلايد شو ثلاثي الابعاد سلايد شو تلقائي سلايد شو تخريج الدفعة 85 سلايد شو تلقائي رائع لمدونات بلوجر سلايد شو تلقائي لعرض أخر المشاركات لمدونة بلوجر سلايد شو ترايدنت سلايد شو تحميل سلايد شو تلقائي للبلوجر سلايد شو تلقائي في مشاركات عشوائية لمدونة بلوجر سلايد شو تلقائي احترافي سلايد شو تلقائي مميز للبلوجر سلايد شو بلوجر سلايد شو بلوجر تلقائي سلايد شو بلوجر 2016 سلايد شو بلوجر اوتوماتيك سلايد شو بلوجر 2015 سلايد شو بلوجر المحترف سلايد شو بسيط سلايد شو بلوجر 2014 سلايد شو بلوجر 2013 سلايد شو بالجي كويري سلايد شو احترافي سلايد شو المحترف سلايد شو افتر افكت سلايد شو المحترف 2016 سلايد شو احترافي 2016 سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا سلايد شو اتوماتيك بلوجر سلايد شو المحترف 2013 سلايد شو اخباري سلايد شو اليوم السابع سلايد شو المحترف سلايد شو بلوجر سلايد شو جوملا 1.5 سلايد شو 2015 سلايد شو 2014 سلايد شو 2013 هاك سلايد شو 2013 سلايد شو بلوجر 2014 سلايد شو بلوجر 2013 سلايد شو المحترف 2013 سلايد شو جوملا 2.5 سلايد شو المحترف 2014 اضافة سلايد شو احترافي 2014 سلايد شو 3d برنامج سلايد شو 3d سلايد شو جوملا 3 سلايد شو جوملا 3 8 سلايد شو 8 سلايد شو


مرحبا , في تدوينة اليوم سوف اقدم لكم كود احترافي و الذي يبحث عليه بشدة اصحاب المدونات الا وهو كود السلايدرشو و الذي يضيف طابع انيق لمدونتك البلوجر , ولاضافة هذا الكود اتبع الخطوات الاتية

اولا قم بالذهاب لوحة التحكم - التخطيط - ثم قم باضافة اداة html/java script
ثانيا قم بنسخ الكود المتواجد بالاسفل و ضعه في اداة الـ html/java script

<!-- 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> 




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

width: 600px;

 height: 300px;

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

إرسال تعليق

مستر جيك ؟

مستر جيك هي قناة مهمتمة بالتكنولوجيا بصفة عامة و بالاندرويد و البرمجة بصفة خاصة ، يتابعها اكثر من +5.000 الف متابع على مواقع التواصل الاجتماعي و هذه المدونة تحتوى على اعداد من المواضيع و الشروحات المكتوبة و كذلك المصورة على شكل فيديوهات و هدفنا من هذه المواضيع و الشروحات و اغناء المحتوى العربي الفقير للكثير من المعلومات .

خليك جيك و انضم لنا

اعلن معنا بالمجان

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *