أضف أداة المعجبين على google plus و facebook عائمة ومنزلقة في اداة واحدة لمدونات بلوجر

السلام عليكم ,سأضع بين أيديكم هده الاداة الجميلى والرائعة التي  تجمع بين معجبيك على جوجل بلس وعلى الفيسبوك ,الاداة جربتها وهي سريعة في الاشتغال عند التاشير عليها  ولا تأخد مساحة يعني الأداة جميلة وخفيفة ,ولمن يهمه الامر فقد وضعت في موضوع سابق  اضافة أداة المتابعة على المواقع الاجتماعية facebook-google +1-twitter عائمة ومنزلقة لمدونات بلوجرهده الاداة جميلة  تحتوي على ثلات أدوات في أداة واحدة

                                                             

طريقة التركيب :

بلنسبة للواجهة الجديدة  :                                               -   بالنسبة للواجهة القديمة :

لاتنسى اخد نسخة احتياطية للقالب                                                        لاتنسى اخد نسخة احتياطية للقالب

1.لوحة التحكم                                                                                   1 -.لوحة التحكم
2.القالب                                                                                            2  - .تخطيط أوتصميم 
3. ثم تحريرhtml;.                                                                        ثم 3 - تحريرhtml.   
 4.متابعة                                                                                          4-.توسيع القالب
5.توسيع القالب                                                         
                          ثم ابحث عن الكود التالي :بالضغط على      alt+f

</head>

ثم ضع فوقه الكود التالي

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

ادا كنت ركب هدا الكود من قبل فقط تجاوز هده المرحلة

ثانيا :

ملاحضة :  لمن لم يسبق له وضع أداة  المعجبين على  google plus  أو الفيسبوك  فل يضع الكود التالي فوق  </head>  مباشرة  أما ادا كان العكس فقط تجاوز هده المرحلة أيضا   :

<link href="https://plus.google.com/102510956572643740745" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'ar'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

مع تغير   102510956572643740745    بالأرقام الموجودة   في  رابط صفحتك على جوجل

تالثا   الكود التاني:

طريقة التركيب

.1 اذهب للوحة التحكم

2. تخطيط 

3.عناصر الصفحة

4. اضف اداة

6.اختار  Html/Javascript

 هدا هو الكود

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-270"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKQ0Rd7Bsr-3GQEG9IipvovhaI1erPPsA0IawSyJO8H3tEwQpZgzwU7v6mOiWHBJ3LjoN_7SEF0Z1vqjEBhIzUSHF3fQEs2Q8OYygT1kQHcoQTvMfMkQZrQijaMAxOZE1dYwqY5i6yF8/s1600/plusbook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 3px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-270px;top:40%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><g:plus href="https://plus.google.com/102510956572643740745" width="260" height="131" theme="light"></g:plus><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fchamelcoolblogger&amp;width=260&amp;colorscheme=light&amp;show_faces=false&amp;connections=9&amp;stream=false&amp;header=false&amp;height=140" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 140px; width: 260px;background:#fff;"></iframe></div></div>

ملاحضة :
 قم بتغير   chamelcoolblogger    باسم صفحتك على الفيسبوك أما دا كان اسم صفحتك طويل وعبارة عن أصفار فقم بالدخول على هدا الرابط ثم ضع اسم مختصرا لصفحتك  Facebook.com/username

ثم غير  105111763875634408359   بالارقام التي ستجدها في  الرابط في صفحتك على جوجل بلس

7-ثم احفض الأدة

ومبروك الاضافة

Unknown

8:17 م

اقرأ المزيد

طريقة إضافة مربعات تبويب داخل مواضيع بلوجر

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

إضافة مربعات تبويب:

كما قلنا سابقاً الإضافة مميزة في تنسيق الموضوع وتسريع التحميل لكن عن أمثلة إستخدامها فهي كثيرة نذكر منها:
وضع أمثلة لدروس ما....كل مثال داخل تبويب.
إضافة سلسلة فيلم....كل حلقة داخل تبويب.
إضافة عدة لينكات مختلفة  لقناة واحدة كل لينك داخل تبويب....والكثير.

الكود:

<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('link1','link2','link3','link4','link5','link6','link7','link8');

function channel(id){
 hideallids();
 showdiv(id);
}

function hideallids(){
 //loop through the array and hide each element by id
 for (var i=0;i<ids.length;i++){
  hidediv(ids[i]);
 }  
}

function hidediv(id) {
 //safe function to hide an element with a specified id
 if (document.getElementById) { // DOM3 = IE5, NS6
  document.getElementById(id).style.display = 'none';
 }
 else {
  if (document.layers) { // Netscape 4
   document.id.display = 'none';
  }
  else { // IE 4
   document.all.id.style.display = 'none';
  }
 }
}

function showdiv(id) {
 //safe function to show an element with a specified id
  
 if (document.getElementById) { // DOM3 = IE5, NS6
  document.getElementById(id).style.display = 'block';
 }
 else {
  if (document.layers) { // Netscape 4
   document.id.display = 'block';
  }
  else { // IE 4
   document.all.id.style.display = 'block';
  }
 }
}
</script>

<div align="center">
<div style="text-align: center;">
</div>
<table border="1" style="text-align:center;background-color:#cccccc; width: 240px;">
<tbody>
<tr>
<td width="25%"><input onclick="javascript:channel('link4');" type="button" value="الحلقة 4" /></td>
<td width="25%"><input onclick="javascript:channel('link3');" type="button" value="الحلقة 3" /></td>
<td width="25%"><input onclick="javascript:channel('link2');" type="button" value="الحلقة 2" /></td>
<td width="25%"><input onclick="javascript:channel('link1');" type="button" value="الحلقة 1" /></td>
</tr>
<tr>
<td width="25%"><input onclick="javascript:channel('link8');" type="button" value="الحلقة 8" /></td>
<td width="25%"><input onclick="javascript:channel('link7');" type="button" value="الحلقة 7" /></td>
<td width="25%"><input onclick="javascript:channel('link6');" type="button" value="الحلقة 6" /></td>
<td width="25%"><input onclick="javascript:channel('link5');" type="button" value="الحلقة 5" /></td>
</tr>
</tbody></table>
<hr />

 <div id="link1" style="display: block;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/C4oMy3PPNaE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link2" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/2F8cXGoSLeM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link3" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/Bg9UjZmg_dY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link4" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/Zbp1q1qYNwg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link5" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/PZzYkTYESCI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link6" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/G0Vj7rbRiUg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link7" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div> 
<div id="link8" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/5BseRzzmZn8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>


</div

---

---

مع تغيير:
اللون الأحمر و الأزرق بالكلمة التي تريدها.
اللون البرتقالي بكود الفيديو الذي تريده
اللون الأصفر ذات الخلفية السوداء بأي كود تريده ,مثال كود قناة أو نص
 ملاحظة:
لإضافة/إزالة روابط أو علامات تبويب نضيف/نزيل اللون الأزرق الموجود بين الوسمين:

<script>     الكود الملون باللون الأزرق  الموجود هنا     </script>

مع إضافة/إزالة كل الأكواد التي تحتوي بداخلها اللون الأزرق.

مثال إزالة الأكواد المحصورة بين اللون الأزرق ذات الخلفية البرتقالية ينتج عنه إزالة الخانة التي تحمل اسم الحلقة 8 .
لاحظ أن الكلمة الملونة باللون الأخضر متواجدة بالتبويب الأول فقط وهي مختلفة عن التي متواجدة بباقي التبويبات و هذا أمر واجب حتى تعمل الإضافة .

Unknown

8:05 م

اقرأ المزيد