الطريقة الصحيحة لتغيير شكل عرض المواضيع على مدونات بلوجر

MOHAMED NAJIB SAAAD
الصفحة الرئيسية
السلام عليكم و مرحبا بكم من جديد أحبائي في مدونتكم المفضلة: مدونة محمد نجيب للمعلوميات و مع درس جديد ألا وهو:

طريقة تغيير شكل عرض المواضيع على مدونات البلوجر


 ما يميز البلوجر أن بإمكانك تغيير كما تشاء في شكل النصميم أو شكل القالب و بدون اية مشكلة ، حيث يمكنك تغيير شكل عرض المواضيع من الشكل البسيط المتداول الى الشكل شبيه بالشبكة أو  شبيه بالمربعات ،و خصوصا بالنسبة للمدونات البث المباشر أو مدونات الأفلام  أو .....

طريقة تغيير شكل ظهور المواضيع في الصفحات سواءا كانت الرئيسية أو باقي الصفحات فانفسها ، إذا بإمكانك الآن تغيير الشكل القديم الخاص بالمقالات الى الشكل الجديد المتوافق مع البث المباشر و مع مشاهدة الأفلام أو تحميل البرامج ، يعني أنه يمكنك تغيير كما تشاء و ذلك بدون تغيير القالب الأصلي  . يمكنك معاينة هذا الشكل الجديد لعرض المواضيع من هنا .

إنشاء الله هذه الطريقة مجربة و فعالة حيث ستمكنك من تغير شكل ظهور المواضيع على مدونة و ستغيره الى شكل أكتر احترافية و شبيه بالقوالب البث المباشر و كل هذا فقط من على مدونة حكمات للمعلومبات .

بالنسبة لمن تواجهه مشكلة العثور على قالب مناسب للبث المباشر للمباريات أو الأفلام ، المسلسلات ، فليس  من الضروري تغيير القالب .

  • نتوجه الى المدونة  ==>  ثم نضغط قالب  ==> تحرير HTML .
  • نبحث عن الوسم أو الكود </head>
  • ثم نضيف الكود التالي فوقه مباشرة    "قبل </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/AVvXsEgx8rjxuOBt2JmPi-chv5tARrK12Ylc_VvBucQnzVGQI8J6yhSXCCMWUFQYpZ3YSm5FlCZ7s12kIwYrZbtobGkgrzWhnyg_66MB0fikDN82aQCTURn0RwC3PuoRHWnSIk3obZF_OR-HtEg/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>


  • بإمكانك تغييرالعرض و الطول فقط بتغيير
  • كان هذا موضوع "تغيير شكل عرض المواضيع على البلوجر"  .
وهذا محمد نجيب سعاد يحييكم فلا تبخلوا علينا بتشجيعاتكم
google-playkhamsatmostaqltradent