[Blog-Add]

السلام عليكم ورحمة الله وبركاتة



معنا اليوم اضافة جميلة وهي تعرض صور المشاركات الشائعة بشكل احترافي

الاضافة اكثر من رائعه واكثر مكان مناسب لها هي في وسط الصفحة

الشرح :

اذهب الي صفحة القالب ثم تحرير HTML ثم ابحث عن : ]]></b:skin>

وضع اعلاها الكود التالي :

كود PHP:

/* 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%; } 


ثم احفظ واذهب الي صفحة التخطيط واضف اداة جديدة واضف بها الكود التالي :

كود PHP:

<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 == &quot;false&quot;'>
 
  <b:if cond='data:showSnippets == &quot;false&quot;'>
  <!-- (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 == &quot;false&quot;'>
  <!-- (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://lh3.googleusercontent.com/-m_i5G9Ytac8/UsQUyNkck3I/AAAAAAAAAac/jzLbsVk7F7Y/no-image_alblogger.png' 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> 


واحفظ العمل وهكذا تم التركيب تمنياتي لكم بالتوفيق