الاثنين، 29 يوليو 2013

إضافة صندوق الإعجاب الخاص بالفايسبوك إلى مدونتك

5:09 ص  Unknown  لا يوجد تعليقات



السلام عليكم, كيف حالكم يا إخواني أرجو أن تكونو جميعا بخير. اليوم سنتعرف و إياكم على كيفية إضافة صندوق الإعجاب الخاص بصفحتك على الفايسبوك إلى مدونتك بشكله الجديد و الجذاب, حيث أنه تم تخصيصه بتقنية Css مما جعله يبدو رائعا و يضفي لمسة جميلة على المدونة, و بدون أن أطول عليكم ننتقل مباشرة إلى شرح طريقة إضافة هذا الصندوق إلى المدونة.
separator 1

لإضافة هذا الصندوق إلى مدونتك المرجو تتبع الخطوات التالية :
  • اذهب إلى لوحة التحكم الخاصة بمدونتك ثم تصميم بعد ذلك اضغط على إضافة أداة HTML/Javascript
  • الآن انسخ الكود التالي و ضعه داخل الأداة
<center><style>.helperbloggerFB { 
width: 300px; 
height: 150px; 
border-radius: 3px; 
position: relative; 
background-color:#f4f4f4; 
padding:5px 10px 15px 0; 
} 
.helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after { 
background: #f4f4f4; 
border: 1px solid #ccc; 
} 
.helperbloggerFB:before, .helperbloggerFB:after { 
content: ""; 
position: absolute; 
bottom: -3px; 
left: 2px; 
right: 2px; 
height: 1px; 
border-top: none; 
} 
.helperbloggerFB:after { 
left: 4px; 
right: 4px; 
bottom: -5px; 
box-shadow: 0 0 2px #ccc; 
} 
</style>

<div class="helperbloggerFB"> 

<div style="height:155px;overflow:hidden"> 
<fb:like-box href="https://www.facebook.com/wessaaal" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2Fwessaaal&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box> 
</div> 
</div> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script></center>
التعديل على الكود :
wessaaal : غيره باسم صفحتك على الفايسبوك (يوجد مرتين في الكود)
انتهى الدرس, أرجو أن تنال هذه الإضافة إعجابكم.






منشورة في:

0 التعليقات:

إرسال تعليق