بنرات إعلانية بتقنية CSS في قمة الإحترافية لمدونات بلوجر

زوار ومتابعي المدونة 

السلام عليكم ورحمة الله وبركاته

اليوم سوف أقدم لكم بنرات إعلانية بتقنية 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>

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .