Blogger Comment හැඩ කරමු

blogger වලට බැස්සට පස්සෙ තමයි මමත් මේකෙ වැඩ කෑලි ගැන හොයන්න පටන් ගත්තෙ. මේ කියන්න යන්නෙ අපේ බ්ලොගර් කමෙන්ට් හැඩ කරන විදියක් ගැන. මං සාමන්‍යයෙන් බ්ලොග් එකට external එකතු කරන widget , designs වලට කැමති නෑ. මං දැකපු දේ තමයි ගොඩක් ගෑණු ළමයි තමන්ගෙ බ්ලොග් එකේ බෝනික්කො, හාවෙ, වලස්සු, මාළු එල්ලන් ඉන්නව. හරියට ඉස්කෝලෙ කාලෙ පැන්සල් පෙට්ටිය වගේ. මට ඒකට මුකුත් කියන්න බෑ. එයාලගෙ බ්ලොග් එක, එයාලගෙ කැමැත්ත. ඒත් ඒවයින් සයිට් එකේ බර වැඩි වෙනව. ඒක කියවන්න එන අයට කරදරයක්..

මං ආවෙ ඒක ගැන කියන්න නෙවෙයි. බ්ලොග් එකේ කොමෙන්ට් CSS වලින් හැඩ කර ගන්න ක්‍රමයක් ගැන. මගේ බ්ලොග් එකෙ කොමෙන්ට් වෙනස් කරල තියෙන්නෙත් CSS වලින්. මේක ඊටත් වඩා ලස්සනයි.
මෙතනින් බලන්නකෝ කොමෙන්ට් ස්ටයිල් එක.

මේවයින් නම් බ්ලොග් එකේ ස්පීඩ් එකට කිසිම හානියක් වෙන්නෙ නෑ. එහෙම පාඩුවක් වෙන දෙයක් මං දාන්නෙත් නෑ. එහෙනම් කරල බලමුකෝ. හැමෝටම තේරෙන විදියට දාන්නම්.

• මුලින්ම blogger Dashboard එකේ Template තෝරන්න.
• ඊට පස්සෙ දැනට Live on blog කියල තියෙන ටෙම්ප්ලේට් එකේ customize තෝරන්න.

• ඊට පස්සෙ Advanced තෝරන්න. ඒ යටතේ ආපු ඒවයින් අන්තිමට තියෙන Add CSS තෝරන්න.

•  දැන් ලැබුණ සුදු පාට කොටුවේ මේ පහතින් දාල තියෙන CSS Code එක Copy-Paste කර ගන්න.(Ctrl+A ක්ලික් කරල සම්පූර්ණ කෝඩ් එක සිලෙක්ට් කරන්න)

@font-face {<br /> font-family: 'Philosopher';<br /> font-style: normal;<br /> font-weight: 400;<br /> src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');<br /> }<br /> .comment .avatar-image-container {<br /> border: 1px solid #B6B6B6;<br /> max-height: 70px !important;<br /> margin-top: -5px;<br /> width: 70px !important;<br /> position: relative;<br /> z-index: 50;<br /> }<br /> .comment .comment-block {<br /> margin-left: 75px !important;<br /> }<br /> .comment .comment-header {<br /> background: none repeat scroll 0 0 #A9F5D0;<br /> color: #333;<br /> font-size: 15px;<br /> font-weight: bold;<br /> margin-left: 60px;<br /> }<br /> .comment .comment-header a {<br /> color: white !important;<br /> text-decoration: none;<br /> }<br /> .comment .comment-content {<br /> background: none repeat scroll 0 0 #FEFFF9;<br /> border-bottom: 2px solid #E6E6E6;<br /> font-size: 14px;<br /> margin: 0 0 30px;<br /> padding: 5px 5px 10px 10px;<br /> }<br /> .comment .comment-actions a {<br /> background: none repeat scroll 0 0 #DDD;<br /> color: #333;<br /> display: inline-block;<br /> line-height: 1;<br /> margin: 0 3px;<br /> padding: 3px 6px !important;<br /> text-decoration: none;<br /> }<br /> .comment .comment-actions a {<br /> background: none repeat scroll 0 0 #DDD;<br /> color: #333;<br /> display: inline-block;<br /> line-height: 1;<br /> margin: 0 3px;<br /> padding: 3px 6px !important;<br /> text-decoration: none;<br /> }<br /> .comment-header cite {<br /> background: none repeat scroll 0 0 #DF7401;<br /> border: 1px solid white;<br /> color: white;<br /> padding: 2px 20px;<br /> position: relative;<br /> z-index: 99;<br /> margin-left: -20px;<br /> }<br /> cite.blog-author {<br /> background: none repeat scroll 0 0 #8181F7 !important;<br /> }<br /> .icon.blog-author {<br /> display: none !important;<br /> background: url("") no-repeat scroll 0 0;<br /> margin-left: 90px;<br /> width: 60px !important;<br /> height: 60px !important;<br /> position: absolute;<br /> right: 5px;<br /> bottom: 5px;<br /> top: 10px;<br /> }<br /> .comment .comment-header {<br /> color: #333;<br /> font-size: 15px;<br /> font-weight: bold;<br /> }<br /> <br /> .comment .avatar-image-container img {<br /> border: medium none !important;<br /> height: 70px !important;<br /> width: 70px !important;<br /> max-height: 70px !important;<br /> max-width: 70px !important;<br /> }<br /> .comment .comment-actions a {<br /> background: none repeat scroll 0 0 #DDD !important;<br /> color: #333 !important;<br /> display: inline-block !important;<br /> line-height: 1 !important;<br /> margin: 0 3px !important;<br /> padding: 3px 6px !important;<br /> text-decoration: none !important;<br /> font-size:16px;<br /> }<br /> .comment .comment-actions a:hover {<br /> background: #CCC !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> .comments {<br /> font-family: 'Philosopher', arial, serif !important;<br /> font-size: 1em;<br /> color: black;<br /> }<br /> .comments .continue a {<br /> display: block !important;<br /> font-weight: bold !important;<br /> padding: .5em !important;<br /> color:#E34600;<br /> font-size:16px;<br /> }<br /> .comments .continue a:hover {color:#4D3123;text-decoration:none;}<br /> .item-control {<br /> display: none !important;<br /> }<br /> .comments .continue {<br /> border-top: 2px solid transparent !important;<br /> }

• දැං Apply ti Blog ක්ලික් කරන්න.

දැං ඉතිං බ්ලොග් එකට ගිහින් බලන්නකෝ ලස්සනයිද කියල. ඕක එපා නම් ආපහු ඔතෙන්ටම ඇවිත් ඔය කෝඩ් එක මකල Apply කරාම ආපහු ඉස්සර විදියටම ඒවි..