صندوق اعجابات الفيسبوك بشكل جميل لمدونات بلوجر (كــود Css)

السلام عليكم ورحمة الله تعالى وبركاته ، اخواني متتبعي مدونة بنكو ، في هذا الموضوع سنتعلم واياكم كيفية اضافة كود CSS خاص بصندوق اعجابات الفيسبوك، لكن هذه المرة بشكل جد أنيق ومتميز على باقي الصناديق مما تجعل الزائر يشترك في صفحت مدونتك على الفيسبوك .

طريقة إضافة الكود :

• اتجه الى لوحة تحكم مدونتك 
• اذهب الى قسم " تصميم "
• اضغط على اضافة أداة في المكان الذي تريد اضافت الأداة فـــيه
• اختر أداة 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/Pincos3" 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%2FPincos3&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> 

تعديل الكود بما يناسبك : 

• غير Pincos3 بإسم صفحتك على الفيسبوك ( يوجد اثنان )
  
  
  المصدر