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

11:39 ص

تفاصيل القالب

شارك العمل

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

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

هو تقليص التدوينات بحيث بعض الإضافات لا تكون بتلك الأهمية الكبيرة ولا يمكننا أن نكتب تدوينة واحدة عليها لذلك نقوم

بتجمعتها وفي نفس الوقت تختار ما تشاء من أول استعمال ومع سهولة التركيب.
الجزء الثاني : مكتبة بأرقى الإضافات الجزء الثاني
كما توضح الصورة لدينا : إضافة تعريف الكاتب توضع بالسيدبار وتقويم Calendar واخراً إضافتين للمتابعة عبر المواقع

الاجتماعية بشكلين... أظنك ذهبت للمعاينة مباشرة! بدون أن تقرأ هذه السطور

استمتع

معاينة

شرح طريقة التركيب

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

<style type='text/css'>
/* About Me */
.sidebar_about_author { height: 200px; }
.aboutpro-img:before { content: ''; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOfumgzOxoOPKOvpSk-_OayX1u_cH9rnLFKaRFoHI5PJE8DHvWziGwMCgx71Ii7nNrDvy_GnqrWJN888y1SIuE2o5BVpD84fqNexQDxCBEocI5ybne3kLXUiSd6Jk5NzR0s7l-wULxGluG/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAd2YgTuyTd61eKYnx8Swdevf2c25b9TpKGCykIgHucwg-bnDk8rfOs172-LccQwrusCfsAQ87UCk8bzxfLBrvmKOCNQOsS4QhJH37bIo8_0-tNmOwnPWTdiF98QczEt6cN95hP_8oIJga/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>

تخصيص الإضافتين :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية