Membuat Tampilan Style Timeline (Linimasa) Komentar Blogger

---

Merubah style tampilan komentar blogger agar lebih interaktif dan unik merupakan salah satu trik untuk dapat memperbesar kemungkinan pengunjung blog, agar mau berkomentar pada halaman artikel blog. Apakah komentar pada blog anda sangat sedikit atau bahkan tidak ada sama sekali? hal ini bisa disebabkan karena pengunjung blog anda hanya berkunjung dan berlalu begitu saja. Kalau begitu coba deh merubah tampilan style komentar blog anda dengan tampilan model timeline (linimasa), siapa tahu dengan merubah tampilan style komentar blog dapat menggugah selera pengunjung untuk mau berkomentar pada blog anda.

Berkomentar pada sebuah blog memang diperlukan agar bisa mengetahui lebih detail tentang suatu pembahasan yang ada pada suatu artikel blog yang sedang kita baca, dengan berkomentar diharapkan kita bisa secara langsung berinteraksi dengan pemilik atau developer blog. Agar pengunjung mau berkomentar atau sekedar mininggalkan jejak diperlukan suatu trik yang sekiranya mampu menarik perhatian pengunjung agar rela menyediakan waktunya untuk memberikan komentar pada halaman artikel yang dikunjunginya.

Kolom komentar pada blogger merupakan salah satu sarana interaksi antara pengunjung (visitor) dengan pemilik atau developer blog. Secara native kometar blogger sudah ada dan terpasang pada template bawaan blogger atau template modifikasi. Beberapa template standar atau modifikasi biasanya sudah menggunakan CSS (Cascading Style Sheets) atau style tampilan komentar blog agar menyesuaikan dengan tema yang diusungnya.

Tampilan CSS atau style tampilan Kolom komentar memiliki beragam style mulai dari yang sederhana sampai style yang atraktif, namun jika dirasa tampilan style kurang maksimal maka silakan anda coba tampilan style kolom kementar blogger dengan style tampilan timeline (linimasa) yang super keren. Bagi anda yang ingin mencoba menggunakan tampilan CSS timeline (linimasa), silakan disimak tutorial pemasangannya dibawah ini.

Informasi Singkat

---

Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan dari World Wide Web, bersama dengan HTML dan JavaScript.

CSS dirancang untuk memungkinkan pemisahan presentasi dan konten, termasuk tata letak, warna, dan font. Pemisahan ini dapat meningkatkan aksesibilitas konten, memberikan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, memungkinkan beberapa halaman web untuk berbagi pemformatan dengan menentukan CSS yang relevan dalam file .css terpisah yang mengurangi kompleksitas dan pengulangan dalam konten struktural serta memungkinkan file .css yang akan disimpan dalam cache untuk meningkatkan kecepatan memuat halaman antara halaman yang berbagi file dan pemformatannya.

Pemisahan pemformatan dan konten juga memungkinkan untuk menampilkan halaman markup yang sama dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, dalam bentuk cetak, dengan suara (melalui browser berbasis ucapan atau pembaca layar), dan di berbasis Braille perangkat taktil. CSS juga memiliki aturan untuk pemformatan alternatif jika konten diakses pada perangkat seluler.

Nama berjenjang berasal dari skema prioritas yang ditentukan untuk menentukan aturan gaya mana yang berlaku jika lebih dari satu aturan cocok dengan elemen tertentu. Skema prioritas berjenjang ini dapat diprediksi.

Spesifikasi CSS dikelola oleh World Wide Web Consortium (W3C). Teks / css jenis media internet (jenis MIME) terdaftar untuk digunakan dengan CSS oleh RFC 2318 (Maret 1998). W3C mengoperasikan layanan validasi CSS gratis untuk dokumen CSS.

Selain HTML, bahasa markup lainnya mendukung penggunaan CSS termasuk XHTML, XML biasa, SVG, dan XUL.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Widget Pada Blogger
2. Pilihan Gambar Segitiga Author
3. Tambahan Modifikasi Kotak Komentar Blog

#1 Cara Pemasangan Widget Pada Blogger

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

Membuat Tampilan Style Timeline (Linimasa) Pada Komentar Blogger cukup mudah, anda tinggal mengganti CSS yang terdapat di dalam kode template blogger dengan kode CSS timeline yang sudah admin buat. Adapun langkah-langkahnya sebagai berikut.

• Silakan masuk ka halaman dashboard blogger.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Cari kode CSS yang ada kode template blog yang mengatur style tampilan untuk komentar blogger. Gunakan tombol CTRL + F pada keyboard PC untuk mempercepat proses pencarian, masukan kata kunci ".comment" pada input pencarian. Jika ada maka silakan anda hapus semua kode yang berkaitan tentang pengaturan style tampilan komentar blogger tersebut kemudian ganti dengan kode CSS timeline komentar blogger, jika tidak maka anda dapat langsung menaruh kode CSS timeline komentar blogger tepat diatas kode ]]></b:skin>.
  
  
  


• Letakan kode dibawah ini tepat diatas kode ]]></b:skin>.
  
  
  /* Main Setting */
  :root {
  --bgColorElm: #0083da;
  --txtColorElm: #ffffff;
  --iconUrl:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDM0dbY2uHb8FVbTRNenpTBxJiVljWJ8Hv34dVzd-n9wHjEr4xEK27jOtKQFq3lKbd0AkBzUjnnt59f_j9VrGJ7Y80V0b22lFuKxAotRC0tUWc9QMgeVfiEujEfosK-1LziLW0UiJPqCU/s0/red-author.png);
  }
  /* Element Comments Style */
  .comment-system{display:block;}
  .comments{display:block;clear:both;margin:0;}
  .thread-count a{color:#0083da;}
  #comments{overflow:hidden}
  #comments h4{background:var(--bgColorElm);display:inline;padding:10px;line-height:40px;font-size:16px;position:relative;font-weight:normal;color:var(--txtColorElm)}
  #comments h4:after{content:"";position:absolute;bottom:-10px;left:15px;border-top:10px solid var(--bgColorElm);border-left: 10px solid transparent;border-right:10px solid transparent;width:0;height:0;line-height:0}
  .comments .comments-content .comment:first-child{padding:0;}
  .comments .comments-content{margin:0;}
  .comments .comment-header{background-color:var(--bgColorElm);padding:5px;border-radius: 4px 4px 0 0;}
  .comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative;}
  .comments .user a,.comments .continue a{font-size:16px}
  .comments .continue a{font-weight:normal;color:var(--txtColorElm)}
  #comments .avatar-image-container img{border:0}
  .comment-thread ol{margin:0 0 20px}
  .comments .user a,.comments .comment-thread.inline-thread .user a{color:var(--txtColorElm)}
  .comments .user a:before{content:'\f2bd';font-family:fontawesome;font-style:normal;margin:0 3px;}
  .comments .comments-content .user{font-style:normal;font-weight:normal;}
  .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}
  .comments .avatar-image-container{border-radius: 50%;}
  .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
  .comments .comment-block{position:relative;border: 1px solid var(--bgColorElm);background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);padding:0 0 10px 0;border-radius:4px;}
  .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
  .comments .comments-content .icon.blog-author{background-image:var(--iconUrl);position:absolute;top:-2px;right:-2px;margin:0;width:36px;height:36px}
  .comments .comments-content .comment-content{margin:5px 5px 10px 5px;padding:0 10px 5px 10px;line-height:1.4em;border-bottom: 1px solid var(--bgColorElm);}
  .comments .comments-content .inline-thread{padding:0 0 0 20px}
  .comments .comments-content .comment-replies{margin-top:0}
  .comments .comment-content{padding:5px 0;line-height:1.4em}
  .comments .comment-thread.inline-thread{border-left:4px solid var(--bgColorElm);background:transparent}
  .comments .comment-thread.inline-thread .comment{width:auto}
  .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:18px;left:-20px;border-top:1px solid var(--bgColorElm);width:10px;height:0px}
  .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
  .comments .comment-thread.inline-thread .user a{font-size:14px}
  .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
  .comments .continue{border-top:0;width:100%}
  .comments .continue a{padding:6px 24px;display:inline-block;text-align:center;box-shadow:inset 0px 1px 0px 0px #54a3f7;background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);background-color:#007dc1;border-radius:3px;border:1px solid #124d77;text-shadow:0px 1px 0px #154682;}
  #top-continue{width:100%;text-align:center;}
  .comments .continue a:hover {background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);background-color:#0061a7;}
  .comments .continue a:active {position:relative;top:1px;}
  .comment .continue{display:none}
  .comment-form{width:100%;max-width:100%}
  .comments .comment .comment-actions .comment-reply,.comments .comment .comment-actions .blog-admin{color:var(--txtColorElm);font-weight:400;font-size:12px;border-radius:3px;transition:all .3s ease;}
  .comments .comment .comment-actions {color:var(--txtColorElm);text-decoration:none;margin:0 10px;cursor:pointer;}
  .comments .comment .comment-actions .comment-reply{background-color:var(--bgColorElm);margin-right:5px;padding:5px 10px;}
  .comments .comment .comment-actions .comment-reply:hover,.comments .comment .comment-actions .blog-admin:hover{background-color:#333;text-decoration:none;}
  .comments .comment .comment-actions .blog-admin{background-color:#c12d2d;padding:5px 10px;}
  .comments .comment .comment-actions .blog-admin a{color:var(--txtColorElm);padding:0;}
  .comments .comments-content .datetime a{color:var(--txtColorElm);}
  .comments .comments-content .datetime{float:right;font-size:12px;position:relative;margin:0 25px 0 0;display:block;}
  .comments .comments-content .datetime:before{content:'\f274';font-family:fontawesome;font-style:normal;margin-right:3px;color:var(--txtColorElm);}
  .comments .comment .comment-actions .comment-reply:before{content:'\f122';font-family:fontawesome;font-style:normal;margin-right:3px;}
  .comments .comment .comment-actions .blog-admin:before{content:'\f1f8';font-family:fontawesome;font-style:normal;margin-right:3px;}
  #comment-editor{width: calc(100% - 5px);margin-left: 2px;box-sizing: border-box;height: 194px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kTA28_y2fbsfdIOJmlUDetcjO4mpjiaEJj6yuTdNb2KWREfkldPPT5zKeSh_Gq3zKGsS3lT51IWs318XpZneEFjqiKgjsCwBlOKS_hkh0fR0c9o5VuTsRhqf8kdEzFDjM52qlF-9tX8/s0/3.gif);background-repeat: no-repeat;background-position: center;box-shadow: 0px 1px 4px 0px rgba(0,0,0,.4);}
  @media screen and (max-width: 600px){.comments .comments-content .datetime{float:none;margin:5px 25px 0 0;}.comments .comments-content .datetime:before{margin: 0 3px;}}
  @media screen and (max-width: 440px){#comment-editor{height:200px;}}
  @media screen and (max-width: 350px){#comment-editor{height:224px;}}
  script code here...
  
  
  KETERANGAN
  Selain menaruh kode CSS timeline komentar blogger di dalam kode template blog, anda juga bisa menaruhnya di dalam kotak gadget/widget, apabila ada kesulitan dalam mencari kode CSS komentar blog maka silakan anda taruh saja kode CSS di atas melalui kotak gadget dengan menekan tombol "Add to Blogger" untuk memudahkan dalam pemasangan kode CSS tersebut.
  
  Jika dirasa tampilan kotak komentar blog memiliki tampilan yang tidak sesuai atau anda memiliki kesulitan dalam pemasangan kode CSS tersebut jangan sungkan untuk bertanya dengan admin.
  
  Pada Kode :
  --bgColorElm: #0083da;
  
  Merupakan kode variabel untuk warna latar header komentar blogger.
  
  Pada Kode :
  --txtColorElm: #ffffff;
  
  Merupakan kode variabel untuk warna teks header komentar blogger.
  
  Pada Kode :
  --iconUrl: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDM0dbY2uHb8FVbTRNenpTBxJiVljWJ8Hv34dVzd-n9wHjEr4xEK27jOtKQFq3lKbd0AkBzUjnnt59f_j9VrGJ7Y80V0b22lFuKxAotRC0tUWc9QMgeVfiEujEfosK-1LziLW0UiJPqCU/s0/red-author.png);
  
  Merupakan kode variabel untuk URL gambar segitiga author, pilihan warna untuk gambar segitiga author ada di bab selanjutnya.

#2 Pilihan Gambar Segitiga Author

Silakan anda pilih dan gunakan gambar segitiga author di bawah ini agar bisa disesuaikan dengan pilihan warna dan tema template dari blog anda.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAl4FnJO8Goie1YLOfmwTa9ulBCzZUMl07XYG4WJkD1vpKeDHSXCDey5mgD6M1rLg-J1ntjL1Ul7qxrvFijQIZbeKkgBe7pMvjcK-nBhj0R9vwA_sUp5yrfhFo1G5LinsvItMEIlmAIs0/s0/dark-blue-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYFjlpzZFzXmCbFNrJPAjrXRU183RxiiQaD3OrEuYkdVxXsphSIUmBUhfhvqKs2BAHme9YnZGXig-o5pc3TxQ3u8uJiKvgQyBLRi9qy2cbud2P5ImWou3wie5635hN7Ywh76hMJujBRs/s0/dark-gray-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwTpw_5G8sSB0fL7pOOYGxAwrKi5vWjQId1-74YeyIMfTdOvoiGRLHQPoAirdjjmYSAuR-WZpd5NAP5oUycNX2OA0Tw5f27AfdqerrGCXtWgs5dCuHmJSl5P8KcNxVj7MGT8gNBIh5zE/s0/gray-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ri1TGWkYFPFYzY1ucvuQAXvU790R8lwlRcBBEYP5-M6w8JIemShDzgUfagIK4di0dZXUXEnEJPjfla7MTkMZBMo1rp5ksSfC7yqGK7d9fTJcJnx9W3OYlZPB1znDOqBoUFMpcr8nqv0/s0/orange-author1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrErgvxF8Yq0ZG16FxUkVKsuX-XRHIWl9rVgyUzsx-7Y7IAvus-3zaWiyknjW8q80mjwKgDpmVj5h2vPPV9gg6Yw7k5h4b8jI277ue5L2y8Z2QeaCZWqfVJd-gGRycOE_0tci52r_qltc/s0/orange-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskp5hFzb3mL1yyDqfQLTahWdyGWf12oUe4r00YBpmQM9sLTbitNz462fTxNUxHuuF6xf-eu6T-kUC1a13-EJnqlUBwyNEx9-zV9NNMhIf1dSYvVBG3P52SmGMrkq2VjHPmxIVC3F3RMI/s0/pink-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDM0dbY2uHb8FVbTRNenpTBxJiVljWJ8Hv34dVzd-n9wHjEr4xEK27jOtKQFq3lKbd0AkBzUjnnt59f_j9VrGJ7Y80V0b22lFuKxAotRC0tUWc9QMgeVfiEujEfosK-1LziLW0UiJPqCU/s0/red-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA8mLcxYbpK5ztJ8erviJhvcokG6CFXcpVHRh33fi68HgFAR22XvA1dR3RW_6FfdIbwxbwLZwxYl3kIn09In9Gc9DCmNsJFJq1dmNAS_yts68njd_SrxCMDjrFQS-akT6quOdrLWbIbJM/s0/seagreen-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHvxA0KWjndc8ddRT7cDNPAh7PXciuSlWxO9GzdUz1kRIn_KwcEa9RdVLZ9e07Iswjiaxk34AI3_QLyGDBVpn_dGMouyLmGNVmk3Z0-6yLEJo1DK1eBA4-Vk4ezdJnsqC8WH7_gh9r3c/s0/shadow-blue-author.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnnGR3K-LcCPgMtvmvWYdCh9x5cEv0AmDHjddzLeG_kzGcIe5SzopaOjZc0oTImNsyMH8TdD92Pf8IqvzoJw3jYiCMC9DSgEoBTjT7Qa6RK2zq71zXy3r37kFobSns-RuG7W4Hb9iw0YE/s0/spark-pink-author.png

#3 Tambahan Modifikasi Kotak Komentar Blog

Biar tambah greget kotak komentar kita tambahkan gambar superhero deadpool atau gambar lainnya yang sesuai dengan pilihan anda, cukup gunakan script di bawah ini.

<!--Add decoration style comments-->
<script>
var deadpoolElmComments = '<div style="display:block;text-align:center;margin-bottom:1px;">';
deadpoolElmComments += '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfxb9dxPVOl1zk5V9abYL_rbZOJrzGHWgl5bLGJD1NTHyX5ksGvJDdHgHaChnp5yfZ17rQhd1lQyBUqBCHh0RcvP0Yc3uuWfFCgdVGC5RCsSL47B-Cet4sGH7RPhc9y884r3OHCgYzY0/s0/deadpool.png" border="0"></div>';
$(document).ready(function(){
if($('#top-continue').length>0){$(deadpoolElmComments).insertBefore('#top-continue');$('#top-continue a').css('display','block');}
});
</script>
<!--Add decoration style comments-->

Pilihan Gambar Dekorasi

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_k9WfXDpBP0oBTzbeUb7MHliQzoxKrEcJRN7qbyPSweekVAESe1IAAR79tKjsdzzTc1xkb8yVSi1zySFol9sGzYFDGo14beRuln3QGOyT-F16j5Od_7doHpNZqDeBqt6h0XLwo4XD_o/s0/deadpool.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfxb9dxPVOl1zk5V9abYL_rbZOJrzGHWgl5bLGJD1NTHyX5ksGvJDdHgHaChnp5yfZ17rQhd1lQyBUqBCHh0RcvP0Yc3uuWfFCgdVGC5RCsSL47B-Cet4sGH7RPhc9y884r3OHCgYzY0/s0/deadpool.png

---

Demikian artikel blog tentang Membuat Tampilan Style Timeline (Linimasa) Komentar Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, kotak, komentar, comment, timeline, linimasa, modifikasi, css, kode, code, html, keren, unik, threaded, box, superhero, deadpool, add, cara, pasang, buat, gambar, animasi

Incoming Search Term

Cara merubah style komentar blogger, css threaded comments for blogspot, how to change threaded comment blog author style, cara memasang style komentar blogger model timeline, css timeline blogger comment style, cara bikin style author seperti linimasa (timeline), cara mempercantik tampilan komentar blogger, bikin komentar blogger super kece dan keren, merubah komentar blog dengan gambar author yang unik