انشاء خريطة مدونةعام

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

0
(0)

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

شكل عرض المواضيع

 

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

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

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

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

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

نتوجه الى المدونة  ==>  ثم نضغط قالب  ==> تحرير 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    = ‘http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/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(/sBd{3,4}/,’s’ + width + ‘-c’)});

                image.attr(‘width’,width).attr(‘height’,height);

            } else {

                image.attr({src : image.attr(‘src’).replace(/sBd{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;

هل كانت هذه المقالة مفيدة ؟

اضغط على عدد النجوم للتقييم

متوسط التقييم 0 / 5. عدد الاصوات : 0

لا يوجد مصوتين كن انت الاول

Sory Mohajer

Sory Mohajer مدير موقع EXE and APK التدوين هوايتي أنضممت لعالم التقنية منذ عام 2014 أحاول تأمين أكبر عدد للتراخيص وأجدد المقالات بشكل دوري حتى وصلت عددها الى اكثر من 4000 مقالة متنوعة تحتوي برامج وتطبيقات مع شروحات سيو لتحسين الموقع وكل هذا بمجهود شخصي .

مقالات ذات صلة

اترك ردك على هذا المقال

زر الذهاب إلى الأعلى