بسم الله الرحمن الرحيم
مرحب بكم من جديد على مدونة موحو
للمعلوميات ومع تدوينة جديدة سنتطرق فيها إلى كيفية إضافة تعليقات عبر الفايسبوك إلى
المدونة بواجهة رائعة وجديدة كما في الصورة
<div class='comments' id='comments'>
باستعمال أداة البحث بالضغط على
ثم نقوم بلصق الكود الأتي فوقه
<div class='comakauttafb-tab'
id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Add Comments via Facebook'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5Wwg0g3Yl4j65oXxDihuko_L3ZiutGI1d3j7_g4YUusTq9Q_NK-A-uXtgZym8pkxf1iYckhrLh7XNSCN_FBfDFhnDTfDCGVY4ya9gJ601nZBf_Mne9_Xcro2sWDUnrJMqyhSoMARMSg/s1600/FACEBOOK.png'/><fb:comments-count
expr:href='data:post.url'/> التعليقات</div><div
class='comakauttafb-tab inactive-select-tab' id='blogger-comments'
onclick='javascript:commentToggle("#blogger-comments");'
title='Add Comments via Blogger'><img class='comakauttafb-tab-icon'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCjKpZ3yDF7VqxY3io3YXjYVy_xVUsrzwSyR97WUN13cKEZ3z03KE8-SzWKnarLM3g8C6mb3-4Y7SYLSSpZbyxcIKaNPffLfaoqR3SFl4IxpdjSWTFQXJWzrGb-dlrKvrGy0SdGYFMR1o/s1600/BLOGGER.png'/> <data:post.numComments/>
التعليقات</div><div
class='clear'/></div><div class='comakauttafb-page'
id='fb-comments-page'><b:if cond='data:blog.pageType ==
"item"'><div id='fb-root'/><fb:comments
color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div><div
class='comments comakauttafb-page' id='blogger-comments-page'><script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script
src='http://code.jquery.com/jquery-latest.js'/><meta
content='additions.blogger' property='fb:admins'/><script
type='text/javascript'>function commentToggle(selectTab)
{$(".comakauttafb-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comakauttafb-page").hide();$(selectTab
+ "-page").show();}</script><style
type='text/css'>.comakauttafb-page,
.comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc;
border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid
#ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px
5px;display:none;}.comakauttafb-tab {text-shadow:0px
1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s
ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover
{box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px
#000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px
#000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px
#000}</style>
و لتغيير حجم
الأداة نقوم بتغير ما باللون الأحمر إلى الحجم المناسب ونقوم بحفظ القالب و مبروك
الإضافة
1 التعليقات:
التعليقاتالعفو أخي
رد