فرست ويب : إضافات بلوجر

‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل

السلام عليكم ورحمة الله تعالى وبركاته , في هذِ هِ المقالة الجديدة سنتعرف على أحدت وأجمل الخطوط التي يمكنك إستعمالها في مدونتك لإضافة جمالية عليها , لاتحتاج لتحميل هذِهِ الخطوط فقط قم بنسخ هذِهِ الأكواد :

<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>

تم قم بوضعها قبل وسم </head>

بعدها قم بالبحت عن font-family , تم قم بإستبدال محتوياته بإسم خط من الخطوط من ألاَكواد التي قمنا بوضعها سابقاً .

متال :
; font-family: Droid Arabic Naskh

إلى هناك نكون قد خلصنا المقالة , نتمنى لكم عيد مبارك سعيد .

بسم الله الرحمن الرحيم

اهلا بكم في موقع فرست ويب

نعلم ان الموقع يهتم بكل ما هو الجديد في التقنية

البرامج والالعاب والبرمجة ايضا

في هذا الدرس الجديد سوف نضيف اضافة

صغيرة للمدونات البلوجر وهي خاصية الانتضار

وتتكون من عدة انواع وليس نوع واحد او شكل واحد

الان الاضافة
اذهب الى قالب
تحرير html

ابحث باستخدام
ctrl+f
ابحث عن
<head/>
اضف الكود التالي فوقه مباشرة


<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>

وبعدها اختر ما يناسبك

المعاينة 1

اضف الكود فوق <style/>

الكود


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

احفظ القالب وانظر النتيجة

الان المعاينة 2

الكود


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba(0, 0, 0, 0.19999999999999996);
}

ايضا احفظ القالب

المعاينة رقم 3

الكود


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-perspective: 12rem;
  -moz-perspective: 12rem;
  -ms-perspective: 12rem;
  -o-perspective: 12rem;
  perspective: 12rem;

  z-index: 2000;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 6rem;
  width: 6rem !important;
  line-height: 6rem;
  font-size: 2rem;
  border-radius: 50%;
  background: rgba(34, 153, 221, 0.8);
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  text-align: center;

  -webkit-animation: pace-3d-spinner linear infinite 2s;
  -moz-animation: pace-3d-spinner linear infinite 2s;
  -ms-animation: pace-3d-spinner linear infinite 2s;
  -o-animation: pace-3d-spinner linear infinite 2s;
  animation: pace-3d-spinner linear infinite 2s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block;
}

@-webkit-keyframes pace-3d-spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-moz-keyframes pace-3d-spinner {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(360deg);
  }
}

@-ms-keyframes pace-3d-spinner {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(360deg);
  }
}

@-o-keyframes pace-3d-spinner {
  from {
    -o-transform: rotateY(0deg);
  }
  to {
    -o-transform: rotateY(360deg);
  }
}

@keyframes pace-3d-spinner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

احفظ القالب واعطنا النتيجة

انتهى درسنا

لا تنسى بضغط لايك لصفحتنا على الفيس بوك

وعلق اذا استفدت من الدرس

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

معاينة

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

القالب » تحرير Html

3. إبحث عن الوسم ]]></b:skin> بإستخدام أداة CTRL+F

4. ضع كود التأثير قبل ( فوقه )

img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img:hover {
 transform: translateZ(25px) rotate(3deg);}

5. قم بحفظ القالب

يمكنك تركيبه على جزء مخصص فقط قم تغير img بالوسم أو اسم العنصر المطلوب

إلى هنا نصل واياكم الى ختام موضوعنا اليوم ، سبحان ربك رب العزة عما يصفون وسلام على المرسلين والحمد لله رب العالمين وصلى الله وسلم على نبينا محمد وعلى اله وصحبه اجمعين

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

معاينة

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

القالب » تحرير Html

3. إبحث عن الوسم ]]></b:skin> بإستخدام أداة CTRL+F

4. ضع كود التأثير قبل ( فوقه )

img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
img :hover {
 -webkit-filter: blur(3px);}

5. قم بحفظ القالب

يمكنك تركيبه على جزء مخصص فقط قم تغير img بالوسم أو اسم العنصر المطلوب

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

معاينة

شرح طريفة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

القالب » تحرير Html

3. إبحث عن الوسم ]]></b:skin> بإستخدام أداة CTRL+F

