اضافة زر اظهار واخفاء التعليقات بشكل احترافى

اهلا بكم احبائى الكرام. اضافة زر اخفاء واظهار التعليقات اضافة مميزة حيث تعطيك شكل افضل للقالب بتاثيرات رائعة. عندما تضغط على الزر يظهر صندوق التعليقات كاملا مثل موقعنا تماما, وعندما تضغط عليه مرة اخرى يخفى صندوق التعليقات تمام كما كان. ولهذا تعد اضافة مهمة لجميع القوالب والمواقع لانها تنقص من ارتفاع المدونة وايضا تعطيع شكلا رائعا

1- توجه الى لوحة التحكم => قالب => تحرير Html
2- ابحث عن <div class='comments' id='comments'> (سوف تجد اثنان منه ,غالبا الاول هو المقصود)
3- احذفه ثم ضع الكود التالى مكانه اذا لم تنجح جربه على الثانى وارجع الاول كما كان

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>
<style>
/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#29567D;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
</style>
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

صورة توضيحية

4- احفظ القالب

اذا كان هناك اى مشكلة او طلب فلا تتردد بكتابة تعليق هنا او التواصل عبر صفحة ركن الاسئلة والمشاكل

facebook

twitter

Tweet

google+

تابعونا على