08-02-2013, Saat:16:29
Opacity kodlarıyla donatılmış, benimde Shaker Cat temasında kullandıgım Css/Html manşet alanını sunuyorum arkadaşlar. Kodlarda 4 adet manşet vardır. Siz bunu temanıza göre düşürebilir ya da azaltabilirsiniz.
NOT : Kodları önce not defterine, ardından istenilen yerlere yapıştırınız.
Aşağıdaki Css Kodlarını global.css ' nin en altına ekleyiniz :
HTML Kodlarını, ana sayfada görüntülemek istiyorsanız index şablonunda {$header} kodunun hemen altına ekleyiniz :
Ekran Görüntüsü :
NOT : Kodları önce not defterine, ardından istenilen yerlere yapıştırınız.
Aşağıdaki Css Kodlarını global.css ' nin en altına ekleyiniz :
Kod:
.blackcat-manset {width: 960px; margin: 10px; auto;}
.blackcat-manset ul li {width: 217px;height: 130px;
position: relative;
float: left;margin-right: 10px;
overflow: hidden;
border: 2px solid #FAFAFA;
}
.blackcat-manset ul li a {width: 217px; height: 130px;
display:block; opacity: .75; filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}
.blackcat-manset ul li a:hover {opacity: .99; filter: alpha(opacity=99);
-ms-filter: "alpha(opacity=99)";
}
.blackcat-manset ul li a img {
width: 217px;
}
.blackcat-manset ul li a span#new-slidespan {
position: absolute;
bottom: 0px; left: 0px;
background: #444;
opacity: .90;filter: alpha(opacity=90);-ms-filter: "alpha(opacity=90)";
padding: 4px 8px; display:block;
width: 217px; color: #fff;
font-size: 12px;
}
.new-last {margin-right: 0px !important;}
.new-last span {
position: absolute;
top: 0px;right: 0px;
background: url(images/external.png) no-repeat 3px -19px !important;
font-size: 11px !important;width: 35px;
text-align: right;padding-left: 20px !important;
padding-right: 5px;
color: #333;
}
img.maxwidth {max-width: 300px; max-height: 200px;
float:left; padding-right: 10px;
padding-bottom: 5px;
}HTML Kodlarını, ana sayfada görüntülemek istiyorsanız index şablonunda {$header} kodunun hemen altına ekleyiniz :
Kod:
<div class='blackcat-manset'>
<ul>
<li><a href='yazi_linki' rel='bookmark'><img alt='resim_bilgisi' src='resmin_adresi'/><span id='new-slidespan'>BlackCat - Slider</span></a></li>
<li><a href='yazi_linki' rel='bookmark'><img alt='resim_bilgisi' src='resmin_adresi'/><span id='new-slidespan'>BlackCat - Slider</span></a></li>
<li><a href='yazi_linki' rel='bookmark'><img alt='resim_bilgisi' src='resmin_adresi'/><span id='new-slidespan'>BlackCat - Slider</span></a></li>
<li><a href='yazi_linki' rel='bookmark'><img alt='resim_bilgisi' src='resmin_adresi'/><span id='new-slidespan'>BlackCat - Slider</span></a></li>
</ul>
</div> Ekran Görüntüsü :