هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
اضف إيموجي بعد الضغط على ازرار التفاعل
صفحة 1 من اصل 1
اضف إيموجي بعد الضغط على ازرار التفاعل
السلام عليكم ورحمة الله وبركاتة
سيساعدك هذا الكود على إظهار رمز تعبيري بعد الضغط على أزرار التفاعل,
يظهر الرمز اسفل الموضوع
كما في المثال أدناه.
----------------------------------
يظهر الرمز اسفل الموضوع
كما في المثال أدناه.
----------------------------------
بعد الضغط على زر "أعجبني" ، سيظهر هذا الرمز التعبيري >
زر لم يعجبني >>
زر زائد >>>
زر ناقص >
------------------------------------------
طريقة التركيب
- phpBB2:
ابحث عن الكود التالي في قالب viewtopic_body- الكود:
<div>{postrow.displayed.MESSAGE}</div>
احذفه وضع مكانه الكود التالي- الكود:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div p.fa_like_list, .fa_likee_div p.fa_dislike_list {
background: #0c121200;
line-height: 0px;
padding: 0;
}
.fa_likee_div {
line-height: 0px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
line-height: 0px;
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
border: 0 !important;
display: none;
}
.fa_like_list, .fa_dislike_list {
border: 0 !important;
}
.vote-post-Message img {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a17.png" />
</div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
- AwesomeBB:
- _______________________________
ابحث عن الكود التالي في قالب viewtopic_body- الكود:
{postrow.displayed.MESSAGE}
احذفه وضع مكانه الكود التالي- الكود:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div {
position: relative;
top: -5px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
border: 0 !important;
display: none;
}
.fa_like_list, .fa_dislike_list {
border: 0 !important;
}
.fa-like {
padding-left: 1px;
position: relative;
bottom: -1px;
}
.vote-post-Message img {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a17.png" />
</div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
----
- ModernBB:
- _______________________________
ابحث عن الكود التالي في قالب viewtopic_body- الكود:
<div>{postrow.displayed.MESSAGE}</div>
احذفه وضع مكانه الكود التالي- الكود:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.fa_likee_div {
position: relative;
top: -5px;
}
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
border: 0 !important;
display: none;
}
.fa_like_list, .fa_dislike_list {
border: 0 !important;
}
.fa-like {
padding-left: 1px;
position: relative;
bottom: -1px;
}
.vote-post-Message img {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a17.png" />
</div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
----
- PunBB و Invision و phpBB3 :
- _______________________________
ابحث عن الكود التالي في قالب viewtopic_body- الكود:
<div>{postrow.displayed.MESSAGE}</div>
احذفه وضع مكانه الكود التالي- الكود:
<div>{postrow.displayed.MESSAGE}</div>
<style>
.vote-post a {
font-size: 0 !important;
}
.fa_like_list, .fa_dislike_list, .option_voters_list {
font-size: larger;
}
.vote-post {
border-radius: 100px;
background: #dfd6d6;
margin-top: 100px;
display: flex;
justify-content: center;
width: fit-content;
}
p.fa_dislike_list img, p.fa_like_list img {
width: 50px;
}
p.fa_like_list:before {
padding-right: 8px;
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a19.png);
}
p.fa_dislike_list:before {
content: url(https://i.servimg.com/u/f20/16/85/77/67/ocia-a20.png);
}
.fa-dislike, .fa-like {
font-size: 0 !important;
float: right;
}
.fa-dislike {
padding-right: 10px;
}
.fa_like_div p.fa_like_list:before, .fa_like_div p.fa_dislike_list:before {
font-size: 0 !important;
border: 0 !important;
display: none;
}
.fa_like_list, .fa_dislike_list {
border: 0 !important;
}
.fa-like {
padding-left: 1px;
position: relative;
bottom: -1px;
}
.vote-post-Message img {
width: 52px !important;
}
.vote-post-Message {
width: 70px!important;
}
</style>
<div align="center"><div class="vote-post" style="font-size: 0px;">
<!-- BEGIN switch_vote_active -->
<!-- BEGIN switch_bar -->
<!-- BEGIN switch_vote_plus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a17.png" />
</div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-post-Message" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
<img src="https://i.servimg.com/u/f20/16/85/77/67/ocia-a18.png" />
</div>
<!-- END switch_vote_minus -->
<!-- END switch_bar -->
<!-- END switch_vote_active -->
<!-- BEGIN switch_likes_active -->
<div class="fa_likee_div" style="font-size: 0px;">
<!-- BEGIN switch_like_list -->
<div class="fa-like" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</div>
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
<div class="fa-dislike" style="font-size: 0px;">{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</div>
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
</div> </div>
________________________________
نأمل أن يعجبك هذا الكود
-----------------
-----------------
لا تتردد في فتح موضوع ع إذا كان لديك أي خلل أو عيب قد تكون قد رصدته
وفقكم الله
________________________
تمت كتابة الأكواد والشرح بواسطة كونان2000
وشكرا للعضو العراقي الطائي الذي بسببه جاءتني هذه الفكرة الجميلة
abigan, العراقي الطائي و Mr Google يعجبهم هذا الموضوع
مواضيع مماثلة
» جديد : إضافة رموز تعبيرية "إيموجي" في محرر الكتابة
» كيف احصل كود التفاعل
» ارجو التفاعل
» كيف اعمل شريط التفاعل؟
» شرح كامل لكيفية الإشتراك و التفاعل بخدمة Google Analytics
» كيف احصل كود التفاعل
» ارجو التفاعل
» كيف اعمل شريط التفاعل؟
» شرح كامل لكيفية الإشتراك و التفاعل بخدمة Google Analytics
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى