اضافة أداة المتابعة بشكل احترافى فى بلوجر - عالم المدون

الاثنين، 13 يونيو، 2016

اضافة أداة المتابعة بشكل احترافى فى بلوجر


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



شرح التركيب


1- قم باخذ نسخة احتياطية من قالب مدونتك لعدم حدوث اى مشكلة فى التركيب.

2- قم بالبحث فى قالب مدونتك عن الوسم  ]]></b:skin>  ثم قم يوضع الكود التالى فوقه - قبلة

#cnmusocialslide {
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
  bottom: 15px;
  display: none;
  height: 110px;
  padding: 12px 14px;
  position: fixed;
  right: 2px;
  width: 352px;
  z-index: 3;
  border: 1px solid;
}
.closebo {
   border-radius: 100%;
  color: #000;
  font: bold 16px/20px arial;
  height: 20px;
  left: 350px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 10px;
  width: 20px;
}
#cnmusocialslide h6 {
  color: #FFF;
  font: bold 16px tahoma;
  margin: 0px 40px 0 40px;
  padding: 5px;
  font-family: Electrolize,ge_dinar_tworegular;
  font-weight: 500;
  background: #CD2F2F;
  border-radius: 46px;
  padding-right: 16px;
}
.inslidsoc {
  display: block;
  height: 47px;
  margin-top: 25px;
  overflow: hidden;
  margin-left: 16px;
}
.inslidsoc span {
  float: left;
  margin-right: 10px;
}
.inslidsoc span a {
color: #fff;
  display: block;
  font: bold 14px/20px arial;
  padding: 0 8px;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  border-radius: 46px;
  height: 46px;
  line-height: 43px;
  background: #CD2F2F;
  width: 30px;
}

a.twitter:hover {
  background-color: #1da1f2;
}
a.facebook:hover {
  background-color: #4267B2;
}
a.google:hover {
  background: #FF0000;
}
a.youtube:hover {
  background: #FF0000;
}
a.instagram:hover {
  background-color: #965628;
}
a.user-times:hover {
  background-color: #1150D0;
}
.twittslis {
background-color: #5ea9dd;
}
.gplusslis {
background-color: #dc4a38;
}
.youtslis {
background-color: #c12025;
}
a.closebo:hover {
  color: #FF0008;
}
i.fa.fa-twitter {
  font-size: 29px;
  margin-top: 9px;
}
i.fa.fa-facebook {
  font-size: 29px;
  margin-top: 9px;
  margin-right: 7px;
}
i.fa.fa-google-plus {
  font-size: 29px;
  margin-top: 9px;
  margin-right: -4px;
}
i.fa.fa-youtube {
  font-size: 29px;
  margin-top: 8px;
  margin-right: 2px;
}
i.fa.fa-instagram {
  font-size: 29px;
  margin-top: 8px;
  margin-right: 2px;
}
i.fa.fa-user-times {
  font-size: 28px;
  margin-top: 9px;
  margin-right: -2px;
}


3- قم البحث عن الوسم <body> و ان لم تجده ابحث عنه هكذا <body ثم قم بوضع الكود التالى اسفله - تحت منه

<script type='text/javascript'>
//<![CDATA[
var _0x84fe = ["scrollTop", "height", "slow", "show", "#cnmusocialslide", "hide", "scroll", "remove", "POST", "/facebookpage.php", "ajax"];
$(window)[_0x84fe[6]](function() {
if ($(document)[_0x84fe[0]]() >= $(document)[_0x84fe[1]]() / 4) {
$(_0x84fe[4])[_0x84fe[3]](_0x84fe[2]);
} else {
$(_0x84fe[4])[_0x84fe[5]](_0x84fe[2]);
}
});
function closecnmusocialslide() {
$(_0x84fe[4])[_0x84fe[7]]();
$[_0x84fe[10]]({
type : _0x84fe[8],
url : _0x84fe[9]
});
}
;
//]]>
</script>

<div id='cnmusocialslide' style='display: none;'>
<a class='closebo' href='javascript:void(0);' onclick='return closecnmusocialslide();'><i aria-hidden='true' class='fa fa-times'/></a>
<h6>تابعنا ولا تفوت جديد الدروس الحصرية</h6>
<div class='inslidsoc'>
<span><a class='instagram' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-instagram'/></a></span>
<span><a class='youtube' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-youtube'/></a></span>
<span><a class='google' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-google-plus'/></a></span>
<span><a class='twitter' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-twitter'/></a></span>
<span><a class='facebook' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-facebook'/></a></span>
<span><a class='user-times' href='https://wdbloog.blogspot.com' target='_blank'><i aria-hidden='true' class='fa fa-user-times'/></a></span>
</div>
</div>

4- قم بتغيير رابط مدونتى بما تريد انت  .

5- قم بحفقط القالب ومبروك عليك .


وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

8 تعليق على موضوع : اضافة أداة المتابعة بشكل احترافى فى بلوجر

ارلايد طريقة تركيب انظمة التعليق الثلاث بلوجر وديسكس وفيسبوك
او بلوجر وديسكس مع عدم تغير شكل التعليقات الاصلية الخاصة بالقالب وشكرا لك
ارجو ان تنشرها في الموضوع القادم

ان شاء الله اخى سوف اضع لها موضوع قريبا

شكرل لك اخى الكريم

بالتوفيق لك اخى الكريم

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر