مكتبة بأرقى الإضافات الجزء الثاني

المكتبة الثانية التي تضم أرقى الإضافات بجزئها الثاني، كالعادة تكون هذه الإضافات للتزين الموقع وطبعا لها إفادة في أغلبيتها. كما أن الإضافات قد تنشر بصفحتنا على الفيسبوك بدون أن ننشر تدوينة لذا أنصحكم بالمتابعة قد تفوتون الكثير 😉 هاته الإضافات الأربعة مختلفة كليا عن بعضها ذات تصميم هادئ خفيف وجميل ولكي لا أكثر في الحديث عن شكلها أدعوكم للمعاينة المباشرة

الجزء الأول

• معاينة

شرح طريقة التركيب
1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

<style>
.ar1web_today_img:hover { opacity: .9; }
.ar1web_today_img img{width:100%;height:180px;align:justify;margin-bottom:13px}.ar1web_today_img a{font-size: 14px;
    font-family: Droid Arabic Kufi,Open Sans;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    color: #E73C5C!important;}.ar1web_today_img{background: #fafafa; text-align: center; border-bottom: 1px dashed #DCDADA; padding-bottom: 10px;}
.hithere{text-align: center; font-size: 13px; line-height: 24px; background-color: #FAFAFA; padding: 10px; color: #524F50;}
</style>
<div class="ar1web_today_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9H3N3QLRk5v-ZUOyV05TXEz-vRqP10XZT0JP8BS3crCBmhdZytTlN1xZKwmkIBb-2gYWWYyXkNJysCB2k-wFI2uUWqIhhamviRccO7owv22PNfEwgqoqbz_XT0mdPCcooktaKsILgzM/s1600/ar1web.png" />
<a href="#" target="_blank">أروع الخلفيات المخصصة للمواقع!</a>
</div>
<div class="hithere">أزيد من 100 خلفية مخصصة للمواقع تضم أجمل وأرقى الأشكال مع طريقة التركيب والاختيار حسب الذوق لا داعي لأن تبحث بعد الآن ☺️</div>

تخصيص الإضافة :

المحدد بالأحمر # يغير بالرابط

المحدد بالوردي يغير بالكلمات

المحدد بالأخضر يخص رابط الصورة

<style>
.doar1web.join:hover,.doar1web.gplus:hover,.doar1web.facebook:hover,.doar1web.instagram:hover,.doar1web.twitter:hover { background: #696868; }
.doar1web{float:none;margin-top:15px;margin-right:5px;width:32px;height:32px;line-height:32px}
.doar1web a{padding:0;margin:0;width:32px;height:32px;line-height:32px;text-align:center}
.doar1web a i{text-align:center;color:#fff;}
.doar1web a:hover i{color:#fff;}
.doar1web.join{background:#CC181E;}
.doar1web.instagram{background:#406f94;}
.doar1web.gplus{background:#f20000;}
.doar1web.twitter{background:#00baff;}
.doar1web.facebook{background:#516ca4;}
.doar1web a i,.doar1web a:hover i{color:#fff;}
.user-profile {
    background-color: #fff;
    text-align: center;
}
.user-profile>img {
    width: 100%;
}
.user-profile .user-img {
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: -70px;
    height: 130px;
    width: 130px;
    position: relative;
}
.user-profile .user-img img {
    width: 100%;
    border: 3px solid #fff;
}

.user-profile .user-img .user-img-hover {
    background: none repeat scroll 0px 0px rgba(51, 51, 51, 0.8);
    color: #F4F4F4;
    font-size: 25px;
    text-align: center;
    line-height: 3.5;
    height: 124px;
    width: 124px;
    z-index: 999;
    display: inline-block;
    padding-top: 20px;
    position: relative;
    bottom: 127px;
    transition: all 800ms ease 0s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}
.user-profile .user-img:hover .user-img-hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

.user-profile .details {
    display: inline-block;
}
.user-profile .details ul {
    padding: 0;
    margin-bottom: 20px;
    margin-top: 10px;
}
.user-profile .details ul li {
    display: inline-block;
    color: #797979;
    font-size: 16px;
    font-weight: 600;
}
.user-profile .details ul li:last-child {
    margin-left: 0;
}
.user-profile .details ul li span {
    display: block;
    font-size: 28px;
}
</style>
<div class="user-profile">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSH6zYLxG4Ydd5poScrjSyaJZGk3MEX7cSlrCbayyyPhfYkGJ0VvIMqu2D7bpY3nkhlvDYBqFnVKgFaV8x7mr-HLmwjbRc0ZR1BWaVq5tlZBlwvmvZj2UFKpaz7r50xEvkrtOvr8_K4_U/s1600/yamiar1web.png" class="img-responsive" />
                    <div class="user-img">
                       <a href="#" target="_blank">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCT7TW4Tt45lCPdKz_qVhK6uvriq7d7psC8FQJhBBzxPG3Q8I1MjPIg09XJwV4T2hVcC4oEbroj6Bc1WCANx44-4peTyE6ZU4u4kiB7VfqqHwzp8kdzZLrG3MTNdFrN4e1jzCx0GePERI/s1600/adminar1web.jpg" />
                        <div class="user-img-hover">
                            <i class="fa fa-link"></i>
                        </div></a>
                    </div>
                    <div class="details">
                      <ul>
<li class='doar1web join'><a href='#' rel='nofollow' target='_blank' title='اشترك بالقناة'><i class='fa fa-youtube'></i><span class='inv'></span></a></li>
<li class='doar1web gplus'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل+'><i class='fa fa-google-plus'></i><span class='inv'></span></a></li>
<li class='doar1web facebook'><a href='#' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook'></i><span class='inv'></span></a></li>
<li class='doar1web instagram'><a href='#' rel='nofollow' target='_blank' title='تابعنا على أنستجرام'><i class='fa fa-instagram'></i><span class='inv'></span></a></li>
<li class='doar1web twitter'><a href='#' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i><span class='inv'></span></a></li>
</ul>
                </div></div>

تخصيص الإضافة :

المحدد بالأحمر # يغير بالرابط

المحدد بالبرتقالي يخص الأيقونات "الموقع"

المحدد بالأخضر يخص رابط صورة الكاتب

المحدد بالأزرق يخص الخلفية

<style>
.bikher { overflow: hidden; }
.big-section     { color:#FFF; }
.rowme             { background-color: #425F9C; text-align:center; font-family: droid arabic kufi;}

.flip-bikher { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; }

.flip-bikher, .front, .back { margin:0 auto; width: 285px; height: 160px; }

.flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; }

.front, .back { -webkit-backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; padding-top:20px; padding-bottom:10px; position: absolute; top: 0; left: 0; }

.front  { background:#35528f; z-index: 2; -webkit-transform: rotateY(0deg); }
    .front span     { font-size:80px; margin-top:10px; }
.back   { background:#021f5c;; -webkit-transform: rotateY(-180deg); } 

    .flip-bikher:hover .back  { -webkit-transform: rotateY(0deg); }
    .flip-bikher:hover .front { -webkit-transform: rotateY(180deg); }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1&appId=1389892087910588";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="facebook" class="big-section">
  <div class="bikher">
    <div class="rowme">

      <div class="flip-bikher">
        <div class="flipper">
          <div class="front">
            <div>صفحتنا على الفيسبوك</div><br/>
            <span class="fa fa-facebook-square"></span>
          </div>
          <div class="back">
          <br/> تابعنا أول بأول<br/><br/>
            <div class="fb-like" data-href="#" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
           
          </div>
        </div>
      </div>

    </div>
  </div></div>

تخصيص الإضافة :

المحدد بالأحمر # يغير برابط الصفحة

المحدد بالوردي يغير بالكلمات

<script type='text/javascript'>
      jQuery(document).ready(function(){
        jQuery(&#39;.skillbar&#39;).each(function(){
               jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
                                 width:jQuery(this).attr(&#39;data-percent&#39;)
                                                         },6000);
      });
      });
    </script>
<style>
#skills-ar1web{height: 210px;}
.skillbar {
position:relative;
display:block;
margin-bottom:5px;
width:100%;
background:#eee;
height:30px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
right:0;
font-weight:normal;
font-size:13px;
color:#fff;
background:#6adcfa;
}
.skillbar-title span {
display:block;
padding:0 20px;
height:30px;
line-height:30px;
}
.skillbar-bar {
height:30px;
width:0px;
background:#6adcfa;
}
.skill-bar-percent {
position:absolute;
left:10px;
top:0;
font-size:11px;
height:30px;
line-height:30px;
color:#fff;
color:rgba(0, 0, 0, 0.4);
}
</style>
 <div id='skills-ar1web'>
          <div class='skillbar clearfix ' data-percent='100%'>
            <div class='skillbar-title' style='background: #33B5E5;'>
              <span>
                Photoshop
              </span>
            </div>
            <div class='skillbar-bar' style='background: #33B5E5;'/>
            <div class='skill-bar-percent'>
              100%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='90%'>
            <div class='skillbar-title' style='background: #f7a53b;'>
              <span>
                Blogger
              </span>
            </div>
            <div class='skillbar-bar' style='background: #f7a53b;'/>
            <div class='skill-bar-percent'>
              90%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='68%'>
            <div class='skillbar-title' style='background: #88cd2a;'>
              <span>
                HTML5/CSS3
              </span>
            </div>
            <div class='skillbar-bar' style='background: #88cd2a;'/>
            <div class='skill-bar-percent'>
              68%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='75%'>
            <div class='skillbar-title' style='background: #3D8ACE;'>
              <span>
                WordPress
              </span>
            </div>
            <div class='skillbar-bar' style='background: #3D8ACE;'/>
            <div class='skill-bar-percent'>
              75%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='65%'>
            <div class='skillbar-title' style='background: #64B083;'>
              <span>
                JavaScript/Jquery
              </span>
            </div>
            <div class='skillbar-bar' style='background: #64B083;'/>
            <div class='skill-bar-percent'>
              65%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='35%'>
            <div class='skillbar-title' style='background: #fa6e6e;'>
              <span>
                illustrator
              </span>
            </div>
            <div class='skillbar-bar' style='background: #fa6e6e;'/>
            <div class='skill-bar-percent'>
              35%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='45%'>
            <div class='skillbar-title' style='background: #9F5DC1;'>
              <span>
                After Effects
              </span>
            </div>
            <div class='skillbar-bar' style='background: #9F5DC1;'/>
            <div class='skill-bar-percent'>
              45%
            </div>
          </div>
        </div>

تخصيص الإضافة :

المحدد بالوردي يغير بالكلمات

المحدد بالأخضر يخص لون لكل من Photoshop, Blogger ...

* إذ لم تتحرك الخاصية الخاصة بالنسبة المئوية فأنسخ الكود المحدد بالأحمر بدون أن تتركه مكرر ثم ضعه فوق </head>