قائمة أفقية مميّزة تحت الهيدر لمدونة البلوجر
اللون البرتقالي
: الروابط
اللون الأخضر : كود ألوان الخلفيات الدائرية
اللون الأحمر : روابط الأيقونات
لوحة التحكم >
القالب > تحرير 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.abu-zaid2014,blogspot/search/label/ فوتوشوب'>متابعة أكثر ></a>
</div>
<div
class='cta'>
<!-- 2nd click to
action -->
<div
class='cta-2'/>
<a href='http://www.abu-zaid2014,blogspot/search/label/البلوجر'>متابعة أكثر
></a>
</div>
<div
class='cta'>
<!-- 3rd click to
action -->
<div
class='cta-3'/>
<a href='http://www.abu-zaid2014,blogspot/search/label/الألعاب'>متابعة أكثر
></a>
</div>
<div
class='cta'>
<!-- 4th click to
action -->
<div
class='cta-4'/>
<a href='http://www.abu-zaid2014,blogspot/search/labelبربامج/'>متابعة أكثر
></a>
</div>
<div
class='cta'>
<!-- 5th click to
action -->
<div
class='cta-5'/>
<a href='http://www.abu-zaid2014,blogspot/search/label/إضافات أورغات'>متابعة أكثر
></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: #58fb5b!important;
}
.cta-2{
background-color: #62e1fc!important;
}
.cta-3{
background-color: #2665B6!important;
}
.cta-4{
background-color: #fc9696!important;
}
.cta-5{
background-color: # ce6ac8!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://www.m5zn.com/newuploads/2014/11/15/png//2c8873b94410b5a.png) no-repeat center
center;
margin-bottom: 18px;
}
.cta-2 {
background: url(http://www.m5zn.com/newuploads/2014/11/15/png//7d78a0d1f0708f3.png) no-repeat center
center;
margin-bottom: 18px;
}
.cta-3 {
background: url(http://www.m5zn.com/newuploads/2014/11/15/png//abcf6d44906bf66.png) no-repeat center
center;
margin-bottom: 18px;
}
.cta-4 {
background: url(http://www.m5zn.com/newuploads/2014/11/15/png//76e54df8e6186ad.png) no-repeat center center;
margin-bottom: 18px;
}
.cta-5 {
background: url(http://www.m5zn.com/newuploads/2014/11/15/png//7e08e5680868ed1.png) no-repeat center
center;
margin-bottom: 18px;
}
</style>
</b:if>
إرسال تعليق