السلام عليكم ورحمة الله وبركاتة بعد ان قمت بادراج تدوينه سابقه تتحدث عن اضافة المعجبين بصفحة مدونتك على الفيس بوك بتقنية الجي كويري على الرابط التالي .وجدت اليوم في احد المواقع التطويريه الاجنبيه طبعا!! اضافة اخرى تعطي نفس الغرض وهي اضافة المعجبين بصفحة مدونتك على موقع فيس بوك ولكن مايميزها عن الاضافة الاولي ان تلك الاضافة بتقنية مختلفه عن الاولي فهي تعتمد على ال css
ولذلك ستكون خفيفه في التصفح وجميله في الشكل ايضا كما ان موضعها في القالب يختلف ايضا فالاضافه الاولي بالجي كويري مكانها كما ترونها في الجانب الايمن لمدونتي ويظهر المعجبين بمجرد مرور الماوس ويختفو بمجرد ابعاد الماوس ... اما اضافتنا تلك فموضعها يكون اما اسفل عنوان التدوينه مباشرة او في اخر التدوينه وانا قمت باختيار مكانها اسفل التدوينه مباشرة .. ومن مميزاتها انه يمكنك التحكم في ابعادها بما يتناسب مع مدونتك كما انها سهلة الاضافه والتطبيق ولرؤية مثال حى عليها اذهب الي اخر سطر في تدوينتي تلك وسوف تراها!! ان اعجبتك تلك الاضافه المميزه سارع بتطبيقها في مدونتك وكن من اوائل من يضيفوها بمدوناتهم كى تضفي رونقا واثاره علي صفحات مدونتك وتدويناتك.. ها هى الطريقة قم بالذهاب الى لوحة تحكم مدونتك ثم الي تصميم ثم تحرير HTMLابحث عن الكود التالي
]]></b:skin>
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_Ak4Nns6Lz_Jjo74ucA3Vx36n8UOo7pJ1eRjKo2_5F0w6zGxi4GZybATAabRVS8aRGFYOb3Kl9gwpS3HtCZEqOLZ5Tk80URm4cNn8T1Lwr87GNVuDRZDREElBAHRFffME_oqQvsqyVY/") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdccB84ZIDOPp6tXESMe6PegVQlmSH9Zp5fBucZuO6BUFLqwRvqC4W_4Aekm4zP_OznwlNbSoywmG590lBBZkKsGo6BhbJq9gZk89GY5rtBaf5S5oSX3LrLR5g3aZCO-sqEV9lp20Rg/") no-repeat scroll left top transparent;
display:block;
margin-left:425px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}
]]></b:skin>
وضع قبله الكود الموجود بالاسفل ويمكنك تغيير القيمه 540 الي اى قيمه اخرى فهى خاصه بعرض الاضافه
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_Ak4Nns6Lz_Jjo74ucA3Vx36n8UOo7pJ1eRjKo2_5F0w6zGxi4GZybATAabRVS8aRGFYOb3Kl9gwpS3HtCZEqOLZ5Tk80URm4cNn8T1Lwr87GNVuDRZDREElBAHRFffME_oqQvsqyVY/") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdccB84ZIDOPp6tXESMe6PegVQlmSH9Zp5fBucZuO6BUFLqwRvqC4W_4Aekm4zP_OznwlNbSoywmG590lBBZkKsGo6BhbJq9gZk89GY5rtBaf5S5oSX3LrLR5g3aZCO-sqEV9lp20Rg/") no-repeat scroll left top transparent;
display:block;
margin-left:425px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}
ثم ابحث مجددا عن الكود التالي
<data:post.body/>
وضع قبله او بعده الكود الموجود بالاسفل مع تغيير المعلم باللون الاحمر باسم صفحتك على الفيس بوك ها هو الكود
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/EgyMigrants'>Be a Fan</a></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>
أصدقاء(تطوير ويب)
2تعليقات Blogger
2 عدد التعليقات على موضوع طريقة اضافة المعجبين بصفحتك على الفيس بوك بتقنية ال css
جميله جميله فعلن
الف شكر ليك عجبتنى هيه والى عندك علي اليمين
http://mostafabehiry.blogspot.com/2012/02/blog-post_5585.html
جزاك الله كل خير
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .
