خريطة الموقع هي أهم شيء يجب على كل مدون إضافته إلى مدونته. إنها ليست مجرد صفحة ولكنها تساعد كثيرًا في تقليل معدل الارتداد على الفور من خلال توفير التنقل المباشر لتسمية مشاركات معينة. تُظهر أداة خريطة الموقع التي سنضيفها اليوم قائمة بالمقالات حول أحدث طلب منشور ضمن كل فئة ، وتعتمد هذه الأداة المصغّرة على ajax لذا سيتم تحميلها بسرعة فائقة ولن تؤثر على أداء مدونتك.
دعنا ننتقل إلى أبعد من ذلك ونرى كيفية إضافة عنصر واجهة مستخدم خريطة الموقع في مدونات Blogspot. يمكنك التحقق من معاينة مباشرة لعنصر واجهة مستخدم Author Box من خلال النقر على الزر أدناه.
لنبدأ الخطوة 1 ( اضافة CSS )
قبل التحرير ، نوصيك بعمل نسخة احتياطية من القالب الخاص بك حتى إذا حدث خطأ ما ، فلا يزال لديك تصميم مدونتك آمنًا.
أول شيء عليك القيام به هو تسجيل الدخول إلى حساب Blogger الخاص بك والانتقال إلى >> قوالب >> تحرير HTML والبحث عن علامة النهاية ]]> </ b: skin> وفوقها قم بلصق الكود التالي.
-------------------------------------------------- -------------------------------------------------- --------------------------------------
/* ######## Navigation Menu Css by stack-template.blogspot.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
}
------------------------------------------------------------------------------------------------------------------------------------------
الخطوة 2 (إضافة برنامج نصي بتنسيق HTML)
الآن ، هذا هو الجزء الأكثر أهمية في البرنامج التعليمي وعليك القيام به بعناية فائقة. في القالب ، ابحث عن العلامة </body> ، وفوقها الصق ترميز HTML التالي.
------------------------------------------------------------------------------------------------------------------------------------------
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokKUmmWsa-hggSqeFqYeCenruX1mqjYrl5vu_yCdQkoPX1ubiBHLPTELVW3KJtFkwFO-BaxhntaOKC2DwPp3LyM8kAW_vwRA8T-YJLT7Lguu5HXpdcW1-2zLMFZ-pP1YsmBAmv1Ip4uI/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 plugin إذا لم تقم بتثبيته بعد.
الخطوة 3 (إضافة خريطة الموقع في الصفحات) - الأهم !!
الآن ، هذا هو الجزء الأكثر أهمية في البرنامج التعليمي وعليك القيام به بعناية فائقة. انتقل إلى لوحة معلومات blogger> الصفحات> إضافة صفحة جديدة.
في محتوى الصفحة الجديدة بعد إضافة عنوان الصفحة وإخفاء التعليقات باستخدام الخيارات ، أضف الكود التالي في منطقة محتوى الصفحة.
لفهم أفضل ، تحقق من المنطقة المميزة في الصورة أدناه.
انقر الآن على زر النشر وتحقق من الصفحة المنشورة لرؤية أداة خريطة الموقع المضافة حديثًا. ؛)
خاتمة
تهاني !! لقد فعلتها. لقد تعلمت الآن كيفية إضافة عنصر واجهة مستخدم خريطة الموقع في مدونات Blogspot. قم بزيارة مدونتك وتحقق من الأداة الرائعة مباشرة في العمل ، آمل أن تكون قد أحببت هذا البرنامج التعليمي ، إذا كنت قد استمتعت ، فيرجى مشاركته مع أصدقائك ، فنحن نعمل بجد لتطوير المزيد من هذه الأدوات الرائعة ، من فضلك ترقبنا.