Jakhaback

Lebih dari prestasi, jadilah inspirasi!

Cara mengubah Tampilan Komentar blog

Cara mengubah Tampilan Komentar blog - Sudah lama tak posting akhirnya bisa posting lagi. Kali ini akan saya share sebuah tutorial yang lumayan menarik untuk dicoba, yaitu Cara mengubah Tampilan Komentar blog. Kolom komentar blog sangatlah berpengaruh terhadap tampilan design pada suatu blog. Dan sebab itu banyak Para blogger yang berusaha mengembangkan design design dalam pembuatan komentar yang dinamis dan terkesan mahal. Langsung saja ini tutorialnya.

1. Masuk /akun blogger sobat
2. Buka tab Rancangan >> Template >> Edit Html.
3. Masukan Style berikut tepat diatas Tag ]]></b:skin>

/*KOLOM KOMENTAR*/
/* KOMENTAR */
#comments{line-height:1em;margin:10px;position:relative;background:#25303c;border-radius:4px;padding:10px}#comments h3{border-radius:4px 4px 0 0;font-size:14px;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase;font-weight:normal;left:0;top:-53px;background:#5498C9;color:#fff;padding:14px;}.comment_avatar_wrap{width:42px;height:42px;border:1px solid #151d26;background:#25303c;padding:4px;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKVaPr50rH6RzZFyoDgHXEUJxPMd9iOrnN6vFcQqNyKACUqA2HxtRDvfWM40eLpwASwtj2eohJ9P7lPymxuy_vlr4sBnIrrsn66reuofrfxt4exFu4KEzZRnWiXZMEb1aCMS8GlMOjtgl/s1600/anon.jpg) no-repeat}.comment_name a{font-family:Oswald,Arial,Sans-serif;padding-bottom:10px;font-size:14px;text-decoration:none}.comment_admin .comment_name{font-family:Oswald,Arial,Sans-serif;padding-bottom:10px;font-size:14px;text-decoration:none}.comment_admin .comment_date{font-weight:normal;font-size:11px}.comment_name{font-family:Oswald,Arial,Sans-serif;padding-bottom:10px;font-size:14px;font-weight:normal;position:relative}.comment_service{margin-top:5px}.comment_date{color:#999;float:right;font-size:11px;font-weight:normal}.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-top:-72px;margin-left:65px;background:#25303c;border:1px solid #1d2630;border-top:1px solid #171f28;border-left:1px solid #171f28;padding:15px}div.comment_inner.comment_admin{background:#394549}.comment_body p{line-height:1.5em;margin:5px 0 0 0;color:#fff;font-size:13px;word-wrap:break-word;padding-bottom:10px}.comment_inner{padding:15px;margin:5px 0 5px 0;background-color:#35404d}.comment_child .comment_wrap{padding-left:5%}.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:#54687c;font:11px/18px sans-serif;transition:background-color 1s ease-out 0s}.comment_reply:hover{text-decoration:none!important;;background:#008080}.unneeded-paging-control{display:none}#comment-editor{width:100%!important;background:#e1e3e6 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJe00564GJ9LPIR6WK_mTUSerlb3KslKk-BmtAPPIyaoQd2f1eF1Kknfz6-3Y_4pDqC4417qTKZwvQL2X-eGIo9srXrmOFuVPxZhQrMYxUjfIJn7roxWRdc98KXqm4jCJQovD3SawIQk/s1600/kangis-loader.gif&#39;) no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative}.comment-form{max-width:100%!important}.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_reply_form{padding:0 0 0 70px}.comment_reply_form .comment-form{width:99%}img.comment_emo{margin:0;padding:0;vertical-align:middle}.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_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}.comment_img{max-width:100%!important}.comment_header{width:50px}#respond{overflow:hidden;padding-left:10px;clear:both}.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKVaPr50rH6RzZFyoDgHXEUJxPMd9iOrnN6vFcQqNyKACUqA2HxtRDvfWM40eLpwASwtj2eohJ9P7lPymxuy_vlr4sBnIrrsn66reuofrfxt4exFu4KEzZRnWiXZMEb1aCMS8GlMOjtgl/s1600/anon.jpg) no-repeat}.comment-delete img{float:right;margin-left:15px;margin-top:3px}.comment_admin .comment_author_flag{display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iS_bmGFjwD29CE2M0Wv6Ck0vBNCr4JLw-xdlZUYiusnz0z4E5zCQztMAOh647uc7Eik-9gsgLP4YnU36IicpgmqJEoLGUMmlCKdQ9oVEvtHenklGHeDBlTGti2-zcGHJ9HALh8Rzq24/s1600/author.png)no-repeat;font-size:0;font-weight:normal;padding:3px 3px;right:-23px;margin-top:-17px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:30px}iframe{border:none;overflow:hidden}.deleted-comment{background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3gfGQ4LqDknuzJVSM7Dhz-7tcIyOCN1_nSOIPglXJiaVlsaEB_EHxpjfZSlRkQ50hUcG5DKE70EES6UlMeOfZzJPQZEoQj-ifcUcKsubvdnipmgcaacMY_yLJKSV6Urr7sK0G7BlkBLU/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#efd4d4;line-height:22px;border:1px solid #c44d4d;padding:12px 15px 12px 45px;margin:5px 0;display:block}.comment-form p{background:#54687c;padding:15px 15px 14px 15px;margin:5px 0 5px 0;color:#f4f4f4;font-size:13px;line-height:20px;border-radius:4px;position:relative}div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qSpVz0chJBlKvKuxRJvfVRE3U8hy-uaelCgcofeq9L_We5xppCfH7gypF5mEYVm5NnoUVKg6WZnS4aigpDRZsq2I8BoxqppyqBF0_S5HPCE9CEQapk9P71vpsIhNS6LN5xE7q766C5I/s45-c/gravatar.png)}div:target .comment_inner{background:#346656;transition:all 15s ease-out}div:target .comment_child .comment_wrap .comment_inner{background:#404c5c}iframe{border:none;overflow:hidden}
.label-size-1, .label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;}.cloud-label-widget-content{text-align:left}.label-size{display:block;float:left;background:#16a085;margin:0 1px 1px 0;color:#eee;}.label-size a,.label-size span{display:inline-block;color:#fff;padding:6px 8px;}.label-size:hover{background:#00a3ff;}
.label-count{white-space:nowrap;padding-right:8px;margin-left:-4px;}.label-size{line-height:1.2}
#Label1 li a {color: #2c3e50;text-decoration:none;}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}
#Label1 li:hover .label-counter {background-color:#255e96;color:white}
4. Save template anda dan lihat hasilnya.

Sekian postingan saya tentang Cara mengubah Tampilan Komentar blog Semoga dapat bermanfaat bagi sobat sekalian.

Bagikan :
+
Previous
Next Post »

✔ Berkomentarlah Dengan Baik dan Sopan.
✔ Mohon Tinggalkan Komentar Sesuai Artikel di Atas.
✘ Dilarang Memasukkan Link Hidup Pada Saat Berkomentar.
✘ Komentar yang bersifat spam, sara dan ancaman akan langsung di hapus.

 
Copyright © 2015 Jakhaback - All Rights Reserved
Template By Kunci Dunia
Back To Top