-->
اضافات البلوجر | تحسينات بلوجر كود التبادل الإعلاني عن طريق تقنية الـ CSS3 ,كود التبادل الاعلانى المستخدم فى المدونة وطريقة استخدامة

كود التبادل الإعلاني عن طريق تقنية الـ CSS3 ,كود التبادل الاعلانى المستخدم فى المدونة وطريقة استخدامة

اضافات البلوجر | تحسينات بلوجر

كود
كود
التبادل الاعلانى المستخدم فى المدونة وطريقة استخدامة
بسم الله


كود التبادل الإعلاني عن طريق تقنية الـ CSS3

المثال

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

من لوحة التحكم المدونة
اذهب إلى

تصميم >> عناصر الصفحة >> اضافة اداة >> 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/link410.png"); }
        ul.social li.ams2 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png"); }
        ul.social li.ams3 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png"); }
        ul.social li.ams4 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png"); }
        ul.social li.ams5 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png"); }
        ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.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://m7md-el3rby.blogspot.com/"><strong> لايكنيكست 1</strong></a>
        </li>

        <li class='ams2'>
        <a href="http://m7md-el3rby.blogspot.com/"><strong> لايكنيكست2 </strong></a>
        </li>

        <li class='ams3'>
        <a href="http://m7md-el3rby.blogspot.com/"><strong> لايكنيكست 3</strong></a>
        </li>

        <li class='ams4'>
        <a href="http://m7md-el3rby.blogspot.com/"><strong> لايكنيكست4 </strong></a>
        </li>

        <li class='ams5'>
        <a href="http://m7md-el3rby.blogspot.com/"><strong> لايكنيكست 5</strong></a>
        </li>

        <li class='ams6'>
        <a href="http://m7md-el3rby.blogspot.com/"><strong> لايكنيكست6 </strong></a>
        </li>

        </ul>


التعديل 

بعد اضافة الكود فى HTML/JavaScript 

قم باضغط 
ctrl + F

للتركيب صورة

ابحث عن 


http://i45.servimg.com/u/f45/14/45/57/61/link410.png



ودى صور للغير المصمين


 
للكتابة اسم للصورة

ابحث عن


لايكنيكست  1

للتغير اللينك

ابحث عن

http://m7md-el3rby.blogspot.com/


 بالتوفيق




كود التبادل الإعلاني عن طريق تقنية الـ CSS3 ,كود التبادل الاعلانى المستخدم فى المدونة وطريقة استخدامة

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

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

مساحة إعلانية
مساحة إعلانية

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

الاسم

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

رسالة *