زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
اليوم سوف أقدم لكم بنرات إعلانية بتقنية CSS في قمة الإحترافية
نبدأ بشرح طريقة التركيب على بركة الله
- طريقة تركيب البنرات الإعلانية :
1- إدخل إلى مدونتك | إختر تخطيط | ثم إضافة أداة " HTML/JavaScript "
2- اللصق الكود التالي في صندوق الإضافة :
البنر الأول
ــــــــــــــ
كود الإضافة
<style>
.bsbanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}
.bsbanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}
.bsbanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}
.bsbanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.bsbanner ul li a img{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}
</style>
<div class="bsbanner ">
<ul>
<li style="background:#FF9900 !important;">
<a href=”رابط المعلن”>
<img height="120" src="رابط البنر" width="120" /></a></li><li style="background:#FF0D00 !important;">
<a href=”رابط المعلن”>
<img height="120" src="رابط البنر" width="120" /></a></li><li style="background:#00FF04 !important;">
<a href="رابط المعلن">
<img height="120" src="رابط البنر" width="120" /></a></li><li style="background:#FF00FF !important;">
<a href="رابط المعلن">
<img height="120" src="رابط البنر" width="120" /></a></li>
</ul>
</div>
البنر الثاني
ــــــــــــــــ
هنا عندما تحرك المأشر على الصورة
هنا التأثير
1- إدخل إلى مدونتك | إختر تخطيط | ثم إضافة أداة " HTML/JavaScript "
2- اللصق الكود التالي في صندوق الإضافة :
<style type="text/css">
.homeblog7-banner {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 14px 2px -10px #CCCCCC;
margin-bottom: 30px;
padding: 8px;
position: relative;
width: 652px;
z-index: 15;
}
.small-image {
cursor: pointer;
height: 167px;
overflow: hidden;
position: relative;
}
.small-image > img {
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
position: absolute;
z-index: 50;
opacity: 1;
right: 0;
}
.homeblog7-banner:hover .small-image > img {
opacity: 0;
margin-top: -167px;
}
.homeblog7-pl-ghar {
position: absolute;
top: 0;
z-index: 10;
}
.homeblog7-pl-ghar a {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px 0 #333333 inset;
display: block;
float: right;
margin: 13px;
padding: 6px;
position: relative;
text-decoration: none;
width: 125px;
height: 125px;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.homeblog7-pl-ghar a:hover {
background: #07aaee;
}
.homeblog7-banner .homeblog7-pl-ghar a strong {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 2px 2px 2px 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
font-weight: normal;
left: -20px;
padding: 3px 6px;
position: absolute;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
top: 0;
z-index: 9999;
}
.homeblog7-banner .homeblog7-pl-ghar a strong {
opacity:0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 500ms;
-o-transition-property: opacity, top;
-o-transition-duration: 500ms;
transition-property: opacity, top;
transition-duration: 500ms;
}
.homeblog7-pl-ghar a:hover strong {
opacity:1;
top: 120px;
}
</style>
<div class="homeblog7-banner">
<div style="position:relative">
<div class="small-image">
<img src="http://im61.gulfup.com/CjR8WR.png" />
</div>
<div class="homeblog7-pl-ghar">
<a target="_blank" href="رابط المعلن">
<img src="رابط البنر" width="125px" height="125px" border="0"/>
<strong>لدينا سياسة إعلانية</strong>
</a>
<a target="_blank" href="رابط المعلن">
<img src="رابط البنر" width="125px" height="125px" border="0"/>
<strong>شهرياً فقط بـ3 دولار</strong>
</a>
<a target="_blank" href="رابط المعلن">
<img src="رابط البنر" width="125px" height="125px" border="0"/>
<strong>شراء هذه المساحة الإعلانية</strong>
</a>
<a target="_blank" href="رابط المعلن">
<img src="رابط البنر" width="125px" height="125px" border="0"/>
<strong>أعلن هنا</strong>
</a> <a href='http://homeblog7.blogspot.com' title='ترجمت من قبل هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a>
</div>
</div></div>
البنرالثالث
ـــــــــــــ
1- إدخل إلى مدونتك | إختر تخطيط | ثم إضافة أداة " HTML/JavaScript "
2- اللصق الكود التالي في صندوق الإضافة :
<style>
#homeblog7-ads img {
margin:0px 0px 4px 8px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#homeblog7-ads img:hover {
margin:0px 0px 4px 8px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
}
</style>
<div id="homeblog7-ads" align="right">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#fff"><tbody>
<tr>
<td>
<center>
<a href="رابط المعلن" rel="nofollow">
<img border="0" alt="وصف الإعلان" width="125" src="http://im67.gulfup.com/2h0yCu.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="رابط المعلن" rel="nofollow">
<img border="0" alt="وصف الإعلان" width="125" src="http://im67.gulfup.com/2h0yCu.png" height="125"/></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="رابط المعلن" rel="nofollow">
<img border="0" alt="وصف الإعلان" width="125" src="http://im67.gulfup.com/2h0yCu.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="رابط المعلن" rel="nofollow">
<img border="0" alt="وصف الإعلان" width="125" src="http://im67.gulfup.com/2h0yCu.png" height="125"/></a> <a href='http://homeblog7.blogspot.com' title='ترجمت من قبل هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a>
</center>
</td>
</tr>
</tbody>
</table>
</div>
التاثير الرابع
ـــــــــــــــــــ
1- ادخل إلى مدونتك | واختر تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- ضع الكود التالي فوقه :
#adbanner {
width: 468px;
height: 60;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
line-height: 100%;
margin: 0;
background: #333333 !important;
overflow: visible!important;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
border: 0 none!important;
-webkit-border-top-right-radius: 80px;
-webkit-border-bottom-left-radius: 80px;
-moz-border-radius-topright: 80px;
-moz-border-radius-bottomleft: 80px;
border-top-right-radius: 80px;
border-bottom-left-radius: 80px;
margin: 0 10px 10px 0 !important;
padding: 7px !important;
}
#adbanner:hover {
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
}
1- إدخل إلى مدونتك | إختر تخطيط | ثم إضافة أداة " HTML/JavaScript "
2- اللصق الكود التالي في صندوق الإضافة :
<div id="adbanner">
<CENTER><a href="رابط المعلن"> <img src="رابط البنر" width="468" height="60" border="2" align=" middle" /></a></CENTER>
</div>
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق