Cara Mengembalikan Kolom Komentar Bawaan dan Mengubah Desain Kolom Komentar Blog

Friday, April 13, 2018

3

natinedJs ⓚ 2020 Beberapa blog memilih untuk menggunakan kolom komentar vendor atau dengan kata lain menggunakan media online untuk membuat kolom komentar lebih menarik. Salah satu contoh yang sering digunakan adalah disqus. Media untuk saling berkomentar artikel satu dengan yang lainnya. Formatnya menarik sehingga banyak minat untuk mengubah kolom komentar bawaan blog dengan menggunakan media instalasi html untuk kolom komentar dari luar.

Untuk membuat kolom komentar dengan disqus cukup mudah. Klik Cara Mengganti Kolom Komentar Bawaan Blog dengan Komentar Disqus.

Setelah lama menggunakan disqus dan mendapat banyak manfaat dengan kolom komentar tersebut. Muncul pertanyaan, bagaimana mengembalikan kolom komentar tersebut menjadi seperti semula, atau dengan kata lain komentar bawaan blog.

Cara Mengembalikan Kolom Komentar Disqus Ke Bawaan. Cari dengan Ctrl F kode seperti dibawah ini. atau dengan pencairan disqus di edit theme html blog. Terdapat kode complete disqus di area tersebut seperti dibawah ini. Hapus bagian tersebut secara utuh sampai ke includable terakhir. Atau bila html tidak memperlihatkan warna merah. Kemudian save edit template.

<b:includable id='main'><br />
<script type='text/javascript'>
var disqus_shortname = 'https-natinedjs-blogspot-com-1';
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script><br />
<b:if cond='data:blog.pageType == "item"'><br />
<style type='text/css'>
#comments {display:none;}
</style><br />
<script type='text/javascript'>
(function() {
    var bloggerjs = document.createElement('script');
    bloggerjs.type = 'text/javascript';
    bloggerjs.async = true;
    bloggerjs.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();
</script><br />
</b:if><br />
<style type='text/css'>
.post-comment-link { visibility: hidden; }
</style><br />
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement('script');
bloggerjs.type = 'text/javascript';
bloggerjs.async = true;
bloggerjs.src = '//' + disqus_shortname + '.disqus.com/blogger_index.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();
</script><br />
</b:includable></blockquote>
</script></b:includable>

Tidak perlu langsung back edit theme. Coba refresh blog dengan salah satu url link atau judul pertama. Tidak ada lagi disqus yang ada di tampilan blog tersebut.

Artikel menjadi kosong tanpa kolom komentar. Bagaimana cara mengembalikan kolom komentar bawaan blog dapat dilakukan dengan mudah. Karena, kode yang digunakan oleh disqus bukan untuk menghilangkan atau menghapus kode kolom komentar bawaan. Catatan penting bahwa disqus pada saat ditempelkan ke blog default system mengubah settingan post, comment dan sharing menjadi hide. Tampak seperti gambar dibawah ini.

Kode b:include data='post' name='comments'/ masih ada dalam html bawaan. Artinya kolom komentar bawaan tersebut di hide oleh disqus. Kita juga bisa menampilkan dua kolom komentar baik disqus maupun bawaan dengan membuat kolom komentar bawaan menjadi embedded, full page, atau pop up window (ref ke jendela berikutnya).

Cara menampilkan kembali kolom komentar bawaan dengan mengubah Hide menjadi embedded, full page, atau pop up window.

Posting Komentar Bawaan Blog sudah muncul bukan. Akan tetapi karena semua postingan sudah terhiden kolom komentarnya sehingga ada baiknya di cek satu per satu dengan melihat setingga postingan seperti gambar dibawah ini.

Setinggan Posti tepat berada di body isi artikel atau postingan. Klik option reader comment pada artikel tersebut awalnya "Don't allow, hide exsisting". Untuk mengubahnya hanya dengan klik "Allow". Kemudian klik Done. Refresh lagi artikel terkait untuk melihat perubahan tampilannya. Terjadi perubahan bahwa kolom komentar sudah tampil dan tampak normal kembali sehingga reader dapat berkomentar lagi di artikel tersebut.

Cara Mengganti Kolom Komentar Bawaan Blog Dengan Disqus

Cara Mengubah Desain Kolom Komentar Blog Mode Messenger

1. Mengubah data post name comments

Masuk ke edit HTML theme kemudian cari dengan ketik Ctrl F kode seperti dibawah ini. Cari dan temukan apakah di html tersebut terdapat dua kode seperti di bawah ini. Bila terdapat dua, ganti kedua-duanya.

<b:include data='post' name='comments'/>

Block kode tersebut agar dapat diganti dengan kode seperti dibawah dengan Ctrl V di kode yang diblock

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

2. Mengubah skin kolom komentar

Perubahan kolom komentar nanti dapat dilihat dari tampilan (skin). Cari di edit HTML dengan Ctrl F kode ]]>

kemudian paste kode comments skin ini tepat diatas kode tersebut. Elemen kode akan ada di /* #Clearing. Setelah kode dipastekan save template.

<b:includable id='main'><br />
<script type='text/javascript'>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 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 {
  padding-bottom:8px;
  margin-bottom: 0px
}
.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 .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.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;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.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 .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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Catatan : tidak disarankan setelah save template langsung back. Trial link perubahan dengan merefresh link agar update perubahan dapat kita pastikan berjalan atau tidak. Uji Coba Komentar. Bila sudah berhasil dalam proses diatas lakukan uji coba koment salah satu link url. Atau salah satu judul dengan merefresh judul tersebut dan kemudian isi kolom komentar. Bagaimana tampilannya sudah berubah bukan? Cara Menghilangkan Datetime Pada Kolom Komentar,

.comments .comments-content .datetime { margin-left:6px;color: #999;font-style: italic;font-size: 11px;float: right;}

Content date time berisi margin di sisi kiri 6 pc dan menggunakan kode warna abu. Dengan kode content tersebut sehingga datetime muncul. Ubah dengan kode seperti dibawah ini.

.comments .comments-content .datetime {display:none}

Bila sudah berhasil tampilan tanggal pada postingan akan berubah menjadi tidak ada tanggal yang tampak pada postingan tersebut.

Cara Mengganti Kolom Komentar Menggunakan Mode disqus Style

Tags Infopedia

Cara Mengembalikan Kolom Komentar Bawaan dan Mengubah Desain Kolom Komentar Blog

3 Comments

Biaya Parkir Inap Mobil dan Motor di Bandar Raden Inten II Lampung

Main Tags

Categories

Email natinedjs

Contact Form