حصريا ! تحميل موك أب Iphone s7 احترافي بلونين مختلفين

السلام عليكم ورحمة الله تعالى وبركاته اليوم عندي ملف psd عبارة عن موك أب احترافي لهاتف Iphone س7

كيفية العمل عليه :

1. طبعا نقوم بفتح الملف بالفوتوشوب
2. ونقوم بتحديد الصورة و نعدلها أو نغيرها
3. وأخير نحفظ الملف
   
   للتحميل
   
   
    
    

اللون الأسود

اللون الأبيض

ان أعجبتكم الاضافة فلا تنسوا الانضمام لمدونتي أو ترك تعليق و شكرا

تابع القراءة

• شارك

فوتر مدونة موسى للمعلوميات

السلام عليكم ورحمة الله تعالى وبركاته اخواني و أخواتي متابعي مدونة الروسافي ويب اليوم عندي اضافة جديدة وهي اضافة فوتر موسى للمعلوميات
وقبل دلك لا تنسو الانضمام لقناتنا عبر الفوتر

سأترككم مع الشرح


أولا نقوم بادخال هده الأكواد فوق ]]></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 != &quot;&quot;'>
    <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 != &quot;&quot;'>
    <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 != &quot;&quot;'>
    <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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=opsdevme/jzHR;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input id='inpNews' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' 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 للبحث&quot;' 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'>تعريب&amp;تطوير: الروسافي عمر</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'>
جميع الحقوق محفوظة &amp;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>

تابع القراءة

• شارك

غلاف الروسافي ويب الجديد(تم حل مشكلة المقياس)

السلام عليكم و رحمة الله تعالى وبركاته متابعين مدونة الروسافي ويب
اليوم جئتكم قمت بعمل غلاف فوتوشوب جدبد لمدونتي ولاكن قبل أن أركبه أحببت أن أشارككم اياه أرجوا أن يعجبكم
نبدأ على بركة الله

مميزات الغلاف

1. يتوفر على ألوان جميلة
2. يتوفر على شكل باهي
3. يمكن تغيير أي شيئ في الغلاف بسهولة
4. يتوفر على مؤثرات جميلة
5. يتوفر على جودة عالية HD
6. والمزيد لتكتشفه بنفسك

معاينة

للحصول على الغلاف

قم بالانضمام لمدونتنا عبر الفوتر
أترك تعليقا فيه بريدك الالكتروني
سيتم ارسال الغلاف في أسرع وقت ممكن

أتنمى أن يكون الغلاف نال الاعجاب والى القاء

تابع القراءة

• شارك

قالب مدونة دبور فون الحالي

السلام عليكم و رحمة الله تعالى و بركاته اليوم أقدم لكم قالب مدونة دبور فون الحالي
بدون نبدأ الشرح

     مميزات القالب :

1. خفيف وسريع
2. جميل
3. يحتوي على زر صعود
4. يحتوي على نمودج الاتصال
5. يتوفر على فوتر احترافي
6. يحتوي على أدوات لعرض المشاركات حسب التسميات
7. متجاوب
8. يتوفر على أزرار المشاركة
9. يتوفر على تعليقات الفيسبوك
10. والمزيد لتكتشفه

معلومات عن القالب

القالب هخو في الحقيقة عبارة عن قالب ألماس المدفوع لمن الأخ محمد أبو ضية قام بتعديله و تطويره و أحببة لمسته لدلك قمت بعمل هدا القالب

يمكنك معاينته

معاينة

• للحصول على القالب

 قم بالانضمام لمدونتنا عبر الفوتر

أترك تعليقا فيه بريدك الالكتروني

سيتم ارسال القالب في أقرب وقت ممكن

تابع القراءة

• شارك

مسابقة للفوز بقالب الروسافي ويب الحالي [انتهت]

السلام عليكم و رحمة الله تعالى و بركاته بدون اطالة :
 بناءا على رغبة العديد من الرغبات "العديد من المدونين طلبوا مني اعطائهم قالب مدونتي الحالي "
قمت بعمل قرعة للفوز بالقالب

• مميزات القالب:

1. سريع في التحميل
2. متجاوب
3. يتوفر على هيرد احترافي
4. يتوفر على أزرار مشاركة احترافية
5. يتوفر على تعليقات فيسبوك
6. يتوفر على رموز احترافية في التعليقات
7. يتوفر على خطوط احترافية
8. يتوفر على شريط ترحيبي احترافي
9. يتوفر على أفضل أكواد ميتا تاج
10. يتوقر على أزرار المعاينة و التحميل
11. يتوفر على أداتين لعرض المواضيع حسب التسميات
12. يتوفر على مربع بحث احترافي
13. يتوفر على أداة التعرف بالكاتب
14. يتوفر على صندوق الاكواد

• سلبيات القالب :

لون الفوتر قبيح غيره بما يناسبك

• معلومات حول القالب 

في الحقيقة القالب هو من تصميم مدونة دبور فون لكنني جعلته قالب لمدونتي و قمت بتطويره ونال الاعجاب

• تخصيص القالب

لاضافة أداة المواقع الاجتماعية

أضف هدا الكود في أداة جديدة

 <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&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
<a class='labelmore' href='/search/label/تسمية/max-results=5'  title='Show All'>More &#187;</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 هنا ... 

شروط المشاركة

1.  قم بالانضمام لمدونتنا عبر الفوتر
2. أترك تعليقا فيه بريدك الالكتروني
3. سيتم اختيار 3 أعضاء

هام 

في حالة وجد القالب عند شخص غير الدي ارسل لهم فسيتم تهكير حسابهم و متابعتهم قانونيا

تابع القراءة

• شارك

حصريا اضافة دائرة جميلة تحتوي على معلومات

السلام عليكم و رحمة الله تعالى و بركاته متابعي الروسافي ويب
اليوم أود أن تظهر لك كيفية إنشاء مكون قليلا مع لمسة واقعية. وتعتمد الفكرة على أثر ورقة حلوة وجدت في الفيديو من قصص مطوري برامج Google. ربما كنت قد أنشأت هذا النوع من الآثار ورقة عندما كنت طفلا. في الأساس يفتح شيء أو بالتناوب عندما سحب أو دفع بعض المقبض.
سنقوم بإنشاء دائرة مع مقبض التي ستفتح بمجرد النقر على مقبض قليلا، وخلق تأثير واقعي 3D التقليب بمساعدة CSS 3D تحول والظلال / التدرجات.

يمكنك معاينة الاضافة:

معاينة

أولا هدا كود HTML يمكنك أن تضعه في أي مكان تريده

 <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 -->
 

ثانيا كود css تقوم بوضعه فوق </b:skin> :

 .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 > 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: "Montserrat", 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: "Montserrat", 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: "Dancing Script", 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 > 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);
}
 

أما هدا كود java :

 $(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 );
 }

} ); 

و أخيرا أتنمى أن تنال اضافتي اعجابكم 

تابع القراءة

• شارك

اضافة Iphone ثلاثي الأبعاد بتأثير الانقلاب 360° عرضا

السلام عليكم

1. قم بتحميل هدا الملف
2. قم بتغيير الصورة 

1. ثم قم برفعها
2. ثم قم بنسخ الرابط لأننا سنحتاجه
3. بعدها قم بالصاق هدا الكود في أداة جديدة

 <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> 

و أخيرا قم بتغيير الرابط الأخضر برابط صورتك

'أتمنى أن تنال الاضافة اعجابكم و لا تبخلوا علينا بتهليق

تابع القراءة

• شارك