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

حصريات
فوتوشوب
شروحات
إضافات
قوالب

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

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

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

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

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

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

الاثنين، 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 تعليقات:

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

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

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

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

Mohon Aktifkan Javascript!Enable JavaScript

إتصل بنا

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