Tampilkan postingan dengan label Modifikasi Comment. Tampilkan semua postingan
Cara Modiv Comments Threaded Responsive
--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apa kabar sobat semuah seperti biasa kami hanya berbagi sedikit Trik atau Tutorial
buat sobat semuah yang membutuhkanya.
nah kesempatan kali ini kami mau memberi sedikit Perubahan pada
Comments Threaded Responsive.
Nah kami gak panjang lebar nanti ada yang salam dalam tulisan kami maklum Wong Ndeso heheh.
Buat sobat yang mau pasang silakan lihat dulu Demo di bawah ini
Buat sobat yang mau pasang silakan Copy Kode di bawah ini
Sekian dulu dari kami semoga Cara Modiv Comments Threaded Responsive
bermanfa'at buat sobat yang membutuhkannya Amin...?
Apa kabar sobat semuah seperti biasa kami hanya berbagi sedikit Trik atau Tutorial
buat sobat semuah yang membutuhkanya.
nah kesempatan kali ini kami mau memberi sedikit Perubahan pada
Comments Threaded Responsive.
Nah kami gak panjang lebar nanti ada yang salam dalam tulisan kami maklum Wong Ndeso heheh.
Buat sobat yang mau pasang silakan lihat dulu Demo di bawah ini
Buat sobat yang mau pasang silakan Copy Kode di bawah ini
Silakan Klik di bawah lalu Copy Kode Nya
<style>
/*------------- START Blogger Threaded Comments -------------*/
/* Comment Box */.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;padding: 5px;}
.comments .comments-content {font-size: 13px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfGYu_Cw_7UJAGiVWSnJcRNTZ_wTuC8DvyHhcWSjswXjzeNnEKEC4-5D6hKm1F2CjcabUV9Mm8d5dZ9KwgR5NYdnSJm4PN5Rj-tuA5MY-LaTPbYunGy_tDpzKlm4YKexLEaIzZfS1vbw/s1600/body+sella+Komentar.gif);margin-bottom: 16px;margin-top: -8px;margin-left:-10px;padding-left: 1em;zoom: 1.05;background-size: 100px;}
.comments .comment .comment-actions a {background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;cursor: pointer;color: white;padding: 5px 10px;margin-right: -10px;margin-left:10px;float: center;margin-top: -13px;}.comments .comment .comment-actions a:hover {text-decoration: none;background-position:top;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;border:1px solid #00ff00;-moz-box-shadow: 0px 0px 75px #a8eb17;-webkit-box-shadow: 0px 0px 75px #a8eb17;box-shadow: 0px 0px 75px #a8eb17;}.comments .comments-content .comment-thread ol {counter-reset: li;list-style: none;*list-style: decimal;font: 15px 'trebuchet MS', 'lucida sans';padding: 0;margin-bottom: 4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}ol ol{margin: 0 0 0 2em;}.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: 36px;}.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-bottom:0;padding-bottom:0;}.comments .comments-content .comment-body {position:relative;}.comments .comments-content .user {font-style:normal;font-weight:bold;}.comments .comments-content .icon.blog-author {width: 18px;height: 18px;display:none;margin: 0 0 -4px 6px;}.user.blog-author a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG);padding: 3px;padding-bottom: 3px;margin-left: -5px;text-decoration: none;}.user.blog-author a:hover {background-position:top;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;border:1px solid #00ff00;-moz-box-shadow: 0px 0px 75px #a8eb17;-webkit-box-shadow: 0px 0px 75px #a8eb17;box-shadow: 0px 0px 75px #a8eb17;padding-left: 15px;}.comments .comments-content .datetime {margin-left:10px;}.comments .comments-content .comment-header,.comments .comments-content .comment-content {margin:px;}.comment-header {color: #fff;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;padding:5px;margin-left: -10px !important;margin-top: -10px !important;margin-right: -10px !important;}.comment-header :hover{color: #00ff00;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;}.comment-header a {color: #fff;font-family:' Bree serif', arial;font-size: 14px;}.comments .comments-content .comment-content {text-align:justify;margin-bottom: 15px;font: 15px magra, arial;line-height: 18px;}.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: block;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: auto;max-height: 56px;}.comments .avatar-image-container img {width: 20px;padding: 5px;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;}.comments .comment-block{background: none repeat scroll 0 0 #FFFFFF;padding: 10px;position: relative;margin-left: 47px;box-shadow: 3px 3px #CCC;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;color: #444;text-decoration: none;-webkit-transition: all 3s ease-out;-moz-transition: all 4.26s ease-out;-ms-transition: all 3s ease-out;-o-transition: all 4.26s ease-out;transition: all 3s ease-out;}.comments .comment-block:hover{background:#2a54aa;color: #00ff00;} .comments .comment-block:before{content: counter(li);counter-increment: li;position: absolute; left: -2.5em;top: 50%;margin-top: -1em;background:#2a54aa;height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.comments .comment-block:after{position: absolute;
content: '';border: .5em solid transparent;left: -1em;top: 50%;margin-top: -.5em;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}.comments .comment-block:hover:after{left: -.5em;border-left-color:#2a54aa;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
/*------------- End of Blogger Threaded Comments By Selladrt -------------*/
</style>
/*------------- START Blogger Threaded Comments -------------*/
/* Comment Box */.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;padding: 5px;}
.comments .comments-content {font-size: 13px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfGYu_Cw_7UJAGiVWSnJcRNTZ_wTuC8DvyHhcWSjswXjzeNnEKEC4-5D6hKm1F2CjcabUV9Mm8d5dZ9KwgR5NYdnSJm4PN5Rj-tuA5MY-LaTPbYunGy_tDpzKlm4YKexLEaIzZfS1vbw/s1600/body+sella+Komentar.gif);margin-bottom: 16px;margin-top: -8px;margin-left:-10px;padding-left: 1em;zoom: 1.05;background-size: 100px;}
.comments .comment .comment-actions a {background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;cursor: pointer;color: white;padding: 5px 10px;margin-right: -10px;margin-left:10px;float: center;margin-top: -13px;}.comments .comment .comment-actions a:hover {text-decoration: none;background-position:top;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;border:1px solid #00ff00;-moz-box-shadow: 0px 0px 75px #a8eb17;-webkit-box-shadow: 0px 0px 75px #a8eb17;box-shadow: 0px 0px 75px #a8eb17;}.comments .comments-content .comment-thread ol {counter-reset: li;list-style: none;*list-style: decimal;font: 15px 'trebuchet MS', 'lucida sans';padding: 0;margin-bottom: 4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}ol ol{margin: 0 0 0 2em;}.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: 36px;}.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-bottom:0;padding-bottom:0;}.comments .comments-content .comment-body {position:relative;}.comments .comments-content .user {font-style:normal;font-weight:bold;}.comments .comments-content .icon.blog-author {width: 18px;height: 18px;display:none;margin: 0 0 -4px 6px;}.user.blog-author a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG);padding: 3px;padding-bottom: 3px;margin-left: -5px;text-decoration: none;}.user.blog-author a:hover {background-position:top;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;border:1px solid #00ff00;-moz-box-shadow: 0px 0px 75px #a8eb17;-webkit-box-shadow: 0px 0px 75px #a8eb17;box-shadow: 0px 0px 75px #a8eb17;padding-left: 15px;}.comments .comments-content .datetime {margin-left:10px;}.comments .comments-content .comment-header,.comments .comments-content .comment-content {margin:px;}.comment-header {color: #fff;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;padding:5px;margin-left: -10px !important;margin-top: -10px !important;margin-right: -10px !important;}.comment-header :hover{color: #00ff00;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObNLfEDeh0AnFy_CMcD5C0_SbbnfytTxjzR7-HEOqSUh7oBnMYZ0jOPtoWMXnOyyXKyAz4zSTKdOOp9ietscQFTbuMESPuIGYEWIeizpTPY3uFcyn4IuD4UtrB9l7Gnl5GlQkoHOjyjs/s1600/Style+img+Selladrt.PNG');padding:5px 10px;background-position: bottom;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;border:solid 1px #2a54aa;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;}.comment-header a {color: #fff;font-family:' Bree serif', arial;font-size: 14px;}.comments .comments-content .comment-content {text-align:justify;margin-bottom: 15px;font: 15px magra, arial;line-height: 18px;}.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: block;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: auto;max-height: 56px;}.comments .avatar-image-container img {width: 20px;padding: 5px;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;}.comments .comment-block{background: none repeat scroll 0 0 #FFFFFF;padding: 10px;position: relative;margin-left: 47px;box-shadow: 3px 3px #CCC;-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;color: #444;text-decoration: none;-webkit-transition: all 3s ease-out;-moz-transition: all 4.26s ease-out;-ms-transition: all 3s ease-out;-o-transition: all 4.26s ease-out;transition: all 3s ease-out;}.comments .comment-block:hover{background:#2a54aa;color: #00ff00;} .comments .comment-block:before{content: counter(li);counter-increment: li;position: absolute; left: -2.5em;top: 50%;margin-top: -1em;background:#2a54aa;height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.comments .comment-block:after{position: absolute;
content: '';border: .5em solid transparent;left: -1em;top: 50%;margin-top: -.5em;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}.comments .comment-block:hover:after{left: -.5em;border-left-color:#2a54aa;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
/*------------- End of Blogger Threaded Comments By Selladrt -------------*/
</style>
Sekian dulu dari kami semoga Cara Modiv Comments Threaded Responsive
bermanfa'at buat sobat yang membutuhkannya Amin...?
Cara Membuat Recent Comments Style V3
--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apa kabar sobat selamat malam selamat siang juga selamat pagi heheh.. seperti biasa sobatkami mau berbagi sedikit Tutorial nah Kebetulan tutorial ini sudah banyak yang pake juga sudah banyak yang
Memosting juga Memodiv aq aja udah beberapakali yang kami Modiv tapi kali ini sangat-sangatlah berbeda
pada postingan kami yang sebelumnya. sobat juga pasti baru tau dan baru lihat.
karna CSS nya kami ambil dari
--✽ ✽ ✽--Cara Membuat Menu Horizontal ol Style--✽ ✽ ✽--
pada postingan kemarinjadi kami namakan
--✽ ✽ ✽-- Cara Membuat Recent Comments Style V3--✽ ✽ ✽--
mungkin tak sebagus hasil Modiv para master Css
biar tambah asik dan juga jelas kelihatan hasilnya
--✽ ✽ ✽-- Silakan sobat lihat DEMO dibawah ini--✽ ✽ ✽--
--✽ ✽ ✽-- Buat sobat yang mau pasang silakan Copy kode dibawah--✽ ✽ ✽--
Sekian dulu dari kami tentang postingan kali ini
--✽ ✽ ✽-- Cara Membuat Recent Comments Style V3--✽ ✽ ✽--
semoga bermanfa'at buat sobat yang membutuhkanya amin..?
Recent Comments Style V2
--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apakabar semuah sobat seperti biasa kami hanya bisa berbagi
tidak bisa membeli nah kami mau berbagi sedikit Tutorial dan tutorial ini
sedikit unik Kemarin juga kami sudah posting Recent Comments Style
Tapi kali ini Recent Comments Style V2 tentunya berbeda donk tampilanya heheh
sobat bisa lihat Demonya di bawah ini
Buat sobat yang mau pasang silakan Copy Kode di bawah ini
Sekian dulu dari kami semoga pada Postingan kali ini bisa
membantu sobat yang membutuhkannya Amin..?
Recent Comments Style
--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apa kabar sobat semuah udah pada berbuka puasa belom ni sobat.
Pada kesempatan kali ini kami mau berbagi Tutorial kecil yaitu Recent Comments Style
emang si sudah banyak Recent Comments yang bagus2 tampilannya tapi kali ini kami
mau memberi yang sedikit mempunyai kelebihan pada bagian URL nya yang biasanya
kalu kita mau pasang Recent Comments biasanya kita harus memasukan pada URL blog kita
pada bagian contoh nya javascript atau bagian home_page: "http://www.pret-pret/", untuk
menanmpilkan Sahabat kami yang berkomentar di setiap postingan kami.
Nah kelebihan dan perubahan pada Recent Comments Style sobat gak Repot-Repot alamat URL
yang kami jelaskan di atas karna ini menggunakan ( window.location.hostname ) jadi udah otomatis
URL sobat ter index kata para master KURA-KURA NINJA heheh...
Silakan sobat lihat Demo di Bawah ini
Buat sobat yang mau pasang silakan copy kode nya di bawah ini
<style type='text/css'>
.recent-comment{ background-color:#333;
-webkit-box-shadow:0 1px 2px black;
-moz-box-shadow:0 1px 2px black;
box-shadow:0 1px 2px black;margin-bottom:10px; padding-left: 24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}
.recent-comment img {
border: 1px solid #666;
padding: 2px;
opacity: 0.4;}
.recent-comment img:hover {
border: 1px solid #ddd;
opacity: 0.9;transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
}
.recent-comment a {
-webkit-box-shadow:0 1px 2px black;
-moz-box-shadow:0 1px 2px black;
box-shadow:0 1px 2px black;
color:#ddd;
font-size:15px;}
.recent-comment-admin {}
.recent-comment-ico { margin-left:-20px;margin-top:4px;float:left;margin-right:3px;}
.recent-comment-header {}
.recent-comment-body {padding:5px;
font-size: 90%;
font-style: italic;
font-family: helvetica;
color: #888;}
.recent-comment-body:after { content:"" ;width:0; height:0; position:absolute; top:100%; left:20px; border-width:10px; border-style:solid; border-color:#555 transparent transparent transparent; display:block }
.recent-comment-footer { font-size: 85%; }
.recent-comment-header:before { content:"" ; color: #00ff00;text-shadow: 0 0 10px #C6EB04 ,0 0 20px #C6EB04,0 0 30px #C6EB04;width:0; height:0; position:absolute; right:100%; top:20px; border-width:10px; border-style:solid; border-color:transparent #222 transparent transparent }
</style>
Silakan copy kode Javascript Nya di bawah
<script type="text/javascript" src="http://selladrt.googlecode.com/files/Recent%20Comments%20Style%20By%20Selladrt.js"></script>
Buat sobat yang mau menampilkan jumlah komentarnya
sesuka sobat silakan gunakan Javascript di bawah
<script type="text/javascript">
//
// CONFIG:
var numRecentComments = 5;
var numPerPost = 2; // max comments per post (to try) or 0
var maxCommentChars = 100;
var maxPostTitleChars = 0; // if 0, use full post title
var txtWrote = 'says:';
var txtMore = 'More »';
var txtTooltip = '[user] on "[title]" - [date MM/dd/yyyy hh:mm]';
var txtAnonymous = ''; // empty, or Anonymous user name localized
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec
var getTitles = true; // false faster
var trueAvatars = true; // false faster
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
var urlMyProfile = ''; // set if you have no profile gadget on page
//
var cropAvatar = true;
var sizeAvatar = 16;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8L_BeP1CIzWxgp__DjWjbKsLaPOTbazxsJMD4d-o883QyuZg5c92B3ZK1w2LLhyphenhyphenfe-BKVRdZiKvc5IbtmhK1mU9thGM63p_kk5gur8jSQZK3qKvkH0MIfhFqETZ5lRoFdspIEFoLOfk/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
//
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8L_BeP1CIzWxgp__DjWjbKsLaPOTbazxsJMD4d-o883QyuZg5c92B3ZK1w2LLhyphenhyphenfe-BKVRdZiKvc5IbtmhK1mU9thGM63p_kk5gur8jSQZK3qKvkH0MIfhFqETZ5lRoFdspIEFoLOfk/s15/avatar_blue_m_96.png?d=mm&s=' + sizeAvatar;
var maxResultsPosts = ""; // or for example "&max-results=100"
var maxResultsComments = ""; // or for example "&max-results=300"
// CONFIG END
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,'"'));
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["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(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 rel="nofollow" href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " recent-comment-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="recent-comment'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="recent-comment-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="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="recent-comment-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>
karna kode Javascript yang sudah kami Format hanya menampilkan lima Komentar jadi kalu sobat ingin menampilkan lebih banyak lagi komentar nya silakan gunakan Javascript di bawah ini
Sekian dulu dari kami pada postingan kali ini tentang Recent Comments Style semoga bermanfaat buat sobat yang menggunakannya Amin,,,....?
Cara Mudah Modifikasi Kolom Comment Versi 2
Bingung Mas Mau Bikin Postingan Apa Jadi Dari Pada Gak Ada Yang
Di Posting Yang Lain Kami Mencoba Modifikasi Lagi Kolom Comment Versi 2
Sebelum Nya Kami Sudah Posting Cara Mudah Modifikasi Kolom Comment.
Tapi Yang Pasti Berbada Sama Yang Dulu Sama Yang Sekarang Mas Hehehe.
Yadah Gak Banyak Ini Itu Mari Lihat Dulu Demonya Mas
Di Posting Yang Lain Kami Mencoba Modifikasi Lagi Kolom Comment Versi 2
Sebelum Nya Kami Sudah Posting Cara Mudah Modifikasi Kolom Comment.
Tapi Yang Pasti Berbada Sama Yang Dulu Sama Yang Sekarang Mas Hehehe.
Yadah Gak Banyak Ini Itu Mari Lihat Dulu Demonya Mas
Cara Mudah Bikin Recent Comments Di Samping Dan Di Bawah Blog
- Apa Kabar Sobat Semuah Tentunya Kabar Baik Kan Sukurlah.
- Mungkin Sudah Gak Asing Lagi Soal Iklan Melayang Atau Buku Tamu Di Samping Blog Buat Para Master Blogger Indonesia Raya Hahahah
- Tapi Kali,ini Kami Mau Mencoba Modifikasi Kalih,ini Cara Pasang Recent Comments Di Samping Dan Di Bawah Blog. Sebelumnya Kami Sudah Posting Cara Pasang Recent Comments Hasil Modifikasi.
- Silakan Buat Sobat Yang Mau Pasang Silakan Ikuti Langkah-
Cara Mudah Pasang Recent Comentar Cantik
Seperti Biasa Mas Pada Kesempatan Kali,ini Kami Mau Berbagi
Mungkin Sudah Gak Asing Lagi Buat Para Master Modifikasi
Css Atau Pun javascript Soalnya Hampir 90% Blogger Indonesia
Pintar2 Modifikasi Atau Desain Lain2 Xixixi..
Sebenarnya Agak Maulu Kami Cuma Bisa Modifikasi Gak
Bisa Merancang Sendri Yang Belom Ada Di Blog hehe.
Yadah Seperti Postingan Kami Kali,ini
Cara Pasang Recent Comentar Hasil Modifikasi
Mungkin Sudah Gak Asing Lagi Buat Para Master Modifikasi
Css Atau Pun javascript Soalnya Hampir 90% Blogger Indonesia
Pintar2 Modifikasi Atau Desain Lain2 Xixixi..
Sebenarnya Agak Maulu Kami Cuma Bisa Modifikasi Gak
Bisa Merancang Sendri Yang Belom Ada Di Blog hehe.
Yadah Seperti Postingan Kami Kali,ini
Cara Pasang Recent Comentar Hasil Modifikasi
Cara Mudah Modifikasi Kolom Comment
Apa Kabar Sobat Semua Pada Kesempatan Kali ini Kami Mau Berbagi Bagaimanah
Cara Mempercantik Kolom Comment. Mungkin Sudah Gak Asing Lagi
Buat Sobat Semuah Kalu Soal Obrak-Abrik Kolom Comment Hehehe.
Sangat Mudah Cara Pasang Modifikasi Kolom Comment
Cara Mempercantik Kolom Comment. Mungkin Sudah Gak Asing Lagi
Buat Sobat Semuah Kalu Soal Obrak-Abrik Kolom Comment Hehehe.
Sangat Mudah Cara Pasang Modifikasi Kolom Comment
Cara Mudah Bikin Tab Post Postingan Keren
Apa Kabar Sobat2 Semua Pada Kesempatan Kali,ini Kami Mau Berbagi
Cara Mudah Bikin Tab Post Postingan Keren.
Sebelumnya Pada Postingan Yang Kemarin,2
Kami Dah Pernah Membahas Tentang
Cara Mudah Bikin Judul Postingan Indah.
Cara Mudah Bikin Tab Post Postingan Keren.
Sebelumnya Pada Postingan Yang Kemarin,2
Kami Dah Pernah Membahas Tentang
Cara Mudah Bikin Judul Postingan Indah.
Top Commenters Avatar Seksi
Pada Kesempatan Kali,ini Kami Mau Berbagi Postingan Mudah2'an
Temen2 Berminat Hehehe. Yang Di Namakan Top Commenters Avatar
Sebenarnya Kami Mendapatkan Inde Ini Dari Situs Luar. Sobat Bisa Kunjungi
Langsung Situs Nya 标准,致力于前端开发资讯的专业博客!
Kalu Sobat Yang Mau Pasang Silakan Code Nya Di Bawah Sobat
Teman Yang Terbaik Top Commenters
Selamat Malem Sobat Semua.. Pikiran Lagi Bingung Mau Bikin Postingan Apa
Jadi Kami Ngawur2 Bikin Css Top Commenters Ide Ini Berawal Dari Seorang
Uwedan Selladrt Yang Lagi Bingung Postingan Kemarin Ternyata Ketahuan Sama
Wanita Yang Aq Sayangi Tau Jadi Postingan Di Antara Tiga Piliahan Kami Hapus D:
Jadi Kami Ngawur2 Bikin Css Top Commenters Ide Ini Berawal Dari Seorang
Uwedan Selladrt Yang Lagi Bingung Postingan Kemarin Ternyata Ketahuan Sama
Wanita Yang Aq Sayangi Tau Jadi Postingan Di Antara Tiga Piliahan Kami Hapus D: