Blogger Popüler Yazılar Modifikasyonu
Bloggerin kendi kullanıcı panelinde popüler yayınlar gadgeti zaten mevcut.Normal görünüme sahip bu popüler yayınlar gadgetini iki tıklamayla herkes ekliyebilir.Eklediğimiz bu popüler yayınlar gadgetine bir iki kod ekliyerek görünüm ve tasarım farklılığı yaratacağız.Yaptığımız değişiklik sonrasında Popüler yayınlar artık resimdeki gibi yan yana küçük resim ve altında başlık şeklinde görünecek.
Poüler Yayınlarınızı bu görünüme kavuşturmak için:
1-Popüler Yayınlar Gadgetinin blogumuzda bulunması gerekir.Eğer Yoksa;Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip Popüler Yayınlar Gadgetini blogumuza ekliyoruz.
2-Eklediğimiz Popüler Yayınlar Gadgetinin Ayarlarını resimdeki gibi yapıp kaydediyoruz.
3-Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip HTML kodları içierisinde ]]></b:skin>kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz]]></b:skin>
kodundan önceki kısma yapıştırıyoruz.
1-Popüler Yayınlar Gadgetinin blogumuzda bulunması gerekir.Eğer Yoksa;Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip Popüler Yayınlar Gadgetini blogumuza ekliyoruz.
2-Eklediğimiz Popüler Yayınlar Gadgetinin Ayarlarını resimdeki gibi yapıp kaydediyoruz.
kodundan önceki kısma yapıştırıyoruz.
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
4-Html kodları içerisinde Popüler Yayınlara ait widget kodunu bulacağız.Bu kodu bulmak için Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretledikten sonra Ctrl+F yardımı ile PopularPost1 şeklinde kodlar içierisnde aratırsak aşağıdaki gibi Popüler Yazılara ait widgeti buluruz.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Blog Okulu Popüler Yayınlar' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
