لقوالب البلوجر
أضافة أداة أخر التعليقات
الفائدة منها انك ستكون مضطلع على التعليقات التي توضع بداخل المواضيع
بدلا من الذهاب التعليقات و البحث عن التعليقات الجديدة
هذه الاضافة تظهر على واجهة القالب
الاضافة سهلة التركيب و تظهر بشكل جميل و مميز
طريقة التركيب
الذهاب الى المظهر و البحث عن ]]></b:skin> و لصق الكود التالي فوقه مباشرة
/*############Recent Comments Widget##################*/
.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-right:4px;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px}
.mbtcmts .icontent{ display:block;font-size: 12px; font-family:Georgia; color:#999;line-height:1.5em;}
.mbtcmts .icontent a {color:#0078d1; text-decoration:none; font-weight: bold;font-size: 10px;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-right:5px;}
.mbtcmts img {border-radius: 100%; float: right;margin: 0px 2px 16px 0px;border: 1px solid #eee;padding: 3px; width: 50px; height: 48px;box-shadow: 2px 2px 4px #ddd;}
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {font-family:oswald;float: right; font-size:14px; color:#0078d1; font-weight:normal; text-decoration:none;}
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right: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 left 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%;left: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-left;-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-left;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:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left: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:#0078d1;border:1px solid #ffffff}.tooltip span b{background:#0078d1;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;}
.mbtcmts .itotal i {font-style:normal;}
.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'; }
البحث عن </head> و لصق الكود التالي فوقه مباشرة
<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'/>
قم بالحفظ
الذهاب الأن الى التخطيط ووضع الكود التالي بداخل اداة جديد و تسميتها بما تريد
<div id="mbtloading" ></div>
<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/AVvXsEgYEb9uEjuCsjWL-xM8ADU0fQBShJ2XX4jT1vFyhDdgVCeGtTANehdCDrMgjRGddrshLpqcG-T18gySpMK0Pa2q-J1PzBPPyz2ZO2v4Ccqa4zWkDHTNd4oNqdlPzOqwUczVymujsvBVpk4/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> posted in</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>delicious comments posted so far!</i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 60;
</script>
<script src="https://teeeeeest88.blogspot.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
تغير الرابط الملون باللون الأحمر برابط مدونتك https://teeeeeest88.blogspot.com
و ثم قم بالحفظ و مبروك عليك الأضافة
شكرًا لوقتكم واهتمامكم بقراءة موضوع اضافة اداة اخر التعليقات لقوالب البلوجر محدثة. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.

