4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الاثنين، 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> 






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



شارك التدوينه
تنبية هام

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

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

    ردحذف
  2. عفوا اخي الكريم لم اجد head
    في مدونتي

    ردحذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
brief useful MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG