23‏/10‏/2014

إضافة صندوق فيسبوك مع صندوق جوجل بلس قد تغنيك عن الإضافات القديمة والتي إما توضع في في السيدبار أو تكون عن صندوق يظهر تلقائيا فور الدخول للموقع ، مايميز إضافتنا لليوم أنها لا تأخذ متسع في المدونة كما انها مخفية وتظهر فور مرور الموس عليها أي تنزلق منسقة كليا وواضحة مايتبقى عليك إلى مشاهدتها مباشرة بعدها نمر لشرح طريقة
تركيبها
شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.socialbox{  position:fixed; top:100px; right:-286px; height:250px; width:285px; background:#efefef;border:1px solid #bbb;border-right:0;transition:all 400ms ease-in-out;border-radius:0 0 0 3px;}
.fbicon-box{ width:30px;height:35px;position:absolute;top:-1px;left:-30px;background:#405D9B;border-radius:3px 0 0 3px;color:#fff;font-family:Arial;font-size:30px;font-weight:700;text-align:center;padding-top:2px;}
.socialbox:hover{ right:0;z-index:2;}
.socialbox2{position:fixed;top:145px;right:-279px;height:230px;width:258px;background:#efefef;border:1px solid #bbb;border-right:0; transition:all 400ms ease-in-out; border-radius:0 0 0 3px;padding:10px;}
.gpicon-box{ width:30px;height:32px;position:absolute;top:-1px;left:-30px;background:#DD4B39;border-radius:3px 0 0 3px;color:#fff;font-family:Georgia;font-size:20px;font-weight:700; text-align:center;padding-top:5px;}
.socialbox2:hover, .socialbox2:active{right:0;}
2. إبحث عن <body> وضع الكود التالي أسفله
<div id='fb-root'/>
<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.async=true;
  js.src = &quot;//connect.facebook.net/ar_Ar/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
3. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
 (function() {
  var po = document.createElement(&#39;script&#39;);         
  po.type = &#39;text/javascript&#39;;         
  po.async = true;         
  po.src = &#39;https://apis.google.com/js/plusone.js&#39;;         
  var s = document.getElementsByTagName(&#39;script&#39;)[0];  s.parentNode.insertBefore(po, s);
 })(); 
</script>
4. قم بحفظ النموذج ثم توجه إلى التخطيط
5. اضف اداة Html/Javascript وضع بها الكود التالي
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/arabe1web" data-width="290" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+iHussam" data-source="blogger:blog:followers" data-width="260"></div>
</div>
* غير arabe1web بإسم صفحتك على الفيسبوك
* غير iHussam بإسم صفحتك على جوجل بلس
إضافة صندوق فيسبوك مع صندوق جوجل بلس قد تغنيك عن الإضافات القديمة والتي إما توضع في في السيدبار أو تكون عن صندوق يظهر تلقائيا فور الدخول للموقع ، مايميز إضافتنا لليوم أنها لا تأخذ متسع في المدونة كما انها مخفية وتظهر فور مرور الموس عليها أي تنزلق منسقة كليا وواضحة مايتبقى عليك إلى مشاهدتها مباشرة بعدها نمر لشرح طريقة
تركيبها
شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.socialbox{  position:fixed; top:100px; right:-286px; height:250px; width:285px; background:#efefef;border:1px solid #bbb;border-right:0;transition:all 400ms ease-in-out;border-radius:0 0 0 3px;}
.fbicon-box{ width:30px;height:35px;position:absolute;top:-1px;left:-30px;background:#405D9B;border-radius:3px 0 0 3px;color:#fff;font-family:Arial;font-size:30px;font-weight:700;text-align:center;padding-top:2px;}
.socialbox:hover{ right:0;z-index:2;}
.socialbox2{position:fixed;top:145px;right:-279px;height:230px;width:258px;background:#efefef;border:1px solid #bbb;border-right:0; transition:all 400ms ease-in-out; border-radius:0 0 0 3px;padding:10px;}
.gpicon-box{ width:30px;height:32px;position:absolute;top:-1px;left:-30px;background:#DD4B39;border-radius:3px 0 0 3px;color:#fff;font-family:Georgia;font-size:20px;font-weight:700; text-align:center;padding-top:5px;}
.socialbox2:hover, .socialbox2:active{right:0;}
2. إبحث عن <body> وضع الكود التالي أسفله
<div id='fb-root'/>
<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.async=true;
  js.src = &quot;//connect.facebook.net/ar_Ar/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
3. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
 (function() {
  var po = document.createElement(&#39;script&#39;);         
  po.type = &#39;text/javascript&#39;;         
  po.async = true;         
  po.src = &#39;https://apis.google.com/js/plusone.js&#39;;         
  var s = document.getElementsByTagName(&#39;script&#39;)[0];  s.parentNode.insertBefore(po, s);
 })(); 
</script>
4. قم بحفظ النموذج ثم توجه إلى التخطيط
5. اضف اداة Html/Javascript وضع بها الكود التالي
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/arabe1web" data-width="290" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+iHussam" data-source="blogger:blog:followers" data-width="260"></div>
</div>
* غير arabe1web بإسم صفحتك على الفيسبوك
* غير iHussam بإسم صفحتك على جوجل بلس
16 Blogger تعليقات
Disqus
16 التعليقات
المشرف
avatar

ممكن تتطرق إلى شرح اضافة مواضيع ذات صلة أسفل كل تدوينة . . ؟ بكشل منسق وجميل

المشرف
avatar

يعطيك العافية اخوي حسام <3

المشرف
avatar

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

المشرف
avatar

العفو اخي :lv

المشرف
avatar

جميل

بس فين شرح تعريب القوالب

مر اسبوعين ولم تفعل شي ؟؟؟

المشرف
avatar
المشرف
avatar

ممكن تسمح بعض اعلانات في مدونتك لانها اعلانات ضد الدين الاسلامي وقبيحة جداا

المشرف
avatar

إضافة جميلة شكراً
ممكن طلب بسيط =(
اريد سلايدر شو صغير و تلقائي شبيه السلايدر الموجود في مدونتك .... إذا أمكن ر

المشرف
avatar

سأضعه في احد التدوينات المقبلة

المشرف
avatar

شكراً لك لكن واجهتني مشكلة

http://arbwarez.blogspot.com/

كيف الحل ؟

المشرف
avatar

جرب وضع الكود الاخير داخل القالب ابحث عن <body ضع الكود اسفله

المشرف
avatar

نعم عندما وضعت الكود الأخير أسفل Body نجح الأمر لكن بقي مربع جوجل بلس غير ظاهر بشكل كامل فقمت بتعديل width:258px في الكود الأول إلى width:277px فنجح الأمر

شكراً لك و بارك الله فيك

المشرف
avatar
المبـدع للمعلـوميـات 4/30/2015
delete

إضافه مميزه
لكن لو أردت الانزلاق يكون في الجهة اليسرى وليست اليمنى
كيف يكون التغيير في الكود ؟

المشرف
avatar

ماذا عن اليوتيوب

المشرف
avatar

اليوتوب ليس لديه تطبيق يمكن من إظهار المشتركين

المشرف
avatar

رائع اخي استفدتت منك الكثييير
يسلمو تستاهل الف بوسه ههه

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة