Header Ads

  • 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.

    Ninja Blogger Comment
    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://1.bp.blogspot.com/-JRJ7RJDkNq0/X94f9PI_yXI/AAAAAAAADhI/kCJb_NppYe4__pDSfkJEg9l_X48NolWFwCLcBGAsYHQ/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://1.bp.blogspot.com/-O_25GHm-V-U/Xn7i3JF8r1I/AAAAAAAACjs/D4JhvnMvrgAARQpe7lH4OQ0qKN4lgEmzACPcBGAYYCw/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;}}

      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://1.bp.blogspot.com/-JRJ7RJDkNq0/X94f9PI_yXI/AAAAAAAADhI/kCJb_NppYe4__pDSfkJEg9l_X48NolWFwCLcBGAsYHQ/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://1.bp.blogspot.com/-VKpM-oqlDr8/X94f71Wp3bI/AAAAAAAADg0/M1LuvLMP5xAKHXgMAOWJKwcSGF1gQAeWQCLcBGAsYHQ/s0/dark-blue-author.png


    https://1.bp.blogspot.com/-yXK9r9gi8oM/X94f73eIpvI/AAAAAAAADgw/3rsTwLu1HNwuElzRrYUIhOhq6BbQ7f-3QCLcBGAsYHQ/s0/dark-gray-author.png


    https://1.bp.blogspot.com/-NqgDDNNDQtI/X94f77Qmp9I/AAAAAAAADg4/LGwJmOIPpKYTBb30CnPqcPbwIX3CRhjFwCLcBGAsYHQ/s0/gray-author.png


    https://1.bp.blogspot.com/-CVO9T1x6hb0/X94f8s22F4I/AAAAAAAADhA/7PxfUD9k3z4GnHgJaBp4dgcrv-XSRsH1QCLcBGAsYHQ/s0/orange-author1.png


    https://1.bp.blogspot.com/-5vq601dNvxg/X94f8S_4kqI/AAAAAAAADg8/bk0Ckv6VETQPOQEgi5cIZOY_7kkY7VIPgCLcBGAsYHQ/s0/orange-author.png


    https://1.bp.blogspot.com/-4O9OeBjzC8Y/X94f88ba4TI/AAAAAAAADhE/6ZhyBmYK1lUCO35-KJJyL1SVFltYj1xLACLcBGAsYHQ/s0/pink-author.png


    https://1.bp.blogspot.com/-JRJ7RJDkNq0/X94f9PI_yXI/AAAAAAAADhI/kCJb_NppYe4__pDSfkJEg9l_X48NolWFwCLcBGAsYHQ/s0/red-author.png


    https://1.bp.blogspot.com/-8eEJtFh-jyA/X94f9S0kUmI/AAAAAAAADhM/8gAzUjgxPLAyYsS7qLd4pa_5VjQX14XdQCLcBGAsYHQ/s0/seagreen-author.png


    https://1.bp.blogspot.com/-fOXpu9j3dys/X94f9mvv32I/AAAAAAAADhQ/CaKxouCcniYfVDQ7Bym3K2acJweut8i_wCLcBGAsYHQ/s0/shadow-blue-author.png


    https://1.bp.blogspot.com/-_zzjXYCHOg4/X94f94htKBI/AAAAAAAADhU/P5psV9fGNYADIt7ByZv6PLzK1wyr5KD8QCLcBGAsYHQ/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://1.bp.blogspot.com/-WQSsGqd1WmU/X94u1thMbRI/AAAAAAAADh8/5pSeVCfOrmw4wI0AR5qQX8yijAE8vKKIACLcBGAsYHQ/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://1.bp.blogspot.com/-nGabGoy9nOg/X94puDLm4qI/AAAAAAAADhw/h4l1kC2C7p8DbCyh-owg4Nce5GdXEVPhACLcBGAsYHQ/s0/deadpool.png

    https://1.bp.blogspot.com/-WQSsGqd1WmU/X94u1thMbRI/AAAAAAAADh8/5pSeVCfOrmw4wI0AR5qQX8yijAE8vKKIACLcBGAsYHQ/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

    22 comments:

    1. keren boss blog nya
      www.blogkoopedia.blogspot.com

      ReplyDelete
    2. mas boleh tanya. ada link untuk efek gambar punya mas ketika kursor diarahkan gambar postingan. saya cari cari diinter net gk ketemu mas. atau script nya mas.πŸ‘ŒπŸ‘ŒπŸ‘Œ

      ReplyDelete
      Replies
      1. Kalo efek gambar shine cukup menggunakan kode CSS, sebenarnya ada banyak di internet tentang shine image effect, tapi kalo mau menggunakan yang ada di blog codeflare nanti saya share kode CSS nya.

        Delete
    3. salam mas. mau tanya donk. saya mau copy punya linimasa mas. tapi gak works hya, padahal sudah sesuai dengan prosedur. thanks

      ReplyDelete
      Replies
      1. Tampilan komentar linimasa memang tidak bisa langsung berhasil karena biasanya disebabkan oleh kustom template blogger yang menggunakan nama class dan ID yang berbeda-beda. Tapi ngga usah khawatir jika ada kesulitan dalam pemasangan saya akan coba bantu. Sebelumnya komentar linimasa ini akan digunakan di blog yang mana (alamat url blog)? biar bisa saya pelajari dari sistem penamaan class untuk template blog yang kamu gunakan.

        Delete
    4. www.blogkoopedia.com mas 🀚🀚

      ReplyDelete
    5. padahal sudah saya ganti ID class nya mas sesuai dengan tempalte blog saya.

      ReplyDelete
      Replies
      1. Kode style yang kamu taruh pada template blog ternyata tertutup oleh karakter
        /* ... */ jika kode style ditaruh didalam kode blok tersebut artinya kode style tidak akan dirender oleh browser, coba dihapus karakter /* dan */.

        /*.comment-system{display:none }
        .
        .
        .
        @media screen and (max-width: 350px){#comment-editor{height:224px;}}
        */

        Delete
    6. oh itu memang saya tutup jadi nya mas daripada saya hapus. mending saya tutup dulu . karena gak works semalam itu mas

      ReplyDelete
      Replies
      1. Gpp coba di buka aja biar bisa kelihatan dimana letak kesalahannya. Biasanya letak kesalahan disekitaran nama class dan ID. Soalnya saya sdh coba di beberapa template blogger premium, kesalahan yang sering terjadi hanya pada nama class dan ID.

        Delete
      2. Kalo malam ini ga sempat paling saya coba lagi besok. Kodenya dibuka aja terus biar besok bisa saya analisa.

        Delete
    7. saya bukan kan mas.. untuk script script mempercantik artikel contoh awalan huruf yang besar diawal paragraf jadi gk berfungsi dan kolom komentar saya jadi hilang.. apakah tabrakan yah mas

      ReplyDelete
    8. kalo saya buka /* nya element komentar gak kelihatan mas

      ReplyDelete
      Replies
      1. gpp masih bisa diakses, biar kelihatan errornya dimana.

        Delete
    9. Replies
      1. Ok sudah ketemu permasalahan pertama yaitu pada kode style :
        .comments {
        display: none;
        clear: both;
        margin: 0;
        }

        silakan dirubah kode css display: none; menjadi display: block;, untuk pengaturan yang lain silakan disesuaikan sendiri yaa agar bisa terlihat baik dengan template blog yang kamu gunakan.

        Delete

    Post Top Ad

    Post Bottom Ad

    ©2010 - codeflare