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

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

يوجد الآن مشاهدة التعليقات : 11

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

المكتبة الثانية التي تضم أرقى الإضافات بجزئها الثاني، كالعادة تكون هذه الإضافات للتزين الموقع وطبعا لها إفادة في أغلبيتها. كما أن الإضافات قد تنشر بصفحتنا على الفيسبوك بدون أن ننشر تدوينة لذا أنصحكم بالمتابعة قد تفوتون الكثير 😉 هاته الإضافات الأربعة مختلفة كليا عن بعضها ذات تصميم هادئ خفيف وجميل ولكي لا أكثر في الحديث عن شكلها أدعوكم للمعاينة المباشرة
شرح طريقة التركيب
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="http://1.bp.blogspot.com/-6CpgaGPj7VM/VdebOVXogdI/AAAAAAAAIdA/UHnM-vOGcU4/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="http://1.bp.blogspot.com/-48H7Ho928go/Vd8iJBp_AZI/AAAAAAAAIi4/r5b7q3MdWxM/s1600/yamiar1web.png" class="img-responsive" />
                    <div class="user-img">
                       <a href="#" target="_blank">
                        <img src="http://2.bp.blogspot.com/-25rGXmxRQ5w/Vd8iHFjW-KI/AAAAAAAAIiw/3zrYtrFWscc/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>

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 11 تعليقًا:

  1. شكرا ممكن كود سكرول بار

    ردحذف
    الردود
    1. تفضل:
      ::-webkit-scrollbar{width:7px;height:7px;background:#fff;}
      ::-webkit-scrollbar-thumb{background:#E74C3C;}

      حذف
  2. ممكن سلايدر شو يتماشى مع اللون الأزرق أو الابيض ؟

    ردحذف
  3. أين الجزء الأول

    ردحذف
    الردود
    1. ستجد رابطه بالتدوينة

      حذف
  4. ممكن اضافة الخاصة بالفيسبوك تحت كل تدوينة

    ردحذف
  5. واش نتا مغريبي

    ردحذف
  6. يعطيك الف عافية يا رب ... اخي عندي تدوينة جديدة ولم استطيع تركيب سلايدر شو عليها بتقدر تحطلي سلايدر

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم