Cara Mudah Modifikasi Kolom Comment Versi 4

Posted by : Stiker Jalingkut

Apa kabar sobat semuah

Pada kesempatan kali ini kami mau berbagi

Cara Mudah Modifikasi Kolom Comment Versi 4

Yang pada sebelumnya sudah pernah kami posting tapi dengan

Cara Mudah Modifikasi Kolom Comment Versi 3

Kami cuma tambahan sedikit Css dan display block

Sehingga sedikit berbeda temanya,si hampir sama seperti postingan

Yang kemarin-kemarin Sobat Bisa Lihat Gambar Di Bawah

Gambar Versi 3 dan Versi 4

Silakan Lihat Demo 1 Di Bawah

Silakan Lihat Demo 2 Di Bawah

Buat sobat yang mau pasang silakan ambil code di bawa

<style type='text/css'>

/**
 * Customs By Selladrt
 */
.comments:after { border-color: #fff; }
.comments:before { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KqoZyFuFCf5_zE5ZhSZ-rY3_FjwgHSj_LJ86xErSkOXnGd2vTbmPU14_4UkxbLjVC-zn5bfBEDzfjA5GzVWH-oI2pTVFfGsktiy-3qJo9qDwllOAbKFwCAzjMLhC9KnLmGvoQBdNXwHY/s1600/Blu+Comen+Selladrt.png); }
.comments .comment {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4X_2TDykrjjVlQ_mCi8ceosOKj5OP6Z0nNhEpedYn2-3wKxd6lL6lT8qTM4XOoxiZaAz1Gq1-NymEHMQ19LevDy1beEncq-Z8STT-teILMamj3-cR7_uJgCKw1y_qRlhue4y8Tp5gsHE/s1600/Pelangi+Halaman+Utama+Sella.jpg);
  border-radius: 10px;
  font-size: 11px;
  padding: 10px 15px;
}

.share, .comments-content .datetime a{float: inherit;
}
.comments-content .icon.blog-author{background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments-content{background:#990000;width:auto;font-size:20px;color:#0000FF;padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:4px double #00FF00;
}
.comment .comment-block p.comment-content{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks2X5eQYSlH-SLdxwIu5E9dgfDEKR58JDZw5oBDW-PDZ9nOCGQj5aC4B9LQoZegqevh53UEmbpHZi85m9yb6TUdEKtSjIhU4wJCFNkM2hnRa5GgDjohlhW6TfqBRBbkjiwast6ZLSIlo/s320/Blabag.png);border: 4px double #990000;box-shadow:inset inset 0 0 5px #9900FF;-moz-box-shadow:inset 0 0 5px #0000FF;-webkit-box-shadow:inset 0 0 5px #9900FF;margin-right:-5px;padding: 5px;z-index:-999;
}

