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

الأربعاء، 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 تعليقات :

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

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

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

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

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

    ردحذف
    الردود
    1. ارجو منك التوضيح اخى الغالى

      حذف

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

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