شرح تغيير شكل تعليقات بلوجر العادي الى شكل أكثر احترافية و جمال

السلام عليكم و رحمة الله تعالى و بركاته

في هده التدوينة سأقدم لكم كود رائع من تصميمي لتغيير شكل تعليقات بلوجر العادي الى شكل احترافي و جميل لن أطول عليكم أكثر .

طريقة التركيب سهل وهي الكتالي من  لوحة التحكم -> قالب -> تحرير HTML- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات ثم قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F) 
 ]]></b:skin>

 ]]></b:skin>

 ]]></b:skin>

 ]]></b:skin>

ثم قبله تماما (فوقه) ضع الكود التالي

.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 14px; margin-bottom: 16px; font-family:DroidKufi-Regular; text-align:right; line-height: 1.4em; } .comments .continue a, .comments .comment .comment-actions a { display:inline; font-family:DroidKufi-Regular; font-size:13px; padding: 2px 5px; text-decoration: none; text-shadow:0 1px 1px rgba(0,0,0,.3); color:#FFF; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-border-radius: 3px; border-radius: 3px; margin-right: 10px; border: 1px solid #3079ED; background: #0066FF; background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999)); background: -moz-linear-gradient(top, #0099FF, #009999); filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#0099FF', endColorstr='#009999'); } .comments .continue a:hover, .comments .comment .comment-actions a:hover { text-decoration: none; background:#0099FF; background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF)); background: -moz-linear-gradient(top, #009999, #0099FF); filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#009999', endColorstr='#0099FF'); } .comments .continue a:active, .comments .comment .comment-actions a:active { position: relative; top:1px; background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC)); background: -moz-linear-gradient(top, #0066FF, #0099CC); filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#0066FF', endColorstr='#0099CC'); } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none; } .comments .comments-content .inline-thread { padding: 0.5em 1em 0 1em; } .comments .comments-content .comment-thread { margin: 8px 0px 0px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 40px; font-size:13px; } .comments .comments-content .comment { padding-bottom:8px; margin-bottom: 0px } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-style:normal; font-weight:bold; font-size:17px; font-family:DroidKufi-Regular; } .comments .comments-content .user a { color: #0099FF; } .comments .comments-content .user a:hover { text-decoration: none; color: #CCC; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 6px -4px; } .comments .comments-content .datetime { margin-left:6px; color: #999; font-size: 12px; font-family:DroidKufi-Regular; float: left; } .comments .comments-content .comment-content { font-family:DroidKufi-Regular; font-size: 15px; line-height: 19px; text-align:none; margin: 15px 0 15px; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 500px; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: right; } .comments .avatar-image-container img { width:50px; hieght:50px; } .comments .comment-block { margin-right: 48px; position: relative; padding: 20px 15px 20px 15px; background: #F7F7F7; border: 1px solid #000; overflow: hidden; border-image: initial; width:500px; }

الان ما عليك سوى حفظ القالب و مبروك الاظافة .