أداة التعليقات لمدونات بلوجر، هي أداة تمكننا من إظهار آخر و أحدث التعليقات للمدونة بشكل احترافي و متقدم.
زوار مدونتنا الكرام، نقدم لكم اليوم أداة " أحدث التعليقات " لمدونات بلوجر و التي تقوم بعرض أحدث و آخر التعليقات المنشورة في مواضيع و مشاركات مدوناتكم و ذلك بترتيب تنازلي، أي من الأحدث إلى الأقدم. بحيث أن هذه الاداة مَبْنية من الصفر و بشكل متقدم جدا للغاية. كما أنها تتسم بتحميل سريع و تُظهِر التعليقات بطريقة فريدة من نوعها. و هي تعمل مع كل قوالب بلوجر الرسمية و المخصصة، كما أنها تستجيب بشكل كامل للهواتف المحمولة.
مميزات أداة أحدث التعليقات لبلوجر:
أهم ما يجب أن يتوفر في هذه الأداة هو سرعة التحميل و ملائمتها مع كل واجهات الإستخدام لكي تبدو أفضل، و هذا ما تم وضعه في الإعتبار من أجل تطوير الأداة، بحيث تقوم بجلب التعليقات الأخيرة و الأحدث من خلاصة مدونتك بطريقة غير متزامنة دون أن تؤثر كثيرا على سرعة تحميل المدونة، و فيما يلي أهم المميزات:
تم ترميزها باستخدام جافا سكريبت و باستخدام Blogger JSON Feed API.
عرض الصورة الشخصية للمؤلف صورة - الكاتب الصورة الرمزية.
رابط المؤلف، لصورة ملفه الشخصي في + Google.
صورة متحركة: preloader.
يظهر عنوان الموضوع التي نُشِر به التعليق.
يظهر تاريخ التعليق.
يعرض مقتطفات التعليقات (مقتطف على شكل وصف قصير).
رابط قراءة المزيد، أي الذهاب للموضوع الذي نُشِر به التعليق. ( » )
خفيف و سريع التحميل.
استجابة لكل قوالب بلوجر.
استخدام التلميحات (EN= tooltips - FR= infobulles) لعرض المعلومات.
عرض الصورة الشخصية للمؤلف صورة - الكاتب الصورة الرمزية.
رابط المؤلف، لصورة ملفه الشخصي في + Google.
صورة متحركة: preloader.
يظهر عنوان الموضوع التي نُشِر به التعليق.
يظهر تاريخ التعليق.
يعرض مقتطفات التعليقات (مقتطف على شكل وصف قصير).
رابط قراءة المزيد، أي الذهاب للموضوع الذي نُشِر به التعليق. ( » )
خفيف و سريع التحميل.
استجابة لكل قوالب بلوجر.
استخدام التلميحات (EN= tooltips - FR= infobulles) لعرض المعلومات.
يعرض أداة التحميل المسبق GIF التالية و التي تدور و تنبض عندما يتم تحميل عنصر واجهة المستخدم أو عندما يطلب المتصفّح البيانات من خلاصة JSON.
بمجرد تحميل الاداة بالكامل، يتم عرض التعليقات بترتيب تنازلي (الأحدث في الأعلى).
عندما تمرر الماوس على اسم المستخدم المعلِّق، سيعرض تلميح الاداة معلومات حول تاريخ و وقت التعليق.
كما يتم إظهار تلميح آخر باسم الموضوع عندما يتم تمرير الماوس على رمز المجلد (أو الملف).
عرض أحدث التعليقات مع إظهار صورة مصغرة للمعلق:
لإضافة الأداة، التي تمكن من إظهار آخر التعليقات التي يُدلي بها زوار مدونتك... اتبع ما يلي:
1- الذهاب إلى قالب بلوجر لمدونتك.
2- و كما ننصح ددائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل.
3- تحرير قالب الــ HTML.
4- ابحث عن الكود التالي: </head> تم ألصق الأكواد أسفله قبله.
2- و كما ننصح ددائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل.
3- تحرير قالب الــ HTML.
4- ابحث عن الكود التالي: </head> تم ألصق الأكواد أسفله قبله.
ملاحظة: إذا كان قالب مدونتك يحتوي على رابط مصدر الــ jQuery، أو أحد الأكواد أسفله يُرجى عدم إضافتها.
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
5- قم بإضافة الكود التالي قبل ]]></b:skin>.
/*############Recent Comments Widget##################*/ملاحظة: يمكنكم تغيير اللون (#0075a3) في الكود باللون الذي يوافق مدونتكم.
.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-left:4px;font: normal normal 10px 'Droid Arabic Kufi', serif;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: right;padding:3px; margin:0 40px 0px 0}
.mbtcmts .icontent{ display:block; font: normal normal 10px 'Droid Arabic Kufi', serif; color:#999; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-left:5px;}
.mbtcmts img {border-radius:100%; float:right; margin:0px 0px 20px 20px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {color: #0075a3;text-decoration: none;font: normal bold 12px 'Droid Arabic Kufi', serif;}
.mbtcmts .ititle:hover {color:#4d90fe;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-left:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{
margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat right center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;right:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-right;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-right;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:left;width:110px;margin:0 10px 30px 0;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-right:-50px}.tooltip span b{width:15px;height:15px;right:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:#0075a3;border:1px solid #ffffff}.tooltip span b{background:#0075a3;border-top:1px solid #ffffff;border-left:1px solid #ffffff}
.mbtcmts .itotal {color:#333; padding:3px 10px 3px 3px; border:1px solid #eee; font-family: 'Droid Arabic Kufi', serif;font-size: 12px;}
.mbtcmts .itotal i {font-style:normal;float: right;}
.mbtcmts .itotal span{font-family:oswald; font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }
6- الآن قم بحفظ القالب، فنحن قد أوشكنا من الانتهاء.
7- أخيرا ننتقل إلى قسم التخطيط، و نقوم بالنقر على إضافة الأداة في السايدبار.
8- نختار اداة الــ HTML / JavaScript و نلصق الكود أسفله داخلها، تم حفظ.
- يُرجى استبدال URL-YOUR-BLOG بعنوان مدونتكم.
- لزيادة أو تقليل عدد التعليقات التي تريدون إظهارها في الأداة، يرجى تغيير الرقم 5 في ( ListCount = 5 ).
- لتحديد عدد الأحرف التي يستم عرضها كملخص تعليق (أي مقتطف)، يرجى تغيير العدد 90 بما يناسبكم في ( ChrCount = 90 ).
7- أخيرا ننتقل إلى قسم التخطيط، و نقوم بالنقر على إضافة الأداة في السايدبار.
8- نختار اداة الــ HTML / JavaScript و نلصق الكود أسفله داخلها، تم حفظ.
<div id="mbtloading" ></div>9- يمكنكم إجراء التعديلات التالية على الكود الأخير حسب ما يلائمكم:
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m = "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
var M_slit = mbt_slit.split("#");
M_slit = M_slit [0];
var K_slit = M_slit.split("?");
K_slit = K_slit[0];
var B_slit = K_slit.split("/");
B_slit = B_slit[5];
B_slit = B_slit.split(".html");
B_slit = B_slit [0];
var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
var Link_slit= T_slit.link(K_slit);
}
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
//################### Thumbnail Check
if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uVa0sKwIOKZyMPjK_PqBGAwVzuofypxkntgjEjXp1txYMPVhPH_Uef3vAsg_70Y5qJhEAQNV5ZDqiW4neVg44apq6KqOcZVNvoJ1YaxL3kmnu80D2Nrg88QuRT1BwVNYmgi8bgZVWls/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
"><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i>نُشِر في: </i> <span class='ipostTitle'><a class='tooltip' href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ... <a href="+ListUrl+"> » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>عدد التعليقات المنشورة حتى الآن: </i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="https://URL-YOUR-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
- يُرجى استبدال URL-YOUR-BLOG بعنوان مدونتكم.
- لزيادة أو تقليل عدد التعليقات التي تريدون إظهارها في الأداة، يرجى تغيير الرقم 5 في ( ListCount = 5 ).
- لتحديد عدد الأحرف التي يستم عرضها كملخص تعليق (أي مقتطف)، يرجى تغيير العدد 90 بما يناسبكم في ( ChrCount = 90 ).
9- احفظ عملك و استمتع بسحر أداة أحدث التعليقات لمدونات بلوجر.
إن كانت هناك أية مشاكل أو ملاحظات، فنحن دائما رهن إشارتكم ضمن تعليقاتكم في الموضوع.
