رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر
تحديث الصفحة اضافة سلايد شو احترافي لبلوجر Designer4arab
التسجيل التعليمـــات التقويم البحث مشاركات اليوم اجعل كافة الأقسام مقروءة


 
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
السابق المشاركة السابقة   المشاركة التالية التالي
قديم 12-13-2013, 12:05 PM   #1
حسين
مدون جديد
 
تاريخ التسجيل: Mar 2013
المشاركات: 55
Lightbulb اضافة سلايد شو احترافي لبلوجر Designer4arab
أنا : حسين
سجل معنا لتتمتع بهذه الخاصية




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


أفضل الإضافات هنا : http://designer4arab.blogspot.com/




الخطوات:


  • قم بالدخول لصفحة تحكم مدونتك.
  • اضغط على تخطيط.
  • ثم إضافة أداة >> HTML/JavaScript
  • ثم ضع هذا الكود الكبير فيها:

<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?fami...lium+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>




6.قم بتغيير رابط الصورة والعنوان والرابط..إلخ.
7.اضغط حفظ.
انتهى الشرح

أتمنى أن يعجبكم

الدعم العربي

حسين غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
designer4arab

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع
العرض الشجري العرض الشجري

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك
BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
إضافة زر الإشتراك في قناة اليوتيوب لبلوجر designer4arab حسين إضافات وأدوات بلوجر 0 12-08-2013 08:09 PM
اضافة الميتا تاج لمدونة بلوجر Designer4arab حسين إضافات وأدوات بلوجر 0 10-18-2013 03:54 PM
إضافة زر الإشتراك في قناة اليوتيوب لبلوجر Designer4arab حسين إضافات وأدوات بلوجر 0 10-16-2013 09:40 PM
إضافة زر الإشتراك في قناة اليوتيوب لبلوجر Designer4arab حسين إضافات وأدوات بلوجر 0 10-16-2013 09:20 PM
حصريااا اضافة (أخر تعليقات) لبلوجر و بشكل احترافي alam3arbcom إضافات وأدوات بلوجر 0 04-01-2013 10:03 PM



سياسة الخصوصية - Privacy-Policy - اربط مدونتك بنا - حقوق الملكية والتأليف - الاتصال بنا - معهد خبراء بلوجر - الأرشيف - الأعلى


لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 03:25 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)