14‏/09‏/2016

قالب أدوات - إليكم قالب ادوات لا يحتاج للتعريف به اكثر لم يكن مقررا بأن ننشره لكن بما أن الطلب عليه كثر فلا يسعني إلا تلبيته، سأحاول أن ألخص لكم محتويات القالب مع أول نظرة ستلاحظ خلفية التحميل ثم صندوق تغيير الألوان الذي يتضمن عدة ألوان مختلفة ويمكن للزائر التحكم في تغيرها لكنها لا تدوم أي بمجرد الخروج من الموقع أو الدخول لتدوينة سيرجع للون الأصلي، كما يحتوي على 6 أقسام تشتغل بتسمية وقد اضفنا محرك بحث سريع فبمجرد ادخال كلمة البحث ستظهر لك النتائج بدون الولوج لصفحة وللتعرف على المميزات والإضافات كاملة إذهب الى يسار التدوينة

الواجهة كاملة



13‏/09‏/2016

مرحبا بكل مدون وعيد مبارك سعيد، سنتحدث اليوم عن اضافة صغيرة ومجدية للمدونة فإن أردت الإبتعاد عن الإضافات الكبيرة التي تخص صناديق الفيسبوك فهذه حتما ستفي بالغرض وهي لا تحتاج لوصف اكثر لذلك سأترككم مع المعاينة
شرح طريقة التركيب
1. من القالب ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
 
._1dro ._1drp {direction: rtl!important; } #open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;} .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;} .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }
2. ابحث عن </body> وضع الكود التالي فوقه
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='اغلاق'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/arabe1web' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farabe1web&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>

function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>
3. غير اسم صفحتنا arabe1web بخاصتك (متكرره مرتين)
خط Grand Theft Auto - على ما يبدو أن له وزن واحد وهو كذلك "BOLD" فإن كنت من محبي هذه اللعبة الشهيرة فتفضل وقم بإبداعك
خط سُكّر ـ خط ممزوج بالأحرف الأجنبية لينتج عنه خط عربي بثلاثة أوزان متاح للإستعمال المجاني على
خط ملهم - هو خط سيجعل تصميمك يعم بالأشكال وذلك من خلال وزنيه وشكله الفريد. يمكنكم البدء في تجربته عبر تحميله من الروابط بجانب

25‏/05‏/2016

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

شرح طريقة التركيب
1. من القالب ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;direction:rtl;overflow:hidden;background:#fefefe;text-align:right}
#ticker ul{direction:rtl;padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;direction:rtl;white-space:nowrap}
#ticker ul li img{float:right;direction:rtl;width:35px;height:35px;margin:5px 5px 5px 7px}
#ticker ul li h3{margin:0;direction:rtl;font:700 12px 'Noto Naskh Arabic',sans-serif}
#ticker ul li h3 a{color:#333;direction:rtl;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:700 12px 'Noto Naskh Arabic',sans-serif;line-height:20px!important;direction:rtl;color:#999}
2. ضع الكود التالي فوق </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by arlinadzgn
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="يناير",e[2]="فبراير",e[3]="مارس",e[4]="أبريل",e[5]="مايو",e[6]="يونيو",e[7]="يوليو",e[8]="أغسطس",e[9]="سبتمبر",e[10]="أكتوبر",e[11]="نوفمبر",e[12]="ديسمبر";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>
3. نأتي للمرحلة الأخيرة وهي تخص كود HTML الذي يُظهر الشريط يمكنك وضعه بأي مكان يناسبك تحت الهيدر فوق القائمة إلخ أو يمكنك تجربته بوضعه في أداة Html/Javascript إذا كانت المساحة متواجدة بالتخطيط
<div class='ticker-wrap' data-domain='www.ar1web.com'>
<div id='ticker'>
</div>
</div>
التعديلات
* في الكود الأخير غير www.ar1web.com برابط موقعك
* لتغيير لون البوردر فهو محدد بالبرتقالي في الكود الأول #3cc091 (قائمة الألوان)

11‏/05‏/2016

سنوافيكم اليوم باضافة لصندوق وسائل الاعلام الاجتماعية بشكل احترافي يجمع بين الأناقة والتأثيرات المختلفة، ستخدم موقعك بشكل كامل يشمل صورة (كوفر) وزر يرافقها بالإضافة الى الازرار الاجتماعية بما ان صورة التدوينة توضح الفكرة فلا ضرر من المعاينة الحية 😉
شرح طريقة التركيب
1. من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-ar1web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-ar1web-img{position:relative;max-height:140px;overflow:hidden}
.about-ar1web-img img {max-width:100%;width:100%;transition:all .6s;}
.about-ar1web-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-ar1web-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.about-ar1web-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-ar1web-float{text-align:center;display:table;width:100%;height:100%}
.about-ar1web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-ar1web-float:hover a{background:#fff; color: #444!important;}
.about-ar1web-float a i{font-weight:normal;margin-left:5px}
.about-ar1web-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px;    margin: 15px!important;}
.extender .about-ar1web-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-ar1web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-ar1web-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-ar1web-icon.fbl a{background:#3b5998}
.about-ar1web-icon.twitt a{background:#19bfe5}
.about-ar1web-icon.crcl a{background:#d64136}
.about-ar1web-icon.fbl a:hover,.about-ar1web-icon.twitt a:hover,.about-ar1web-icon.crcl a:hover{background:#313B42}
.extender .about-ar1web-icon:hover a,.extender .about-ar1web-icon a:hover{color:#fff;}
.about-ar1web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-ar1web-info p{margin:5px 0;font: 12px Droid Arabic Naskh;    color: #444;}
.about-ar1web-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-ar1web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-ar1web-info h4:before,.about-ar1web-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-ar1web-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-ar1web-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://1.bp.blogspot.com/-SgMP9usY17o/Vq1wQUX40FI/AAAAAAAAA5Q/OOnHGeHuOL4/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />

<div class="aboutfloat-img">
<span class="about-ar1web-float"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-ar1web-info">
<h4>
تابعنا جديد موقعنا</h4>
تميز بلا حدود</div>
<div class="about-ar1web-wrpicon">
<ul class="extender">
<li class="about-ar1web-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-ar1web-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-ar1web-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>
تخصيص الإضافة :
المحدد بالأحمر # يغير بالرابط
المحدد بالبرتقالي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة

28‏/03‏/2016

خلفيات التقويم الميلادي لعام 2016 مفتوح المصدر - قد نكون تأخرنا بعض الشيء في طرح هذه التدوينة، لكن بمجرد رؤيتها قررنا مشاركتها معكم في الحال❗ هناك 12 رسم متنوع مفتوح المصدر للتقويم الميلادي لعام 2016، مع ألوان وشخصيات مختلفة تصف طبيعة كل شهر على حدة، يمكنك استخدامها بمثابة تقويم فهي متوفرة بمقاسات متعددة من خلفية سطح المكتب أو حتى استخدام الرسوم في التصميمات الخاصة بك.



إن واجهتك مشكلة في التحميل من المصدر الرئيسي، هناك روابط مباشرة في الجانب 👈