Nah, salah satu dari berbagai optimasi atau perubahan-perubahan yang ada, maka anda pastinya ingin mencoba Cara Memasang Threaded Comments CSS Versi Terbaru tersebut bukan ? Jika jawabannya ya, maka silahkan anda ikuti langkah-langkah di bawah ini :
1. Seperti biasanya anda harus log in dulu ke akun blogger yang di miliki.
2. Selanjutnya silahkan pergi ke EDIT HTML dan Expand Template Widget.
3. Terus cari kode di bawah ini :
<b:includable id='threaded_comment_css'> <style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.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: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA
DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat
scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA
DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quo
t;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
4. Jika sudah ketemu, maka silahkan anda ganti kode di atas dengan kode di bawah ini :
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
overflow: auto;
}
.comments .comment .comment-actions a {
float: right;
display: inline-block;
margin: 5px 0 0 5px;
padding: 1px 6px;
border: 1px solid;
color: black !important;
text-align: center;
text-decoration: none;
background: #DD0;
font: 11px/18px sans-serif;
border-color: transparent black black black;
}
.item-control {
display: inline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.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 {
padding-bottom: 0;
}
.comments .comments-content .comment-body {
position: relative;
}
.comments .comments-content .user {
font-size: 14px;
color: #666666 !important;
text-decoration: none;
}
/* Style Komentar Author */
.comments .comments-content .icon.blog-author
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFVJBvjPxAEJPPmzV6tIM_IVAWqTWz5oYJyXVX6CHdo4xk9vqbecrbVfV_BF4_DFRlHvmX-l-LPhP0xEhuiv7rqN5nPg48pKiUVsgGn438bvhw_Un6u9hMBfV7ctpX32Hdyw2RJfY2niC4/s1600/12
82094344_icontexto-inside-blogger.png);background-size:18px;width:18px;height:18px;display:inline-block;m
argin:0 0 -4px 6px}
/* AKhir style Komentar Author */
.comments .comments-content .datetime {
font-size: 10px;
color: #999;
text-decoration: none;
}
.comments .comments-content .datetime a {
float: right;
}
.comments .comments-content .comment-header {
margin: 0 0 8px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
background-color: rgba(223, 240, 250,0.3);
padding: 5px;
}
.comments .comments-content .comment-content {
margin: 0 0 8px;
padding: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
background-color: rgba(244, 244, 244,0.5);
line-height: 21px;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 1.5;
}
.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;
border: 1px solid #666;
color: #424242 !important;
text-align: center;
text-decoration: none;
display: inline-block;
font: normal 11px/18px sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(196,191,39);
background: -webkit-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -moz-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -o-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -ms-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27',
endColorstr='#ede980',GradientType=0 );
}
.comments .continue a {
display: block;
color: black;
padding: 2px 5px;
}
.comments .continue a:hover {
text-decoration: none !important;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1,
#cccccc));
background: -webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA
DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat
scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data: image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA
DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quo
t;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
padding: 0;
margin-left: 10px;
margin-top: 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
img[src$="http://img1.blogblog.com/img/anon36.png"] {
display: none;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 5px;
background: #68F;
border: 1px solid #E4E4E4;
z-index: 99;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
5. Kemudian simpan template dan lihat perubahan yang terjadi.
Nah, begitulah langkah-langkah yang harus anda lakukan untuk melakukan percobaan dalam hal Cara Memasang Threaded Comments CSS Versi Terbaru, selamat mencoba.
Tidak ada komentar:
Posting Komentar