إضافة قائمة احترافية تحت الهيدر بطريقة رائعة

الكاتب : Yusif Jasim
بتاريخ : 6:44 ص
عدد التعليقات : 0

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


إضافة قائمة احترافية تحت الهيدر بطريقة رائعة
الموضوع

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

الشرح بالفيديوالشرح الشرح بالفيديوبالالشرح بالفيديوفيديو
الشرح

اولاً ندخل الى لوحة تحكم بلوجر
ثانياً :ندخل الى القالب > تحرير HTML
ثم نقوم باضافة الكود التالي في اي مكان تريده في القالب

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='cta-cta'>
<div class='cta'>
<!-- 1st click to action -->
<div class='cta-1'/>

 <a href='
'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 2nd click to action -->
<div class='cta-2'/>

 <a href='###'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 3rd click to action -->
<div class='cta-3'/>

 <a href='###'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 4th click to action -->
<div class='cta-4'/>

 <a href='###'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 5th click to action -->
<div class='cta-5'/>

 <a href='###'>متابعة أكثر &gt;</a>
</div>
  </div>
<style>
.cta-cta {
background: #fff;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
width: 1004px;
margin: 0 auto;
margin-top: 40px;
height: 260px;
}
.cta {
text-align: center;
display: inline-block;
width: 18%;
margin: 0 8px 0%;
margin-top: 15px;
}
.cta-1{
background-color: #ff8833!important;
}
.cta-2{
background-color: #242222!important;
}
.cta-3{
background-color: #2665B6!important;
}
.cta-4{
background-color: #333!important;
}
.cta-5{
background-color: #ccc!important;
}
.cta-1{
display: block;
height: 12em!important;
width: 12em;
background-size: 100px 100px!important;
-webkit-border-radius: 16em;
-moz-border-radius: 16em;
border-radius: 16em;
padding: 2em;
}
.cta-2{
display: block;
height: 12em!important;
width: 12em;
background-size: 100px 100px!important;
-webkit-border-radius: 16em;
-moz-border-radius: 16em;
border-radius: 16em;
padding: 2em;
}
.cta-3{
display: block;
height: 12em!important;
width: 12em;
background-size: 100px 100px!important;
-webkit-border-radius: 16em;
-moz-border-radius: 16em;
border-radius: 16em;
padding: 2em;
}
.cta-4{
display: block;
height: 12em!important;
width: 12em;
background-size: 100px 100px!important;
-webkit-border-radius: 16em;
-moz-border-radius: 16em;
border-radius: 16em;
padding: 2em;
}
.cta-5{
display: block;
height: 12em!important;
width: 12em;
background-size: 100px 100px!important;
-webkit-border-radius: 16em;
-moz-border-radius: 16em;
border-radius: 16em;
padding: 2em;
}
.cta a {
background: #333;
color: #fff;
padding: 6px;
border-radius: 8px;
margin-right: 6px;
}
.cta-1 {
background: url(http://im59.gulfup.com/JmXrgh.png) no-repeat center center;
margin-bottom: 18px;
}
.cta-2 {
background: url(http://im58.gulfup.com/8Prn4V.png) no-repeat center center;
margin-bottom: 18px;
}
.cta-3 {
background: url(http://im57.gulfup.com/vSnFZi.png) no-repeat center center;
margin-bottom: 18px;
}
.cta-4 {
background: url(http://im90.gulfup.com/JkVo73.png) no-repeat center center;
margin-bottom: 18px;
}
.cta-5 {
background: url(http://im59.gulfup.com/dULGw0.png) no-repeat center center;
margin-bottom: 18px;
}
</style>
  </b:if>
التعديلات

اللون البرتقالي : الروابط
اللون الأخضر : كود ألوان الخلفيات الدائرية
اللون الأحمر : روابط الأيقونات


ثالثاً :احفظ القالب ومبروك عليك الأضافة

النهاية

في النهاية حصلت على الإضافة الجميلة والرائعة

للأسف وصلنا الى نهاية الموضوع أي إستفسار أو أي سؤال تفضل الى قسم التعليقات

Hm

بقلم : عمر عطوش

مدون مغربي عمري 15 سنة أقطن بالمغرب مهووس بمجال المعلوميات اشارك كل خبراتي ومعارفي معكم اتمنى ان تستفيدوا من المواضيع

تعليقات
0 تعليقات

شكرا لتعليقك
الاشتراك في: تعليقات الرسالة (Atom)
يتم التشغيل بواسطة Blogger.
جميع الحقوق محفوضة طريق الاحتراف 2015
تصميم : عمر عطوش