tuteslk
tuteslk
Up Comming :CSS සිංහලෙන්.

Comment Box එක ලස්සන කරමුද ?

     අද මම ඔයාලට පොඩි CSS code එකක් දෙන්න යන්නේ. මේ code එකෙන් වෙන්නේ tuteslk වල තියෙන comment style එක වගේ එකක් ඔයාලගේ Blog එකට දාගන්න එක. (සැලකිය යුතුයි මෙය මා විසින් නිර්මාණය කළ ලද්දක් නොවේ) ඔයාල මේක වෙනස් කරලා බලන්න.

  හරි ඉස්සෙල්ලාම ඉතින් හැමදාම වගේ Blogger Dashboard-->Template --> Edit HTML යන්න.Ctrl + F ගහලා ]]></b:skin> Tag එක හොයාගන්න. දැන් ඔය පල්ලෙහා තියෙන code එක ඔය Tag එකට උඩින් paste කරගෙන Save Template යන්න click කරගන්න. දැන් ඔයාලගේ Blog එකටත් ලස්සන Comment Box එකක් ඇවිල්ලා ඇති.


#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#56d805}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111}

.comment-thread a{color:#777}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}

.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN727eE-cJ65UqWtF5zXkgGWfs9AphHKMtumxpWuuaqtX5Fq77NUcknSJsyX0Z0tPZkDFGBGBG7IwyXQgNHdMueu0-MzQiSmQBUJ4npWwYDBFjQ5iIGeH3VDlVnDdw5U032lTElI924Fw/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}

.comments .comments-content .inline-thread{padding:0 0 0 20px}

.comments .comments-content .comment-replies{margin-top:0}

.comments .comment-content{padding:5px 0;line-height:1.4em}

.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}

.comments .comment-thread.inline-thread .comment{width:auto}

.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}

.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}

.comments .comment-thread.inline-thread .comment-block{margin-left:48px}

.comments .comment-thread.inline-thread .user a{font-size:13px}

.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}

.comments .continue{border-top:0;width:100%}

.comments .continue a{padding:10px 0;text-align:center}

.comment .continue{display:none}

#comment-editor{width:103%!important}

.comment-form{width:100%;max-width:100%}

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8- 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

5 comments:

  1. Posted by Tutes lk කියලා වැටෙන එක Posted by admin කියලා වැටෙන්න හදන්නේ කොහොමද

    ReplyDelete
    Replies
    1. Edit HTML ගිහින් Ctrl+F ගහලා මේක search කරන්න.
      ඊට පස්සේ කියන එක වෙනුවට Admin කියලා දෙන්න.
      දැන් වැඩේ හරි. Save Template දෙන්න.

      Delete