13 يوليو، 2014

مدون محترف اضافات بلوجر اضافة اداة اخر التعليقات مع الصور

اضافة اداة اخر التعليقات مع الصور

اضافة اداة اخر المعلقين مع الصور و التحكم بالاضافة و تنسيقها على ذوقك

اليوم في مدون محترف سوف نناقش امر التعليقات و تركيب اضافة اكثر من رائعة و تعتبر من اهم الاضافات التي تضيف جمالية إلى قوالب بلوجر و الذي يستخدمها اكثر المدونين و اشهر المدونات و هي اضافة اخر المعلقين الاكثر احترافية لمدونات بلوجر فهي تعرض لك التعليق واسم المعلق وصورة المعلق و رؤية التعليقات مباشرة من خلال المدونة دون الذهاب الى لوحت تحكم بلوجر ثم الى التعليقات فهي مباشرة تراها في المدونة الان نتطرق الى طريقة اضافة الاداة يمكن التحكم بالاضافة و تخصيصها كما تريد و عند وضع مؤشر الماوس على الصور تقوم بالدوران و هذا يزيد من جمالية الاضافة

    شرح التركيب

      1. انتقل إلى المدونة 
      2.  تخطيط 
      3.  إضافة أداة
      4. حدد إضافة اداة HTML/JavaScript و إضافة هذا الكود بها

        عرض التعليقات مع صور المعلقين نقوم باضافة هذا الكود
        <style type="text/css">
        .rc{padding-left:24px; padding-top: 6px;}
        .rc a:hover {color: #F3903E;text-decoration: none;}
        .rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
        .rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out; }
        .rc-ico img:hover {-webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);}
        .rc-header{font-size: 13px;}
        .rc-header a{}
        .rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
        .rc-footer{font-size:11px; float: right;}
        #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
        </style>
        <script type="text/javascript">
        var numRecentComments = 5;
        var maxCommentChars = 67;
        var trueAvatars = true;
        var urlMyAvatar = '';
        var urlMyProfile = '';
        var cropAvatar = true;
        var sizeAvatar = 50;
        var urlNoAvatar = "http://2.bp.blogspot.com/-GfFjD8etS2E/UTPve4mQdYI/AAAAAAAAC7k/gy0DVRlx4xM/s"+sizeAvatar+"/anonymous-Icon.jpg";
        var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
        var txtMore = '';
        var txtWrote = 'commented:';
        var txtAnonymous = '';
        var maxResultsComments = "";
        var numPerPost = 2;
        var maxPostTitleChars = 40;
        var getTitles = true;
        var maxResultsPosts = "";
        var txtTooltip = '[user] on &quot;[title]&quot; - [date MM-dd-yyyy hh:mm]';
        var urlToTitle = {};
        function replaceVars(text, user, title, date) {
        text = text.replace('[user]', user);
        text = text.replace('[date]', date.toLocaleDateString());
        text = text.replace('[datetime]', date.toLocaleString());
        text = text.replace('[time]', date.toLocaleTimeString());
        text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
        var i = text.indexOf("[date ");
        if(i > -1) {
        var format = /\[date\s+(.+?)\]/.exec(text)[1];
        if(format != '') {
        var txtDate = format.replace(/yyyy/i, date.getFullYear());
        txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
        txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
        txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
        txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
        txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
        //or: txtDate = txtDate.replace("dd", date.getDate());
        txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
        //or: txtDate = txtDate.replace("hh", date.getHours());
        text = text.replace(/\[date\s+(.+?)\]/, txtDate)
        }
        }
        return text;
        }
        if(urlMyProfile == "") {
        var elements = document.getElementsByTagName("*");
        var expr = /(^| )profile-link( |$)/;
        for(var i=0 ; i<elements.length ; i++)
        if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
        }
        }
        function getPostUrlsForComments(json) {
        for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
        }
        }
        urlToTitle[href] = entry.title.$t;
        }
        }
        function showRecentComments(json) {
        var postHandled = {};
        var j = 0;
        if(numPerPost) {
        while(numPerPost < numRecentComments) {
        for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
        if(entry["thr$in-reply-to"]) {
        if(!postHandled[entry["thr$in-reply-to"].href])
        postHandled[entry["thr$in-reply-to"].href] = 1;
        else
        postHandled[entry["thr$in-reply-to"].href]++;
        if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
        j++;
        }
        }
        if(j >= numRecentComments)
        break;
        numPerPost++;
        j = 0;
        postHandled = {};
        }
        if(numRecentComments == numPerPost)
        numPerPost = 0;
        }
        postHandled = {};
        j = 0;
        for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
        if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
        continue;
        if(entry["thr$in-reply-to"]) {
        if(!postHandled[entry["thr$in-reply-to"].href])
        postHandled[entry["thr$in-reply-to"].href] = 1;
        else
        postHandled[entry["thr$in-reply-to"].href]++;
        j++;
        var href='';
        for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
        }
        }
        if(href=='') {j--; continue; }
        var hrefPost = href.split("?")[0];
        var comment = "";
        if("content" in entry) comment = entry.content.$t;
        else comment = entry.summary.$t;
        comment = comment.replace(/<br[^>]*>/ig, " ");
        comment = comment.replace(/<\S[^>]*>/g, "");
        var postTitle="-";
        if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
        else {
        if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
        postTitle = postTitle.replace(/-/g," ");
        postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
        }
        if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
        postTitle = postTitle.substring(0, maxPostTitleChars);
        var indexBreak = postTitle.lastIndexOf(" ");
        postTitle = postTitle.substring(0, indexBreak) + "...";
        }

        var authorName = entry.author[0].name.$t;
        var authorUri = "";
        if(entry.author[0].uri && entry.author[0].uri.$t != "")
        authorUri = entry.author[0].uri.$t;
        var avaimg = urlAnoAvatar;
        var bloggerprofile = "http://www.blogger.com/profile/";
        if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = entry.author[0].gd$image.src;
        else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
        parseurl.href = authorUri;
        avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
        }
        if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
        if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
        var newsize="s"+sizeAvatar;
        avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
        if(cropAvatar) newsize+="-c";
        avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
        if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
        var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
        if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
        var clsAdmin = "";
        if(urlMyProfile != "" && authorUri == urlMyProfile)
        clsAdmin = " rc-admin";
        var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
        var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

        var txtHeader = txtWrote;
        if(txtWrote.indexOf('[')==-1)
        txtHeader = authorName + ' ' + txtWrote;
        else
        txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

        var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
        if(!/#/.test(href)) href += "#comments";
        document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
        document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
        if(comment.length < maxCommentChars)
        document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
        else {
        comment = comment.substring(0, maxCommentChars);
        var indexBreak = comment.lastIndexOf(" ");
        comment = comment.substring(0, indexBreak);
        document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
        if(txtMore != "") {
        var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
        document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
        }
        }
        document.write('<div style="clear:both;"></div></div>');
        }
        }
        }
        if(getTitles)
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
        </script>
        <span id=rcw-cr><a href=http://mudwnp.blogspot.com/2014/07/recent-comments-with-author.html>Recent Comments Widget</a></span>

        عرض التعليقات مع اخفاء صورة المعلقين نقوم باضافة هذا الكود بدلا من الاوا
        <style type="text/css">
        .rc{margin-left: 0px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px dotted;}
        .rc-ico{float:left; margin-right:3px}
        .rc-ico img {display:none; }
        .rc-header{}
        .rc-header a{color: #045FB4;}
        .rc-body{font-style: italic; font-size: 12px; color: #444444; border: 0px dotted #000000;}
        .rc-footer{font-size:11px; }
        #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
        </style>
        <script type="text/javascript">
        var numRecentComments = 5;
        var maxCommentChars = 95;
        var trueAvatars = true;
        var urlMyAvatar = '';
        var urlMyProfile = '';
        var cropAvatar = true;
        var sizeAvatar = 50;
        var urlNoAvatar = "http://2.bp.blogspot.com/-GfFjD8etS2E/UTPve4mQdYI/AAAAAAAAC7k/gy0DVRlx4xM/s"+sizeAvatar+"/anonymous-Icon.jpg";
        var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
        var txtMore = '';
        var txtWrote = '[user] commented on [title]';
        var txtAnonymous = '';
        var maxResultsComments = "";
        var numPerPost = 2;
        var maxPostTitleChars = 50;
        var getTitles = true;
        var maxResultsPosts = "";
        var txtTooltip = 'Date: [date MM-dd-yyyy hh:mm]';
        var urlToTitle = {};
        function replaceVars(text, user, title, date) {
        text = text.replace('[user]', user);
        text = text.replace('[date]', date.toLocaleDateString());
        text = text.replace('[datetime]', date.toLocaleString());
        text = text.replace('[time]', date.toLocaleTimeString());
        text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
        var i = text.indexOf("[date ");
        if(i > -1) {
        var format = /\[date\s+(.+?)\]/.exec(text)[1];
        if(format != '') {
        var txtDate = format.replace(/yyyy/i, date.getFullYear());
        txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
        txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
        txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
        txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
        txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
        //or: txtDate = txtDate.replace("dd", date.getDate());
        txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
        //or: txtDate = txtDate.replace("hh", date.getHours());
        text = text.replace(/\[date\s+(.+?)\]/, txtDate)
        }
        }
        return text;
        }
        if(urlMyProfile == "") {
        var elements = document.getElementsByTagName("*");
        var expr = /(^| )profile-link( |$)/;
        for(var i=0 ; i<elements.length ; i++)
        if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
        }
        }
        function getPostUrlsForComments(json) {
        for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
        }
        }
        urlToTitle[href] = entry.title.$t;
        }
        }
        function showRecentComments(json) {
        var postHandled = {};
        var j = 0;
        if(numPerPost) {
        while(numPerPost < numRecentComments) {
        for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
        if(entry["thr$in-reply-to"]) {
        if(!postHandled[entry["thr$in-reply-to"].href])
        postHandled[entry["thr$in-reply-to"].href] = 1;
        else
        postHandled[entry["thr$in-reply-to"].href]++;
        if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
        j++;
        }
        }
        if(j >= numRecentComments)
        break;
        numPerPost++;
        j = 0;
        postHandled = {};
        }
        if(numRecentComments == numPerPost)
        numPerPost = 0;
        }
        postHandled = {};
        j = 0;
        for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
        if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
        continue;
        if(entry["thr$in-reply-to"]) {
        if(!postHandled[entry["thr$in-reply-to"].href])
        postHandled[entry["thr$in-reply-to"].href] = 1;
        else
        postHandled[entry["thr$in-reply-to"].href]++;
        j++;
        var href='';
        for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
        }
        }
        if(href=='') {j--; continue; }
        var hrefPost = href.split("?")[0];
        var comment = "";
        if("content" in entry) comment = entry.content.$t;
        else comment = entry.summary.$t;
        comment = comment.replace(/<br[^>]*>/ig, " ");
        comment = comment.replace(/<\S[^>]*>/g, "");
        var postTitle="-";
        if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
        else {
        if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
        postTitle = postTitle.replace(/-/g," ");
        postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
        }
        if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
        postTitle = postTitle.substring(0, maxPostTitleChars);
        var indexBreak = postTitle.lastIndexOf(" ");
        postTitle = postTitle.substring(0, indexBreak) + "...";
        }

        var authorName = entry.author[0].name.$t;
        var authorUri = "";
        if(entry.author[0].uri && entry.author[0].uri.$t != "")
        authorUri = entry.author[0].uri.$t;
        var avaimg = urlAnoAvatar;
        var bloggerprofile = "http://www.blogger.com/profile/";
        if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = entry.author[0].gd$image.src;
        else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
        parseurl.href = authorUri;
        avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
        }
        if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
        if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
        var newsize="s"+sizeAvatar;
        avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
        if(cropAvatar) newsize+="-c";
        avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
        if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
        var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
        if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
        var clsAdmin = "";
        if(urlMyProfile != "" && authorUri == urlMyProfile)
        clsAdmin = " rc-admin";
        var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
        var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

        var txtHeader = txtWrote;
        if(txtWrote.indexOf('[')==-1)
        txtHeader = authorName + ' ' + txtWrote;
        else
        txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

        var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
        if(!/#/.test(href)) href += "#comments";
        document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
        document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
        if(comment.length < maxCommentChars)
        document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
        else {
        comment = comment.substring(0, maxCommentChars);
        var indexBreak = comment.lastIndexOf(" ");
        comment = comment.substring(0, indexBreak);
        document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
        if(txtMore != "") {
        var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
        document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
        }
        }
        document.write('<div style="clear:both;"></div></div>');
        }
        }
        }
        if(getTitles)
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
        </script>
        <span id=rcw-cr><a href=http://mudwnp.blogspot.com/2014/07/recent-comments-with-author.html>Recent Comments Widget</a></span>

         اهم الاعدادات 


        - لتغيير عدد المعلقين قم بتغيير الرقم الذي باللون البرتقالي
        - لتغيير عدد الاحرف قم بتغيير ما هو باللون الاخضر
        - لإخفاء تعليقاتكم، استبدال Blogger User مع اسم المستخدم
        - لتغيير حجم الصورة الرمزية، تغيير قم بتغيير العدد الذي
        باللون الازرق.
        - إذا كنت لا تريد الصور الرمزية مدورة، احذف هذا السطر:
        -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
         



        في امان الله
        مدونة مدون محترف


        مواضيع ذات صلة
        اضافة اداة اخر التعليقات مع الصور
        4 / 5
        بواسطة

        هناك 4 تعليقات :

        يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
        =q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r