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

حصريات
فوتوشوب
شروحات
إضافات
قوالب

الصفحة غير موجودة ، 404

الصفحة أو الكلمة التى تبحث عنها غير موجوده على المدونة أو تم حذفها

يمكنك التبليغ عن رابط لا يعمل من هذا الصفحة التبليغ عن رابط لا يعمل

ويمكنك طلب ما تريده من هذه الصفحة الدعم الفنى

أو يمكنك العودة للصفحة الرئيسية أو البحث عن الصفحةو من جديد

العودة للرئيسية

الاثنين، 22 أغسطس، 2016

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



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


معاية الإضافه



شرح التركيب



  1. اولا قم بالبحث فى قالب مدونه عن الوسم </head> ثم قم بوضع الكود التالى فوقه


<style>

.wdbloog-box {
  max-width: 753px;
  min-width: 290px;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 5;
  margin: auto;
}
.wdbloog-box input[type=&quot;text&quot;] {
  font-size: 0;
  letter-spacing: 0.1em;
  color: #888;
  height: 0;
  line-height: 1;
  border: 1px solid rgba(55, 58, 71, 0);
  transition: all 0.2s;
  box-sizing: border-box;
  width: 0;
  background: rgba(55, 58, 71, 0);
}
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(36, 40, 66, 0.9);
 }
.overlay .overlay-close {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  border: none;
  background: #b71c1c;
  color: #FFFFFF;
  outline: none;
  z-index: 100;
  border-radius: 50%;
  font-size: 24px;
}
.overlay .dialog-inner{
 text-align: center;
 position: relative;
 top: 50%;
 height: 60%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-30%);
}
.overlay-mbl {
 opacity: 0;
 visibility: hidden;
 z-index:100;
}
.overlay-mbl.open {
 opacity: 1;
 visibility: visible;
}
#trigger-overlay {
  float: left;
  cursor: pointer;
  margin-top: 9px;
  background: #b71c1c;
  border-radius: 50%;
  width: 33px;
  text-align: center;
  line-height: 33px;
  height: 33px;
}
#trigger-overlay a {
  color: #fff;
  font-size: 17px;
}
.topleft-wdbloog ul li {
  display: block;
  float: right;
  margin: 20px 0 20px 20px;
}
.topleft-wdbloog ul li a i {
  width: 70px;
  height: 70px;
  color: #fff;
  background: #000000;
  border-radius: 50%;
  line-height: 70px;
  font-size: 25px;
}
i.fa.fa-facebook {
  transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  -moz-transition: all .3s;
}
i.fa.fa-facebook:hover {
  background-color: #3b5998;
}
i.fa.fa-twitter:hover {
  background-color: #55acee;
}
i.fa.fa-instagram:hover {
  background-color: #8E5134;
}
i.fa.fa-google-plus:hover {
  background-color: #CD201F;
}
i.fa.fa-youtube:hover {
  background-color: #CD201F;
}
i.fa.fa-rss:hover {
  background-color: #f26522;
}
i.fa.fa-android:hover {
  background-color: #a4c639;
}
i.fa.fa-apple:hover {
  background-color: #fff;
  color: #000;
}
</style>


  1. الان قم بالبحث عن الوسم <body ثم قم بوضع الكود التالى اسفل منه

<div class='overlay overlay-mbl'>
<div class='dialog-inner'>
<div class='wdbloog-box'>
<input type='text'/>
<div class='topleft-wdbloog'>
<ul>
  <li><a href='#'><i class='fa fa-facebook'/></a></li>
  <li><a href='#'><i class='fa fa-twitter'/></a></li>
  <li><a href='#'><i class='fa fa-instagram'/></a></li>
  <li><a href='#'><i class='fa fa-google-plus'/></a></li>
  <li><a href='#'><i class='fa fa-youtube'/></a></li>
  <li><a href='#'><i class='fa fa-rss'/></a></li>
  <li><a href='#'><i class='fa fa-android'/></a></li>
  <li><a href='#'><i class='fa fa-apple'/></a></li>
  </ul>
  </div>
<div><button class='overlay-close' type='button'><i class='fa fa-close'/></button></div>
</div>
</div>
</div>


  1. هذا الكود الخاص بمواقع التواصل غير به الروابط بما تريد
  2. الان قم بالبحث عن هذا الوسم </body> ثم قم بوضع الكود التالى فوقه

<script src='https://rawgit.com/wdbloog/wdbloog/master/wdbloog.js'>  </script> 




  1. الان قم بوضع هذا الكود فى المكان الذى تريد ان تكون اللإضافة متواجده به

<div id='trigger-overlay'><a href='#'><i class='fa fa-share-alt'/></a></div> 






هذا كل ما كان فى موضوع اليوم بالتوفيق للجميع




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

مواضيع قد تهمك ايضا

هناك 6 تعليقات:

إضافة جميلة ماشاء الله ^^
ممكن تبدأ في تعريب قوالب طرق عرض
تدويناتها بتقنية Grid؟ لأنها في غالب الأحيان تكون
مناسبة للأنمي وأحب تطويرها لذا إن شاء الله
نرى قوالب من هذا النوع في الأجل القريب وشكرًا لكل ما تعمل
تحياتي لك ^^

ان شاء الله اخى الكريم

عفوا اخي الكريم لم اجد head
في مدونتي

أبحث عنه هكذا أخى head

في المكان الذي تريد اظهارها
لقد وضعته مكان اداة مواقع التواصل في قالب نسيم و لكن لا تظهر

أرجو وضع رابط مدونتك للمعاينة المكان الصحيح

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

Mohon Aktifkan Javascript!Enable JavaScript

إتصل بنا

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