كود تجريى الاول

<style>
/* خلفية الموضوع */
@media only screen and (max-width: 1276px) {
  .post-content table {
  width: 100% !important;
  background-position-x: center;
  background-size: contain;
  padding: 0 25px;
  }
}
 .rtopics {
 padding: 5px;
   color: white;
   background: #0598e4;
   margin-left: 11px;
   float: left;
}
 .utopics {
 padding: 5px;
   color: white;
   background: #0598e4;
   margin-right: 11px;
   float: right;
}
</style>




   <style>
   .post-content img {
       max-width: 100%;
       max-height: 100%;
   }
   </style>


<script type="text/javascript">
   //<![CDATA[
   var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
   showHiddenMessage = function(id)
   {
       try
       {
           var regId = parseInt(id, 10);
           if( isNaN(regId) ) { regId = 0; }

           if( regId > 0)
           {
               $('.post--' + id).toggle(0, function()
               {
                   if( $(this).is(":visible") )
                   {
                       $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                   }
                   else
                   {
                       $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                   }
               });
           }
       }
       catch(e) { }

       return false;
   };
 <!-- BEGIN switch_user_logged_out -->

$(document).ready(function(){$('div:first.post-content div.clear, div:first.post br.clear').html('<iframe src="https://www.theb3st.com/h4-page" height="285" width="285" frameborder="0" scrolling="no"></iframe>')});

<!-- END switch_user_logged_out -->
   //]]>
</script>

{POSTER_MORE_MODAL}

<div class="breadcrumbs">
   <a class="nav nav-solid" href="{U_INDEX}">
       <span>{L_INDEX}</span>
   </a>
   {NAV_CAT_DESC_DESKTOP}
</div>

{POSTERS_LIST}

<!-- BEGIN topicpagination -->
{PAGINATION}

<!-- END topicpagination -->

<br />
<div class="quick-nav-ttopics">
<div class="rtopics"><a href="{U_VIEW_OLDER_TOPIC}"><span>{L_PREVIOUS}</span></a></div>
<div class="utopics"><a href="{U_VIEW_NEWER_TOPIC}"><span>{L_NEXT}</span></a></div>
</div>
<br />
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}" class="topic">
   <!-- BEGIN hidden -->
   <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
       <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
   </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <div id="p{postrow.displayed.U_POST_ID}" class="post-section {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
     
       <div class="post-head"><span class="MostWanted">المشاركة رقم &nbsp;&nbsp;{postrow.displayed.COUNT_POSTS}</span>
           <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div>
           <div class="post-info">
               <div class="h3">{postrow.displayed.POST_DATE_NEW}</div>
               <div class="post-details">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME}</div>
           </div>
       </div>
       <div class="post-content">
           {postrow.displayed.MESSAGE}
       
       
       
       
       
       
       
       
       
     
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
                     <div class="clear">
                         </div>
           <!-- BEGIN switch_attachments -->
           <div class="attachbox">
               <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
               <dl class="attachments">
                   <!-- BEGIN switch_post_attachments -->
                   <dt>
                       <!-- BEGIN switch_dl_att -->
                       <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                       <!-- END switch_dl_att -->
                       <!-- BEGIN switch_no_dl_att -->
                       {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                       <!-- END switch_no_dl_att -->
                   </dt>
                   <dd>
                       <!-- BEGIN switch_no_comment -->
                       <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                       <!-- END switch_no_comment -->
                       <!-- BEGIN switch_no_dl_att -->
                       <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                       <!-- END switch_no_dl_att -->
                       <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                   </dd>
                   <!-- END switch_post_attachments -->
               </dl>
           </div>
           <!-- END switch_attachments -->
       </div>
     {postrow.displayed.EDITED_MESSAGE}
     <!-- BEGIN switch_likes_active -->
     <div class="fa_like_div">
       <!-- BEGIN switch_like_list -->
           {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
       <!-- END switch_like_list -->
       <!-- BEGIN switch_dislike_list -->
           {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
       <!-- END switch_dislike_list -->
     </div>
     <!-- END switch_likes_active -->
     <ul class="post-buttons">
       <!-- BEGIN switch_likes_active -->
           <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
             <i class="material-icons">thumb_up</i>
             {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
             <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>
           </button>
       <!-- BEGIN switch_dislike_button -->
           <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
             <i class="material-icons">thumb_down</i>
             {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
             <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
           </button>
       <!-- END switch_dislike_button -->
       <!-- END switch_likes_active -->
           <li>{postrow.displayed.DELETE_IMG}</li>
           <li>{postrow.displayed.EDIT_IMG}</li>
       </ul>
   </div>
   <!-- BEGIN first_post_br -->
   <hr id="first-post-br" />
   <!-- END first_post_br -->
   <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-floating">
   <i class="material-icons"></i>
</a>
<!-- END switch_user_authreply -->