4. ضع كود التأثير قبل ( فوقه )

img:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }
 img {
 filter: none;
 -webkit-filter: grayscale(0%);
 transition: all .5s;
 }

5. قم بحفظ القالب

يمكنك تركيبه على جزء مخصص فقط قم تغير img بالوسم أو اسم العنصر المطلوب

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

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

تخطيط » إضافة أداة HTML/JavaScript

3. أضف الكود التالى

الكود

4. قم بحفظ الأداة

الحمد لله رب العالمين واصلي واسلم على خاتم الانبياء والمرسلين ، النبي الامي الامين وعلى اله وصحبه ومن سار على نهجه واستن بسنته الى يوم الدين ثم اما بعد ، مرحبا بزوار ومتابعين موقع فرست ويب الكرام الجديد فى موضوعنا اليوم تم طرح إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الثالثة ، كما قلنا فى الموضوعان السابقان " إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الأولة " و " إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الثانية " لكن هذه الأداة تقوم بعرض قالب واحد ويوجد فيه زر واحد وهو التحميل و القالب الذى يعرض قد يكون القالب المميز أو أخر قالب قمت بعرضه على موقع الأداه جميلة تعبر على تقنية الموقع بالإضافة أنها يمكن تغير العنوان إلى اسم القالب الذى تريده و يمكنك تغير جملة مختصر المفيد للقالب نأتى الأن إلى معاينة الأداة يمكنك معاينة الأداة من الصوره الأتيه ( أسفل ) : -

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

تخطيط » إضافة أداة HTML/JavaScript

3. أضف الكود التالى

الكود

<div class='widget-content'>
<style>
.item-widget-member {
max-width: 100%;
height: 268px;
position: relative;
color: #FFF;
}
.item-widget-member img {
width: 100%;
height: 270px;
}
.item-widget-member .group-inside {
position: absolute;
top: 27px;
right: 0px;
padding: 20px;
}
.item-widget-member h3 {
font-size: 20px;
line-height: 25px;
color: #CFC9C9;
margin: 0;
font-family: droid arabic kufi;
}
.item-widget-member p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
font-family: Electrolize,ge_ss_threeregular;
}
.btn.btn-primary{
background: #F35D5C;
color: #fff;
text-decoration: none;
padding: 10px;
font-size: 12px;
border-radius: 2px;
}
</style>
<div class="item-widget-member">
        <div class="thumb">
<a href="#"  target=""><img src="http://dev.cactusthemes.com/absolute/wp-content/uploads/2014/11/banner001.jpg" alt="banner001" title="banner001" /></a></div>

        <div class="group-inside">
         <div class="info">
<h3>
هنا عنوان القالب</h3>
<p>
هذا النص يمكن تغيره</p>
<a href="http://www.first1web.com/" class="btn btn-primary btn-sm">تحميل</a>   </div>
</div>
</div>
</div>

4. قم بحفظ الأداة

الحمد لله رب العالمين واصلي واسلم على خاتم الانبياء والمرسلين ، النبي الامي الامين وعلى اله وصحبه ومن سار على نهجه واستن بسنته الى يوم الدين ثم اما بعد ، مرحبا بزوار ومتابعين موقع فرست ويب الكرام الجديد فى موضوعنا اليوم تم طرح إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الثانية ، كما قلنا فى الموضوع السابق " إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الأولة " هذه الأداة تقوم بعرض قالب و احد و يوجد فيه زرين و احد للمعاينة و الأخر للتحميل و القالب الذى يعرض قد يكون القالب المميز أو أخر قالب قمت بعرضه على موقع الأداه جميلة تعبر على تقنية الموقع بالإضافة أنها يمكن تغير العنوان إلى اسم القالب الذى تريده و يمكنك تغير جملة مختصر المفيد للقالب نأتى الأن إلى معاينة الأداة يمكنك معاينة الأداة من الصوره الأتيه أو معاينه مباشره من الرابط التالى ( أسفل ) : -

معاينه مباشر من الموقع : -

معاينة

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

تخطيط » إضافة أداة HTML/JavaScript

3. أضف الكود التالى

الكود

