[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014
[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014 السلام عليكم ورحمة الله وبركاته رغم الدراسة فأنا جئتكم بهذه الإضافة الرائعة روعة في روعة...
![[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0DiF-LZOhVL4ltSRbUeim8MtZjZqKmJXauMwTkrCIAT5tq6bcHskt8PjjukWULsKWaK1vuTEoPGt9JT3nJsvAIHXKwYGel0qZTdE2CumVEagtnErPFhGp6rk5TTgHEO3W986caqYe-FiX/s1600/%5B%D8%A8%D9%84%D9%88%D8%AC%D8%B1%5D+%D8%A3%D9%81%D8%B6%D9%84+%D8%A5%D8%B6%D8%A7%D9%81%D8%A9+%D8%AA%D8%AD%D8%AA+%D8%A7%D9%84%D9%87%D9%8A%D8%AF%D8%B1+%D9%84%D9%84%D8%A8%D9%84%D9%88%D8%AC%D8%B1+2014.png)
[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014
السلام عليكم ورحمة الله وبركاته رغم الدراسة فأنا جئتكم بهذه الإضافة الرائعة روعة في روعة وهي ليست من تصميمي لكن من تطويري وللأمانة أخدتها من مدونة إبداعاتي إضافة يمكنكم إضافتها تحت الهيدر وستضفي جمالية على مدونتكم كما يمكنكم تخصيصها كيف ما تريدون وذلك بتغيير الصورة والنص .
مثال مباشر من هنا
![[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYxqYDMngmx4fpSM9LeeC6S_nj13YLVp-k6zxrFCrvaa1NFPPuOldkBCgylYdaDjQMU1bgU7Qx10UQ1wBDQDJh2h133g9ReHCavX8USaSlnQ6c-_b25_K2FN6B9IuIU4YSiohJz2ZXICz/s1600/Capturehh.PNG)
طريقة الإضافة :
● إذهب للقالب ثم تحرير 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 الأول .
أتمنى أن تعجبكم الإضافة لا تبخلوا علينا بكلمة شكر وإعجاب ومشاركة
مواضيع مشابهة :
![[سيو] تصحيح وضع التاجات داخل مدونات بلوجر لأرشفة أفضل](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_R5LhrJK0DxauXPwfexk9HXWykhnX30DiwwREdDJYvmGRrsiqCV_2Q0dNmP9bt7Jc9mKxR3pYRvSmV6Lzif7y9QUZ2x1QZAJn_eUvXmy7A3FcTH1ZAh5NBBHc-GJ-qeDQZM_fmU5W5ya_/s1600/%D8%AA%D8%B5%D8%AD%D9%8A%D8%AD+%D9%88%D8%B6%D8%B9+%D8%A7%D9%84%D8%AA%D8%A7%D8%AC%D8%A7%D8%AA+%D8%AF%D8%A7%D8%AE%D9%84+%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1+%D9%84%D8%A3%D8%B1%D8%B4%D9%81%D8%A9+%D8%A3%D9%81%D8%B6%D9%84+.png "[سيو] تصحيح وضع التاجات داخل مدونات بلوجر لأرشفة أفضل")
