اضافة عارض صور مواضيع الشائعة اضافات بلوجر
معنا اليوم اضافة جميلة وهي تعرض صور المشاركات الشائعة بشكل احترافي
الاضافة اكثر من رائعه واكثر مكان مناسب لها هي في وسط الصفحة
الشرح :
اذهب الي صفحة القالب ثم تحرير HTML ثم ابحث عن : ]]></b:skin>
وضع اعلاها الكود التالي :
/* popularposts CSS */.featured_posts { float: right }
.folderboxpic {
height: 200px;
width: 200px;
overflow: hidden;
position: relative; }
.folderboxpic img {
height: 200px;
width: 200px;
padding: 0;
border: 1px solid gray; }
.article {
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 13px;
text-decoration: none;
font-family: Open Sans,Arial,Verdana;
text-overflow: ellipsis; }
.article .folderboxbackground {
font-family: tahoma;
color: #333333;
font-size: 12pt;
background: white;
padding: 4px; }
.article .folderboxtitle {
position: absolute;
bottom: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in 0s;
-moz-transition: all 0.4s ease-in 0s;
-ms-transition: all 0.4s ease-in 0s;
-o-transition: all 0.4s ease-in 0s;
transition: all 0.4s ease-in 0s;
width: 200px;
height: 0px;
display: block;
text-align: center; }
.article:hover .folderboxtitle {
opacity: 0.9;
height: 100%; } <b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعه' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<div class='featured_posts'>
<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='folderboxpic'>
<a class='article' expr:href='data:post.href' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='72' width='72'/>
<b:else/>
<img alt='no image' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahs3S80OV90DV9T9s-j52iNHXA02Z3acb7k0BsNicICb2eF35-flEQKK8ZWamrckDiFVgCTCvC638cl0QYhh7aSzmyQ9dpBY090BMRT8JbBRq2cBwLHZyPBZaYbv27-TfQ34c6iBjTGg/' width='200'/>
</b:if>
<div class='folderboxtitle'><div class='folderboxbackground'><div id='tm-folderboxbackground-720'><data:post.title/></div></div></div>
</a>
<div class='clear'/>
</div></b:if></b:if></div></b:loop></ul></div></b:includable>
</b:widget> 