<div class='widget-content'>
<style>
.item-widget-member {
position: relative;
color: #FFF;
}
.info {
-webkit-box-reflect: below 0.2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4)));
}
.item-widget-member img {
width: 100%;
height: 250px;
}
.item-widget-member .group-inside {
position: absolute;
top: 60px;
right: 0px;
padding: 20px;
}
.item-widget-member h3 {
font-size: 20px;
color: #FF7400;
margin: 0;
font-family: "Gloria Hallelujah",ge_ss_threeregular;
text-shadow: 4px 3px 0px #394144, 6px 3px 0px rgba(0, 0, 0, 0.15);
text-align: center;
}
.item-widget-member p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: rgba(66, 66, 66, 0.91);
padding: 2px 5px;
font-family: normal,Electrolize,ge_ss_threeregular;
text-align: right;
}
.btn.btn-primary:hover {
background: #767676;
color: #FCFCFC;
}
.btn.btn-primary{
background: #FF6515;
color: #fff;
text-decoration: none;
padding: 10px;
font-size: 12px;
border-radius: 2px;
}
</style>
<div class="item-widget-member">
        <div class="thumb">
<a><img src="http://dev.cactusthemes.com/absolute/wp-content/uploads/2014/11/banner001.jpg"  title="" /></a></div>

        <div class="group-inside">
 <div class="info">
<h3>
هنا عنوان القالب</h3>
<p>
هذا النص يمكن تغيره</p>
<a href="http://www.first1web.com/
" target="blank" class="btn btn-primary btn-sm">معاينة</a> 
<a href="http://www.first1web.com/
" target="blank" class="btn btn-primary btn-sm">تحميل</a> 
   </div>
</div>
</div>
</div>

5. قم بحفظ الأداة

الحمد لله رب العالمين واصلي واسلم على خاتم الانبياء والمرسلين ، النبي الامي الامين وعلى اله وصحبه ومن سار على نهجه واستن بسنته الى يوم الدين ثم اما بعد ، مرحبا بزوار ومتابعين موقع فرست ويب الكرام الجديد فى موضوعنا اليوم تم طرح إضافة أداة معاينة و تحميل القالب مثل عرب ويب الأداه الأولة ، هذه الأداة تقوم بعرض قالب و احد و يوجد فيه زرين و احد للمعاينة و الأخر للتحميل و القالب الذى يعرض قد يكون القالب المميز أو أخر قالب قمت بعرضه على موقع الأداه جميلة تعبر على تقنية الموقع بالإضافة أنها يمكن تغير العنوان إلى اسم القالب الذى تريده و يمكنك تغير جملة مختصر المفيد للقالب نأتى الأن إلى معاينة الأداة يمكنك معاينة الأداة من الصوره الأتيه أو معاينه مباشره من الرابط التالى ( أسفل ) : -

معاينه مباشر من الموقع : -

معاينة

شرح طريقة التركيب

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

تخطيط » إضافة أداة HTML/JavaScript

3. أضف الكود التالى

الكود

<div class='widget HTML' id='HTML14'>
<div class='widget-content'>
<style>
.item-widget-member-hm {
position: relative;
color: #FFF;
}
.info-hm {
-webkit-box-reflect: below 0.2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4)));
}
.item-widget-member-hm img {
width: 100%;
height: 250px;
}
.item-widget-member-hm .group-inside-hm {
position: absolute;
top: 60px;
right: 0px;
padding: 20px;
}
.item-widget-member-hm h3 {
font-size: 30px;
color: #E74C3C;
margin: 0;
font-family: "Gloria Hallelujah",ge_ss_threeregular;
text-shadow: 4px 3px 0px #394144, 6px 3px 0px rgba(0, 0, 0, 0.15);
text-align: center;
}
.item-widget-member-hm p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: rgba(66, 66, 66, 0.91);
padding: 2px 5px;
font-family: normal,Electrolize,ge_ss_threeregular;
text-align: right;
}
.btn-hm.btn-primary-hm:hover {
background: #767676;
color: #FCFCFC;
}
.btn-hm.btn-primary-hm{
background: #E74C3C;
color: #fff !important;
text-decoration: none;
padding: 10px;
font-size: 12px;
border-radius: 2px;
}
</style>
<div class="item-widget-member-hm">
        <div class="thumb">
<a><img src="http://dev.cactusthemes.com/absolute/wp-content/uploads/2014/11/banner001.jpg"  title="" /></a></div>

        <div class="group-inside-hm">
 <div class="info-hm">
<h3>
هنا عنوان القالب</h3>
<p>
هذا النص يمكن تغيره</p>
<a href="http://www.first1web.com/" target="blank" class="btn-hm btn-primary-hm btn-sm">معاينة</a> 
<a href="http://www.first1web.com/" target="blank" class="btn-hm btn-primary-hm btn-sm">تحميل</a> 
   </div>
</div>
</div>
</div>
</div>

5. قم بحفظ الأداة

إلى هنا نصل واياكم الى ختام موضوعنا اليوم ، سبحان ربك رب العزة عما يصفون وسلام على المرسلين والحمد لله رب العالمين وصلى الله وسلم على نبينا محمد وعلى اله وصحبه اجمعين

الحمد لله رب العالمين واصلي واسلم على خاتم الانبياء والمرسلين ، النبي الامي الامين وعلى اله وصحبه ومن سار على نهجه واستن بسنته الى يوم الدين ثم اما بعد ، مرحبا بزوار ومتابعين موقع فرست ويب الكرام الجديد فى موضوعنا اليوم تم طرح إضافة كود أداة مواضيع مميزة مثل مدونة عرب ويب الأداه الجديده التى تقوم بعرض 8 مواضيع فى مسطيل قاعده هى عرضه و تأثيرات جميله تغير مؤشر الماوس عند المرور على الصوره ترتفع الصوره و مبيضه قليلاً إلى أعلى عند مرور الماوس عليها الأداه جديده فى مدونة عرب ويب يمكنك معاينة الإضافه من الصوره الأتيه أو معاينه مباشره من الرابط التالى ( أسفل ) : -

معاينه مباشر من الموقع : -

معاينة

شرح طريقة التركيب

الخطوة الأولة

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

قالب » تحرير Html

3. ابحث بإستعمال CTRL+F عن : ]]></b:skin>

4. أضف الكود التالى قبله ( فوقه )

الكود

#recomanim {    margin: 1% 1% 0px;margin-top: 50px;}
.stat {position: absolute;z-index: 10;color: #FFF;padding: 3px 6px;font-size: 10px;border-radius: 3px;top: 5px;right: 5px;}
.recobox {margin-bottom: 10px;padding: 5px;background-image: linear-gradient(to bottom, #E8E8E8 0px, #F5F5F5 100%);background-repeat: repeat-x;border: 1px solid #DBDBDB;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 1px 0px rgba(255, 255, 255, 0.1);}
.anim {float: right;margin: 16px;border: 1px solid #CCC;border-radius: 3px;position: relative;width: 122px;height: 171px;overflow: hidden;font-family: ge_ss_threeregular;}
.stat.ongo {background: none repeat scroll 0% 0% #E75040;}
.anim a {display: block;font-size: 0px;}
.anim img {width: 100%;height: 100%;cursor: url(//ar1web-com.googlecode.com/svn/Hm/cursormicky.png),pointer;}
.anim img:hover {opacity: 0.9;margin-top: -11px;transition: all 0.3s ease;}
.anim p {margin: 0px;font-size: 11px;background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);color: #FFF;position: absolute;bottom: 0px;z-index: 200;padding: 4px 6px 5px;width: 110px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;}

5. قم بحفظ القالب

الخطوة الثانية

1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر

تخطيط » إضافة أداة HTML/JavaScript

3. أضف الكود التالى

الكود

<div class='recobox'>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='anim'>
<span class='stat ongo'>قريباً</span>
<a href='http://www.first1web.com/'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBU6rexq0-ETK8JBihzi5xW1uDlmKVhzzQ47aTF2DshQ2arQWxNCzIG4dNihW7d50n4eSIa_2icR5kNroScrsHbLhASPfF6lurrh0RXd0iETVAChM4-_aW4-N9qUBM2V6gK_D2Y6XBQM/s1600/soon.png' title=''/>
  <p>
قيد التطوير</p>
</a>
  </div>
<div class='clear'/>
</div>
</div>

5. قم بحفظ الأداة

شرح طريقة التركيب

شرح طريقة التركيب

شرح طريقة التركيب

شرح طريقة التركيب

شرح طريقة التركيب

الخطوة الأولة

الخطوة الثانية

فيس بوك

المواضيع الرائجة هذا الأسبوع

إعلن هنا بــ 5 $ علي خمسات

المتابعون

تبادل إعلاني بنرى

إعلانات أدسنس

أقسام المدونة

المواضيع الرائجة لهذا الشهر

إحصائيات الموقع