معهد خبراء بلوجر - اضافة التبادل الاعلاني 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>

حدد الروابط اللي تحتاجها واحفظ العمل