JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

تغير صندوق مشاركات البلوجر الى شكل جديد و حصري


تغير صندوق مشاركات البلوجر الى شكل جديد و حصري








الكثير يبحث عن تغير الصندوق الخاص بالتعليقات الموجود بقالبه 
واذا كنت من هؤلاء الاشخاص اللذين اصابهم الملل من صندوق التعليقات اللذين يستخدموه
هنا في هذه التدوينة لديك الحل 
معنا اليوم شكل خيالي لصندوق تعليقات بلوجر و تم تصميمه بشكل احترافي و حصري 
في مدونة هلا تك و يمكن تركيبه على اي قالب بشكل بسيط و سهل و بعد التركيب سيتغير قالبك 360 درجة
للافضل يمكنك مشاهدة الصور المتحركة لمعرفة شكل الصندوق و تاثيره عند مرور الماوس عليه


طريقة التركيب

اولا ازالة صندوق ال Comments بالكامل حتى مع الاسم من الااكواد

 الخاصة بالقالب 

ووضع هذا الكود فوق ]]></b:skin>





/*Comments*/
#comment-editor {
    max-height: 210px;
    overflow-y: auto;
}
#comments h4 {
background: $(main);
color: #fff;
padding: 5px;
}
#comments h4:before {
font-family: "FontAwesome";
content: "\f086";
padding: 0 10px;
}
#comments li {
    margin: 5px 0 10px 10px;
    list-style: none;
    border: 2px solid #1c6ed2;
    border-radius: 25px;
    padding: 10px;
position: relative;
}
#comments .avatar-image-container img {
width: 70px;
height:70px;
max-width:70px;
border-radius: 100%;
float: right;
border: 5px solid $(main);
    background: #333;
}
.comments .avatar-image-container{
    float: right;
    max-height: 70px;
    overflow: hidden;
    width: 70px;
}
#comments .comment-content {
    width: 100%;
    margin: 50px 0 20px 0;
    padding: 20px 20px 5px 0;
}
#comments span.datetime.secondary-text {
background: #1066d0;
    border-radius: 25px;
    position: absolute;
    top: -34px;
    left: 130px;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
}
#comments span.datetime.secondary-text a{
    color:#fff;
    padding: 0 15px 0 0;
}
#comments span.datetime.secondary-text:after {
font-family: "FontAwesome";
    content: "\f017";
    color: #fff;
    padding: 0px 10px 0 0;
    font-size: 20px;
    float: right;
}
#comments .comment-actions.secondary-text a {
background:#c50012;
padding: 2px 20px;
margin: 0 5px;
color: #fff;
border-radius: 25px;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
#comments  .comment-actions.secondary-text a:hover {
background: #2bb324 !important;
}
#comments .comment-actions.secondary-text a:last-child {
background:#1b6dd2;
}
#comments .comment-actions.secondary-text a:last-child:hover {
background: #f71010 !important;
}
#comments .comment-actions.secondary-text a:last-child:after {
font-family: "FontAwesome";
content: "\f1f8";
padding: 0 10px 0 0;
}
#comments .continue a {
background: $(main);
color: #fff;
padding: 5px 10px;
}
#comments .continue a:before {
font-family: "FontAwesome";
content: "\f27a";
padding: 0 0 0 10px;
}
.comments-content {
max-height: 400px;
overflow-y: auto;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.comments-content:hover {
-webkit-mask-image: inherit;
}
#comments .comment-form p {
background: #16334f;
color: #fff;
padding: 5px;
}
#comments .comment-form p:before {
font-family: "FontAwesome";
content: "\f08a";
padding: 10px;
}
#comments .comment-form p:hover:before {
font-family: "FontAwesome";
content: "\f004";
padding: 10px;
}
#comments li:first-child:before {
    font-family: "FontAwesome";
    content: "\f005 \00a0 أول تعليق";
    color: #1e6fd3;
    font-size: 20px;
    position: absolute;
    left: 25px;
    top: 28px;
}
#comments .comment-replies li:first-child:before {
    font-family: "FontAwesome";
    content: "\f005 \00a0 اول رد";
    font-size: 20px;
    position: absolute;
    left: 25px;
    top: 28px;
}
#comments .comment-form h4:before {
font-family: "FontAwesome";
content: "\f067";
}
.deleted-comment {
color: tomato;
}
.deleted-comment:before {
font-family: "FontAwesome";
content: "\f00d ";
padding: 0 0 0 5px;
}
.loadmore.loaded{display:none;}
.comment-footer {
    background: tomato;
    padding: 5px;
    color: #fff;
    text-align: center;
}
.comment-footer:before {
   font-family: "FontAwesome";
    content: "\f071";
    float: right;
    padding: 0 5px;
}





الأن سوف تبحث عن هذا الوسم  <data:post.body/>  وسوف تجد أن هذا الوسم مكرر اخر وسم هو الذى سوف تضع الكود اسفله.



//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>100)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,100)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay2">'+relatedTitles[r]+'</span><img src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
$(document).ready(function() {
$('#related-posts img ,.post-thumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});
$('#related-posts img ,.post-thumbnail').attr('src', function(i, src) {return src.replace( '/default.jpg', '/mqdefault.jpg' );});
});
//]]>





و أخيرا قم بالحفظ  و مبروك الأضافة 






author-img

maher

تعليقات
    ليست هناك تعليقات
    إرسال تعليق
      الاسمبريد إلكترونيرسالة