كيفية إضافة خريطة الموقع في مدونات بلوجر Blogspot sitemap

كيفية إضافة خريطة الموقع في مدونات بلوجر Blogspot

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

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

لنبدأ اول خطوة إضافة CSS

أول شيء عليك القيام به هو تسجيل الدخول إلى حساب بلوجر الخاص بك Blogger

قبل التحرير ، نوصيك بعمل نسخة احتياطية من القالب الخاص بك ، بحيث لا يحدث هناك أي خطأ في تصميم مدونتك.

ومن المظهر تعديل HTML ثم اضغط فى المستطيل بالموس وعمل ctrl+F

ابحث عن الشفرة ]]> </ b: skin> واعلاها أضف الـ CSS

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: #000;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {
    
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}

الخطوة الثانية

لآن هذا هو الجزء الأكثر أهمية في البرنامج التعليمي وعليك القيام بذلك بعناية فائقة. في القالب ، ابحث عن العلامة

ابحث عن الوسم </body> وقم بلصق الترميز التالى أعلا ة

 <script type='text/javascript'> 
            //<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png";

           var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
    var postbody = $('.static_page .post-body');
    $.ajax({
        url: "/feeds/posts/default?alt=json-in-script",
        type: 'get',
        dataType: "jsonp",
        success: function(dataZ) {
            var blogLabels = [];
            for (var t = 0; t < dataZ.feed.category.length; t++) {
                blogLabels.push(dataZ.feed.category[t].term)
            }
            var blogLabels = blogLabels.join('/');
            postbody.html('<div class="siteLabel"></div>
');
            $('.static_page .post-body .siteLabel').text(blogLabels);
            var splabel = $(".siteLabel").text().split("/");
            var splabels = "";
            for (get = 0; get < splabel.length; ++get) {
                splabels += "<span>" + splabel[get] + "</span>"
            }
            $(".siteLabel").html(splabels);
            $('.siteLabel span').each(function() {
                var mapLabel = $(this);
                var mapLabel_text = $(this).text();
                $.ajax({
                    url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
                    type: 'get',
                    dataType: "jsonp",
                    success: function(data) {
                        var posturl = "";
                        var htmlcode = '<div class="mapa">
';
                        for (var i = 0; i < data.feed.entry.length; i++) {
                            for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                                if (data.feed.entry[i].link[j].rel == "alternate") {
                                    posturl = data.feed.entry[i].link[j].href;
                                    break
                                }
                            }
                            var posttitle = data.feed.entry[i].title.$t;
                            var author = data.feed.entry[i].author[0].name.$t;
                            var get_date = data.feed.entry[i].published.$t,
                                year = get_date.substring(0, 4),
                                month = get_date.substring(5, 7),
                                day = get_date.substring(8, 10),
                                date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                            var tag = data.feed.entry[i].category[0].term;
                            var content = data.feed.entry[i].content.$t;
                            var $content = $('<div>').html(content);
                            var src2 = data.feed.entry[i].media$thumbnail.url;
                            htmlcode += '<div class="mapapost">
<div class="map-thumb">
<div class="map-img">
<a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div>
</div>
<h3 class="wrp-titulo">
<a href="' + posturl + '">' + posttitle + '</a></h3>
<div class="map-meta">
<span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div>
</div>
'
                        }
                        htmlcode += '</div>
';
                        mapLabel.replaceWith('<div class="mapasite">
<h2>
' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>
' + htmlcode + '</div>
');
                        $(document).on('click', '.mapasite h2', function() {
                            $(this).parent('.mapasite').addClass('active');
                            $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                        });
                        $(document).on('click', '.mapasite.active h2', function() {
                            $(this).parent('.mapasite').removeClass('active');
                            $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                        });
                    }
                });
            });
        }
    });
}
            //]]>
</script>

الخطوة الثالثة اضافة jQuery(مسج)

إضافة المسج أو البرنامج المساعد jQuery في مدونات بلوجر blogspot . jQuery هو أهم مكون إضافي للمكتبة لجعل مدونتك خالية تمامًا من الأخطاء. هي المسؤولة عن إحداث التأثيرات والرسوم المتحركة والوظائف الرائعة لمدونتك ،

حيث تستخدم معظم الإضافات بما في ذلك الإضافات الرسمية مكتبة jQuery لتعزيز قدرتها على العمل وسلاستها ، مع jQuery يمكنك تحقيق عملية عمل أفضل وأكثر سلاسة. يبلغ حجم ملف jQuery حوالي 100 كيلو بايت وهو متاح للتخزين المؤقت ، لذلك لا تقلق بشأن سرعة صفحتك بعد تضمينها. لتضمين jQuery (مسج) ،

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

أكثر ، عنصر واجهة نشر أحدث ، أداة لصق منشورات حديثة لـ Label Base ، أداة Random Post ، شريط الأخبار ، الرجوع إلى أعلى الصفحة وغيرها الكثير ، كما أنه يساعد على إنشاء فتن رائع ، رائع وتأثيرات سلسة لا يمكن أرشفتها باستخدام CSS.
ابحث عنة فى HTML اذا لم يكن بالقالب فيجب اضافتة فوق وسم </head>

مدونة المعلومات العامة

القائمة الرئيسية

الصفحات

كيفية إضافة خريطة الموقع في مدونات بلوجر Blogspot sitemap

لنبدأ اول خطوة إضافة CSS

أخر المواضيع من قسم : الربح من الانترنت

تعليقات

إرسال تعليق