فرست ويب : إضافة كود أداة مواضيع مميزة مثل مدونة عرب ويب

إضافة كود أداة مواضيع مميزة مثل مدونة عرب ويب

الحمد لله رب العالمين واصلي واسلم على خاتم الانبياء والمرسلين ، النبي الامي الامين وعلى اله وصحبه ومن سار على نهجه واستن بسنته الى يوم الدين ثم اما بعد ، مرحبا بزوار ومتابعين موقع فرست ويب الكرام الجديد فى موضوعنا اليوم تم طرح إضافة كود أداة مواضيع مميزة مثل مدونة عرب ويب الأداه الجديده التى تقوم بعرض 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. قم بحفظ الأداة

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

الكاتب

Mohamed Elghandour

نحن مجموعة من الخبراء فى العديد من المجالات ( البرمجة , الهكر , التكنولوجيا , التقنية , العاب الفيديو , الهواتف ) مدونون الموقع ( محمد يحيى , يوسف أيمن ) .

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

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

إضافة كود أداة مواضيع مميزة مثل مدونة عرب ويب

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

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

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

الكاتب

Mohamed Elghandour

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

فيس بوك

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

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

المتابعون

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

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

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

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

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

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

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

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

الكاتب

Mohamed Elghandour

قد يعجيك هذا أيضًا

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

فيس بوك

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

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

المتابعون

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

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

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

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

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