السلام عليكم ورحمة الله تعالى وبركاته اخواني و أخواتي متابعي مدونة الروسافي ويب اليوم عندي اضافة جديدة وهي اضافة فوتر موسى للمعلوميات
وقبل دلك لا تنسو الانضمام لقناتنا عبر الفوتر
سأترككم مع الشرح
أولا نقوم بادخال هده الأكواد فوق ]]></b:skin>
.share-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CeAYULLGNbZIU_yZs6OJydDkpyNLHJ9C5fdtN_-ziVUUt8fawz_mlvrjkqhS9aZE-_CDaC-daF9_73EnLTGwsagHz1duXjoSc7QUhzwW2G5f4cxoX-rgC6HGBgtYQpl3DnOCmFDcuFKM/s1600/share.png) no-repeat 330px 10px;
margin:20px 0 15px;
overflow:hidden;
}
.share-buttons {
margin:0 0;
height:67px;
float:right;
}
.share-buttons .share {
float:right;
margin-left:10px;
display:inline-block;
}
.search {
background: url("http://badil.io/includes/images/search-bg.png") #161616;
background-size: 150%;
padding: 3em 0;
box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.search h1 {
text-align: center;
color: #fff;
padding: 0 !important;
margin: 0 0 0.6em 0 !important;
}
.search .search-box-input {
width: 80%;
margin: 0 auto;
position: relative;
}
.search .search-box-input span,
.search .search-box-input input[type="search"] {
height: 55px;
font-weight: lighter;
background-color: white;
}
.search .search-box-input input[type="search"] {
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
}
.search .search-box-input span {
float: right;
display: inline-block;
width: 10%;
text-align: center;
padding-top: 0.7em;
background: #161616;
color: #838383;
font-size: 1.25em;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.search .search-box-input .search-box-select {
display: inline-block;
float: left;
width: 15%;
text-align: center;
padding-top: 0.7em;
background: #fff;
color: #838383;
font-size: 1.25em;
border-right: 1px solid #d2d2d2;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height: 55px;
font-weight: lighter;
}
.search .search-box-input .search-box-select i {
position: relative;
top: 4px;
right: 4px;
}
.search .search-box-input .search-box-select:hover {
background: #161616;
}
.search .search-box-input .search-box-select-items {
position: absolute;
left: 0;
top: 60px;
padding: 0.3em 0 !important;
text-align: right;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
display: none;
}
.search .search-box-input .search-box-select-items:before {
content: "";
position: absolute;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 12px solid rgba(0, 0, 0, 0.05);
top: -11px;
right: 72%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
}
.search .search-box-input .search-box-select-items:after {
content: "";
position: absolute;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 10px solid #fff;
top: -9px;
right: 75%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
}
.search .search-box-input .search-box-select-items li a {
white-space: nowrap;
padding: 0.5em 0.85em 0.5em 3em !important;
background: #fff;
width: 100%;
display: block;
font-weight: lighter;
color: #838383;
}
.search .search-box-input .search-box-select-items li a:hover {
background: #161616;
color: #fff;
}
.search .search-box-input input[type="search"] {
width: 90%;
border: 0;
outline: none;
padding: 0.5em 0.5em 0 0.5em !important;
color: #bababa;
border: 1px solid #fff;
box-sizing: border-box;
}
.search .search-box-input input[type="search"]:focus {
background: #161616;
color: #fff;
}
.search .search-box-input input[type="search"]:focus::-webkit-input-placeholder {
color: #fff;
}
.search .search-box-input input[type="search"]:focus:-moz-placeholder {
color: #fff;
}
.search .search-box-input input[type="search"]:focus::-moz-placeholder {
color: #fff;
}
.search .search-box-input input[type="search"]:focus:-ms-input-placeholder {
color: #fff;
}
.search .meta {
display: table;
margin: 1.5em auto 0 auto !important;
width: 40%;
text-align: center;
clear: both;
}
.search .meta .content {
display: table;
margin: 0 auto;
}
.search .meta .meta-item {
float: right;
margin-left: 1.5em;
}
.search .meta .meta-item h2 {
font-size: 1.25em;
color: #fff;
}
.search .meta .meta-item span {
color: #d3e9d9;
font-weight: lighter;
}
div#footer-buttons >div a{ color:#fff}
#footer-buttons >div a{ transition:0.2s; background:transparent !important}
#footer-buttons >div:hover, #footer-buttons >div:hover a{ background:#fff; color:#102C46 !important}
div#footer-buttons >div{ float:right; transition:0.2s; border:2px solid #fff; width:31.6%; text-align:center; margin-right:1%; height:44px; line-height:42px; font-size:18px}
div#footer-buttons {
clear: both;
overflow: hidden;
border-top: 2px solid #fff;
display: block;
padding-top: 8px;
padding-bottom: 8px;
}
.newsletter_mostlzmat p { color: #FFFFFF; font-size: 16px; margin-bottom: -17px; } .newsletter_mostlzmat { clear: both; overflow: hidden; padding: 20px; background: #161616; text-align: center; } .newsletter_mostlzmat input { background: rgb(101, 98, 98); color: #fff; font-family: 'Alba-Sans'; border-radius: 3px; padding: 10px 0px 10px 0px; width: 100%; text-align: center; font-size: 17px; border: 0; }input#SubmNews { background: #CB2027; cursor: pointer; width: 100%; }
.avatar-author{float: right; border: 0; border-radius: 50%; width: 50px; padding: 5px;}
#th9moussa-live {
padding: 10px 10px;
background: #161616 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4K-VBFHzk3Pua2krGjkSKnm2Ag5cklOPB_-Eu43GrXqF0hORvMwtEr8XFRro-GMCQIVQi5GhFkl0xGSdFBbsZZr6zm6lhujy0sc6xzM3opWYuR4TACwdChKyNWYCIJV-9rbj71DAeJTU/s1600/header-bg.png) no-repeat left bottom;
color: #fff;
position: relative;
overflow: hidden;
}
.right-live {
position: relative;
float: right;
margin-top: 33px;
margin-right: 33px;
}
.right-live img {
width: 118px;
}
.left-live {
text-align: center;
overflow: hidden;
position: absolute;
right: 0;
font-size: 17px;
left: 0;
width: 600px;
top: 40px;
margin: 0 auto;
display: block;
}
.left-live a {
margin-top: 10px;
border-radius: 3px;
transition: 0.2s;
color: #fff;
display: inline-block;
padding: 8px;
border: 2px solid #FFFFFF;
font-size: 16px;
width: 80%;
font-weight: 600;
}
.left-live a:hover { background: #ffffff;font-size: 23px;color:#000; }
span#saaa {
font-size: 31px;
margin-right: 0px;
margin-left: 20px;
line-height: normal;
}
span#d9i9a {
}
span#ssss {
}
.time-live {
float: left;
margin-top: 10px;
text-align: center;
font-size: 18px;
position: relative;
width: 129px;
}
.moussa:hover img{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.9}
.Moussa:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.social__item:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.menubar2 li:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.navbar ul li:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
div#logo:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.left-live a:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.fa.fa-arrow-up:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
i.fa.fa-phone:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.contact-close:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.header img:hover{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
.fa.fa-arrow-up:hover{background-color: #CB2027;color: #FFFFFF;}
i.fa.fa-phone:hover{background-color: #CB2027;color: #FFFFFF;}
#f-row { width: 1140px; clear: both; background: #CB2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4K-VBFHzk3Pua2krGjkSKnm2Ag5cklOPB_-Eu43GrXqF0hORvMwtEr8XFRro-GMCQIVQi5GhFkl0xGSdFBbsZZr6zm6lhujy0sc6xzM3opWYuR4TACwdChKyNWYCIJV-9rbj71DAeJTU/s1600/header-bg.png) no-repeat left bottom; padding: 5px 14px; height: 97px; position: relative; margin: 0 auto; }i.fa.fa-phone {color: #CB2027; font-size: 50px; background-color: #FFFFFF; width: 80px; height: 64px; text-align: center; border-radius: 100%; padding-top: 14px; margin-top: 5px; display: inline-block; cursor: pointer; vertical-align: top;}.fa.fa-arrow-up { color: #CB2027; font-size: 40px!important; background-color: #FFFFFF; width: 80px; height: 63px; text-align: center; border-radius: 100%; padding-top: 15px; margin-top: 5px; vertical-align: top; display: inline-block; cursor: pointer;}#HTML140 p { color: #FFF; font-size: 15px; text-align: justify; display: inline-block; width: calc(100% - 510px); margin: 15px 20px; vertical-align: top; }
وألآن نقوم بالبحث عن <div id='footer-wrapper'>
وتقوم يتحديد كل الوسوم المرتبطة بها وتغييرها لهدا الكود
<div id='footer-wrapper'>
<div class='row' id='footer'>
<b:section class='sect-right ready-widget wow bounceIn animated' id='footer-sec1' maxwidgets='3' name='Widget 1' showaddelement='yes'>
<b:widget id='HTML12' locked='false' title='' type='HTML' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='sect-right ready-widget wow bounceInUp animated' id='footer-sec2' maxwidgets='3' name='Widget 2' showaddelement='yes'>
<b:widget id='HTML15' locked='false' title='' type='HTML' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='sect-right ready-widget wow bounceInLeft animated ' id='footer-sec3' maxwidgets='3' name='Widget 3' showaddelement='yes'>
<b:widget id='HTML9' locked='false' title='' type='HTML' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='th9moussa-live'>
<div class='right-live wow bounceIn animated'>
<div class='contact-button'><a href='#'><i class='fa fa-phone'/></a>
<block;'/>
</div>
</div>
<div class='left-live wow bounceInUp animated'>
<span id='ssgf1'>يمكنك طرح أي سؤال وسيتم الرد عليك في أسرع وقت ممكن
</span>
<a href='http://ismailprofessional.blogspot.com/p/blog-page_23.html'>
إطرح سؤالك كن الاول</a>
</div>
<div class='time-live wow bounceInLeft animated'>
<span id='saaa'>يوميا</span>
<br/>
<span id='saaa'>24</span><span id='d9i9a'>/24</span>
<br/>
بتوقيت غرينيتش
</div>
</div>
<div class='newsletter_mostlzmat'>
<div class='width_newsl'>
<p>اشترك بالقائمة البريدية لمدونتنا وتوصل بجديد الدروس و المواضيع التي يتم طرحها مباشرة على بريدك الإلكتروني</p>
<br/>
<div class='formnewss'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='sidebar-subscribe-box-form wow bounceIn animated' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=opsdevme/jzHR;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input id='inpNews' name='email' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='ادخل بريدك@الإلكتروني'/>
<input id='SubmNews' name='submit' type='submit' value='إشترك الان'/>
<input name='uri' type='hidden' value='mostlzmatpro'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div></div>
</div>
<div class='search'>
<div class='search-box'>
<h1>يمكنك البحث عن أي موضوع سابق بالمدونة باستخذام مستطيل البحث الموجود اسفله</h1>
<div class='search-box-input wow bounceInLeft animated'>
<form action='https://cse.google.dz/cse/home?cx=016932594220321475311:repf-eh1sjy' class='navbar-form' id='search' method='get' role='search'>
<input name='cx' type='hidden' value='016932594220321475311:repf-eh1sjy'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input id='SearchBox' name='q' placeholder='اكتب هنا ثم انقر enter للبحث"' type='search'/>
</form>
</div>
</div>
<div class='meta'>
<div class='content'>
<div class='meta-item'>
<h2>تجدون عندنا كل ماتطلبون</h2>
</div>
</div>
</div>
</div>
<div id='footer-buttons'>
<div class='total-posts wow bounceIn animated'>
<a href='https://www.facebook.com/ismail.tagliout' traget='blank'>تعريب&تطوير: الروسافي عمر</a>
</div>
<div class='call-th3 wow bounceInUp animated'>
<a href='#' target='_blank'>اتفاقية الاستخدام</a>
</div>
<div class='privacy-th3 wow bounceInLeft animated'>
<a href='#'>سياسة الخصوصية</a>
</div>
</div>
<style>.copyright a{ color:#ccc; line-height:30px; font-size:13px;}
.copyright a:hover{font-size:13.5px;color:#ff0000}</style>
<div class='footer-wrapper'>
<div class='footer-copy row'>
<div class='copyright'>
جميع الحقوق محفوظة &copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | تصميم: <a href='#' id='mycontent' title='الروسافي ويب'>ismail tagliout</a>
</div>
<div class='native-opt'>
<li><a class='back-top' href='#top' title='الى الأعلى'><i class='fa fa-caret-up'/></a></li>
</div>
</div>
</div>
</div>
