Blogger Manşet alanı oluşturma

Sitenizde öne çıkartmak istediğiniz konuları yada yazılar için çok iyi bir eklentiyi sizlere sunuyorum..Kodlar aşağıdadır.

İlk Önce ]]></b:skin> Kodunu aratıp buluyoruz.Daha sonra aşağıdaki kodları bulduğumuz kodun hemen üstüne gelecek şekilde ekliyoruz..

.cssbeyin-manset {width: 960px; margin: 10px; auto;}

.cssbeyin-manset ul li {width: 217px;height: 130px;
position: relative;
float: left;margin-right: 10px;
overflow: hidden;
border: 2px solid #FAFAFA;
}

.cssbeyin-manset ul li a {width: 217px; height: 130px;
display:block; opacity: .75; filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}

.cssbeyin-manset ul li a:hover {opacity: .99; filter: alpha(opacity=99);
 -ms-filter: "alpha(opacity=99)";
}

.cssbeyin-manset ul li a img {
 width: 217px;
 }

.cssbeyin-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;
} 

Kodlarımızı Ekledikten sonra Aşağıdaki kodları manşetin nerde görünmesini istiyorsanız oraya ekliyoruz.

<div class='cssbeyin-manset'>
<ul>
<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>

<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li> 

<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>

<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li> 
</ul>
</div>

Yapamayn Olursa yorum yapsın.                                                                  Kaynak:Cssbeyin

Facebook'ta Paylaş Twitter'da Paylaş Google'de Paylaş

Yazar: d

Pcmerkez yaklaşık 1yıldan fazladır blogger hayatına başlamış bir blog ve bu blog'da genellikle blogger ile ilgili yazılar paylaşıyorum..