آموزش قرار دادن تبلیغات در ویبولتین

[Google]

آموزش قرار دادن تبلیغات در ویبولتین



ابتدا کد های زیر را به انتهای additional.css قالب خود اضافه کنید :

کد:

(#F3E372));
    background: -moz-linear-gradient(top,  #FEFCB8,  #F3E372); */
}
.b0{
    
}
.b0 .t22, .b0 .ttl{
    float:right;
    margin:0 15px -10px 0;
    display:inline;
    text-shadow:1px 1px 1px #FFF;
    color:#000;
    position: relative;
    z-index: 2;
    overflow:hidden;
}
.b0 .t22 span, .b0 .ttl span{
    display:block;
    padding:0 10px;
    line-height:30px;
}
.b0 .t22 span.transition {
    background:-moz-linear-gradient(right bottom, rgba(255, 255, 255, 0) 20%, 


rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.35) 


65%, rgba(255, 255, 255, 0) 80%);
    background:-webkit-gradient(linear, right bottom, left top, color-stop(20%, rgba


(255, 255, 255, 0)), color-stop(35%, rgba(255, 255, 255, 0.35)), color-stop(50%, rgba


(255, 255, 255, 0.65)), color-stop(65%, rgba(255, 255, 255, 0.35)), color-stop(80%, rgba


(255, 255, 255, 0)));
    display:block;
    height:30px;
    position:absolute;
    right:-160px;
    top:0;
    width:100%;
}
.b0:hover .t22 span.transition{
    right:160px;
    /* CSS animations */        
    -moz-transition:all 0.6s ease-out;
    -webkit-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;
}
.b0 .ttl{
    margin: 20px -20px 10px 0;
}
.b0 .ttl span{
    width: 120px;
    text-align: center;
}
.b0 ul{
    clear: both;
}
.b0 .i1{
    clear:both;
    padding:20px 10px 10px 10px;
    text-align:right;
    line-height:18px;
    position: relative;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}
.b0 .t22, .b0 .i1, .b0 .ttl{
    border: 1px solid #C0C0C0;
    background: #E0E0E0; 
    background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to


(#C0C0C0));
    background: -moz-linear-gradient(top,  #E0E0E0,  #C0C0C0); */
    zoom:1;
}
.z1 .t22, .z1 .i1, .z1 .b0 .ttl{
    border: 1px solid #F3E372;
    background: #FEFCB8; 
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFCB8), to


(#F3E372));
    background: -moz-linear-gradient(top,  #FEFCB8,  #F3E372); */
}
.b0 .t22, .b0 .ttl, .progress, .progress .pbar{
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
}
.lg1 .t22, .lg1 .i1, .lg1 .b0 .ttl{
    border: 1px solid #E4E4E4;
    background: #F4F4F4; 
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');*/
    background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#E4E4E4)); 
    background: -moz-linear-gradient(top,  #F4F4F4,  #E4E4E4); 
}


.b0 .ico{
    float:left;
    margin: 0 0 -45px 10px;
    position: relative;
    z-index: 2;
}

حالا کد زیر رو هر جا که دوست دارید نمایش داده شود قرار دهید مثلاً انتهای ناوبار :

کد:

				<div class="b0 lg1">				

	<div class="t22"><span>تبلیغات</span></div>				
<img class="ico" src="http://up.vbiran.ir/images/0va3wvpuvdnc55cvagk.png" alt="تبلیغات" />
	<div class="i1" style="direction:rtl;">
<center>
<!-- Code ha inja -->
</center>
</div></div>

بجای <!-- Code ha inja --> باید تبلیغات خود را قرار دهید .

موفق باشید .


عوض کردن رنگ بک گراند:

کد رنگ :
additional.css


left bottom, from(#F4F4F4), to(#EFC34C)); background: -moz-linear-gradient(top, #EFC34C, #EFC34C); } .b0 .ico{ float:left; margin: 0 0 -45px 10px; position: relative; z-index: 2; }

منبع : وی بی ایران