السلام عليكم ورحمة الله تعالى وبركاته ، اخواني متتبعي مدونة فورويب ، في هذا الموضوع سنتعلم واياكم كيفية اضافة كود 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/4weeb" 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&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&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2F4weeb&locale=en_US&sdk=joey&show_faces=true&stream=false&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>
تعديل الكود بما يناسبك :
- غير 4weeb بإسم صفحتك على الفيسبوك ( يوجد اثنان )
ليست هناك تعليقات:
إرسال تعليق
شاركنا بتعليقك، وشكرا لك