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

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

يعني أنه يمكنك تغيير كما تشاء و ذلك بدون تغيير القالب الأصلي  .

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

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

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

نتوجه الى المدونة  ==>  ثم نضغط قالب  ==> تحرير 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/AVvXsEgqzPQEk7bYMfTWLqgIuiQDuph53tyYe_yEykY-U9LxdW2t_WPmN9-Y3ehycLR4gl2e9D81IZW0fvHiRYr06C2U8tPnuDcEyPQ8KstScJxCFack0LvX92CvdX-HKNFKu9BNHBDg4w00rPY/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>

بإمكانك تغييرالعرض و الطول فقط بتغيير

    var width         = 200;

    var height        = 170;