[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014

السلام عليكم ورحمة الله وبركاته رغم الدراسة فأنا جئتكم بهذه الإضافة الرائعة روعة في روعة وهي ليست من تصميمي لكن من تطويري وللأمانة أخدتها من مدونة إبداعاتي إضافة يمكنكم إضافتها تحت الهيدر وستضفي جمالية على مدونتكم كما يمكنكم تخصيصها كيف ما تريدون وذلك بتغيير الصورة والنص .

مثال مباشر من هنا

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

● إذهب للقالب ثم تحرير HTML .

● أبحث عن الكود التالي :

]]></b:skin>

● أضف فوقه الكود التالي :

.container5 {
width: 970px;
height: 178px;
background-color: #333;
padding: 10px;
margin: 0 auto;
margin-top: 12px;
margin-bottom: -8px;
}
.post111 {
opacity: 1;
animation: load1 2s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
background-image: url(http://im88.gulfup.com/snE0LI.jpg);
-webkit-animation: load1 7s;
-moz-animation: load1 7s;
-o-animation: load1 7s;
transition: all 400ms ease-in-out 0s;
}
.post111:hover {
opacity: 0.7;
}
.post111title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post111title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post222 {
opacity: 1;
animation: load1 3s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/9bBnBH.png);
-webkit-animation: load1 6s;
-moz-animation: load1 6s;
-o-animation: load1 6s;
transition: all 400ms ease-in-out 0s;
}
.post222:hover {
opacity: 0.7;
}
.post222title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post222title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post333 {
opacity: 1;
animation: load1 4s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/bQpgrs.png);
-webkit-animation: load1 5s;
-moz-animation: load1 5s;
-o-animation: load1 5s;
transition: all 400ms ease-in-out 0s;
}
.post333:hover {
opacity: 0.7;
}
.post333title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
border-radius: 5px;
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post333title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post444 {
opacity: 1;
animation: load1 5s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/vqohFc.png);
-webkit-animation: load1 4s;
-moz-animation: load1 4s;
-o-animation: load1 4s;
transition: all 400ms ease-in-out 0s;
}
.post444:hover {
opacity: 0.7;
}
.post444title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post444title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post555 {
opacity: 1;
animation: load1 6s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/VcCrKD.png);
-webkit-animation: load1 3s;
-moz-animation: load1 3s;
-o-animation: load1 3s;
transition: all 400ms ease-in-out 0s;
}
.post555:hover {
opacity: 0.7;
}
.post555title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post555title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.title5 {
animation: load1 7s;
opacity: 1;
float: left;
width: 45px;
height: 180px;
background-color: #5FCECE;
border-radius: 5px;
margin-left: 5px;
transition: 1s;
-webkit-animation: load1 2s;
-moz-animation: load1 2s;
-o-animation: load1 2s;
}
.title5 a{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #fff;
position: relative;
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
font-size: 30px;
left: 25px;
}

● الأن ابحث عن الكود التالي :

<div class='main-outer'>

● أضف فوقه الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container5'>
<div class='post111'>
<div class='post111title'><a href='http://www.proayoub.com/search/label/programation' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس البرمجة'>دروس البرمجة</p></a>
</div>
</div>
<div class='post222'>
<div class='post222title'><a href='http://www.proayoub.com/search/label/seo' style='text-decoration:none;color:#fff;'>
<p style='font-size:17px;margin-top:auto;padding:5px;' title='دروس السيو'>دروس السيو</p></a>
</div>
</div>
<div class='post333'>
<div class='post333title'><a href='http://www.proayoub.com/search/label/photoshop' style='text-decoration:none;color:#fff;'>
<p style='font-size:16px;margin-top:auto;padding:5px;' title='دروس الفوتوشوب'>دروس الفوتوشوب</p></a>
</div>
</div>
<div class='post444'>
<div class='post444title'><a href='http://www.proayoub.com' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس مصورة'>دروس مصورة</p></a>
</div>
</div>
<div class='post555'>
<div class='post555title'><a href='http://www.proayoub.com/search/label/blogger' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس البلوجر'>دروس البلوجر</p></a>
</div>
</div>
<div class='title5'><h3 style='-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);color:#fff;position:relative;top:80px;-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);' title='اضغط للمزيد'><a href='http://www.proayoub.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA' style='color:#fff;'>حصريات</a></h3></div>
</div>
  </b:if>

● الأن ما عليك سوى تغيير الروابط بروابطك ويمكنك تغيير الصور إلى صور أخرى عبر كود css الأول .

أتمنى أن تعجبكم الإضافة لا تبخلوا علينا بكلمة شكر وإعجاب ومشاركة