قائمة أفقية احترافية تحت الهيدر للمدونات

السلام عليكم اليوم في هذه التدوينة اضافة 

قائمة أفقية احترافية تحت الهيدر للمدونات

هي خفيفة جدآ بها 5 اقسام بكل صورة شكل

و يمكنك تغير الصورة با صورة انت 

تريدها و بدون اي تعب تابع طريقة

التركيب

اذهب الى قالب > تحرير 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='www.elkobtanpro.Ml'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 2nd click to action -->
<div class='cta-2'/>

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

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

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

<a href='www.elkobtanpro.Ml'>متابعة أكثر &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>

للتعديل على الاضافة :

اللون البرتقالي : الروابط

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

اللون الازرق : روابط الأيقونات

احفظ القالب واستمتع بالإضافة