$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Modifikasi Kode CSS Tampilan Threaded Comments di Blog

Modifikasi Kode CSS Tampilan Threaded Comments di Blog

Thread Comment Blog

Hi Mas Bro, kali ini saya akan coba membuat postingan seputar Threaded Comment Hack v.3 nih seperti tampilan pada blog saya yang dulu pada tahun 2014

Sebelum kita Modifikasi CSS Threaded Comment pada blog , pastikan Threaded Comment sudah terpasang di blog kamu yah πŸ˜€ kalau pun belum silahkan cari di google atau tunggu postingan saya selanjut nya πŸ˜…
Langsung saja yah😊 perhatikan langkah-langkah nya πŸ˜›
[post_ads]
[
#comments {}
#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#eee;
}
.comment_admin .comment_date {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#eee;
padding:10px;
font-size:13px;
font-weight:bold;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:-3px;
}
.comment_date a{
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-left:66px;
margin-top: -72px;
background:#fcfcfc;
border:1px solid #d1d1d1;
padding:10px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #eee;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-left:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #bababa;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #056b95;
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:103%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: #666;
padding: 10px;
margin: 5px 0 5px 0;
color: #eee;
font-size: 13px;
line-height: 20px;
width:97%;
border-radius:3px;
position:relative;
}
.comment-form p:after{
content:"";
width:0;
height:0;
position:absolute;
bottom:-16px;
left:15px;
border:8px solid transparent;
border-color:#666 transparent transparent;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list{
display:none;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;margin-right:10px}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;background:url(http://4.bp.blogspot.com/-lABM2Z7_HVs/Ui_XAxhHY6I/AAAAAAAAFXc/wbQNB2SkcIQ/s1600/author.png)no-repeat;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden}]

Kode di atas merupakan Style / CSS dari Threaded Comments Pada blog, Harap di perhatikan kode nya satu persatu yah biar lebih jelas.
pertama kita akan merubah bentuk atau pun warna pada threaded comments . Langkah awal adalah kita harus tahu element mana yang harus kita ubah, perhatikan juga threaded comments yang kamu pakai πŸ˜‰ element CSS nya sama dengan yang akan saya sampaikan di sini atau tidak yah πŸ˜„ kalau tidak maka kamu harus sedikit berfikir intinya sih sama sajah πŸ˜€

[/* Element .comment_inner ini adalah element untuk semua thread comment seperti pada gambar di atas itu komentar dari "Aozon Maulana" */
.comment_inner {
padding:0; /*atur sesuai keinginan*/
margin:0; /*atur sesuai keinginan*/
background-color:#Code_Warna; /*atur warna sesuai keinginan*/
box-shadow: 1px 2px 3px #warna;/*atur sesuai keinginan*/
border: 1px solid #warna;/*atur warna dan tebal garis tepi sesuai keinginan*/
}
/* pada element ini bisa kita tambahkan perintah2 lain nya seperti "Box-shadow" "opacity" dan lain lain*/]
Saya rasa untuk merubah tampilan threaded comment ini bisa mudah di pahami ...
nah trus bagaimana merubah tampilan Threaded Comment Oleh Admin agar lebih mudah di bedakan dengan blogger lain nya ?
cara nya cukup mudah kita hanya perlu mengedit bagian element .Comment_Admin saja.
Sekarang kita tinggal pilih pada .Comment_Admin apa yang ingin di rubahπŸ˜ƒ misal kita hanya menambahkan background gambar ataupun mengganti warna saja πŸ˜„
[
/* di atas kita telah membahas untuk mengatur .comment_inner , nah sebelum kita mengatur background pada post admin kita harus menambahkan .comment_inner pada .Comment_admin */
.comment_inner.comment_admin {
background: #warna url(URL_GAMBAR) no-repeat 1px 2px; /* Gunakan URL jika ingin membuat gambar jadi background, value 1 dan 2 merupakan posisi gambar pada element "atur sesuai keinginan"*/
/* pada element ini bisa kamu edit sesuai keinginan tidak hanya bisa mengganti background saja */
}
/*lalu Bagaiamana dengan cara menambahkan flag or bendera or tulisan admin ?
element yang perlu kita tambahkan atau edit adalah .comment_author_flag pada element .Comment_admin */
/*sebelum nya kita harus membuat element baru */
.comment_author_flag {display:none}
/*perhatikan CSS di atas yah */

/*Kita tambahkan _Author Flag pada _admin */
.comment_admin .comment_author_flag {
display:inline;
background:url(http://4.bp.blogspot.com/-lABM2Z7_HVs/Ui_XAxhHY6I/AAAAAAAAFXc/wbQNB2SkcIQ/s1600/author.png)no-repeat;
font-size:13px;
font-weight:normal;
padding:2px 6px;
right:-23px;
margin-top:-23px;
color:#fff;
border-radius:4px;
text-transform:uppercase;
position:absolute;
width:36px;
height:36px;
}
/* ini merupakan contoh CSS yang di atas. Silahkan di rubah sesuai keinginan*/
]
[post_ads_2]
Saya rasa cukup segini dulu yah untuk modifikasi Threaded Comments Pada Blog nya, kalau yang lain nya sih bisa di coba-coba sendiri nantinyaπŸ˜€
Tambahan sedikit ... Untuk merubah background pada comment cukup memodifikasi saja pada element #comment


[
/*ini Contoh Modifikasi nya bisa di sesuaikan sesuai keinginan*/
#comments {
line-height: 1.4em;
margin: 0;
position: relative;
background: #warna; /*tambahkan URL jika ingin menggunakan gambar*/
padding: 0px 0px 0px 0px;
}
]

Untuk contoh bisa lihat Thread Comments Blog ini
Jika masih ada yang ingin di tanyakan silahkan berkomentar di bawah yah atau menggunakan forum pada blog X komo . Tapi forum nya belum selesai di design nih jadi mungkin sedikit berantakan πŸ˜„  πŸ˜€
CSS Threaded Comments ini saya ambil dari http://blog.kangismet.com

COMMENTS

BLOGGER: 4
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Modifikasi Kode CSS Tampilan Threaded Comments di Blog
Modifikasi Kode CSS Tampilan Threaded Comments di Blog
Modifikasi Kode CSS Tampilan Threaded Comments di Blog
https://1.bp.blogspot.com/-oWviBCrMZ_U/U1zY_Vf_GbI/AAAAAAAABZc/DFISG86ZSuI/s320/capture-20140427-171356.png
https://1.bp.blogspot.com/-oWviBCrMZ_U/U1zY_Vf_GbI/AAAAAAAABZc/DFISG86ZSuI/s72-c/capture-20140427-171356.png
BLOG X KOMO
http://www.xkomo.com/2014/04/modifikasi-tampilan-threaded-comments-blog.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/04/modifikasi-tampilan-threaded-comments-blog.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy