Stunning Blogger: March 2017

Archive for March 2017

5 COOL AND STUNNING RESENT POST WIDGETS

March 28, 2017 Add Comment

we are belivee in design and to keep updated our blogger is our first aim. You find very responsive help about Blogger that you need in any critical stage. So,stay tuned with us to get more efficient blogger widgets and gadgets.

Today we are offering you 5 stunning resent post widgets

Design #01

CODE:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0IgDZAr6UU2UpPOG3gdv9CUbqjiV2aNSKiTwJfqzKlGDKnJRTFyZS4nqo5Aph6oU8boo6IKrE8Hr8gEYSIJ04vF7gTrH-_NppgnDtoeKSqpqstvVVus2bcY6CKWGTFqNn5PEa1RctTOt/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Design #02

CODE:

div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Design #03

CODE:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0IgDZAr6UU2UpPOG3gdv9CUbqjiV2aNSKiTwJfqzKlGDKnJRTFyZS4nqo5Aph6oU8boo6IKrE8Hr8gEYSIJ04vF7gTrH-_NppgnDtoeKSqpqstvVVus2bcY6CKWGTFqNn5PEa1RctTOt/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

Design #04

CODE:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0IgDZAr6UU2UpPOG3gdv9CUbqjiV2aNSKiTwJfqzKlGDKnJRTFyZS4nqo5Aph6oU8boo6IKrE8Hr8gEYSIJ04vF7gTrH-_NppgnDtoeKSqpqstvVVus2bcY6CKWGTFqNn5PEa1RctTOt/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Design #05

CODE:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0IgDZAr6UU2UpPOG3gdv9CUbqjiV2aNSKiTwJfqzKlGDKnJRTFyZS4nqo5Aph6oU8boo6IKrE8Hr8gEYSIJ04vF7gTrH-_NppgnDtoeKSqpqstvVVus2bcY6CKWGTFqNn5PEa1RctTOt/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

How to Add Recent Posts Widget to your Blogger?

Log on to your blogger.
click on Layout and go to "Add a widget".
From the pop up window just scroll down and select HTML/Javascript widget.

FANCY BLOGGER COMMENTS WITH COUNTER

March 28, 2017 Add Comment

Blogger threaded comments are everywhere now and its time you redesign the style and format of your comments. A good blog commenting system helps to build a strong readership and help readers to engage more into discussion. Since 2009 we have been introducing various ways of customizing comment forms on blogger blogs.

We introduced Facebook Comments Plugin, Customized BlogSpot comment Forms, then Blogger nested comments, Google+ comments and now finally a more appealing and advance version of BlogSpot threaded comments to make your blog stand out. You can see a practical demo of this feature on our blog. You will find a beautiful header with comment policy, total comment count and anchor link to comment form. The nested comments and parent comments are both styled differently. Author comments are styled using a ribbon that hangs on top-right corner.

If you have not yet upgraded to threaded comments then kindly first follow this easy tutorial below and get back here:

Go To Blogger > Template
Backup your template - You must keep a backup of your copy if incase you wanted to undo steps
Search for this piece of code:

<b:includable id='threaded_comment_css'>

Click the highlighted region to expand its code. You will now need to replace all the CSS code inside <style> and </style> with the following styles:

