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

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

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

# طريقة الإضافة :

لوحة التحكم > القالب > تحرير 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='http://www.proayoub.com/search/label/blogger'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 2nd click to action -->
<div class='cta-2'/>

<a href='http://www.proayoub.com/search/label/android'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 3rd click to action -->
<div class='cta-3'/>

<a href='http://www.proayoub.com/search/label/photoshop'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 4th click to action -->
<div class='cta-4'/>

<a href='http://www.proayoub.com/search/label/seo'>متابعة أكثر &gt;</a>
</div>
<div class='cta'>
<!-- 5th click to action -->
<div class='cta-5'/>

<a href='http://www.proayoub.com/search/label/programation'>متابعة أكثر &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>

# التعديلات :

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

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

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

احفظ القالب واستمتع بالإضافة, إلى هنا انتهى درسنا لا تنسو دعمنا بعمل share للموضوع ولا تنسو التعليق .