Efek Thread Comment Bertingkat Hanya Dengan Css - Dewa Blogger

Halaman

    Social Items

Buy Now
Efek Thread Comment Bertingkat Hanya dengan CSS Efek Thread Comment Bertingkat Hanya dengan CSS
Cara sederhana untuk membuat imbas komentar bertingkat dengan CSS pseudo-class :nth-child(N)

Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik dengan imbas bertingkatnya saja, gotong royong imbas itu dapat diciptakan hanya dengan CSS3. Blogger mempunyai tingkatan komentar akhir satu tingkat, namun setidaknya mereka mempunyai induk komentar yang dapat kita jadikan sebagai batas selesai perhentian efek.

Cukup salin aba-aba ini dan letakkan di atas aba-aba ]]></b:skin> atau </style>:

/*!  * Efek thread-comment bertingkat hanya dengan CSS  * Level tingkatan dibentuk dengan cara memilih `margin-left` dengan nilai yang berbeda  */  .comments .thread-toggle {margin-bottom:10px} .comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px}  .comments .comment-thread.inline-thread .comment {   margin:0 0 5px 30%; /* Level 6+ */   background-color:#222;   border:1px solid #333;   padding:10px 15px;   color:#ccc; }  .comment .comment-thread.inline-thread .comment:nth-child(6) {margin-left:25%} /* Level 6 */ .comment .comment-thread.inline-thread .comment:nth-child(5) {margin-left:20%} /* Level 5 */ .comment .comment-thread.inline-thread .comment:nth-child(4) {margin-left:15%} /* Level 4 */ .comment .comment-thread.inline-thread .comment:nth-child(3) {margin-left:10%} /* Level 3 */ .comment .comment-thread.inline-thread .comment:nth-child(2) {margin-left:5%}  /* Level 2 */ .comment .comment-thread.inline-thread .comment:nth-child(1) {margin-left:0%}  /* Level 1 */

Klik Simpan Template. Warna latar, karakter dan border dapat dimodifikasi sesuka hati.

Lihat Demo


Sumber https://www.dte.web.id/

Efek Thread Comment Bertingkat Hanya Dengan Css

Efek Thread Comment Bertingkat Hanya dengan CSS Efek Thread Comment Bertingkat Hanya dengan CSS
Cara sederhana untuk membuat imbas komentar bertingkat dengan CSS pseudo-class :nth-child(N)

Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik dengan imbas bertingkatnya saja, gotong royong imbas itu dapat diciptakan hanya dengan CSS3. Blogger mempunyai tingkatan komentar akhir satu tingkat, namun setidaknya mereka mempunyai induk komentar yang dapat kita jadikan sebagai batas selesai perhentian efek.

Cukup salin aba-aba ini dan letakkan di atas aba-aba ]]></b:skin> atau </style>:

/*!  * Efek thread-comment bertingkat hanya dengan CSS  * Level tingkatan dibentuk dengan cara memilih `margin-left` dengan nilai yang berbeda  */  .comments .thread-toggle {margin-bottom:10px} .comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px}  .comments .comment-thread.inline-thread .comment {   margin:0 0 5px 30%; /* Level 6+ */   background-color:#222;   border:1px solid #333;   padding:10px 15px;   color:#ccc; }  .comment .comment-thread.inline-thread .comment:nth-child(6) {margin-left:25%} /* Level 6 */ .comment .comment-thread.inline-thread .comment:nth-child(5) {margin-left:20%} /* Level 5 */ .comment .comment-thread.inline-thread .comment:nth-child(4) {margin-left:15%} /* Level 4 */ .comment .comment-thread.inline-thread .comment:nth-child(3) {margin-left:10%} /* Level 3 */ .comment .comment-thread.inline-thread .comment:nth-child(2) {margin-left:5%}  /* Level 2 */ .comment .comment-thread.inline-thread .comment:nth-child(1) {margin-left:0%}  /* Level 1 */

Klik Simpan Template. Warna latar, karakter dan border dapat dimodifikasi sesuka hati.

Lihat Demo


Sumber https://www.dte.web.id/