Highlight Author Threaded Comments II

By Unknown

Jumat, 29 Juni 2012

Kali ini saya akan terangkan bagaimana cara membuat highlight autor threaded comments dengan css. Trick ini cukup mudah untuk diterapkan. Kolom autor comments dilengkapi dengan efek hover, sehingga bila cursor anda di arahkan pada kotak komentar admin akan berubah. Kalau anda mau lihat keunikannya, perhatikan tulisan Admin akan amin. Sekarang mari kita bahas cara pembuatannya. Ikuti langkah berikut.

Masuk ke blogger
Klik Rancangan
Klik Edit HTML
Masukkan css berikut di atas kode ]]></b:skin>

.comment-block{position:relative;padding:8px;border:1px solid #ddd;border-radius:4px}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(174,212,251,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tA6EpZgTj2rer3pcsAjSQqQVrXZEWj-mkko12DZL3qv35RhlS_uU1cKSQaA9F8WoFEBbyxYLYDOKJ6qXqzkXKXLFQCLzmZe7cO1Pf8IBIhpJdjAcB1G-5wPUkRr9Zhb55l54D8Gk1so/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important}
.comment-block:hover{background:rgba(139,139,139,0.1);border:1px solid #eee;box-shadow:4px 4px 4px #444}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tA6EpZgTj2rer3pcsAjSQqQVrXZEWj-mkko12DZL3qv35RhlS_uU1cKSQaA9F8WoFEBbyxYLYDOKJ6qXqzkXKXLFQCLzmZe7cO1Pf8IBIhpJdjAcB1G-5wPUkRr9Zhb55l54D8Gk1so/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;background-size:60px 22px !important}

Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+