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

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

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

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

إتصل بنا

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