{ حلول المشاكل } مشكلة طول المواضيع في بلوجر Codes | 2015

حل لمشكلة طول عرض المواضيع
أي تكون المواضيع ذات طول طويل جداً في المدونة بدون سبب وتظهر فجأة في المدونة

الكثير من واجهة هذه المشكلة قام بالبحث عن المشكلة في تحرير القالب 

أو بعض الأحيان القالب لم يتم التعديل علية لتظهر هذه المشكلة 

الان سنتعلم كيفية حل هذه المشكلة بدون أدنى تعديل للقالب !

فقط نقوم بإضافة كود يساعدنا في :

1. تعديل عرض المواضيع وطولها

 وهذا هو المطلوب لحل هذه المشكلة التي تجعل المدونة بشكل غير لائق أي تزيد من طولها 

وهذا يجعل الزائر يمل من المدونة ويظن أنها غير صالحة 

وهناك عوائق تواجة الزوار من هذه المشكلة 

1. البطئ في تحميل المدونة بسبب طول المواضيع وتحميل الصور وأكواد المواضيع
2. جعل المدونة غير صالحة بنظر الزائر ويخرج منها

والان نأتي للأهم وهو حل المشكلة :
أذهب للقالب > تحرير HTML

أبحث عن 

</head>

وأضف فوقة 

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width         = 200;
    var height        = 170;    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7rRinwCNFvuosG-S1F6lD2OzeCmCrBOvnIHQHl3w76R9gzhqhG-KCXWQ9em4DkdMCzNZSI51WDlCdESKCoI36kN0t1ys6ktXMsTb0Ggb7k3H-vOyAsy67q5TV-qvbF6Dgbu50cMQ6WU/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titlerightleftPadding    = 5;
    var titlePadding = titleTopPadding + 'px ' + titlerightleftPadding + 'px ' + titleBottomPadding + 'px ' + titlerightleftPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
         
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href',linkURL).css('clear','none').css('margin-right','0').css('margin-left','0').addClass('postThumbnail');
     
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','right').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

</* Codes posts saudi-7reeef */ >

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

var height        = 170;   = طول الموضوع وهذا الأهم 

     var width         = 200; = عرض الموضوع

للمزيد من الحلول قم بالأنضمام للمدونة

أضغط للأنضمام

شارك المقال

شاركه على فيسبوكشاركه على جوجل+