ديسمبر 16, 2019
بسم الله الرحمن الرحيم
زوار المدونة
السلام عليكم ورحمة الله وبركاته
اليوم في هذا الدرس الجديد، والمهم أيضاً، في تحسين المدونة، سواءًً للاطراف الخارجية، او لزائر المدونة.
وهذا الموضوع هو بعنوان:-
كيف تضيف صفحة خريطة الموقع للمدونة؟
بدايةً يجب ان تفرق بين إضافة خريطة بالنسبة لأدوات مشرفي المواقع.
وبين إضافة صفحة خريطة الموقع للمدونة.
فـــ الاول هي من اجل اثبات ملكية للموقع اولاً وثانيا من اجل السماح لعناكب البحث الدخول لمواضيع المدونة، من اجل اضهار موضوعات المدونة في محركات البحث والتي تسمى بفهرسة المدونة.
اما الثاني وهو موضوع حديثنا، ويقصد به اضافة صفحة خريطة الموقع وهي خاصه بموقع المدونة.
بمعنى ان هذه الصفحه توضح جميع الاقسام التي تحتويها مدونتك، مثلاً مثل قسم ادسنس، او قسم الربح من الانترنت، او قسم الربح من اليوتيوب، او قسم بلوجر، وهكذا تتعدد الأسماء من مدونة إلى اخرى.
والغرض من هذا كله هو تسهيل عملية البحث والتنقل لزائر المدونة بين صفحاتها واقسامها، خاصة في بعض المدونات التي لا تضهر اقسامها للزائر سواء يرجع ذلك الى المدون نفسه او ان بعض القوالب تتعذر اضافة مثل هذه الأشياء والتي تعتبر من الأشياء الضرورية في التدوين.
لا أُطيل عليكم في الشرح والتوضيح، بين الاشياء الخارجه عن موضوعنا الحالي.
الان مع شرح الموضوع:-
سنستخدم في موضوعنا اليوم ثلاثه اكواد.
طبعا هذه الأكواد سنستخدمها بعد الذهاب الى إعدادات المدونة، ونختار المظهر، وبعدها نختار تعديل HTML
ثم نبحث عن السم <head>
ثم نضع الكود الأول تحته
الكود الثاني سوف نبحث عن اكواد css
وسوف نجد الكثير منها ونضع الكود في نهاية احد هذه الاكواد.
اما الكود الثالث فسوف نضعه في نهاية القالب وقبل الوسم<body/>
وتابعوا الفيديو للتعرف اكثر وعدم الاستعجال كي لا تتسبب في ارتكاب أخطاء في القالب
<div dir="rtl" style="text-align: right;" trbidi="on">
[sitemap]
</div>
=====================================
=====================================
<!-- كود يضاف لأكواد الـ CSS -->
.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: right;}
.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 {margin-top: 0 !important;padding-top: 10px;font-weight: 700;font-size: 14px;line-height: 1.3em;padding-right: 25px;padding-left: 10px;display: block;overflow: hidden;margin-bottom: 5px;}
.mapapost .wrp-titulo a:hover {color: #f30;text-decoration: underline}
.map-meta {display: block;float: right;overflow: hidden;padding-right: 25px;}
.mapasite h2 .botao {float: right;padding: 10px 10px 10px 10px;}
span.p-author {float: right;padding-left: 5px;}
span.p-date {float: left;padding-right: 5px;}
=====================================
=====================================
<!-- كود يضاف في نهاية أكواد القالب -->
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuEvRPp3h1gl7qqgjEQAkHSeUQBya1AxGJQ7tm83TwJAhhsEDSvLPoUcailfFobpxXYuqouvA796_fv6QyY963xtOIIyCD-tu_iHuLyjPKSzPeD57CHEXOWbuJcV22pcU6f_H_Zgzz2k/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>
زوار المدونة
السلام عليكم ورحمة الله وبركاته
اليوم في هذا الدرس الجديد، والمهم أيضاً، في تحسين المدونة، سواءًً للاطراف الخارجية، او لزائر المدونة.
وهذا الموضوع هو بعنوان:-
كيف تضيف صفحة خريطة الموقع للمدونة؟
بدايةً يجب ان تفرق بين إضافة خريطة بالنسبة لأدوات مشرفي المواقع.
وبين إضافة صفحة خريطة الموقع للمدونة.
فـــ الاول هي من اجل اثبات ملكية للموقع اولاً وثانيا من اجل السماح لعناكب البحث الدخول لمواضيع المدونة، من اجل اضهار موضوعات المدونة في محركات البحث والتي تسمى بفهرسة المدونة.
اما الثاني وهو موضوع حديثنا، ويقصد به اضافة صفحة خريطة الموقع وهي خاصه بموقع المدونة.
بمعنى ان هذه الصفحه توضح جميع الاقسام التي تحتويها مدونتك، مثلاً مثل قسم ادسنس، او قسم الربح من الانترنت، او قسم الربح من اليوتيوب، او قسم بلوجر، وهكذا تتعدد الأسماء من مدونة إلى اخرى.
والغرض من هذا كله هو تسهيل عملية البحث والتنقل لزائر المدونة بين صفحاتها واقسامها، خاصة في بعض المدونات التي لا تضهر اقسامها للزائر سواء يرجع ذلك الى المدون نفسه او ان بعض القوالب تتعذر اضافة مثل هذه الأشياء والتي تعتبر من الأشياء الضرورية في التدوين.
لا أُطيل عليكم في الشرح والتوضيح، بين الاشياء الخارجه عن موضوعنا الحالي.
الان مع شرح الموضوع:-
سنستخدم في موضوعنا اليوم ثلاثه اكواد.
طبعا هذه الأكواد سنستخدمها بعد الذهاب الى إعدادات المدونة، ونختار المظهر، وبعدها نختار تعديل HTML
ثم نبحث عن السم <head>
ثم نضع الكود الأول تحته
الكود الثاني سوف نبحث عن اكواد css
وسوف نجد الكثير منها ونضع الكود في نهاية احد هذه الاكواد.
اما الكود الثالث فسوف نضعه في نهاية القالب وقبل الوسم<body/>
وتابعوا الفيديو للتعرف اكثر وعدم الاستعجال كي لا تتسبب في ارتكاب أخطاء في القالب
<div dir="rtl" style="text-align: right;" trbidi="on">
[sitemap]
</div>
=====================================
=====================================
<!-- كود يضاف لأكواد الـ CSS -->
.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: right;}
.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 {margin-top: 0 !important;padding-top: 10px;font-weight: 700;font-size: 14px;line-height: 1.3em;padding-right: 25px;padding-left: 10px;display: block;overflow: hidden;margin-bottom: 5px;}
.mapapost .wrp-titulo a:hover {color: #f30;text-decoration: underline}
.map-meta {display: block;float: right;overflow: hidden;padding-right: 25px;}
.mapasite h2 .botao {float: right;padding: 10px 10px 10px 10px;}
span.p-author {float: right;padding-left: 5px;}
span.p-date {float: left;padding-right: 5px;}
=====================================
=====================================
<!-- كود يضاف في نهاية أكواد القالب -->
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuEvRPp3h1gl7qqgjEQAkHSeUQBya1AxGJQ7tm83TwJAhhsEDSvLPoUcailfFobpxXYuqouvA796_fv6QyY963xtOIIyCD-tu_iHuLyjPKSzPeD57CHEXOWbuJcV22pcU6f_H_Zgzz2k/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>
ليست هناك تعليقات: