Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, July 18, 2013

Cara membuat thread comment seo friendly

Design komentar thread comment yang dikeluarkan oleh BLOG DESIGN ini sangat simple dan menawan buat halaman blog anda, tampilan yang elegan dan berkesan ramah ini saya namakan dengan " Elegan Thread Comment ". Pembuatan Design Comment ini terinspirasi atas seorang sahabat yang mengguluti dunia bloging ini. Dihari hari yang lewat saya berkunjung ke blog teman saya itu dan saya sempatkan untuk Komentar, saya melihat ada kekurangan untuk tampilannya sehingga saya berpikir untuk membuatkan satu design yang memakai sistem Modifikasi sistem CSS nya saja. Dilain pihak ada juga seorang sahabat yang minta saran " Bagaimana membuat suatu komentar yang tidak mempunyai script dan lebih ringan loadingnya ? " dalam satu malam ini saya memadukan saran dan inspirasi dari kedua sahabat saya tersebut sehingga saya menjawab mereka dengan tutorial kali ini, semoga tutorial kali ini dapat menjawab semua pertanyaan yang ada. Untuk Melihat DEMO nya silahkan kunjungi halaman ini : http://themsseo001.blogspot.com/2013/07/tersedia-fitur-untuk-iklan-anda.html . Oke setelah anda kunjungi dan sudah melihat Designnya sekarang kita akan menuju TKP untuk mewujudkan misi tersebut.

Cara membuat thread comment seo friendly

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Saran saya buat teman teman yang belum mengerti benar HTML silahkan download dulu tag XML Template anda untuk mencegah kesalahan Fatal.
  • Saatnya anda mencari code ]]></b:skin> 
  • Bila sudah silahkan ketemu cari code yang berurusan dengan #comment .comments, setelah ketemu semua hapus semua code tersebut sebab kita akan menggantikan code CSSnya agar tidak ada error CSS codenya.
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/* ----- style Comment Blog Design ----*/
#comments h4 {color:#333;font-size:18px;font-weight:bold;letter-spacing:0;line-height:1.4em;margin:1em 0;text-transform:none;}.comment-content a{display:none!important}.comments-content ol {list-style : none outside none;margin : 0;}.comments-content ol li {border-bottom : 1px solid #DEDEDE;font-size : 12px;line-height : 1.7;margin : 0 0 24px;padding : 0 0 0 76px;position : relative;}.comments-content ol li ol li {border : none;margin : 0;}.comments-content ol li ol .continue {display : block;padding : 0 0 0 10px;margin : 10px 0 24px;}.comments-content ol li cite {color : #000066;font-size : 14px;font-style : normal;font-weight : bold;padding: 0 0 0 5px;}.comments-content ol li span.datetime cite {float : right;color : #fff;font-size : 12px;padding : 0 35px 0 0;}.comments-content ol li span.datetime {float : right;color : #990000;font-size : 12px;padding : 0 35px 0 0;}.comments-content ol li span.datetime a {}.thread-toggle {display : none;}#comments-block {line-height:1.6em;margin-left:30px;font-size: 13px;width:100%;}#comments-block .comment-admin{border 2px solid #000000;}#comments-block .comment-admin a{text-decoration:none;color:#0b9f1d;font-style:bold;}#comments-block .comment-admin a:hover{text-decoration:none;color:#d39e11;font-style:bold;}#comments-block .comment-admin {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#eee none repeat scroll 0 0;margin:0.5em 0;color:#0b9f1d;padding-bottom:4px;padding-left:8px;padding-top:4px;}#comments-block .comment-body {border-left:1px solid #eeeborder-right:1px solid #eee;margin-top:-7px;padding-left:10px;padding-top:10px;}#comments-block .comment-footer {border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;font-size:11px;line-height:1.4em;margin:-0.25em 0 2em;padding-bottom:5px;padding-left:10px;text-transform:none;}#comments-block .comment-body p {margin:0;padding-bottom:15px;}.deleted-comment {color:gray;font-style:italic;} #postlines{margin:5px 0 0 -15px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #D8D8D8;}#comments{margin:20px 20px 0;overflow:hidden; margin-left: -18px; }#comments h4{display:inline;padding:10px;line-height:40px}#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}#comments h4 {background:#0033FF}#comments h4,.comments .user a,.comments{font-size:16px}#comments h4,.comments {font-weight:normal;color:#fff}#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #0033FF;border-right:20px solid transparent;width:0;height:0;line-height:0} .continue a{margin-top : 10px;margin-right:-50px;padding:3px 30px 3px 10px;border-radius: 0 0 10px 0;border: solid #999999 1px;background-color: #003399;color: #FFFFFF; } .continue a:hover{background-color: #000066;color: #FFFFFF;} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#3E0000;padding:5px 15px 2px 10px;} .comments .avatar-image-container,.comments .avatar-image-container img{width: 60px; max-width: 60px; height: 60px;float:left; max-height: 60px;margin-bottom: -10px; } .comment-actions a{ text-align: center; margin : 2px 2px 2px 5px; padding:3px 10px; border: solid #999999 1px; background-color: #666666; color: #FFFFFF;border-radius:0 0 5px 5px; } .comment-actions a:hover{ background-color: #CCCCCC; color: #990000; } .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:70px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#EEEEEE;padding:10px;border-radius:0 0 0 15px;} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em; } .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BuWdJwWoJtyX8FOvSuRFatcHgb5Blf5SAxtFkyvIptXtt7vWmMSrqnwbD2MQgeVrW2lhMbY77Ii-L57qGINL_9EhdcgDdKMIbKA21WSdtyOU2Jy0SlOvF8vk0kI3olcNJmLKZfLrUV0/s1600/autor-biru.png);width:56px;height:56px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:15px 5px 15px 10px;line-height:1.4em;font-style: italic;color:#990000;border:solid #eee 1px;margin:5px 10px 5px 5px;box-shadow: 1px 1px 1px 2px #C0C0C0 inset;background-color: #FFFFFF;} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:0px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width: 46px; max-width: 46px; height: 46px;float:left;border-radius:25px; max-height: 46px; margin-bottom: -10px;} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%}