/* Fancy Blogger Threaded Comments by MBT starts */
.comment-thread ol {
                counter-reset: mbt-comments;
}
            .comment-thread li:before {
            content: "\25C4"counter(mbt-comments) "\25BA";
            counter-increment: mbt-comments;
            font-size: 16px;
            position: relative;
            top: 100px;
            font-weight: bold;
            font-family: arial, georgia;
            color: rgb(199, 199, 199);
            left: -110px;
            padding: 4px 8px;
}
            .comment-thread ol ol {
            counter-reset: mbt-comments-sub;
              padding-top: 20px!important;
              margin-bottom: 25px;
}
            .comment-thread li li:before {
            content: counter(mbt-comments) "." counter(mbt-comments-sub);
            counter-increment: mbt-comments-sub;
            font-size: 14px;
            position: relative;
            top: 100px;
                left: -80px;
}

          .comments .comments-content .comment-thread ol ol {
                padding: 0px 10px 40px 40px;
                border: 1px solid #ddd;
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
                margin-top: 10px;
                  }
                .comments .comments-content .comment-thread ol ol li {
                    margin-bottom: -40px;
}

                  .comments {
                    clear: both;
                    margin-top: 10px;
                    margin-bottom: 0px;
                    line-height: 1em; border:0px !important;
                  }
                  .comments .comments-content {
                    font-size: 12px;
                    margin-bottom: 16px;
                    font-family: Verdana;
                    font-weight: normal;
                    text-align:left;
                    line-height: 1.4em;
                    width:88%; margin-left:70px;
                  }
                    .comment-form {
                    max-width: 100%;
                    clear: both;
}

                  .comments .comments-content .comment-thread ol li {
                    margin-top: -30px;
}


                  .comments .comment .comment-actions a {

                    cursor: pointer;
                    color: rgb(46, 46, 46);
                    padding: 2px 3px 2px 30px;
                    Position: RElative;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-size: 12px;
                    font-weight: 700;
                    margin-right: 15px;
                    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlK4Jm9zxpSJT3MLu_3qWHRgmT3BO71jd2I-uHIOIOPGO8E0Jyg6JYcyp_z8Sfq5rhBTqe9iF1NzDXOepR_JWQhM3mQs-LUyq1DvIYqIH7FpWVr28MHhRzNOrEdS9Yyr8WufGf4NpRBwtz/s1600/reply.png) no-repeat 9px 0px;
                    float:right;
                  }




                  .comments .comment .comment-actions a:hover {
                    text-decoration: underline;

                  }
                  .comments .comments-content .comment-thread ol {
                    list-style-type: none;
                    padding: 0;
                    text-align: none;
                  }

                  .comments .comments-content .comment-thread ol li {
                  border-bottom: 0px dashed rgb(196, 196, 196);
                    margin-bottom:25px
                  }

                  .comments .comments-content .inline-thread {
                    padding: 0.5em 1em;
                  }
                  .comments .comments-content .comment-thread {
                    margin: 8px 0px;
                  }
                  .comments .comments-content .comment-thread:empty {
                    display: none;
                  }
                  .comments .comments-content .comment-replies {
                    margin-top: 1em;
                    margin-left: 40px;
                    font-size:12px;

                  }
                  .comments .comments-content .comment {
                    margin-bottom:16px;
                    padding-bottom:8px;
                  }
                  .comments .comments-content .comment:first-child {
                    padding-top:16px;
                  }
                  .comments .comments-content .comment:last-child {
                    border:0px;
                    padding-bottom:0;
                  }
                  .comments .comments-content .comment-body {
                    position:relative;
                  }
                  .comments .comments-content .user {

                    font-weight: 700;
                     font-size: 14px;
                    font-family: 'Open Sans Condensed', sans-serif;
                    color: #333!important;
                  }


                  .comments .comments-content .icon.blog-author{
                    position: absolute;
                    top: 52px;
                    right: -36px;
                    margin: 5px 0px 0px 0px !important;
                    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgey8X467MV2hDeWIdM2dZgZT1eG7EHqSMswPjV-iTjrRa5Q02WHDYGRAXbcL-FaVJmVvG_FR-hnaQwDMM4wgmIB6kacCesLY6nMSg27okYJ3WRXQj9mAsZYCBmuqw2kH8afVHbGHtZAiQ2/s320/aDMIN.png") no-repeat scroll 0% 0% transparent;
                    width: 90px !important;
                    height: 90px !important; }


                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
                    margin:0px;
                    display: block;
                    line-height: 30px!important;
                    font: italic 11px georgia;
                    width:180px;
                  }

                  .comments .comments-content .datetime a {
                    text-decoration:none;
                  }
                  .comments .comments-content .comment-header
                  {
                    margin:0 0 15px 10px;
                  }

                  .comments .comments-content .comment-content {
                    margin: 0 0 10px -50px;
                    }

                  .comment-header a {
                    color:#333;
                  }

                  .comment-header a:hover {
                    color:#666;
                  }


                  .comments .comments-content .comment-content {
                    text-align:justify;
                    text-align: justify;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-size: 13px;
                    border: 1px solid #ddd;
                    padding: 20px;
                  }
                  .comments .comments-content .owner-actions {
                    position:absolute;
                    right:0;
                    top:0;
                  }
                  .comments .comments-replybox {
                    border: none;
                    height: 250px;
                    width: 100%;
                  }
                  .comments .comment-replybox-single {
                    margin-top: 5px;
                    margin-left: 48px;
                  }
                  .comments .comment-replybox-thread {
                    margin-top: 5px;
                  }
                  .comments .comments-content .loadmore a {
                    display: block;
                    padding: 10px 16px;
                    text-align: center;
                  }
                  .comments .thread-toggle {
                    cursor: pointer;
                    display: inline-block;
                  }
                  .comments .continue {
                    cursor: pointer;
                  }
                  .comments .continue a {
                    display: none;
                    padding: 0.5em;
                    font-weight: bold;
                  }
                  .comments .comments-content .loadmore {
                    cursor: pointer;
                    max-height: 3em;
                    margin-top: 3em;
                  }
                  .comments .comments-content .loadmore.loaded {
                    max-height: 0px;
                    opacity: 0;
                    overflow: hidden;
                  }
                  .comments .thread-chrome.thread-collapsed {
                    display: none;
                  }
                  .comments .thread-toggle {
                    display: inline-block;
                  }
                  .comments .thread-toggle .thread-arrow {
                    display: inline-block;
                    height: 6px;
                    width: 7px;
                    overflow: visible;
                    margin: 0.3em;
                    padding-right: 4px;
                  }
                  .comments .thread-expanded .thread-arrow {
                    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
                  }
                  .comments .thread-collapsed .thread-arrow {
                    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
                  }
                  .comments .avatar-image-container {
                    float: left;
                    width: 36px;
                    max-height: 36px;
                    margin-top: 15px;
                    overflow: hidden;
                  }
                  .comments .avatar-image-container img {
                    width: 36px;
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
                  }
                  .comments .comment-block {
                    margin-left: 48px;
                    position: relative;
                  }

                  .comments .comments-content .comment-replies {
                        margin-top: 3em;
                        margin-left: 40px;
                        font-size: 12px;
                            }

                  .comments .comments-content .comment-replies a {
                    color: #333;
                        }
