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

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

مواضيع ذات صله بشكل رائع وتاثيرات عند مرور الماوس موضع الاضافه تحت المواضيع لتذكير الزائر بمواضيع اخرى لها صله بنفس الموضوع الذى قراه على مدونتك

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

1- اذهب الى لوحة تحكم مدونتك
2- افتح التبويب قالب
3- اختر تحرير HTML
4- باستخدام لوحة المفاتيح ابحث عن الكود التالى

</head>

ضع فوقه مباشرتا هذا الكود

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 3; // number of entries to be shown
var relatedmaxnum = 50; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin994BZ7ROpqzf86NSmvvodackyxBiSXTX5sdpY2D8qNl99sMEodqze1LvkgVZLehnFNxrRNbN_Mgl3ns3-wv1KG2cIFYXPbbSFlpZ1bN6ey3YPkTsd_Im45ZvuOuckMgXj8MYQQjpJfAa/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src='https://th3maestro.googlecode.com/svn/trunk/js/related-posts-with-thumbs-and-summaries.js'/>

الان ابحث عن هذا الكود

</b:skin>

وايضا ضع فوقه الكود التالى

/*--- relatedposts by th3maestro.com ----*/
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 170px;
    height: 250px;
    border-right: 1px solid #E5E5E5;
    display: inline-block;
}

.relatedsumposts:hover {
    background-color: #F7F7F7;
}

.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.relatedsumposts a {
  /* link properties */
    color: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 160px;
}

.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    color: #summarycolor;
    font-size: 12px;
    height: 4em;
    
    margin: 20px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: center;
}

#relatedpostssum {
    background: #F3F3F3;
    height: 250px; /* related posts container */
    padding: 5px;
    width: 626px;
}

.relatedpoststitle {
    font-size: 22px;
    font-weight: bold;
    border-top: 3px solid #E74C3C;
    color: #666666;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: right;
    margin: 24px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0; 
   
text-align: center;
}
/*--- relatedposts by th3maestro.com ----*/

الان ابحث عن هذا الكود

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;false&quot;'>,</b:if>

اضف بعده مباشرتا هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

ليصبح شكل الكود كله بهذا الشكل

<b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
          </b:loop>

الخطوه الاخيره ابحث عن

<b:includable id='post' var='post'>

انظر الصوره هذه الخطوه هامه جدا

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

بعد الضغط على السهم الاسود الصغير على اليسار كما بالصوره ستجد هذا الكود </b:includable> ضع فوقه مباشرتا الكود التالى

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>قد يعجبك ايضا</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

صوره لمكان الكود بالتحديد