تحياتي لكم جميعاً أطلب المساعدة في تعديل في كود في قالب بلوجر .
كيف جعل الصورة الأولة مثل الصورة الثانية بمعنى ، كيف جعل الوجو و المساحة الأعلانية بجوار بعض مثل الصورة الثاني الصورة "1" كيف جعل هذا مثل
الصورة"2" هذا
وشكراً لكم
ولتسهيل أكثر هذا هو الكود المستخدام في القالب المراد تغيرة
<-----كود HTML----للوجو---->
b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='يوسف ماجد (رأس الصفحة)' type='Header'
<-----كود CSS----للوجو----> هنا تكمول المشكلة
/منطقة الهيدر/
header-wrapper {
background-color: #f8f8f8;
border-bottom: 1px solid $(bordcolor);
padding-bottom: 50px;
padding-top: 88px;
}
/عنوان المدونة/
.header h1, .header h1 a {color: #555; font-size: 70px;}
.description span {
color: #777;
display: block;
font-size: 20px;
}
/أسفل الهيدر/
outer-wrapper {
margin: 0 auto;
padding: 30px 0;
width: 980px;
}
.slider .widget-content {margin-bottom: 40px; margin-top: -10px;}
------كود HTML ---للأعلان -------
b:section class='topads' id='topads' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title= 'مساحة إعلانية' type='HTML '
---------------كود CSS----للأعلان ----------
/إعلان أسفل الهيدر/
topads .widget-content {
background-color: #fff;
border: 10px solid #fff;
box-shadow: 0 0 0 1px #cccccc;
box-sizing: border-box;
margin: 0 auto 40px;
max-height: 110px;
max-width: 748px;
overflow: hidden;
width: 100%;
}
topads .widget-content img {width:100%; height:auto;}
.owl-loaded li {display: block !important;}
.slidesh li{background-color:#fff;border:1px solid #ddd;height:300px;overflow:hidden;padding:8px;position:relative;transition:all .4s ease 0}
.imgcontain{background-color:#000;display:block;height:190px;overflow:hidden;position:relative;width:100%}
.imgcontain img{height:100%;transition: all 0.4s ease 0s;}
.imgcontain:hover img{opacity:.7}
.imgcontain span{background-color:#fff;box-shadow:0 1px 2px #000;color:#444;display:block;font-size:18px;height:40px;line-height:40px;margin-right:-40px;margin-top:-20px;position:absolute;right:50%;text-align:center;top:50%;width:80px;z-index:2}
.slidesh p{display:block;font-size:16px;line-height:1.8em;margin:5px 0;text-align:center}
.paye{background-color:#f8f8f8;border-top:1px solid #ddd;bottom:0;height:40px;line-height:40px;margin:0;position:absolute;right:0;width:100%}
.paye span{background-color:#446faa;color:#fff;float:right;font:18px/38px arial;height:38px;margin-right:1px;margin-top:1px;text-align:center;width:50px}
.paye span::before{content:"$";margin:0 4px 0 0}
.paye a{color:#fff;display:inline-block;float:left;height:38px;margin-left:1px;margin-top:1px;padding:0 8px}
.paye a:hover {background-color:#000;}
.skhamsat{background-color:#f98101}
.vodafone{background-color:#EA0000}
.slidesh .owl-nav{position:absolute;right:9px;top:9px}
.slidesh .owl-nav div{background-color:rgba(0,0,0,.5);color:#fff;float:left;font-size:24px;height:30px;line-height:30px;text-align:center;width:30px}
.slidesh .owl-nav div:hover{background-color:#000}
.slidesh .owl-prev{margin-right:2px}
.jadeeod::before {
background-color: #cc0000;
box-shadow: 0 2px 4px #000;
color: #fff;
content: "جديد";
display: block;
font: 12px/24px droid arabic kufi;
height: 24px;
left: -20px;
position: absolute;
text-align: center;
top: 8px;
transform: rotate(-45deg);
width: 80px;
}
------الجزء الخاص بالتخطيط ------
/التخطيط/
layout {width: 800px; padding: 5px 0 !important;}
layout #main-menu,#layout .tabs-widget,#layout #cnmuligmes {display:none;}
layout #outer-wrapper {padding: 0; width: 100%;}
layout {padding: 5px 0 !important; width: 800px}
layout #header-wrapper {padding: 0;}
layout #header {background-color: #446FAB;}
layout #topads {background-color: #2a9c00; color:#fff !important;}
layout #topads .widget-content {margin: 0; width: 100%;}
layout #main-wrapper {width: 360px;}
layout #sidebar-wrapper {width: 430px;}
layout .side-taps .section {
background-color: #fca000 !important;
color: #fff;
float: right;
height: 250px;
padding: 5px !important;
width: 135px;
}
وشكراً لكم جميعاً واعتذر عن الايطالة رابط الموقع لتجربة من مطور المتصفح :
التعليقات