/* For Animating Comment Header*/
.trigger {
margin-top: 3px;
font-weight: bold;
color: #A1A1A1;
cursor: pointer;
float: right;
font-size: 12px;
margin-right: 10px;
}
.triggeractive {
color:rgb(255, 5, 5);
}
.toggle_container {
overflow: hidden;
clear: both;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-top: 10px;
}


                  /* Responsive styles. */
                  @media screen and (max-device-width: 480px) {
                    .comments .comments-content .comment-replies {
                      margin-left: 0;
                    }
                  }
/* Fancy Blogger Threaded Comments by MBT ENDS*/

Make these Customizations:

To be honest you will need to use browser inspector to fill up all the missing gaps in alignment and styling. Since every template is coded differently therefore there will be slight difference in how this Design appears on your blog. So use Chrome and its inspect element to perfect things.

The yellow highlighted parts represent the Hexadecimal code for the two arrows that surround the Comment Counter Number. You can change this if you know how to edit the content property else leave it default.
The brown highlighted code represents the icon next to reply and delete link. you can replace it with your own custom image link if you wish.
The green highlighted code represents the Admin Ribbon. You can change it also if you wish
Leave all other styles default because they will blend a light background very nicely unless your blog has a black background.

4. Next search for this #comments h4 and replace this CSS ID completely with this one:

#comments h4{
color: #4E555A;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif!important;
line-height: 1.6em !important;
font-weight: bold;
margin: 20px 0 50px 0px;
padding: 5px 0 5px 55px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoegJaJ0QM6pZ4OFrg3PGLxJqvc77g-kHPqRjs8DSshs7iQQ0B-NLAWpIayyshuBfQeojeV9Zv39czVlUcf2Enl7BYgJTu1Xfy8Ycn_1Wkwpmd1fzUVobs2kVEhM9r8MYR6LGQFkIduTi/s1600/mbt-postcomment.png) no-repeat 5px 10px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
border: 2px dashed #DDD;
border-radius: 4px;
}

5. Save your template and you are half done!

Nested comments uses an iframe comment box which can't be customized unless we use JQuery. I therefore removed the message that appears at the top of comment box which display a message above the comment box. We used to add a message above form by going to Blogger > Posts and comments. I removed that option and introduced a much more flexible way of warning visitors about the comment policy.

How it works?

Do you guys remember the Expand/collapse functionality we created for hiding the comment box? We will utilize the exact same script here and create a toggle tab for comment policy.

Be careful here:

Inside your template search for:

<b:if cond='data:post.numComments == 1'>

Now this code will appear a total 2 times inside your template, having the exact similar format as the code below:

Tip: this code will appear once inside <b:includable id='comments' var='post'> and the next time inside <b:includable id='threaded_comments' var='post'>

<h4>
                   <b:if cond='data:post.numComments == 1'>
                     1
                     <data:commentLabel/>
                     :
                     <b:else/>
                     <data:post.numComments/>
                     <data:commentLabelPlural/>
                     :
                   </b:if>

</h4>

If your code matches the exact code shown above then just above </h4> paste the following HTML:

<a href='#comment-form'>Post Yours!</a> <span class='trigger'>Read Comment Policy ▼</span>
<div class='toggle_container'>
<div class='block'>
<font style='color:rgb(255, 0, 0); font-weight:bold;'>PLEASE NOTE:</font> <br/> <b><u>We have Zero Tolerance to Spam.</u></b> Chessy Comments and Comments with <b>Links</b> will be deleted immediately upon our review.</div>
</div>

You can replace the entire yellow highlighted part with any message that you would like to display to your readers. You can add links, images, even a video message! anything you want to guide your visitors to avoid spam.

Make the Comment Header Animate:

When you click the comment Policy link, the Message slides down. When you click it back it collapses and hides the message. We will use Jquery slideToggle function to apply this effect. I have also included the Google link to "Open Sans condensed" font to style the fonts. Follow these steps:

Paste the following code just above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(".toggle_container").hide();

    $(".trigger").click(function(){
        $(this).toggleClass("triggeractive").next().slideToggle("slow");
    });

});
</script>

Don't add the bolded code if you have already added JQuery library source link in your template.

2. Save your template and you are all done!

Need help?

Oh Of course! You may need a lot of help in customization but relax buddies, I am available for any help needed. I hope this new commenting Theme adds a new life to your blog and makes your blogging journey even more exciting. Please don't forget to spread this knowledge and share it with your friends and loved ones. May peace and mercy of God be on all of you! :)