شفرات قنوات ART على النايلسات

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

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

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

شرح التركيب

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. ثم قم بحفظ الإضافة ومبروك عليك

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