طريقة التركيب
إذهب في المكان الذي تريد أن تضع فيه " التبادل الإعلاني "
والأفرض جدلاً أنك تريد أن تضعه في القائمة الجانبية
من لوحة التحكم اذهب إلى
تصميم >> عناصر الصفحة >> اضافة اداة >> HTML/JavaScript
أضف الكود التالي
---------------------------------------------------------------------------------- نهاية الكودبداية الكود ------------------------------------------------------------------
<style type="text/css">
ul.social { list-style:none; margin:5px auto;display:inline-block; }
ul.social li { display:inline; float:right; background-repeat:no-repeat; }
ul.social li a { display:block; width:70px; height:94px; padding-right:24px; position:relative; text-decoration:none; }
ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.social li.ams1 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams2 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams3 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams4 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams5 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
#cssanime:hover li { opacity:0.2; }
#cssanime li a strong { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#cssanime li { opacity:0.5; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#cssanime li:hover { opacity:1; }
#cssanime li:hover a strong { opacity:1; top:-10px; }
</style>
<ul class='social' id='cssanime'>
<li class='ams1'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams2'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams3'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams4'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams5'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams6'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
</ul>
شرح الكود
مابلون الأزرق | رابط الصور
مابلون الأحمر | رابط الموقع
مابلون الأخضر | الاسم الذي سيظهر
بالطبع كل صورة مرتبطة مع الاسم والرابط الخاص بها
ams1 >> ams1
ams2 >> ams2
:
:
ams6 >> ams6
ملاحظات
1)ـ بإمكانك حذف أو إضافة صورة عن طريق حذف الاسم الخاص به من الصور والراوبط
مثلاً حذف الصورة السادسة :
مابلون الأحمر | رابط الموقع
مابلون الأخضر | الاسم الذي سيظهر
بالطبع كل صورة مرتبطة مع الاسم والرابط الخاص بها
ams1 >> ams1
ams2 >> ams2
:
:
ams6 >> ams6
ملاحظات
1)ـ بإمكانك حذف أو إضافة صورة عن طريق حذف الاسم الخاص به من الصور والراوبط
مثلاً حذف الصورة السادسة :
كود بلغة HTML:ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
-------------------------------------
<li class='ams6'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
2)ـ لتغيير الحجم والعرض والقرب مابين الصور استبدل الأرقام التي في
" ul.social li a "
3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في
" #cssanime "
" ul.social li a "
3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في
" #cssanime "
صور مساعدة
طريقة التركيب
إذهب في المكان الذي تريد أن تضع فيه " التبادل الإعلاني "
والأفرض جدلاً أنك تريد أن تضعه في القائمة الجانبية
من لوحة التحكم اذهب إلى
تصميم >> عناصر الصفحة >> اضافة اداة >> HTML/JavaScript
أضف الكود التالي
---------------------------------------------------------------------------------- نهاية الكودبداية الكود ------------------------------------------------------------------
<style type="text/css">
ul.social { list-style:none; margin:5px auto;display:inline-block; }
ul.social li { display:inline; float:right; background-repeat:no-repeat; }
ul.social li a { display:block; width:70px; height:94px; padding-right:24px; position:relative; text-decoration:none; }
ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.social li.ams1 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams2 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams3 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams4 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams5 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
#cssanime:hover li { opacity:0.2; }
#cssanime li a strong { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#cssanime li { opacity:0.5; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#cssanime li:hover { opacity:1; }
#cssanime li:hover a strong { opacity:1; top:-10px; }
</style>
<ul class='social' id='cssanime'>
<li class='ams1'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams2'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams3'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams4'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams5'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
<li class='ams6'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
</ul>
شرح الكود
مابلون الأزرق | رابط الصور
مابلون الأحمر | رابط الموقع
مابلون الأخضر | الاسم الذي سيظهر
بالطبع كل صورة مرتبطة مع الاسم والرابط الخاص بها
ams1 >> ams1
ams2 >> ams2
:
:
ams6 >> ams6
ملاحظات
1)ـ بإمكانك حذف أو إضافة صورة عن طريق حذف الاسم الخاص به من الصور والراوبط
مثلاً حذف الصورة السادسة :
مابلون الأحمر | رابط الموقع
مابلون الأخضر | الاسم الذي سيظهر
بالطبع كل صورة مرتبطة مع الاسم والرابط الخاص بها
ams1 >> ams1
ams2 >> ams2
:
:
ams6 >> ams6
ملاحظات
1)ـ بإمكانك حذف أو إضافة صورة عن طريق حذف الاسم الخاص به من الصور والراوبط
مثلاً حذف الصورة السادسة :
كود بلغة HTML:ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
-------------------------------------
<li class='ams6'>
<a href="http://www.ams90.com/"><strong>Ams</strong></a>
</li>
2)ـ لتغيير الحجم والعرض والقرب مابين الصور استبدل الأرقام التي في
" ul.social li a "
3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في
" #cssanime "
" ul.social li a "
3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في
" #cssanime "
صور مساعدة
المشاركات
