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

الاثنين، 12 سبتمبر، 2016


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

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



شرح التركيب


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


#slidS-posts {
  background: #2A4057;
  margin: 25px 0;
  padding: 15px 0;
}
.view {
  float: right;
  border: 10px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  width: 261px;
  margin: 0 13px;
}
.view .mask, .view .content {
  width: 257px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.view img {
  display: block;
  position: relative
}
.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  margin: 20px 0 0 0
}
.view p {
  font-style: italic;
  font-size: 14px;
  position: relative;
  color: #fff;
  padding: 0px 20px 0px;
  text-align: center
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  margin-top: 30px;
}
.view a.info:hover {
  box-shadow: 0 0 5px #000
}
.view-first img {
  transition: all 0.2s linear;
  width: 300px;
  height: 200px;
}
.view-first .mask {
  opacity: 0;
  background-color: rgba(58, 1, 132, 0.44);
  transition: all 0.4s ease-in-out;
}
.view-first h2 {
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}
.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.view-first:hover img {
  transform: scale(1.1);
}
.view-first:hover .mask {
  opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}
.view-first:hover p {
  transition-delay: 0.1s;
}
.view-first:hover a.info {
  transition-delay: 0.2s;
}
.view-second img {
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
}
.view-second .mask {
  background-color: rgba(12, 19, 27, 0.6);
  width: 389px;
  padding: 36px;
  height: 358px;
  opacity: 0;
  transform: translate(265px, 145px) rotate(45deg);
  -webkit-transform: translate(265px, 145px) rotate(45deg);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  margin-top: 27px;
}
.view-second h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin: 20px 40px 0px 40px;
  -webkit-transform: translate(200px, -200px);
  transform: translate(200px, -200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.view-second p {
  transform: translate(-200px, 200px);
  -webkit-transform: translate(200px, -200px);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}
.view-second a.info {
  transform: translate(0px, 100px);
  -webkit-transform: translate(0px, 100px);
  transition: all 0.2s 0.1s ease-in-out;
  -webkit-transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
  opacity: 1;
  transform: translate(-80px, -125px) rotate(45deg);
  -webkit-transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.view-second:hover p {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}
.view-second:hover a.info {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.view-tenth img {
  transform: scaleY(1);
  transition: all .7s ease-in-out;
}
.view-tenth .mask {
  background-color: rgba(255, 231, 179, 0.3);
  transition: all 0.5s linear;
  opacity: 0;
}
.view-tenth h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin: 20px 40px 0px 40px;
  transform: scale(0);
  color: #fff;
  transition: all 0.5s linear;
  opacity: 0;
}
.view-tenth p {
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
  padding-
}
.view-tenth a.info {
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}
.view-tenth:hover img {
  -webkit-transform: scale(10);
  transform: scale(10);
  opacity: 0;
}
.view-tenth:hover .mask {
  opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {
  transform: scale(1);
  opacity: 1;
}


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


<link href="http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather" rel="stylesheet" type="text/css" />
<div id="all">
  <div class="view view-first">
    <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703e9208259b507928ad72a/1459874081584/xzKx01n.png" />
    <div class="mask">
      <h2>تصميم قوالب بلوجر</h2>
      <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p>
      <a href="#" class="info">إقرأ المزيد</a>
    </div>
  </div>


  <div class="view view-second">
    <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eaab37013bdcee28c077/1459874476977/gw9SfTu.png" />
    <div class="mask"></div>
    <div class="content">
      <h2>تكويد قوالب بلوجر</h2>
      <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p>
      <a href="#" class="info">إقرأ المزيد</a>
    </div>
  </div>


  <div class="view view-tenth">
    <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb0cb09f95f41391ea85/1459874573710/j07SfQZ.png" />
    <div class="mask">
      <h2>تطوير قوالب بلوجر</h2>
      <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p>
      <a href="#" class="info">إقرأ المزيد</a>
    </div>
  </div>

  <div class="view view-second">
    <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb2e746fb98cc2510ebd/1459874606989/PsZyN43.png" />
    <div class="mask"></div>
    <div class="content">
      <h2 id="testimonials">تصميم متجاوب</h2>
      <p>&ldquo;يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.&rdquo;</p>
      <a href="#" class="info">إقرأ المزيد</a>
    </div>
  </div>

</div>


  1. الان قم بتغيير عنوين المواضيع ووصف المواضيع بما تريد
  2. قم قم بخفظ الإضافة مبروك عليك


موضوع اليوم سهل وبسيط سوف يعجب الكل إن شاء الله

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

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

  1. مرحبا بك على اكبر مكتبة عربية لدعم وتطوير مختلف المدونات العربية
    المكتبة تم بفكرة حصرية وجديدة ونسعى تاى تحقيق هذف سامي في مساعدة واشهار المدونات سواء كانت في اي مجال من المجالات
    http://www.opsdevme.me/
    رأيك يهمنا ؟؟
    وان اردت ادخال مدونتك فقط تواصل معنا عبر نموذج المراسلة أسفل المدونة
    تحياتي

    ردحذف
  2. الإضافة رائعة ولكن كان يمكنك ان تعمل لكل تاثير إضافة تلقائية تعمل عبر خاصية Api Call Back :) بالتوفيق.

    ردحذف
    الردود
    1. إن شاء الله اخى الغالى سوف تعمل على ذلك فى اضافات قادمه

      حذف

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

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