CSS Threaded Comment Spinning Avatar Icon

Halo sobat Share-Tuts back to the Share to the Tuts a.k.a Share-Tuts wkwkw macam - macam aja yah adminnya. Okeh langsung saja disini Share-Tuts mau kasih tutorial cara Membuat CSS Threaded Comment Spinning Avatar Icon. Langsung ikuti caranya yuk!!!

1. Login Blogger
2, Klik Template
3. Edit HTML
4. Centang Expand Template Widget
5. Cari Kode ]]></b:skin>
6. Copy Kode Dibawah Lalu Paste Diatas Kode ]]></b:skin>

/* Style Threaded Comment Start */
#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWE_CQGsME7xX3cqY77xBp0UBPkl-nDZcWehGuTgMyvgfRE8ijxi1pGtlLP7T4y8scwjw-i2C5Vsq_S11uF49XwsMNqbZAhu29NJ2ADmG5SUkChFwqDUY4hKMt1JqSoxsfbXLfzyoQEuMh/s400/icon_comments.png) no-repeat 3px .3em;width:528px;font-size:16pxt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:560px;}.comment-form {width:560px;}#comments-block{border:0 solid #ccc;width:510px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}
#comments-block .avatar-image-container img {background-color: transparent;background-image: url(http://img1.blogblog.com/img/anon36.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAC30lEQVQ4ja1UTUiiURRtI9MirJ1JEJIlmBDaONCYRQvRoLKwf6yIyp8sI4ZgQFHaFC0iC2YrRITjYlathqAWMW1atdGBwTLNLm1apdau7vn4lCalmYERHu9779177r3nnmvF09NTxf9abz7KZDJpXV3deWNjI6nVauzSfwJjAHVtba0E38PDw00qlYosFgv19/fTyspKk2gjgd2bYHK5/HNDQwNpNJoIZ1Hp8/net7S00Pj4OM3NzVE4HNbyubK+vh7v1Nzc/KksGEcyKpVK6urqot7eXjKZTId6vf6X0WikqakpcjqdAI11dHQc6nQ6MpvN1NPTQwaDQVcClkwmP05MTFwAyO120/T0NI2OjpLdbieHw0Fer1cAHBsbK95vbGwkUqmUtlyZ7+7v77/Mzs4mAbSwsED8DYCbYDCYxI4z7hEMd/l8PgS/spytr69Xt7e3X42MjAhAm5ubiWw2e8JvYQ50srq6mpicnCSPx0OLi4tXe3t71SWcFdrPhFJbW5tA+Pz8fObu7m6b36tE46rb29ttq9V6g2Yg2ODgoGDPfudFMACBUHCByDD2+/2X/PZaV1KbzXYJO5TrcrkE+4GBASqCcUfS0BFAQDaXAF7SfX19Na80WKPVatPICJnBFmt5eTn9krMDXj8eHh5OZ2ZmrtE1GHMGEZaBtDANCoUCZ4GGpaWl68fHx1P4if6/N2Bra6uaDROFMlBCd3d3igG+8zhhJ86WOCAFAoHE/v5+aQPEyFD2Ny5D4A7tR9dQOs5DQ0NCRgAqyIb5+8r2khIw7ogJc8iZEItX0BE7ZQAGZ3HP4B5ACAThMvn6cjr7sLa29hNlsN4umL/dTCZzzMMuZAmi+XfMQt3lTl8gYCQSibOfuhwYlicWi53lcrkdKDsUCrWyiIXZBBhz1Ip7FvJOPB4/42/Hn/7PmgojEo1GlZ2dnWnmRmj/0dGRsjB6ot3f/zmK6j940f6qt+yfAdOYXbY4BoePAAAAAElFTkSuQmCC);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #00000;
}
.comment-block .comment-footer a:link, a:visited {
color:#000000;
}
.comments .avatar-image-container {
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.comments .continue a{
color:#000000;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwRqyOksrKT5B1B1IxVjnaUS4mcyXvwtZYAV8elEYnZTkbhGb3LmMZMAGnLOPPbsf1Y0h1WtDqoVtQhArjy5Qr633HX0_i09qIdrNr5JjROsw4b0tvXdBwnpTdBnMMFVT24fR3xZWkNnN/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:10px 10px;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}
.avatar-image-container:hover {
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
}

/* Delete Comment */
.item-control {display: inline;}
/* Style Threaded Comment End */

7. Klik Simpan Template.

Selesai deh sobat gampang kok ngga susah caranya :D.

Source : monster-zila.blogspot.com

Anda sedang membaca artikel tentang CSS Threaded Comment Spinning Avatar Icon dan anda bisa menemukan artikel CSS Threaded Comment Spinning Avatar Icon ini dengan url http://share-tuts.blogspot.com/2012/11/css-threaded-comment-spinning-avatar.html. Anda boleh menyebarluaskan atau mengcopy artikel CSS Threaded Comment Spinning Avatar Icon ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini

3 komentar:

Share-Tuts mengatakan...: @Saiful Anasz ngga berat kok sob soalnya ini memakai css internal bukan external dan juga tidak menggunakan javascript; 20 November 2012 pukul 19.44
Bagus Seno mengatakan...: tampilan seperti itu saya kurang suka sob tpi gk apa-apa kok, nice share deh (y) :); 21 November 2012 pukul 16.14
Share-Tuts mengatakan...: @BlogSeno whaha terus ente suka yg kek gimana tampilannya sob :D; 21 November 2012 pukul 17.21

Peraturan Berkomentar :

1. KOMENTAR "PERTAMAXX, KEDUAXX, NICE GAN, NICE SOB" dan sejenisnya akan langsung Share-Tuts hapus
2. Berkomentar sesuai isi postingan.
3. Berkomentar dengan sopan, tidak SARA, kasar/porno.
4. Dilarang SPAM !
5. Dilarang menaruh iklan !
6. Apabila menaruh link hidup maka akan Share-Tuts ganti menjadi link Blog ini !
7. Apabila Anda ingin berkomentar dengan menyertakan link blog, silahkan gunakan profil OpenID.

Related Posts :

3 komentar:

Posting Komentar

[Show/Hidden]Kontes SEO

Arsip

Labels

Link Sobat

Statistik

Top Komentar