Silahkan edit warna dan tampilannya bila anda ingin menyesuaikan tampilan ataupun warnanya untuk Template blog yang anda sayangi, Untuk mengganti gambar icon authornya silahkan kunjungi halaman dibawah ini untuk menganti tampilan gambar Authornya agar lebih kreative dan menarik, Kunjungi halaman ini : http://rivai-silaban.blogspot.com/2013/07/cara-membuat-icon-author-comment.html



Kesimpulan

Design Thread Comment yang saya beri nama " Elegan Thread Comment "sangat cocok anda buat pada halaman blog kesayangan anda agar lebih menarik dan terkesan halaman para ahli bloger. Desig Thread Comment ii sudah dilengkapi degan Nontifikasi Life Link atau menonaktifkan secara otomatis LINK yang Hidup dalam istilah blog link spam yang terdapat pada comentar para spammer jadi anda jangan takut semua spammer hilang dari style Comment ini.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 6:14 PM

12 comments :

  1. salam, blog anda ringan sekali boss, kapan-kapan mau coba nih scipt-nya.
    terima kasih sudah share, salam.

    ReplyDelete
  2. Terimakasih atas kunjungannya dan pendapatnya salam balik dari saya, silahkan dicoba sob...

    Oh kalo soal loding blog ini, lumayan sob, Template template yang kita buat sama juga sob fast loding semua..

    ReplyDelete
  3. Saya coba pasang ukuran width dan height tidak pas, bagaimana cara ganti ukurannya? thanks

    ReplyDelete
  4. makasih telah menghubungi sob, kalo untuk lebar dan tingginya tidak usah dirubah sob, soalnya nanti thread koment nya sedikit terganggu sob. emang tidak masuk ya ma templatenya sob miko ?

    ReplyDelete
  5. wah terimakasih mas masalah saya teratasi. skarang kotak komentar saya udah keren :D

    ReplyDelete
    Replies
    1. oya baguslah kalo begitu..
      selamat ya sob.. :)

      Delete
  6. Mas,diblog saya kok ngak berhasil diterapkan cara ini ya?komentar lama hilang semua,tinggal nama yang koment aja.Bisa dibantu ngak mas?

    ReplyDelete
    Replies
    1. bisa jadi waktu comment yang lama tidak thread comment mas jadi commentnya terpengaruh,

      Delete
    2. iya,komentar lama memang ngak pakai thread comment.Jadi kalau pakai thread coment sekarang tetap ngak ada solusi lagi ya buat memunculkan komentar-komentar yang sebelumnya?

      Delete
  7. CSS ini hanya berlaku untuk comment devault dari blogspot, bila mas pernah merubah comment devaultnya pasti tidak bisa jalan sebab, id dan classnya pasti berbeda, sehingga, id dan class pada tutorial ini tidak berfungsi, sebab perbedaan huruf dan titik saja pasti tidak berpungsi.

    ReplyDelete
  8. Wah keren gan, ane cba yah. . .

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog