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

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

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

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

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

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

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

    الأربعاء، 7 سبتمبر، 2016

    اضافة أداة تعريفيه احترافيه لمدونات بلوجر






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



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



    شرح التركيب


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

    .card {
      width: 300px;
      height: 400px;
      margin: 25px auto;
      border-radius: 10px;
      position: relative;
      transform-style: preserve-3d;
      transition: all 3s ease-in-out;
      box-shadow: 0px 15px 26px #7F7970;
    }
    .card:hover {
        transform: rotatey(180deg);
    }
    .card > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #34495e;
        border-radius: 10px;
        border: 2px solid #CCC;
        text-align: center;
        background-image: url('https://s10.postimg.io/jbhjp29qh/3_min.png');
    }
    .card .front {
        z-index: 2;
        backface-visibility: hidden;
    }
    .card .front header {
        width: 100%;
        height: 80px;
        background-color: #397282;
        border-radius: 10px 10px 0 0;
    }
    .card .front img {
        width: 130px;
        border-radius: 50%;
        position: relative;
        top: 10px;
    }
    .card .front h3{
      margin-top: 70px;
      color: #0AC;
      font-size: 17px;
    }
    .card .front .mid {
      list-style: none;
      margin: 30px 0 -20px 0;
      text-align: center;
      color: #a2a2a2;
      line-height: 1.6;
    }
    .card .front .mid li {
      font-size: 20px;
    }
    .card .front span {
        display: inline-block;
      margin-top: 42px;
        font-size: 20px;
        color: #e774aa;
        font-style: italic;
        border: 1px solid #e774aa;
        padding: 5px 80px;
        border-radius: 25px 5px;
    }
     .card .back {
        z-index: 1;
        transform: rotatey(180deg);
        background-color: #CCC;
    }
    .card .back header {
      width: 101%;
      height: 40px;
      margin-top: 0px;
      border-radius: 10px 10px 0 0;
      background-color: #DF0069;
      margin-right: -2px;
      color: #fff;
    }
    .card .back p {
      font-size: 25px;
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
    }
    .card .back ul {
        list-style: none;
    }
    .card .back span {
        width: 90%;
        display: inline-block;
        text-align: center;
        margin-top: 40px;
        line-height: 1.2;
        font-size: 20px;
    }
    .card .back .left {
      margin: 25px 0;
      text-align: center;
    }
    .card .back .left li {
      font-size: 20px;
      border: 1px solid #777777;
      margin-bottom: 5px;
      text-align: center;
    }
    .card .back img {
        width: 97%;
        height: 120px;
        margin-top: 20px;
    } 
    
    /* Another Symple Card-Back Style */
    /* .card .back {
      background-color: #3D465F;
    }
    .card .back img {
      width: 90%;
      margin-top: 60px;
      opacity: .5;
    } */



    1. الان قم بحفظ القالب ثم تواجه الى التخطيط
    2. فى السيدبار قم بوضع أداة جديده فارغه وضعه بها الكود التالى.



    <div class="card">
      <div class="front">
              <header>
                 <img src="https://cdn3.iconfinder.com/data/icons/avatar-set/512/Avatar02-512.png" />                              </header>
         <h3>عالم المدون</h3>
         <section>
            <ul class="mid">
              <li>تطوير قوالب بلوجر</li>
              <li>تعديل قوالب بلوجر</li>
              <li>تصميم قوالب بلوجر</li>
            </ul>
         </section>
         <span>Hover Me</span>
      </div>
                    
      <div class="back">
         <header>
            <p>تعرف علينا</p>
         </header>
         <section>
             <span>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</span>
             <ul class="left">
                <li>Facebook: @wdbloog</li>
                <li>Twitter: @wdbloog</li>
                <li>Insta: @wdbloog</li>
             </ul>
           </section>
      </div>
      <!-- Another Symple Card-Back Style -->
                <!--    <div class="back">
                      <img src="https://cdn2.iconfinder.com/data/icons/website-icons/512/Website_Code-512.png">
      </div>
                    
                </div>   --></div>



    1. قبل حفظ الإضافة قم بتغيير الاسم  لما تريد
    2. وايضا قم بتغيير ما تستطيع القيام به وهى التالى اسفل الاسم
    3. وغير ايضا الجزء التعريفى عنك ورابط مواقع التواصل
    4. ثم قم بحفظ الإضافة ومبروك عليك



    كان هذه كل ما فى موضوع اليوم موضوع بسيط ولكنك قد يفيد الكثيرون



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

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

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

    ماشاء الله، إضافة رائعة وأنيقة جدًا، أعجبني تأثير الإنقلاب للغاية
    وأردت فقط معرفة ما اللغة المستعملة في برمجته؟ تبدو Javascript أو ماشابه
    ولدي أيضًا استفسار فيما يخص الماتيريال ديزاين آمل أن تجيبني عليه بحكم خبرتك :)

    شكرا لك اخى الغالى
    بخصوص اللغة المتستخدمه فهى html , css فقط لا شئ اخى
    وبخصوص الماتيريال ديزاين انا لا اعمل بها

    أهاا، ماشاء الله عليك :) ممم.. معليش - باركك الله عزيزي
    واصل تألقك وبانتظار قوالب وخدع جميلة جديده :)

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

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

    ارجو منك التوضيح اخى الغالى

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

    Mohon Aktifkan Javascript!Enable JavaScript



    إتصل بنا

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