اچ تی ام السی اس اس

بلوک تبلیغات نوار کناری سایت

امروز میخواستم چند تا منبع خوب رو برای معرفی در نوار کناری پست ها بزارم و دنبال یک باکس زیبا بودم و که یادم افتاد پی ۳۰ دانلود چیزی که می خوام رو داره

واقعا نمیخواستم از جایی اسکی برم ولی تقریبا از اولین برخوردم با این سایت هنوز نتونستم از فکرش درآم 🙂

خب بریم سر اصل مطلب

بدنه بلوک

<div class="ads-div">
    <h2>عنوان بلوک تبلیغات</h2>
    <ul>
        <li class="ads-li">
            <a target="_blank" title="عنوان" rel="nofollow" href="لینک" class="ads-base , ads-orange">
                <img src="آدرس عکس" alt="متن جایگزین">
                <span class="ads-name">نام سایت</span>
                <span class="ads-description">توضیحات</span>
                <span class="ads-address">آدرس نمایشی سایت</span>
            </a>
        </li>
    </ul>
</div>

 

استایل بلوک

/* ads */
.ads-div h2 {
    font-size: 25px;
    margin-top: -20px;
    padding: 5px 15px;
    background: #86868663;
    border-radius: 20px 0;
    text-shadow: 3px 1px #0a9e01;
}
.ads-name {
    font-weight: bold;
    color: #555;
}
.ads-description {
    color: #666;
}
.ads-address {
    color: #069D00;
}
.ads-base {
    color: #fff;
    padding: 7px;
}
.ads-green:hover {
    background: #6E9000;
}
.ads-orange:hover {
    background: #F38F00;
}
.ads-blue:hover {
    background: #00449B;
}
.ads-red:hover {
    background: #A40003;
}
.ads-div:focus {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.ads-li a:hover {
    -moz-border-radius: 0 20px 0 20px;
    border-radius: 0 20px 0 20px;
    color: #fff;
}
.ads-li {
    color: #000;
    display: block;
    margin: 10px;
    padding: 7px;
    background: #EDEDED;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ads-div span {
    display: block;
}
.ads-div img {
    height: 30px;
    width: 30px;
}
/* End ads */

نحوه تغییر رنگ باکس ها:

کافیه در کد بدنه خط زیر رو پیدا کنید

<a target="_blank" title="عنوان" rel="nofollow" href="لینک" class="ads-base , ads-orange">

 

و مقدار  ads-orange رو به با یکی از کلاس های زیر عوض کنید

.ads-green /* سبز */
.ads-orange /* نارنجی */
.ads-blue /* آبی */
.ads-red /* قرمز */

پ.ن: از این بلوک حتی میشه برای تبلیغات نوار کناری هم استفاده کرد

نتیجه:

 

 

 

برچسب ها
مشاهده بیشتر

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن