• Read, Fun, Enjoy, and Share!

    Cara Membuat Reply Comment Blogger Keren Terbaru


    Hha, ini adalah pertama kalinya Blog Zerra membuat postingan tentang HTML Blog.
    Mengapa? Karena saya sendiri masih newbie dan belum tahu banyak, tapi syukurlah ada yang mempercayai blog Zerra dan request di sini.
    Artikel ini di request oleh Yan Muhtadi Arba, dan karena ini baru pertama mengenai desain blog sayapun bingung mau memberi label apa :D

    Jadi, saya sendiri hanya share bagaimana cara membuat System Reply Comment terbaru Blogger yang saya gunakan dan ilmunya dari Blog Masterendi.com

    Reply system comment adalah reply comment bawaan blogger atau blogspot itu sendiri. Ya, memang blogger baru - baru ini menambah fitur reply comment system. Fitur ini mirip dengan reply comment system wordpress, tapi tetap ada bedanya. Bedanya, bisa sobat perhatikan sendiri, hehe..
    Untuk pengguna template bawaan blogger, reply comment system ini sudah ada secara default. Tapi, bagaimana dengan template yang sudah di modifikasi 100%, kebanyakan reply comment system ini tidak muncul


    Sebelum memulai mungutak-atik template sobat, di sarankan untuk mem back-up atau mendownload template sobat dahulu untuk menghindari hal hal yang tidak di inginkan jika terjadi kesalahan

    Langkah - langkah membuat Reply Comment System Blogger terbaru :


    1. Masuk ke menu Rancangan


    2. Edit HTML 


    3. Temukan kode berikut : (ctrl + F)

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


    4. Ganti kode warna merahnya saja dengan kode berikut :

    'threaded_comments'/> 
    jadinya seperti ini :

    b:include data='post' name='threaded_comments'/> 


    Kode b:include data='post' name='comments'/> kemungkinan ada lebih dari satu (Banyak), cari lagi kode tersebut, lalu lakukan seperti langkah ke empat.


    5. Copy kode berikut lalu letakkan diatas tag <body>



    <style>/*------------- START Blogger Threaded Comments by www.ravisaive.in -------------*/.comments {  clear: both;  margin-top: 10px;  margin-bottom: 0px;  line-height: 1em;}.comments .comments-content {font-size: 12px;margin-bottom: 16px;font-weight: normal;text-align:left;line-height: 1.4em;}.comments .comment .comment-actions a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;padding:2px 8px; margin-right:10px;}.comments .comment .comment-actions a:hover {text-decoration: none; background:#fff; border:1px solid #5AB1E2;}.comments .comments-content .comment-thread ol {  list-style-type: none;  padding: 0;  text-align: none;}.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: 40px;   font-size:12px; background:#EBF5FE;}.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 .user a {color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;}.comments .comments-content .icon.blog-author {  width: 18px;  height: 18px;  display: inline-block;  margin: 0 0 -4px 6px;}.comments .comments-content .datetime {color: #999999;float: right;font-size: 11px;text-decoration: none;}.comments .comments-content,.comments .comments-content .comment-content {  margin:0 0 8px;} .comment-header {background-color: #F4F4F4;    border: thin solid #E6E6E6;    margin-bottom: 5px;    padding: 5px;}.comments .comments-content .comment-content {  text-align:none;}.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: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;padding:2px 8px; margin-right:10px;}.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 {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;border: 1px solid #DDDDDD;}.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;  }} /*------------- End of Blogger Threaded Comments by www.ravisaive.in -------------*/</style>

    6. Save template sobat




    Selesai Cara Membuat Reply Comment Blogger Keren Terbaru, silahkan di lihat hasilnya...
    Selamat Mencoba dan Semoga berhasil ^_^

    Source : http://www.masterendi.com
    kode CSS dibuat oleh : www.ravisaive.in 
    Diposting oleh Achmad Mushi Asrarillah di Kamis, Maret 15, 2012
    Label:

    5 komentar:

    1. Unknown16 Maret 2012 pukul 08.17

      Wuihh cepet banget. padahal baru request. udah ada entry jawabannya. Okelah aku coba dulu. semoga berjalan juga di template blogku.

      BalasHapus
      Balasan
      1. Achmad Mushi Asrarillah16 Maret 2012 pukul 14.05

        Hha, iya lagi semangat aja :D
        selamat mencoba, oya thx follownya, udah saya follback

        Hapus
    2. Millati Indah17 Maret 2012 pukul 07.29

      Baru tahu saya kalo di template yang bukan bawaan Blogger ga ada reply2an nya.

      BalasHapus
      Balasan
      1. Achmad Mushi Asrarillah17 Maret 2012 pukul 18.38

        iya, ini juga fitur baru dari blogger.. Jadi sebelum2nya ga ada..
        Buat template yang instant alias langsung jadi ataupun template yg udah di modifikasi 100% ga akan ada fitur reply commentnya

        Hapus
      2. Zamer22 April 2012 pukul 17.52

        Punya saya gak dapat ---b:include data='post' name='comments'/>
        Gimana ??

        Hapus

    Semoga artikel saya dapat bermanfaat untuk semua ^_^

    Komentar di sini Tanpa verifikasi kata, Jadi jangan nge-spam yah...
    Tulis aja komentarnya di sini. Anda ramah, saya lebih ramah ^_^
    Saya menunggu komentarnya lho....

    Cara Berkomentar :
    Beri komentar sebagai
    1. Google Account, LiveJournal, WordPress, OpenID dll : Jika memiliki akun tersebut
    2. Name/URL : Bagi yang tidak punya akun tsb DISARANKAN gunakan nama dan URL. URLnya bebas asal jangan link jebakan batman karena akan langsung di delete
    3. Anonymous : Tidak Disarankan

    Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

    Langganan: Posting Komentar (Atom)
     

    About Me

    Foto saya
    Hai, Salam Kenal...... Saya masih baru di dunia blog tapi saya akan berusaha untuk share sebisaku tentang Apa yang saya tahu.. Mohon dukungannya yah, dan mari kita berbagi dan berteman ^_^
    Naruto Uzumaki Maple Story

    Blog Info


    Ping your blog, website, or RSS feed for Free free counters SEO Stats powered by MyPagerank.Net