Assalamu'alaikum. Apakabar sobat semuah pada kesempatan kali ini kami mau berbagi tentang Tutorial sudah banyak si Tutorial Cara Mempercantik Komentar Blogger yang di modifikasi dari para master2 Css. nah tapi kali ini kami Mau ikit-ikutan D: kaya Temen2 heheheh...?
Buat sobat yang mau pasang silakan Copy Kode di bawah ini bos
/*----------------------------------------------------------------
Modifikasi Comments original Editing
ReDesign By : Selladrt
Author : http://www.facebook.com/selladrt
URL Blog : http://www.bloggertutoria.com/
----------------------------------------------------------------*/
.comments h4 { -webkit-border-radius: 8px; -moz-border-radius:8px;border-radius: 8px; background: #800000;background: -webkit-gradient(linear, left top, left bottom,from(#800000),to(#F00));background: -moz-linear-gradient(top, #800000, #F00);padding: 10px; font-size:14px; padding:6px; border:1px solid #ddd;border-left:4px solid #0000ff;border-right:4px solid #00ff00;-webkit-box-shadow: 0 2px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 2px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7); box-shadow: 0 2px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);font:bold 14px Calibri,Arial,Sans-Serif; color:#fff;font-family: 'Croissant One';text-align:center;padding:0;margin:0;text-align:center; width:auto; display:block}
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background:#555;position: relative;border-radius: 5px 5px
5px;padding:5px;}
span.comment-actions, .continue {width:120px;/*By Selladrt www.bloggertutoria.com*/background:#00ff00;border-radius:20px
20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: red;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;transform: rotate(360deg) scale(1) skew(1deg) translate(-11px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(-11px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(-11px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(-11px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(-11px);}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#80a9da;border:4px solid #0000ff;border-left:1px solid #80a9da;border-radius: 10px;width: 400px;color:#000000;font-size:15px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );padding: 5px;border:1px solid #00ff00;border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container
{border-radius:10px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:40px !important;}
.comments .comments-content .comment-header {width: 450px;background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );position: relative;left: -73px;padding: 10px;border:1px solid #00ff00;border-left:1px solid #80a9da;border-top-left-radius:5px;
border-top-right-radius:20px;
border-bottom-left-radius:5px;
border-bottom-right-radius:20px;}
.comments .comments-content .user {background:#80a9da;border:double 2px #f5052d;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;padding:6px;/*By Selladrt www.bloggertutoria.com*/font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {background:#80a9da;border:double 2px #f5052d;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;padding:4px;position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content .user a:hover {background:#555;padding:6px;
color:#00ff00;
text-decoration:none;
text-shadow:0 0 20px #00ff00;border:1px dashed #0000ff;
box-shadow:0 0 2px red;
border-top-left-radius:1px;
border-top-right-radius:1px;
border-bottom-left-radius:1px;
border-bottom-right-radius:1px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-animation-name: pulsate;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;}
.comments .comments-content .datetime a:hover {background:#555;padding:6px;
color:#00ff00;
text-decoration:none;
text-shadow:0 0 20px #00ff00;border:1px dashed #0000ff;
box-shadow:0 0 2px red;
border-top-left-radius:1px;
border-top-right-radius:1px;
border-bottom-left-radius:1px;
border-bottom-right-radius:1px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-animation-name: pulsate;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;}
Silakan Sesuwaikan Background nya sesuka sobat biar cocok sama Template sobat semuah..
Sekian dulu dari kami tentang Postingan kami kali ini Cara Mempercantik Komentar Blogger
Semoga berguna buat sobat yang membutuhkannya Amin...?
{ 27 comentários... read them below or Comment }
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 "
wah kaya di blog ini ya mas, cantik tuh...salam sukses ya mas
BalasHapusbukan mas tapi di Demonya itu loh mas heheh
Hapusmalam mas...mau nganterin kopi lagi hehehe...
BalasHapusiya mas setuju m kang muroi, cantik nih komentarnya
trmksih mas kopinya juga cantik hehehe
Hapusberarti kopi nya cewe ya...mas hehe :)
Hapuswaduh sebenernya saya pengen nih sob belajar utak atik css template. biar makin cantik.. tapi apadaya komputer tak punya.. jadi belum bisa mempraktekan semua tutorial dari sobat.. cuma bisa nyimpen aja...
BalasHapussilakan mas di simpen di lemari ES heheheh
Hapusnah...biar awet ya.. ;)
Hapusmantapppppp
BalasHapussiiiiiiiiiiiiiiiiiip hehehehe
HapusBagus juga Mas tapi sedikit memakan loading juga ya mas untuk cssnya.
BalasHapusheheheh klu loding berat si gampang mas tinggal suru mbh google bantuin xixixi
HapusAyo mas ... Ngopi dulu .. :D
BalasHapusayo sob enak jga tuh kopinya heheh
Hapustambah keren saja tampilannya kang...mantep nyimak saja yah kang, nanti saya kumpulin dulu tutornya. ok..
BalasHapussilakan di simak sob
Hapuscantik kalo warna pink
BalasHapusbetul terus yng pasang kamu y kan km suka wrna pink kyk cewek heheh
Hapusmantaap abizzz... like ahhh
BalasHapusbusyet ganti lagi tampilan!!!
BalasHapusck ck ck . . .
wahh keren mas...followback ya
BalasHapuswah gambar nya doraemon :D
BalasHapuskeren kan...
Hapustambah asoy aja nih mas...tutorialnya...
BalasHapuskeren menggoda jadinya..hehe :)
Duhh blognya keren yahh...
Hapuskeren neh keren
BalasHapuswah kren minta bwt backgroun'y dunx..
BalasHapus