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

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

يوجد الآن مشاهدة التعليقات : 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. محمود8/27/2015

    رائع

    ردحذف
  2. iiii8/27/2015

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

    ردحذف
    الردود
    1. Hussam8/27/2015

      تفضل:
      ::-webkit-scrollbar{width:7px;height:7px;background:#fff;}
      ::-webkit-scrollbar-thumb{background:#E74C3C;}

      حذف
  3. Walid8/28/2015

    جميل

    ردحذف
  4. iiii8/28/2015

    شكرا

    ردحذف
  5. ahd8/29/2015

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

    ردحذف
  6. MED9/13/2015

    أين الجزء الأول

    ردحذف
    الردود
    1. Hussam9/13/2015

      ستجد رابطه بالتدوينة

      حذف
  7. Unknown10/18/2015

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

    ردحذف
  8. Mohamed Talidi11/09/2015

    واش نتا مغريبي

    ردحذف
  9. motaz sa1/26/2016

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

    ردحذف

Hussam
عن الكاتب :

إرشادات

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

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

    • أين تجدنا؟

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

    كلمة الختام

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

Made with ♥ by HM & Blogger | © عرب ويب 2021