.comments [class*="level-"] .photo:before { background-color: #fff; }
.comments .meta { color: #ccc; }
.comments .meta a { color: inherit; }
.comments .meta a:hover { color: #34b5d0; }
.comments .body { color: #888; }

/**
 * Comments Thread
 */
.comments {
  list-style-type: none;
  padding: 5px 0 0 46px;
  position: relative;
  margin: 0 0 0 12px;
}
.comments:before,
.comments .comment,
.comments .comment:after,
.comments .comment:before,
.comments .photo img,
.comments [class*="level-"] .photo:before {
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.comments:after,
.comments:before {
  display: block;
  content: '';
  position: absolute;
}
.comments:before {
  border-radius: 0 0 5px 5px;
  height: 100%;
  width: 8px;
  left: 0;
  top: 0;
}
.comments:after {
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
  border-width: 4px;
  border-style: solid;
  border-radius: 18px;
  height: 10px;
  width: 10px;
  left: -5px;
  top: -16px;
  z-index: -1;
}
.comments .comment {
  margin-bottom: 10px;
  position: relative;
}
.comments .comment:after,
.comments .comment:before {
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  display: block;
  content: '';
}
.comments .comment:after {
  width: 12px;
  height: 12px;
  left: -14px;
  top: 7px;
}
.comments .comment:before {
  width: 5px;
  height: 5px;
  left: -22px;
  top: 16px;
}
.comments .photo {
  position: absolute;
  left: -60px;
  top: 2px;
}
.comments .photo img {
  border: 1px solid #fff;
  border-radius: 32px;
  overflow: hidden;
}
.comments .meta { margin-bottom: 5px; }
.comments .meta .reply { display: none; float: right; }
.comments .comment:hover .reply { display: block; }
.comments [class*="level-"] .photo:before {
  display: block;
  content: '';
  position: absolute;
  margin-top: -2px;
  height: 4px;
  width: 20px;
  left: -10px;
  top: 50%;
  z-index: -1;
}
</style>

Sobat Juga Bisa Pasang Dengan Versi Yang Masih Setandar
<style type='text/css'> /** * Customs By Selladrt */ .comments:after { border-color: #fff; } .comments:before { background-color: #fff; } .comments .comment { background: #fff; border-radius: 10px; font-size: 11px; padding: 10px 15px; } .comments [class*="level-"] .photo:before { background-color: #fff; } .comments .meta { color: #ccc; } .comments .meta a { color: inherit; } .comments .meta a:hover { color: #34b5d0; } .comments .body { color: #888; } /** * Comments Thread */ .comments { list-style-type: none; padding: 5px 0 0 46px; position: relative; margin: 0 0 0 12px; } .comments:before, .comments .comment, .comments .comment:after, .comments .comment:before, .comments .photo img, .comments [class*="level-"] .photo:before { box-shadow: 0 1px 3px rgba(0,0,0,.4); } .comments:after, .comments:before { display: block; content: ''; position: absolute; } .comments:before { border-radius: 0 0 5px 5px; height: 100%; width: 8px; left: 0; top: 0; } .comments:after { box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset; border-width: 4px; border-style: solid; border-radius: 18px; height: 10px; width: 10px; left: -5px; top: -16px; z-index: -1; } .comments .comment { margin-bottom: 10px; position: relative; } .comments .comment:after, .comments .comment:before { border-radius: 10px; background-color: #fff; position: absolute; display: block; content: ''; } .comments .comment:after { width: 12px; height: 12px; left: -14px; top: 7px; } .comments .comment:before { width: 5px; height: 5px; left: -22px; top: 16px; } .comments .photo { position: absolute; left: -60px; top: 2px; } .comments .photo img { border: 1px solid #fff; border-radius: 32px; overflow: hidden; } .comments .meta { margin-bottom: 5px; } .comments .meta .reply { display: none; float: right; } .comments .comment:hover .reply { display: block; } .comments [class*="level-"] .photo:before { display: block; content: ''; position: absolute; margin-top: -2px; height: 4px; width: 20px; left: -10px; top: 50%; z-index: -1; } .comments .level-2 { margin-left: 30px; } .comments .level-3 { margin-left: 50px; } .comments .level-4 { margin-left: 70px; } .comments .level-5 { margin-left: 90px; } .comments .level-6 { margin-left: 110px; } .comments .level-3 .photo:before { width: 40px; left: -30px;} .comments .level-4 .photo:before { width: 60px; left: -50px;} .comments .level-5 .photo:before { width: 80px; left: -70px;} .comments .level-6 .photo:before { width: 100px; left: -90px;}</style>

Silakan ikuti langkah-langkah di bawah ini sobat
Langkah pertama sobat masuk ke,blog sobat pilih tambahkan gadget pilih

HTML/JavaScript Lalu Copy Code yang di atas

kalu sudah simpan template lalu lihat hasilnya

Sekian dulu dari kami Cara Mudah Modifikasi Kolom Comment Versi 4

Itulah postingan kami kali,ini
Cara Mudah Modifikasi Kolom Comment Versi 4
Semoga berguna buat sobat yang membutuhkannya

{ 34 comentários... read them below or Comment }

Unknown11 Februari 2013 pukul 00.52
Selamat siang sob, Top postingannya. Sangat kraetif memodifikasi kolom komentar blog....bagus yang mana nih menurut sobat, karena setelah saya melihat dengan yang sebelumnya ternyata cuma ada sedikit perubahan yang dilakukan.

Diharapkan kedepannya bisa menambahkan lebih banyak lagi dan yang unik tutorialnya.

Salam sehat selalu ya sob.....
BalasHapus
Balasan
Rohis Facebook11 Februari 2013 pukul 01.18
hanya bisa bilang wouwww......! latarx bagus tuh.., motif kayu. *smile
BalasHapus
Balasan
Unknown11 Februari 2013 pukul 02.02
Wah keren sob penuh warna ...sesuai dengan penulis nya ganteng dan tidak sombong he he he
BalasHapus
Balasan
Beben Koben11 Februari 2013 pukul 02.22
weleh ganti template lagi :D
BalasHapus
Balasan
Masnady11 Februari 2013 pukul 02.55
wah makin hari makin keren nih sob tutorial dalam memodifikasi tampilan kotak komentarnya..?

saya ijin simpan dulu sobat, ntr kalau saya dah punya komputer, saya akan praktekin satu persatu sob..

oya kaliini saya nggak mau kopi sob, saya mau minta es teh saja, karena cuaca panas banget nih hehehehehe
BalasHapus
Balasan
Anonim11 Februari 2013 pukul 03.23
Makin berwarna ini sob komentar dibuatnya yah,,,seep sobat mantap ini hehe :)
BalasHapus
Balasan
Unknown11 Februari 2013 pukul 05.22
Selamat malam mas bro...
alhamdulillah kabarku baik-baik saja.. :D
BalasHapus
Balasan
kk ps11 Februari 2013 pukul 07.27
Selamat malam mas!maaf terlambat datang maklum hari ini aga sibuk.untuk script nya saya simpan dulu di kulkas.sekarang masih cari template yang cocok.malam kemaren postingan saya sudah bisa di buka berkat info darisobat.tapi tombol old post/next page malah hilang jadi saya kembalikan lagi ke template semula
BalasHapus
Balasan
Anonim11 Februari 2013 pukul 16.21
Pagi sobat, mau bawaain kopi susu nih biar semangat ngepost :D
BalasHapus
Balasan
Unknown11 Februari 2013 pukul 18.31
Wuihhh.... Blog Tutorial tampilan baruu... :)
Bagus dan gak terlalu berat nih sekarang, pertahankan yaa sobat :)

dan terima kasih untuk tipsnya,
BalasHapus
Balasan
Asuka11 Februari 2013 pukul 18.37
Hadir disini sobat. Tetap semangat ya. . . Hehehe
BalasHapus
Balasan
Kang Muroi11 Februari 2013 pukul 20.43
kunjungan siang mas, selamat beraktifitas dan happy blogging
BalasHapus
Balasan
DECYBER11 Februari 2013 pukul 21.17
ijin langsung praktik mas bro
BalasHapus
Balasan
Hari Muhlia11 Februari 2013 pukul 22.18
keren2 genk modifannya,,,request dong,,bikinin yg cocok buat template saya,,terimakasih :D
BalasHapus
Balasan
abang ichal11 Februari 2013 pukul 22.25
hm klo kodenya begini... ya tidak berfungsi di blogku, krna beda aliran..
hehe nice trik.
tunggu sampe episod 10.
BalasHapus
Balasan
Unknown12 Februari 2013 pukul 03.41
kunjungan balik gan,,salam kenal
BalasHapus
Balasan
Harun Ar14 Februari 2013 pukul 04.55
Aku coba keduanya... keren banget mas.... Scriptnya aku copy... TQ
BalasHapus
Balasan
Unknown14 Februari 2013 pukul 07.54
kunjungan malam..izin nyoba ya :)
BalasHapus
Balasan
Anonim26 Februari 2013 pukul 04.27
.: Bisa buat alternatif, kebetulan thread komen saya sedikit error, gara2 modifikasi template...^_^
BalasHapus
Balasan

Tambahkan komentar

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

Cara Mudah Modifikasi Kolom Comment Versi 4

Apa kabar sobat semuah

Silakan Lihat Demo 1 Di Bawah

Silakan Lihat Demo 2 Di Bawah

Buat sobat yang mau pasang silakan ambil code di bawa

Sobat Juga Bisa Pasang Dengan Versi Yang Masih Setandar

Silakan ikuti langkah-langkah di bawah ini sobat

Sekian dulu dari kami Cara Mudah Modifikasi Kolom Comment Versi 4

{ 34 comentários... read them below or Comment }

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut