Nice horizontal List under the header for blogs

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

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

هي خفيفة جدآ بها 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='http://th3thi3fn3t.blogspot.com/search/label/programming'>دروس البرمجة &gt;</a> </div> <div class='cta'> <!-- 2nd click to action --> <div class='cta-2'/> <a href='http://th3thi3fn3t.blogspot.com/search/label/seo'>دروس السيو &gt;</a> </div> <div class='cta'> <!-- 3rd click to action --> <div class='cta-3'/> <a href='http://th3thi3fn3t.blogspot.com/search/label/photoshop'>دروس الفوتوشوب &gt;</a> </div> <div class='cta'> <!-- 4th click to action --> <div class='cta-4'/> <a href='http://th3thi3fn3t.blogspot.com/search/label/stream'>دروس مصورة &gt;</a> </div> <div class='cta'> <!-- 5th click to action --> <div class='cta-5'/> <a href='http://th3thi3fn3t.blogspot.com/search/label/blogger'>دروس البلوجر &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: #ccc!important; } .cta-2{ background-color: #ccc!important; } .cta-3{ background-color: #ccc!important; } .cta-4{ background-color: #ccc!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://im88.gulfup.com/snE0LI.jpg) no-repeat center center; margin-bottom: 18px; } .cta-2 { background: url(http://im59.gulfup.com/9bBnBH.png) no-repeat center center; margin-bottom: 18px; } .cta-3 { background: url(http://im59.gulfup.com/bQpgrs.png) no-repeat center center; margin-bottom: 18px; } .cta-4 { background: url(http://im59.gulfup.com/vqohFc.png) no-repeat center center; margin-bottom: 18px; } .cta-5 { background: url(http://im59.gulfup.com/VcCrKD.png) no-repeat center center; margin-bottom: 18px; } </style> </b:if> 

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

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

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

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

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