.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 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>
![مسابقة للفوز بقالب الروسافي ويب الحالي [انتهت]](https://4.bp.blogspot.com/-Ol1KAMLqXWU/V465_2PyTHI/AAAAAAAAAag/aFuLUXdnXnwT1JT6hJ-NEcIHxNBVuG1TQCLcB/s640/LSHF.jpg "مسابقة للفوز بقالب الروسافي ويب الحالي [انتهت]")
<div class="content"><div class="tl-socialicons"><div class="tl-socialInner"><!--Facebook--><div class="tl-social"><div class="tl-facebook tl-sinn"><a href="#" target="_blank" title="Facebook"><span class="tl-sicon"><i class="fa fa-facebook"></i></span><span class="tl-scount">3.7K</span></a></div></div><!--Google Plus--><div class="tl-social"><div class="tl-googleplus tl-sinn"><a href="#" target="_blank" title="Google Plus"><span class="tl-sicon"><i class="fa fa-google-plus"></i></span><span class="tl-scount">2K</span></a></div></div><!--Twitter--><div class="tl-social"><div class="tl-twitter tl-sinn"><a href="#" target="_blank" title="Twitter"><span class="tl-sicon"><i class="fa fa-twitter"></i></span><span class="tl-scount">2.4K</span></a></div></div><!--Instagram--><div class="tl-social"><div class="tl-instagram tl-sinn"><a href="#" target="_blank" title="Instagram"><span class="tl-sicon"><i class="fa fa-instagram"></i></span><span class="tl-scount">2K</span></a></div></div><!--Pinterest--><div class="tl-social"><div class="tl-pinterest tl-sinn"><a href="#" target="_blank" title="Pinterest"><span class="tl-sicon"><i class="fa fa-pinterest"></i></span><span class="tl-scount">9.5K</span></a></div></div><!--Youtube--><div class="tl-social"><div class="tl-youtube tl-sinn"><a href="#" target="_blank" title="YouTube"><span class="tl-sicon"><i class="fa fa-youtube"></i></span><span class="tl-scount">3.8K</span></a></div></div></div></div></div><style>/* Social Media */.list-unstyled{padding-Right:0;list-style:none;margin:2px}.list-inline li{display:inline-block;padding-right:5px;padding-Right:5px;margin-bottom:10px}.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}.tl-colored-social .fa,.tl-social-icons .fa{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-social-sidebar li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-social-icons.icon-rotate .fa:active{-webkit-transform:scale(1.1) rotate(360deg);-moz-transform:scale(1.1) rotate(360deg);-ms-transform:scale(1.1) rotate(360deg);-o-transform:scale(1.1) rotate(360deg);transform:scale(1.1) rotate(360deg)}.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover,.tl-socialicons .tl-dribbble:hover .tl-sicon{background-color:#F46899}.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover,.tl-socialicons .tl-facebook:hover .tl-sicon{background-color:#3C599F}.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover,.tl-socialicons .tl-instagram:hover .tl-sicon{background-color:#685243}.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover,.tl-socialicons .tl-foursquare:hover .tl-sicon{background-color:#0086BE}.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover,.tl-socialicons .tl-github:hover .tl-sicon{background-color:#070709}.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover,.tl-socialicons .tl-pinterest:hover .tl-sicon{background-color:#CC2127}.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover,.tl-socialicons .tl-twitter:hover .tl-sicon{background-color:#32CCFE}.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover,.tl-socialicons .tl-vk:hover .tl-sicon{background-color:#375474}.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover,.tl-socialicons .tl-soundcloud:hover .tl-sicon{background-color:#FF4100}.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover,.tl-socialicons .tl-vine:hover .tl-sicon{background-color:#35B57C}.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover,.tl-socialicons .tl-youtube:hover .tl-sicon{background-color:#C52F30}.top-social ul li{margin:0;padding:0}div#socialicons-top{float:right}.top-social .list-unstyled{margin:0}.tl-socialicons{text-align:center;overflow:auto;font-size:22px;margin:0 -8px}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;padding-Right:8px}.tl-socialicons .tl-social{float:right;width:25%}.tl-socialicons .tl-sinn{padding-right:8px}.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}.tl-socialicons .tl-sicon{display:block;padding:10px 0;}.tl-socialicons .tl-facebook .tl-sicon{color:#3B5998}.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}.tl-socialicons .tl-twitter .tl-sicon{color:#2AA9E0}.tl-socialicons .tl-instagram .tl-sicon{color:#685243}.tl-socialicons .tl-pinterest .tl-sicon{color:#CC2028}.tl-socialicons .tl-youtube .tl-sicon{color:#DE1829}.tl-socialicons .tl-vine .tl-sicon{color:#35B57C}.tl-socialicons .tl-soundcloud .tl-sicon{color:#FF4100}.tl-socialicons .tl-vk .tl-sicon{color:#45668e}.tl-socialicons .tl-foursquare .tl-sicon{color:#f94877}.tl-socialicons .tl-github .tl-sicon{color:#333333}.tl-socialicons .tl-dribbble .tl-sicon{color:#ea4c89}.tl-socialicons .tl-sicon{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tl-socialicons .tl-scount{display:block;color:#eeeeee;background:#3d3d3d;padding:5px 0;position:relative;margin-bottom:8px;font-size:14px;font-weight:600}.tl-socialicons .tl-scount:after{bottom:100%;Right:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(238,238,238,0);border-bottom-color:#2e2e2e;border-width:4px;margin-Right:-4px}</style> <script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 40;</script>
<script type="text/javascript" src="/feeds/posts/default/-/تسمية?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<a class='labelmore' href='/search/label/تسمية/max-results=5' title='Show All'>More »</a> <ul class="button"> <li><a class="demo" href="https://www.blogger.com/YOUR-LINK-HERE" target="_blank">معاينة</a></li> <li><a class="download" href="https://www.blogger.com/YOUR-LINK-HERE" target="_blank">التحميل</a></li> </ul> ... ضع كود html هنا ...
... ضع كود css هنا ...
... ضع أكواد الجافا سكربت هنا ...
... ضع كود ال jQuery هنا ...
<div class="fc-wrapper">
<div class="fc-handle fc-handle-pull"></div>
<div class="fc-perspective">
<!-- right part overlay; get's darker -->
<div class="fc-overlay fc-overlay-reverse"></div>
<div class="fc-handle fc-handle-out"><div></div></div>
<!-- inner bottom content part -->
<div class="fc-bottom">
<div class="fc-bottom-bg">
<div class="fc-content">
<p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span></p>
</div>
</div>
<div class="fc-overlay fc-overlay-solid"></div>
</div><!-- //fc-bottom -->
<!-- front and back of the flipping half -->
<div class="fc-flip">
<div class="fc-front">
<div class="fc-inner">
<div class="fc-overlay fc-overlay-left"></div>
<!-- left-most part of handle -->
<div class="fc-handle fc-handle-in"><div></div></div>
<div class="fc-content">
<h3>Free revelations</h3>
<p>by Codrops</p>
</div>
</div>
</div><!-- //fc-front -->
<div class="fc-back">
<div class="fc-inner">
<div class="fc-content">
<div class="feynman">
<span>1918 – 1988</span>
</div>
</div>
<div class="fc-overlay fc-overlay-right"></div>
</div>
</div><!-- //fc-back -->
</div><!-- //fc-flip -->
</div><!-- //fc-perspective -->
</div><!-- //fc-wrapper -->
.fc-wrapper {
width: 300px;
height: 300px;
position: relative;
margin: 30px auto 0;
background: #846aa7 url(ضع الصورة التي تريدها) repeat center center;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fc-handle {
position: absolute;
top: 50%;
right: 0px;
width: 80px;
height: 30px;
margin-top: -15px;
background: #775b9d;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.fc-handle-out {
right: -65px;
width: 65px;
}
.fc-handle-in {
right: 80px;
}
.fc-handle div {
position: absolute;
height: 0px;
width: 80px;
top: 30px;
content: '';
opacity: 0.3;
}
.fc-handle-in div {
background:
linear-gradient(
75deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 73%,
rgba(0,0,0,0.65) 100%
);
}
.fc-handle-out div {
background:
linear-gradient(
170deg,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 27%,
rgba(0,0,0,0) 100%
);
}
.fc-handle-out::after {
position: absolute;
right: 0px;
width: 4px;
height: 31px;
content: '';
background:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.15) 100%
);
}
.fc-handle-pull {
right: auto;
left: 100%;
margin-left: 5px;
width: 30px;
box-shadow:
1px 0 1px rgba(0,0,0,0.1),
inset 3px 0 2px rgba(0,0,0,0.2);
cursor: pointer;
}
.fc-handle-pull::after {
content: '';
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
background:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 69%,
rgba(0,0,0,0.08) 100%
);
}
.fc-bottom {
width: 220px;
height: 100%;
overflow: hidden;
position: absolute;
opacity: 0;
}
.fc-bottom-bg {
background: #846aa7 url(ضع الصورة التي تريدها) repeat center center;
border-radius: 50%;
width: 300px;
height: 100%;
}
.fc-overlay {
top: 0px;
left: 0px;
width: 300px;
height: 100%;
position: absolute;
border-radius: 50%;
}
.fc-overlay-solid {
background: rgba(0,0,0,0.6);
}
.fc-overlay-reverse {
background: rgba(0,0,0,0);
}
.fc-overlay-left {
background: linear-gradient(to right, transparent 27%, rgba(0,0,0,0.30) 80%);
opacity: 0.5;
}
.fc-overlay-right {
background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%);
opacity: 0.5;
}
.fc-perspective {
width: 220px;
height: 300px;
position: relative;
perspective: 1000px;
}
.fc-flip {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 220px 0px;
}
.fc-flip &gt; div {
display: block;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
position: absolute;
}
.fc-flip .fc-back {
transform: rotate3d(0,1,0,-180deg);
}
.fc-flip .fc-inner {
border-radius: 50%;
width: 300px;
height: 100%;
position: absolute;
background: #846aa7 url(ضع الصورة التي تريدها) repeat top right;
}
.fc-flip .fc-back .fc-inner {
margin-left: -80px;
background-color: #553c77;
box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}
.fc-content {
width: 220px;
padding: 20px;
text-align: right;
position: relative;
height: 100%;
}
.fc-back .fc-content {
margin-left: 80px;
}
.fc-bottom-bg .fc-content {
padding-top: 40px;
}
.fc-content p {
font-size: 12px;
line-height: 22px;
font-family: &quot;Montserrat&quot;, sans-serif;
text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
color: #3b2954;
padding: 0 0 0 31px;
}
.fc-flip .fc-front h3,
.fc-flip .fc-front p {
position: absolute;
text-align: right;
width: 180px;
text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
color: #3b2954;
}
.fc-flip .fc-front h3,
.feynman span {
font-family: &quot;Montserrat&quot;, sans-serif;
text-transform: uppercase;
font-size: 17px;
letter-spacing: 1px;
font-weight: normal;
}
.fc-flip .fc-front h3 {
top: 30px;
left: 15px;
}
.feynman {
width: 255px;
height: 255px;
position: absolute;
overflow: hidden;
top: 50%;
left: -55px;
border-radius: 50%;
box-shadow: 2px 0 3px rgba(0,0,0,0.3);
margin-top: -127px;
background: transparent url(ضع الصورة التي تريدها no-repeat center right;
}
.feynman span {
text-align: center;
width: 100px;
height: 5px;
line-height: 30px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
bottom: 40px;
right: 80px;
font-size: 13px;
position: absolute;
}
.fc-flip .fc-front h3 span{
font-size: 40px;
}
.fc-flip .fc-front p,
.fc-bottom-bg .fc-content span {
bottom: 50px;
left: 15px;
font-family: &quot;Dancing Script&quot;, Georgia, serif;
font-weight: 700;
font-size: 22px;
}
.fc-bottom-bg .fc-content span {
font-size: 18px;
display: block;
color: #fff;
padding: 10px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
transform: rotate(-3deg);
}
.fc-flip .fc-back .fc-inner,
.fc-overlay,
.fc-handle,
.fc-handle div,
.fc-flip,
.fc-bottom{
transition: all 0.6s ease-in-out;
}
.fc-bottom{
transition-delay: 0.6s;
}
.fc-flip,
.fc-flip .fc-inner,
.fc-handle {
transform-style: preserve-3d;
}
.fc-flip &gt; div,
.fc-flip .fc-inner,
.fc-flip .fc-front h3,
.fc-handle,
.fc-handle div,
.fc-overlay,
.fc-flip .fc-front p,
.fc-flip .fc-front span {
backface-visibility: hidden;
}
.fc-wrapper.fc-wrapper-open .fc-handle-in {
width: 0px;
}
.fc-wrapper.fc-wrapper-open .fc-handle-in div {
height: 180px;
}
.fc-wrapper.fc-wrapper-open .fc-handle-out div {
height: 100px;
}
.fc-wrapper.fc-wrapper-open .fc-handle {
background-color: #513a70;
}
.fc-wrapper.fc-wrapper-open .fc-handle-pull {
width: 155px;
background: #775b9d;
}
.fc-wrapper.fc-wrapper-open .fc-flip .fc-back .fc-inner {
background-color: #846aa7;
}
.fc-wrapper.fc-wrapper-open .fc-overlay {
opacity: 1;
}
.fc-wrapper.fc-wrapper-open .fc-overlay-solid {
background: rgba(0,0,0,0);
}
.fc-wrapper.fc-wrapper-open .fc-overlay-reverse {
background: rgba(0,0,0,0.4);
}
.fc-wrapper.fc-wrapper-open .fc-bottom{
opacity: 1;
transition: none;
}
.fc-wrapper.fc-wrapper-open .fc-flip {
transform: rotate3d(0,1,0,175deg);
}
$(function() {
var $wrapper= $( '#fc-wrapper' ),
$handle = $wrapper.children( 'div.fc-handle-pull' );
$handle.on( 'click', function( event ) {
( $handle.data( 'opened' ) ) ? close() : open();
} );
$wrapper.hammer().bind( 'dragend', function( event ) {
switch( event.direction ) {
case 'right' : open(); break;
case 'left' : close(); break;
}
});
function open() {
$wrapper.addClass( 'fc-wrapper-open' );
$handle.data( 'opened', true );
}
function close() {
$wrapper.removeClass( 'fc-wrapper-open' );
$handle.data( 'opened', false );
}
} ); 
<style>
.container{
/* How pronounced should the 3D effects be */
perspective: 800px;
-webkit-perspective: 800px;
background: radial-gradient(#e0e0e0, #aaa);
width:280px;
height:380px;
margin:0 auto;
border-radius:6px;
position:relative;
}
.iphone-front,
.iphone-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* We are using two separate divs for the front and back of the
phone. This will hide the divs when they are flipped, so that the
opposite side can be seen: */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width:200px;
height:333px;
position:absolute;
top:50%;
left:50%;
margin:-166px 0 0 -100px;
background:url(http://e.top4top.net/p_195ni1a1.png) no-repeat left center;
/* Animate the transitions */
transition:0.8s;
}
.iphone-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
background-position:right center;
}
.container:hover .iphone-front{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.container:hover .iphone-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
</style>
<div class="container">
<div class="iphone-front"></div>
<div class="iphone-back"></div>
</div> 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : Roussafi Cleaning Template
Designer URL : http://roussafi-web.blogspot.com
year : 2016
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html> 
بصفتي
مشرف فيمدونة الروسافي ويب أهنئكم واقول لكم
الله يتقبل صيامكم وقيامكم ومبارك عليكم الشهر .