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

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

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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

المكتبة الثالثة من أرقى الإضافات خاصة تكون عبارة عن زينة للموقع ولها فائدة في بعضها، المقصود من هذه التجميعة هو تقليص التدوينات بحيث بعض الإضافات لا تكون بتلك الأهمية الكبيرة ولا يمكننا أن نكتب تدوينة واحدة عليها لذلك نقوم بتجمعتها وفي نفس الوقت تختار ما تشاء من أول استعمال ومع سهولة التركيب.
الجزء الثاني : مكتبة بأرقى الإضافات الجزء الثاني
كما توضح الصورة لدينا : إضافة تعريف الكاتب توضع بالسيدبار وتقويم Calendar واخراً إضافتين للمتابعة عبر المواقع الاجتماعية بشكلين... أظنك ذهبت للمعاينة مباشرة! بدون أن تقرأ هذه السطور 😾 استمتع
شرح طريقة التركيب
1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة


<style type='text/css'>
/* About Me */
.sidebar_about_author { height: 200px; }
.aboutpro-img:before { content: ''; background: url(http://2.bp.blogspot.com/-DeV20aLdX3I/VhAfZI4oGuI/AAAAAAAADG0/MSt6cJTgmiA/s1600/pattern-overlay.png)center top repeat; opacity: .3; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; } .aboutpro-img {background: url(http://1.bp.blogspot.com/-8ghi9UYsp6Q/VmPUVnP7-cI/AAAAAAAACPM/7L74zKNUmGI/s1600/66.jpg); height: 200px; display: block; width: 100%; position: relative; right: 0; bottom: 0;background-size: cover; } .sidebar_about_author { height: 200px; }
.aboutpro-wrapicon{display:block;margin:-225px auto 0;position:relative;z-index:3;}
.aboutpro-wrapicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:18px}
.extender .aboutpro-icon{display:inline-block;margin:0 .5px;padding:0;border:0;}
.extender .aboutpro-icon a{display:inline-block;font-family:fontawesome;height:32px;width:32px;line-height:32px;font-weight:normal;color:#fff;font-size:80%;transition:all .5s}
.extender .aboutpro-icon:hover a,.extender .aboutpro-icon a:hover{color:rgba(255,255,255,.7);}
.aboutpro-info{font-size:12px;position: relative; bottom: 200px;    z-index: 99999;}
.aboutpro-info h4{display:table;background:rgba(255,255,255,1);margin:10px auto;font-family:&#39;Playfair Display&#39;,serif;font-size:220%;font-weight:normal;text-transform:capitalize;color:#454545;border:4px double #2e2e2e;z-index:3;padding:5px 10px}
.aboutpro-info p{position:relative;display:block;color:#fff;z-index:4;font-size:110%;text-align:center;font-family: Droid Arabic Naskh,sans-serif;line-height: 1.7em;    padding: 1px; }
</style>
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutpro-img">
</div>
</div>
<div class="aboutpro-info">
<h4>iHussam</h4>
<p>حسام بها، مغربي الجنسية ، مهتم ومتابع لكل ما يتعلق بالتقنية، محب للتصميم والألعاب أيضاً، هاوٍ بجمع شخصيات ديزني،لا تنسى متابعتي عبر المواقع الاجتماعية.</p>
</div>
<div class="aboutpro-wrapicon">
<ul class="extender">
<li class="aboutpro-icon"><a href="facebook" rel="nofollow" target="_blank" ><i class="fa fa-facebook"></i></a></li>
<li class="aboutpro-icon"><a href="twitter" rel="nofollow" target="_blank" ><i class="fa fa-twitter"></i></a></li>
<li class="aboutpro-icon"><a href="googleplus" rel="nofollow" target="_blank" ><i class="fa fa-google-plus"></i></a></li>
<li class="aboutpro-icon"><a href="youtube" rel="nofollow" target="_blank" ><i class="fa fa-youtube"></i></a></li>
<li class="aboutpro-icon"><a href="rss" rel="nofollow" target="_blank" ><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
تخصيص الإضافة :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
المحدد بالوردي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة


<style>
/* Calendar */
#calendar{margin-left:auto;margin-right:auto;width:320px;}#calendar_weekdays div{display:inline-block;vertical-align:top}#calendar_content,#calendar_weekdays,#calendar_header{position:relative;width:320px;overflow:hidden;float:left;z-index:10;    direction: ltr;}
#calendar_weekdays div,#calendar_content div{width:40px;height:40px;overflow:hidden;text-align:center;background-color:#fff;color:#787878}
#calendar_content{}
#calendar_content div{float:left}#calendar_content div:hover{background-color:#f9f9f9;cursor:pointer}
#calendar_content div.blank{background-color:#fff}
#calendar_header,#calendar_content div.today{zoom:1;opacity:.7}
#calendar_content div.today{color:#fff}
#calendar_header{width:100%;height:37px;text-align:center;background-color:#FF6860;}
#calendar_header h1{font-family:droid arabic kufi,sans-serif;font-size:1.4em;color:#fff;float:left;line-height:39px;width:70%}i[class^=icon-chevron]{color:#fff;float:left;width:15%;border-radius:50%;cursor:pointer}
</style>
<div id="calendar">
    <div id="calendar_header"><i class="icon-chevron-left"></i>          <h1></h1><i class="icon-chevron-right"></i>         </div>
    <div id="calendar_weekdays"></div>
    <div id="calendar_content"></div>
  </div>
<script type='text/javascript'>
//<![CDATA[
// Calendar
$(function(){function c(){p();var e=h();var r=0;var u=false;l.empty();while(!u){if(s[r]==e[0].weekday){u=true}else{l.append('<div class="blank"></div>');r++}}for(var c=0;c<42-r;c++){if(c>=e.length){l.append('<div class="blank"></div>')}else{var v=e[c].day;var m=g(new Date(t,n-1,v))?'<div class="today">':"<div>";l.append(m+""+v+"</div>")}}var y=o[n-1];a.css("background-color",y).find("h1").text(i[n-1]+" "+t);f.find("div").css("color",y);l.find(".today").css("background-color",y);d()}function h(){var e=[];for(var r=1;r<v(t,n)+1;r++){e.push({day:r,weekday:s[m(t,n,r)]})}return e}function p(){f.empty();for(var e=0;e<7;e++){f.append("<div>"+s[e].substring(0,3)+"</div>")}}function d(){var t;var n=$("#calendar").css("width",e+"px");n.find(t="#calendar_weekdays, #calendar_content").css("width",e+"px").find("div").css({width:e/7+"px",height:e/7+"px","line-height":e/7+"px"});n.find("#calendar_header").css({height:e*(1/7)+"px"}).find('i[class^="icon-chevron"]').css("line-height",e*(1/7)+"px")}function v(e,t){return(new Date(e,t,0)).getDate()}function m(e,t,n){return(new Date(e,t-1,n)).getDay()}function g(e){return y(new Date)==y(e)}function y(e){return e.getFullYear()+"/"+(e.getMonth()+1)+"/"+e.getDate()}function b(){var e=new Date;t=e.getFullYear();n=e.getMonth()+1}var e=280;var t=2013;var n=9;var r=[];var i=["يناير"," فبراير","مارس","أبريل","ماي","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];var s=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];var o=["#16a085","#1abc9c","#c0392b","#27ae60","#FF6860","#f39c12","#f1c40f","#e67e22","#2ecc71","#e74c3c","#d35400","#2c3e50"];var u=$("#calendar");var a=u.find("#calendar_header");var f=u.find("#calendar_weekdays");var l=u.find("#calendar_content");b();c();a.find('i[class^="icon-chevron"]').on("click",function(){var e=$(this);var r=function(e){n=e=="next"?n+1:n-1;if(n<1){n=12;t--}else if(n>12){n=1;t++}c()};if(e.attr("class").indexOf("left")!=-1){r("previous")}else{r("next")}})})
//]]>
</script>
<link type='text/css' rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' />


<style>
/* Fanpages Ar1web */
#HTML7 { background: #EEF3F6; }
#fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #fafafa; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;}
#fanpages p{list-style:none;padding:0;margin:0 0 5px}
#fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;}
#fanpages a.a-fans:hover{background:#292929;color:#fff;    text-decoration: none!important;}
#fanpages a.a-fans p{color:#f1d657!important;display:inline-block}
#fanpages a.a-fans:hover p{color:#fff!important}
#fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center}
#ar1web-fbtw,#ar1web-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}
#ar1web-fbtw-msg:before{content:"تابعنا عبر المواقع الاجتماعية";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}
#ar1web-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}
#ar1web-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative}
a.ar1web-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; }
#ar1web-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s}
#ar1web-fbtw ul li a.ar1web-fbtw-gp{float:left;background: #CE3838;
    border: 3px solid #e74c3c;}#ar1web-fbtw ul li a.ar1web-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;}
a.ar1web-fbtw-you:hover {background:#555!important;border-color:#414344!important}
#ar1web-fbtw ul li a:hover,a.ar1web-fbtw-you:hover{background:#555;border-color:#414344}
</style>
<div id="fanpages">
<a class="a-fans" href="https://www.facebook.com/arabe1web/" rel="nofollow" target="_blank" >صفحتنا على <p>الفيسبوك</p><span>https://fb.com/arbe1web/</span></a>
<div class="clear">
</div>
<div id="ar1web-fbtw">
<ul>
<li><a class="ar1web-fbtw-gp" href="http://plus.google.com/+iHus sam" rel="nofollow" target="_blank" title="">Google+</a></li>
<li><a class="ar1web-fbtw-tw" href="https://twitter.com/Hmar1web" rel="nofollow" target="_blank" >Twitter</a></li>
<li><a class="ar1web-fbtw-you" href="https://youtube.com/" rel="nofollow" target="_blank" >Youtube</a></li>
</ul></div>
<div id="ar1web-fbtw-msg">
</div></div>


<style>
.widget-content { overflow: hidden; }
#likeme ul li a.likeme-yt { background-color: #E62117; border-bottom: 4px solid #D01D14;float: left; }
#likeme-msg {font-family: 'Droid Arabic Naskh'; text-align: center; position: relative; padding: 0; margin: -10px 0; bottom: 10px; }#likeme { margin: 0 0; padding: 0; line-height: 1.3em; }#likeme-msg:before{content:" تابعنا عبر المواقع الإجتماعية";font-weight:bold;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}#likeme ul{padding: 0; text-align: center; width: 100%; position: relative; bottom: 25px;}#likeme ul li{display:inline-block;margin:40px 0 0;position:relative;width: 32%;}#likeme ul li a{display:inline-block;color:#fff;padding:11px 0;font-size:15px;border-radius:2px!important;width:100%;}#likeme ul li a.likeme-gp{background-color:#f65543;border-bottom:4px solid #e13522;margin-right:4px;float:left}#likeme ul li a.likeme-tw{background-color:#4fc4f6;border-bottom:4px solid #35aadc;float:right}
</style>

<div id="fan-go">
<div class="fb-page" data-href="https://www.facebook.com/arabe1web" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"></div>
<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/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
<div class="clear"></div>
<div id="likeme">
<ul>
<li><a class="likeme-gp" href="https://plus.google.com/u/0/+iHussam" target="_blank" rel="nofollow">Google+</a></li>
<li><a class="likeme-tw" href="http://twitter.com/"  target="_blank" rel="nofollow">Twitter</a></li>
<li><a class="likeme-yt" href="http://youtube.com"  target="_blank" rel="nofollow">Youtube</a></li>
</ul></div>
<div id="likeme-msg">
</div>
تخصيص الإضافتين :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
ملحوظة:

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

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

  1. إضافات راقة دائماً تبرهنا اخي حسام اشكرك .

    ردحذف
  2. السلام عليكم تدوينة رائعة واضافات راقية كما عودتنا شكرا لدي طلب اتمنى ان تعطيني كود صندوق html الذي تضع اكواد الإضافات وشكرا اخي

    ردحذف
  3. انتا ممتاز اخي حسام ذائما تبهر الكل

    ردحذف
  4. شكرا أخي حسام على كل ما تبدله من جهد في هذه المدونة :)

    ردحذف
  5. لكم مني خالص تحياتي أشكركم على مروركم

    ردحذف
  6. هل ممكن اغير الخط اللي في الاسم

    ردحذف
  7. غير معرف2/14/2016

    أخى انا أريد تغيير أبعاد الإضافة الأخير (تابعنا عبر المواقع الإجتماعية) لتتناسب مع مدونتى وهذا هو الرابط أرجوا الرد بسرعة بو سمحت
    http://modawanaty16.blogspot.com

    ردحذف
    الردود
    1. لا توجد مشكلة بالمقاس حسبما عاينت فقط صندوق الفيسبوك متخفي قليلا اضف الكود التالي تحت <style
      .widget-content { overflow: visible!important; }

      حذف
    2. غير معرف2/16/2016

      شكراً لك تم حل المشكلة

      حذف
  8. يا اخى انتا عالمى والله تستاهل كل خير

    ردحذف
  9. هل من حل أخي..
    https://lh3.googleusercontent.com/-dj2gTNOLddg/VvhN_lKUChI/AAAAAAAAB08/ajAi6zgQwhIWM6CZl7JssNWS_CCKqKsywCCo/s354-Ic42/ScreenShot_20160327221629.png

    ردحذف
    الردود
    1. اترك رابط الموقع المستعمل به الإضافة لو سمحت

      حذف
  10. وانا نفس المشكله عند هشام :(

    ردحذف
  11. انا عندما اقوم بمعاينة المدونة تختفي اي جانب الشاشة اليمين
    وعندما اقوم باعادة تحميل تظهر

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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