حصري جدا إضافة ولا أروع للبلوجر جديد

[محروم.كوم]

<div>

السلام عليكم ورحمة الله وبركاته
مثال مباشر من هنا
طريقة الإضافة :
● إذهب للقالب ثم تحرير HTML .
● أبحث عن الكود التالي :
رمز Code:
]]>
● أضف فوقه الكود التالي :
رمز Code:
.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;
}
● الأن ابحث عن الكود التالي :
رمز Code:

● أضف فوقه الكود التالي :
رمز Code:




دروس البرمجة








دروس السيو








دروس الفوتوشوب








دروس مصورة








دروس البلوجر






حصريات






لا تنسو تغيير الروابط بما يناسبكم
للمزيد من الإضافات إضغط هنا
المصدر : مدونة برو أيوب

__DEFINE_LIKE_SHARE__