إضافة رائعة و هي إضافة تبادل إعلاني نصي إحترافي بخاصية Css , تأثيرات حركية جميلة الإضافة سهلة التركيب و التحكم فيها أيضا سهل .
المعاينة الفورية :
للمعاينة المباشرة من هنا http://jsbin.com/kifebe/1 التبادل الإعلاني متجاوب مع جميع الأحجام لذلك يظهر في المعاينة كبير , و لتتأكدو من ذلك قومو بتصغير المتصفح للمعاينة
طريقة التركيب :
سنمر لتركيب الإضافة , لتركيب الإضافة من بلوجر ← قالب ← تحرير html ← نقوم بالبحث عن الوسم </head>
و نضع فوقه مباشرة الكود التالي :
<style> /* this is menu by -- www.fahiim.com -- */.ads-fahiim ul{width:300px;float:center;display:block;}.ads-fahiim li{margin: 0;text-align: center;list-style:none;width:100%;float:right;padding:0 2px 0 3px;}.ads-fahiim li a{position:relative;display:block;padding:.6em .6em .6em .6em;margin:.1em 0 .1em 0.5em;background: #3EC99D url(https://jetara.googlecode.com/svn/trunk/header-6.png);background-size: cover;border:1px solid #DDD;color:#ecdc7d;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:13px DroidKufi-Regular;text-shadow: 1px 1px 0px #333;);border: 2px solid #0F967B;}.ads-fahiim li a:hover:after{left:-.5em;border-left-color:#279d97;}.ads-fahiim li a:hover {background: #00FFAE url(https://jetara.googlecode.com/svn/trunk/header-6.png);background-size: cover;border-radius: 0px 555px 0px 444px;transition: all 2000ms cubic-bezier(0.5, 0, 0.5, 1);}</style>
إذا أردت تغيير اللون قم بتغيير التالي :
#3EC99D : لون الإضافة قبل تمرير الماوس
#00FFAE : لون الإضافة بعد تمرير الماوس
بعد إضافة الكود الأول نقوم بتتبع التالي بلوجر ← التخطيط ← إضافة أداة html ← ونقوم بلصق الكود التالي :
<div class="ads-fahiim"> <ul> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li></ul></div>
نقوم بتغيير التالي :
# برابط المعلن
عبارة ضع إعلانك هنا غيرها بإسم المعلن
إذا أردت إضافة الخط الذي أستعمله في المدونة قم بالبحث عن الوسم : ]]></b:skin>
و فوقه مباشرة ضع الكود التالي :
/*-----Font Face-----*//*link of fonts*/@font-face{font-family: GE SS two light;src: url('https://dl.dropboxusercontent.com/s/e9i0i5n5cd9ie3u/ge_ss_two_light.ttf?'),url('Sansation_Light.eot'); /* IE9 */}@font-face{font-family: GE SS two light;src: url('https://dl.dropboxusercontent.com/s/y7viqeaqschq85h/ge_ss_two_light.ttf'),url('Sansation_Light.eot'); /* IE9 */}
...................................................
<style> /* this is menu by -- www.fahiim.com -- */.ads-fahiim ul{width:300px;float:center;display:block;}.ads-fahiim li{margin: 0;text-align: center;list-style:none;width:100%;float:right;padding:0 2px 0 3px;}.ads-fahiim li a{position:relative;display:block;padding:.6em .6em .6em .6em;margin:.1em 0 .1em 0.5em;background: #3EC99D url(https://jetara.googlecode.com/svn/trunk/header-6.png);background-size: cover;border:1px solid #DDD;color:#ecdc7d;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:13px DroidKufi-Regular;text-shadow: 1px 1px 0px #333;);border: 2px solid #0F967B;}.ads-fahiim li a:hover:after{left:-.5em;border-left-color:#279d97;}.ads-fahiim li a:hover {background: #00FFAE url(https://jetara.googlecode.com/svn/trunk/header-6.png);background-size: cover;border-radius: 0px 555px 0px 444px;transition: all 2000ms cubic-bezier(0.5, 0, 0.5, 1);}</style>
<div class="ads-fahiim"> <ul> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li> <li><a rel="nofollow" dir="rtl" href="#" target="_blank">ضع إعلانك هنا</a></li></ul></div>
/*-----Font Face-----*//*link of fonts*/@font-face{font-family: GE SS two light;src: url('https://dl.dropboxusercontent.com/s/e9i0i5n5cd9ie3u/ge_ss_two_light.ttf?'),url('Sansation_Light.eot'); /* IE9 */}@font-face{font-family: GE SS two light;src: url('https://dl.dropboxusercontent.com/s/y7viqeaqschq85h/ge_ss_two_light.ttf'),url('Sansation_Light.eot'); /* IE9 */}
إرسال تعليق