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

  • الصفحة غير موجودة ، 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



    إتصل بنا

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