22‏/12‏/2015

المكتبة الثالثة من أرقى الإضافات خاصة تكون عبارة عن زينة للموقع ولها فائدة في بعضها، المقصود من هذه التجميعة هو تقليص التدوينات بحيث بعض الإضافات لا تكون بتلك الأهمية الكبيرة ولا يمكننا أن نكتب تدوينة واحدة عليها لذلك نقوم بتجمعتها وفي نفس الوقت تختار ما تشاء من أول استعمال ومع سهولة التركيب.
الجزء الثاني : مكتبة بأرقى الإضافات الجزء الثاني
كما توضح الصورة لدينا : إضافة تعريف الكاتب توضع بالسيدبار وتقويم 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>
تخصيص الإضافتين :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
المكتبة الثالثة من أرقى الإضافات خاصة تكون عبارة عن زينة للموقع ولها فائدة في بعضها، المقصود من هذه التجميعة هو تقليص التدوينات بحيث بعض الإضافات لا تكون بتلك الأهمية الكبيرة ولا يمكننا أن نكتب تدوينة واحدة عليها لذلك نقوم بتجمعتها وفي نفس الوقت تختار ما تشاء من أول استعمال ومع سهولة التركيب.
الجزء الثاني : مكتبة بأرقى الإضافات الجزء الثاني
كما توضح الصورة لدينا : إضافة تعريف الكاتب توضع بالسيدبار وتقويم 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>
تخصيص الإضافتين :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
14 Blogger تعليقات
Disqus
14 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

لكم مني خالص تحياتي أشكركم على مروركم

المشرف
avatar

هل ممكن اغير الخط اللي في الاسم

المشرف
avatar

في أي إضافة بالضبط؟

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

يا اخى انتا عالمى والله تستاهل كل خير

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

وانا نفس المشكله عند هشام :(

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة