02-23-2014, 02:30 PM
#1
مدون نشيط
تاريخ التسجيل: Feb 2014
المشاركات: 124
اضافة التبادل الاعلاني css - اضافات بلوجر
السلام عليكم ورحمة الله وبركاتة
معنا اليوم طريقة جديدة لاضافة صندوق التبادل الاعلاني بمدونات بلوجر
بتقنية ال css مما يعطي شكل انيق لهذا الصندوق مع تأثيرات
الشرح :
اذهب الي صفحة التخطيط واضافة اداة جديدة HTML واضف بها الكود التالي :
كود PHP:
< style >
#advertise{
margin : auto ;
}
. adss { list- style : none ; margin - top : 5px auto ; margin : 0 1px 2px 1px ; display : inline - block ; text - align : center ; }
. adss a { display : block ; width : 75px ; height : 75px ; padding - right : 0px ; padding - top : 3px ; position : relative ; text - decoration : none ; }
. adss 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);}
. adss img { max - height : 75px ; max - width : 75px ; }
#adsanime:hover { opacity:0.2; }
#adsanime a strong {
- webkit - transition - property : opacity ;
- webkit - transition - duration : 500ms ;
- moz - transition - property : opacity ;
- moz - transition - duration : 500ms ; }
#adsanime a strong {
opacity : 0 ;
- webkit - transition - property : opacity , top ;
- webkit - transition - duration : 300ms ;
- moz - transition - property : opacity , top ;
- moz - transition - duration : 300ms ; }
#adsanime {
opacity : 0.5 ;
- webkit - transition - property : opacity , top ;
- webkit - transition - duration : 300ms ;
- moz - transition - property : opacity , top ;
- moz - transition - duration : 300ms ; }
#adsanime:hover { opacity:1; }
#adsanime:hover a strong { opacity:1; top:-10px; }
</ style > < center >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://upload.traidnt.net/upfiles/qr456537.gif" /> < strong > اعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div >< div class= "adss" id = "adsanime" >< a
href = "http://www.bloggerexp.com" > < img src = "http://4.bp.blogspot.com/-nr5moC2pvHc/TxHJHe69LlI/AAAAAAAAAqo/gQfrsXpIymc/s1600/adschange_125-125.jpg" /> < strong > أعلن هنا </ strong ></ a > </ div ></ center >< a href = "http://www.bloggerexp.com" ></ a >
حدد الروابط اللي تحتاجها واحفظ العمل
__________________
من مواضيع Blog-Add