Pernahkah kawan menikmati makanan tanpa garam.......?! akan terasa hambar bukan ?, begitu juga dengan Web site atau Blog tampilannya akan terasa kurang lengkap tanpa diisi pernak-pernik seperti Jam, Kalender maupun yang lainnya :z;
Sudah banyak para Blogger memasang Kalender tersebut di Blognya, dan banyak pula yang tidak memasangnya, yang kemungkinan disebabkan terlalu banyak memerlukan tempat pemasangan, atau mungkin dianggap memperlambat loading atau kawan ingin memasangnya tapi belum menemukan Kalender yang simple [karena pada umumnya Kalender seperti gambar disamping :r;
Sekarang saya akan berbagi dengan kawan Cara Membuat dan Menampilkan Kalender di Blog yang sangat simpel
perhatikan Demo berikut atau kawan bisa lihat Kalender / Tanggal di bagian kanan bawah Blog ini :o;
Caranya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML
- Cari tag antara <body> sampai </body>
- Copas script berikut dimana kawan suka [Header, Post, Sidebar, bottom]
<script src='https://sites.google.com/site/blogbegocreation/javascript/Tanggal.js' type='text/javascript'/>
</div>
- Simpan Template kawan
- Selamat berkreasi
OK langsung saja cara pembuatannya sebagai berikut :
- Seperti biasa masuk ke account Blogger dengan ID kawan
- Pada Dasbor - pilih Template - Edit HTML - Lanjutkan
- Sebaiknya simpan template kawan dulu
- Beri tanda centang disamping
]]></b:skin>atau diatas kode</head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 10) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
- while (i < relatedTitles.length && i < 10) { menunjukkan jumlah Artikel Terkait yang ditampilkan
- Selanjutnya cari Kode yang mirip seperti berikut :
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
- Hapus / ganti dengan script berikut :
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h2>Artikel Terkait</h2>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Catatan :
- Artikel Terkait adalah judulnya silahkan ganti sesuai dengan selera kawan
- Simpan template kawan
- Kalau kawan ingin menampilkan di Sidebar silahkan lanjutkan membaca
Cara Pemasangan di Sidebar :
- Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript
- Copas Script berikut kedalamnya
<script type="text/javascript">
removeRelatedDuplicates();printRelatedLabels();
</script>
- Simpan Template dan buka salah satu postingan kawan untuk lihat hasilnya
 |
| screenshot |
Untuk kawan blogger pemula yang tidak tahu apa itu Artikel Terkait, tidak ada salahnya saya akan berikan sedikit gambaran, yaitu kurang lebihnya seperti ini, adalah sekelompok artikel yang mempunyai label / katagori sama dengan postingan atau artikel tertentu :w; yang biasanya berada dibawah postingan, dan ada juga yang berada di sidebar Blog kita.
Untuk jelasnya mari kita bahas satu persatu cara pembuatannya dari yang Artikel Terkait biasa, pakai thumbnails / image dan yang ditaruh di sidebar. Sekarang yang akan saya bagikan dengan kawan Artikel Terkait yang berada dibawah postingan. :z;
Cara membuatnya sebagai berikut :
- Masuk ke account Blogger dengan ID kawan.
- Pada Dasbor pilih Template – Edit HTML - Lanjutkan
- Beri tanda ceklist disamping Expand Template Widgets .
- Cari kode : <data:post.body/>
- Jika sudah menggunakan read more / baca selengkapnya pada template kawan, maka akan terdapat 2 kode <data:post.body/> pakai yang pertama
- Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h2>Ingin membaca Artikel Terkait :</h2>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
- Teks yang berwarna merah Ingin membaca Artikel lainnya dan angka 4, 7, 3 dan 10 silahkan kawan menyesuaikan.
- Simpan Template kawan.
- Lihat hasilnya dengan jalan pilih salah satu postingan kawan, pada single post dibawah artikel / postingan kawan akan tampak seperti contoh berikut
 |
Setelah sekian lama kita Ngeblog di Dunia Maya yang dengan sendirinya sudah banyak Artikel yang kita posting, :z; begitu juga sudah banyak pula Komentar yang kita terima, apalagi kawan Blogger yang senang Ajangsana Dunia Maya [Blogwalking] :q;
Kegunaan Total Posting dan Total Komentar itu baik untuk kawan Blogger sendiri maupun untuk pengunjung Blog kita hanya sekedar diketahui saja jumlahnya :y;
Untuk menempatkan / penyimpanan scriptnya bisa kawan simpan di Gadget maupun di Template Blog [seperti Blog saya ini] cara pembuatannya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor / Opsi Lainnya pilih Tata Letak - Tambah Gadget - HTML / JavaScript
- Copas script berikut kedalamnya
<script type="text/javascript">function blogbegocreationposts(json) {document.write('Total Posts : ' + json.feed.openSearch$totalResults.$t + '<br/>');}function blogbegocreationcomments(json) {document.write('Total Comments : ' + json.feed.openSearch$totalResults.$t );}</script><script src="http://blogbego-creation.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=blogbegocreationposts"></script><script src="http://blogbego-creation.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=blogbegocreationcomments"></script>
Seandainya kawan ingin menempatkan pada Template
- Pada Dasbor / Opsi Lainnya pilih Template - Edit HTML - Lanjutkan
- Copas script berikut diantara tag <body> - </body> atau
<script type="text/javascript">function blogbegocreationposts(json) {document.write('Total Posts : ' + json.feed.openSearch$totalResults.$t + '<br/>');}function blogbegocreationcomments(json) {document.write('Total Comments : ' + json.feed.openSearch$totalResults.$t );}</script><script src="http://blogbego-creation.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=blogbegocreationposts"></script><script src="http://blogbego-creation.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=blogbegocreationcomments"></script>
- Silahkan ganti teks yang berwarna merah seperti Nama / URL Blog saya dengan Nama / URL Blog kawan
- Jangan lupa simpan Blog / Template kawan :w;
Blogger Template Gratis Main Kolom 21 yang sekarang ini masih memakai Komentar Default Blogspot punya artinya Komentar Bawaan yang sudah saya modifikasi supaya Admin bisa menjawab [Reply - Balas] kalau ada Komentar / Pertanyaan yang perlu dijawab :z; Plus bisa ditampilkan Iklan Sponsor baik diatas maupun disamping kanan Komentar :q; dan Main Kolom 21 dengan Thread Comment
Nama Template : Main Kolom 21 dan Main Kolom 21 Thread
Flatform : Blogger / Blogspot
Nama Author : Blogger Edan
URL : http://blogbego-creation.blogspot.com/
Flatform : Blogger / Blogspot
Nama Author : Blogger Edan
URL : http://blogbego-creation.blogspot.com/
Cara Mengganti Template :
- Setelah kawan Download, silahkan ekstrak dulu filenya yang bertype rar di Komputer kawan supaya menjadi bertype .xml [ada 2 Template Main Kolom 21 dan Main Kolom 21 Thread]
- Masuk Account kawan, pilih Template - Cadangkan / Pulihkan
- Pilih file yang sudah kawan ekstrak di Komputer tadi - Unggah, tunggu sampai selesai
- Selanjutnya pilih Tata Letak agar Widget / Gadget tempatnya sesuai keinginan kawan
Pengaturan Main Kolom 21 :
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Beri tanda chek pada
#header {height: 90px;margin:0 auto 0;}#header h1 {clear: both;float: left;padding: 0 0 0 25px;}#header h1 a {display: block;text-indent: -9999px;outline: none;width: 300px;height: 66px;background: url(http://3.bp.blogspot.com/-xDXXvDM7Ubo/UJSpL0pmKqI/AAAAAAAAFyU/ EawtGGNcTG4/s1600/Main+Kolom+21.png) no-repeat 0 0;}#header .ad {width: 400px;float: right;padding: 5px 6px 0 0;}
- selanjutnya cari <b:loop values='data:post.comments' var='comment'> yang diatasnya MAU IKLAN ANDA TAMPIL DISINI ganti dengan script Iklan kawan atau selengkapnya disini
- Scroll kebawah sedikit atau cari "Balas" ganti Blog ID [blogID=2755282981621845502] saya dengan Blog ID kawan
- Scroll kebawah sedikit lagi sampai kawan ketemu pada <img border='0' height='600' src='http://3.bp.blogspot.com/-ahhb_xHLhFc/UJhJS2nt6sI/AAAAAAAAFzc/ 2btyCRFcFRM/s640/Banner.png' width='200'/> ganti dengan Kode /script Iklan kawan yang ingin ditaruh disini
- Simpan Template kawan
Pengaturan Main Kolom 21 Thread :
Caranya hampir sama seperti pada Main Kolom 21 karena tampilannya juga sama, cuma yang kawan perlu ganti [kalau tetap mau menaruh Iklan Sponsor diatas dan disamping kanan Komentar] cari <div class='comments-content'> atau selengkapnya bisa kawan baca disini
Lisensi
Karena Blogger Template Main Kolom 21 dan Main Kolom 21 Thread Gratis ini saya berikan secara cuma-cuma, yang patut dan wajib kawan jaga supaya tidak menghapus Link / URL yang mengarah ke Perancang Template yang ada di bagian bawah Template [Credit]
Artikel saya sebelumnya tentang Tampilkan Iklan diatas Komentar Blog dan Tampilkan Iklan disamping Kanan Komentar untuk Komentar Default :y; sedangkan untuk Thread Comment dengan Judul Tampilkan Iklan diatas Thread Comment :z; sedangkan untuk menampilkan Iklan disamping Kanan Thread Comment sedikit mengalami masalah seperti Form Komentar tidak muncul atau Iklan Sponsor letaknya tidak tetap maksud saya pasang diatas bisa menjadi dibawah form Komentar :q; [khusus untuk Thread Comment yang sudah dimodifikasi], karena ingin menempatkan Iklan disamping Thread Comment semakin membuat saya penasaran saja, [maklum saya hanyalah Calon Blogger] yang pada akhirnya saya berhasil menemukan solusinya :w;
Caranya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Beri tanda check pada
- Cari Kode Comment [Komentar Thread Modifikasi] bisa baca disini dan kawan akan menemukan 2 angka untuk lebar [width] Komentar yang harus kawan rubah/kurangi sesuai lebar kolom untuk Iklan
- Selanjutnya cari <div class='comments-content'> sampai </p> selengkapnya sebagai berikut :
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div> </div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if> </p>
- Tambahkan Script berikut diatas <div class='comments-content'>
<div style='width:530px;height:auto;padding:1px; align:left; border:0px solid #999'>
<div style='width:480px;height:60px; background:#0FF;text-align:center; border:1px solid #243B0B; padding:15px;font-size:30px;font-family:Tekton Pro;'><br/><b>MAU IKLAN ANDA TAMPIL DISINI</b></div>
dan dibawah </p>
</div> </td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:transparent;'>
<img border='0' height='600' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1Ul8Wme-JdSDgQ_-x-k6MgTquRq043Iwla2zGv6VChDeOGWSo71_2IZzGLXGL20qECygmnYqtWJdk8FMvC-q_ol7dFB5PnAaRbxlprYdvoJ2LyRZnMAYPqJE6kggB6LY0tB5nQsSkWSd/s640/Banner.png' width='200'/>
</div></td> </tr> </table>
Selengkapnya menjadi sebagai berikut :
<table border='0' cellpadding='1' height='auto' width='780'><tr><td valign='top'>
<div style='width:530px;height:auto;padding:1px; align:left; border:0px solid #999'>
<div style='width:480px;height:60px; background:#0FF;text-align:center; border:1px solid #243B0B; padding:15px;font-size:30px;font-family:Tekton Pro;'><br/><b>MAU IKLAN ANDA TAMPIL DISINI</b></div>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
</div> </td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:transparent;'>
<img border='0' height='600' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1Ul8Wme-JdSDgQ_-x-k6MgTquRq043Iwla2zGv6VChDeOGWSo71_2IZzGLXGL20qECygmnYqtWJdk8FMvC-q_ol7dFB5PnAaRbxlprYdvoJ2LyRZnMAYPqJE6kggB6LY0tB5nQsSkWSd/s640/Banner.png' width='200'/></div>
</td> </tr> </table>
- Sampai disini Simpan dulu Template kawan
Keterangan Tambahan :
- Silahkan kawan mengganti teks yang berwarna merah [780]sesuai Lebar [width] Form Komentar kawan, sedangkan [530px dan 210px] adalah Lebar Komentar dan Iklan
- Silahkan ganti juga teks yang berwarna biru dengan script Iklan kawan
- Karena struktur Template berbeda-beda, atau seandainya template kawan sama seperti template saya ini, yang bisa menyebabkan Form Komentar menghilang, kawan jangan risau :w; sekarang coba perhatikan diatas <div class='comments-content'> scriptnya sebagai berikut sebelum perubahan [ditambahkan script Iklan]
<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <h4 id='comment-post-message'> <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/> <b:else/> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>'); </script> </div></b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
- Silahkan kawan ganti teks yang berwarna biru dengan teks berikut
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> Pendapat pada : “<data:post.title/>”
</b:if>
</h4>
- Perlu kawan ketahui, Iklan Sponsor akan kelihatan kalau sudah ada Komentarnya
- Simpan Template kawan
Melanjutkan postingan saya sebelumnya tentang Cara menampilkan Thread Comment di Blogspot, yang tampilannya masih standar contohnya seperti Gambar disamping yang bagi saya secara pribadi kurang menarik :y;
Sekarang ini akan saya bahas Cara Memodifikasi Thread Comment supaya menjadi menarik perhatian biar tampil beda, perlu kawan ketahui script berikut saya Copas saat pertama kali Thread Comment di perkenalkan / ditambahkan oleh Google pada Blogspot [sekarang script tersebut sudah tidak ada lagi di Template] begitu juga script tersebut sudah saya Modifikasi :z;
Cara Pemasangan Thread Comment :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Copas script berikut diatas atau dibawah ]]></b:skin>
<style>#comments{clear:both;float:left;width:580px;margin: 10px 0;padding:10px;line-height:1.4em;background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(255, 255, 255)', endColorstr='rgb(185, 185, 185)');background:-moz-radial-gradient(top, rgb(255, 255, 255), rgb(185, 185, 185));background:-webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to( rgb(185, 185, 185))) repeat-x top center; border: 1px solid #CCC;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em;}
.comments .comments-content {font-size: 13px;}
.comments .comment .comment-actions a { padding: 5px 0 0 5px; color: yellow !important;}
.comments .comment .comment-actions a:hover { text-decoration: none;}
.comments .comments-content .comment-thread ol { list-style-type: none; padding: 10px; 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; width: 544px;}
.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;}
.comments .comments-content .icon.blog-author { display: inline-block; margin: 0 0 -4px 6px; position: absolute; top: 0; right: 0; background-color: #95CAFF; width: 100%; height: 100%; z-index: -1;}
.comments .comments-content .datetime { font-size: 10px; color: #F00; 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: #D4E3EA;padding: 5px;}
.comments .comments-content .comment-content { margin: 0 0 8px; padding: 5px; border: thin solid #E6E6E6; background-color: #FFF; 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 {background: transparent; cursor: pointer;text-align: center;}
.comments .continue a { display: block; padding: 0.5em;margin: 0 350px 0 50px;font-weight: bold;background: #95CAFF none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#7CA9C0');background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;border: 1px solid #333;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;color: #FFF;}
.comments .continue a:hover { text-decoration: none !important; color: #FFF; background: #95CAFF;border: 1px solid #00F;}
.comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em;}
.comments .comments-content .loadmore.loaded { max-height: 0px; -ms-filter: quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; overflow: hidden;}
.comments .thread-chrome.thread-collapsed {display: inline-block;}
.comments .thread-toggle {background: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006400');background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px; display: inline-block;padding: 3px 0;width: 120px;height: 20px;text-align: center;}
.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==") 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4GzhFdPBJRWdu17QIiu7wxmQTL4_pfgmYakIC6lGeguQwElYgbmHb2oDwg1H1cAStwKDQ7MZtj-uNdFoqXR-S7-aK58oiWlz52ISx6s6-K6HAmfswZbFAPv6-FGiIBllLivLdPo-n1RG/s1600/anon36.gif"] { display: inline;}
.comments .comment-block { background: rgb(99,147,193); border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;margin-left: 48px;padding: 5px;position: relative; z-index: 99;}
/* Responsive styles. */
@media screen and (max-device-width: 500px) {.comments .comments-content .comment-replies {margin-left: 0;}}
</style>
- Kalau script tersebut disimpan diatas ]]></b:skin> teks <style> dan </style> yang berwarna biru bisa kawan hilangkan
- Ganti teks yang saya beri warna Merah [width:580px;] sesuai Lebar Blog kawan, sedangkan [width:544px;] ini untuk Komentar Balasan
- Simpan Template kawan :q;
