‏إظهار الرسائل ذات التسميات اكواد و اضافات. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اكواد و اضافات. إظهار كافة الرسائل

حصرياً قالب Lycoris النسخة الرابعة معربة


حصرياً قالب Lycoris النسخة الرابعة معربة
كما عودتنا المصممة  Arlina فاجأتنا هذه المرة بتحديث قالب Lycoris و قد أتى هذه المرة بشكل رائع وجذاب و مازال محافظاً على سحره
القالب مميز لا شك في هذا قامت المصممة هذه الفمرة بتغيير مظهر عرض التدوينات بالصفحة الرئيسية ليأخذ مظهراً جذاباً و أنيقا لم نشهد مثله من قبل

الواجهة الرئيسية


واجهة المواضيع



مميزات القالب

  1. قالب متجاوب
  2. تدوينات Grid
  3. سيو مدعم
  4. تصميم مسطح
  5. صفحة 404 
  6. صفحة الأرشيف 
  7. سلايدر بالسيدبار
  8. صندوق النشرة البريدية
  9. قائمة مثبتة
  10. قوائم منسدلة
  11. محرك بحث متطور
  12. أيقونات الشبكات الإجتماعية
  13. تعريف الكاتب
  14. إعلانات متجاوبة
  15. موضوع عشوائي
والمزيد ..........




أتمنى أن ينال القالب استحسانكم
ولا تحرمونا من تعليقاتكم المشجعة

إضافة صندوق التنبيهات CSS و JQuery


إضافة صندوق التنبيهات CSS و JQuery
السلام عليكم و رحمة الله وبركاتو
في هذه التدوينة اقدم لكم إضافة يبحث عنها الكثير من المدونين و خاصة من يقومون بتعريب القوالب أو تصميمها
الإضافة هي عبار عن صندوق شبه مخفي يظهر بشكل كامل عند عند الضغط على عبارة "تحميل القالب"  أو  " ملاحظة هامة" 
أترككم مع رابط لمعاينة الإضافة



لإضافة الأداة توجه الى تخطيط إضافة آداة جديدة اختر أداة  HTML/JavaScript  
وقم بوضع الكود التالي داخلها
 <style type='text/css'>
    .box-a3pbox{
    position:relative;
    width:256px;
    height:auto;
    position:fixed;
    bottom:0;
    left:60px;
    
}
.tombolbox-a3p{
    text-align:center;
    text-decoration:none;
    width:240px;
    height:auto;
    background:#555;
    padding:5px 5px 15px;
    display:none;
    border: 3px solid #F84D4D;
}
.box-a3p{
    background:#fff;
    border:0;
    margin:0 auto;
    padding:5px 18px;
    font-size:18px;
    font-weight:700;
    color:#333;
    text-align:center;
    display:inline-block;
    border-radius:3px;
    border: 2px solid #F84D4D;
    transition:background-color 0.6s ease-out 0.6s;
}
.box-a3p:hover{
    background:#F84D4D;

}
.box-a3pheader{
    background:#F84D4D;
    border-radius:3px 3px 0 0;
    margin:0 auto;
    padding:8px 23px;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-align:center;
    display:block;
    cursor:pointer;
}
.tombolbox-a3p a{
    text-decoration:none;
}
.tombolbox-a3p p{
    color:#ddd;
    font-size:14px;
    margin:5px 0 10px;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
jQuery(document).ready(function($) {
    $(".box-a3pheader").click(function() {
        $(".tombolbox-a3p").slideToggle(500);
    });
});
});//]]>  

</script>



  <div class="box-a3pbox">
<span class="box-a3pheader"> تحميل القالب </span>
<div class="tombolbox-a3p">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى<br/>
        </p>
    <a href="http://arabic3professional.blogspot.com/" title="تحميل القالب" target="_blank">
    <span class="box-a3p">تحميل القالب</span></a>
</div>
    </div> 


استبدل ماهو باللون الأحمر بالرابط الذي تريد
وماهو باللون الأزرق بالكلمات التي تريد

أتمنى ان تكون الإضافة قد نالت استحسانكم
ألقاكم في تدوينة أخرى

إضافة أزرار المشاركة عائمة 2015

إضافة أزرار المشاركة عائمة. جديد!!!!
إضافة أزرار المشاركة عائمة. جديد!!!!
السلام عليكم ورحمة الله وبركاتو
أقدم لكم في هذه التدوينة  ازرار المشاركة عائمة بتأثرات جديدة و حصرية

المعاينات

معاينة الأضافة على مدونة
 معاينة الأضافة بالجهة اليمنى   معاينة الأضافة بالجهة اليسرى

كيفية إضافة الأداة
الكود الخاص بلأيقونات إذا كان موجود لديك لا داعي لإضافته
ابحث عن الوسم </head> و أضف قبلة/فوقه الكود التالي

 <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> 


ابحث عن الكود التالي <data:post.body/> ستجده مكرر عدة مرات الاخير هو المقصود
ألصق الكود التالي بعده/اسفله

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js?publisherid=100595159044200768359'></script>

<div class="shareclick">
     <ul> 
        <li class="main" title="شاركها الأن">
         <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
         </li> 
        <li class="main2" title="شاركها الأن">
            <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
        </li>
        <li class="fb"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='شارك عبر فيسبوك'>
            <span class="fa-stack fa-lg" title='شارك عبر فيسبوك'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="pr">
        <a href='javascript:print(document)' title='طباعة الصفحة'>
<span class="fa-stack fa-lg" title='طباعة الصفحة'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-print fa-stack-1x fa-inverse"></i>
</span></a>
        </li> 
        <li class="tw"><a expr:href='"http://twitter.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='شارك عبر تويتر'>
            <span class="fa-stack fa-lg" title='شلرك عبر تويتر'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="gp"><a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='شارك عبر جوجل بلس'>
            <span class="fa-stack fa-lg" title='شارك عبر جوجل بلس'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
         <li class="gp2"><span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  </li>
    </ul> 
</div>
</b:if>     

لإضافتها على اليمين أستعمل الأكواد التالية
ابحث عن الوسم ]]></b:skin> و ألصق فوقه/قبله الكود التالي

 /* Css Sharing Button Jquery */
.shareclick{margin:0;padding:0;text-align:center;position:fixed;bottom:40px;right:10px;z-index:100000}
.shareclick ul{list-style:none;color:#555;text-align:center}
.shareclick ul a{color:#555}
.shareclick ul li{list-style:none;transition:all .3s ease-in-out}
.shareclick ul li.main,.shareclick ul li.main2{position:absolute;top:0;right:0;z-index:2;color:#181818!important;cursor:pointer;font-size:18px}
.shareclick ul li.main2{display:none}
.shareclick ul li a:hover,.shareclick ul li.main:hover,.shareclick ul li.main2:hover{color:#aaa!important;text-decoration:none}
.shareclick ul li.fb,.shareclick ul li.tw,.shareclick ul li.gp,.shareclick ul li.pr{position:absolute;top:0;right:0;opacity:0;z-index:1;transition:all .3s ease-in-out;font-size:18px}
.shareclick ul li.gp2{position:absolute;top:13px;right:0;opacity:0;z-index:1;transition:all .3s ease-in-out}
.shareclick:hover ul li.fb{color:#324b81 !important}
.shareclick:hover ul li.tw{color:#01a7de !important}
.shareclick:hover ul li.gp{color:#ba3227 !important}
.shareclick ul li.fb a{color:#324b81 !important}
.shareclick ul li.tw a{color:#01a7de !important}
.shareclick ul li.gp a{color:#ba3227 !important} 


ابحث عن الوسم </body> وألصق فوقه/قبله الكود التالي
 <script type='text/javascript'>
//<![CDATA[
$(function(){$(".shareclick ul li.main").click(function(){$(".shareclick ul li.main").hide();$(".shareclick ul li.main2").show();$(".shareclick:hover ul li.fb").css({right:"220px",opacity:"1"});$(".shareclick:hover ul li.tw").css({right:"175px",opacity:"1"});$(".shareclick:hover ul li.gp").css({right:"120px",opacity:"1"});$(".shareclick:hover ul li.pr").css({right:"55px",opacity:"1"});$(".shareclick:hover ul li.gp2").css({right:"265px",opacity:"1"})});$(".shareclick ul li.main2").click(function(){$(".shareclick ul li.main").show();$(".shareclick ul li.main2").hide();$(".shareclick:hover ul li.fb,.shareclick:hover ul li.tw,.shareclick:hover ul li.gp,.shareclick:hover ul li.pr,.shareclick:hover ul li.gp2").css({right:"0",opacity:"0"})})});
//]]>
</script>

لإضافتها على اليسار استعمل الأكواد التالية
ابحث عن الوسم ]]></b:skin> و ألصق فوقه/قبله الكود التالي

 /* Css Sharing Button Jquery */
.shareclick{margin:0;padding:0;text-align:center;position:fixed;bottom:40px;left:10px;z-index:100000}
.shareclick ul{list-style:none;color:#555;text-align:center}
.shareclick ul a{color:#555}
.shareclick ul li{list-style:none;transition:all .3s ease-in-out}
.shareclick ul li.main,.shareclick ul li.main2{position:absolute;top:0;left:0;z-index:2;color:#181818!important;cursor:pointer;font-size:18px}
.shareclick ul li.main2{display:none}
.shareclick ul li a:hover,.shareclick ul li.main:hover,.shareclick ul li.main2:hover{color:#aaa!important;text-decoration:none}
.shareclick ul li.fb,.shareclick ul li.tw,.shareclick ul li.gp,.shareclick ul li.pr{position:absolute;top:0;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out;font-size:18px}
.shareclick ul li.gp2{position:absolute;top:13px;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out}
.shareclick:hover ul li.fb{color:#324b81 !important}
.shareclick:hover ul li.tw{color:#01a7de !important}
.shareclick:hover ul li.gp{color:#ba3227 !important}
.shareclick ul li.fb a{color:#324b81 !important}
.shareclick ul li.tw a{color:#01a7de !important}
.shareclick ul li.gp a{color:#ba3227 !important} 


ابحث عن الوسم </body> وألصق فوقه/قبله الكود التالي

 <script type='text/javascript'>
//<![CDATA[
$(function(){$(".shareclick ul li.main").click(function(){$(".shareclick ul li.main").hide();$(".shareclick ul li.main2").show();$(".shareclick:hover ul li.fb").css({left:"55px",opacity:"1"});$(".shareclick:hover ul li.tw").css({left:"100px",opacity:"1"});$(".shareclick:hover ul li.gp").css({left:"155px",opacity:"1"});$(".shareclick:hover ul li.pr").css({left:"220px",opacity:"1"});$(".shareclick:hover ul li.gp2").css({left:"280px",opacity:"1"})});$(".shareclick ul li.main2").click(function(){$(".shareclick ul li.main").show();$(".shareclick ul li.main2").hide();$(".shareclick:hover ul li.fb,.shareclick:hover ul li.tw,.shareclick:hover ul li.gp,.shareclick:hover ul li.pr,.shareclick:hover ul li.gp2").css({left:"0",opacity:"0"})})});
//]]>
</script> 

أتمنى أن تكون الإضافة قد أعجبتكم 
ألقاكم في تدوينة أخرى
في أمان الله

إضافة صندوق Lightbox لفتح الصور

إضافة صندوق Lightbox لفتح الصور
السلام عليكم ورحمة الله و بركاتو
في هذه الأيام شهدنا تطوراً كبيراً على منصة بلوجر التي انتشرت أكثر و أكثر في أوساط المدونين وخاصة المبتدئين , نظراً لسهولة التخصيص و غيرها من المميزات ,على العموم هذا ليس موضوعنا في هذه التدوينة التي سأقدم فيها نموذج رائع ومميز لتأثيرات صندوق فتح الصور الذي يعتمد على مجموعة من أكود CSS  و JQuery التي تعطي مدونتك شكلا جذاباً و جميلاً.
نمر لرابط  المعاينة  لتوضيح الأمر أكثر


كيفية إضافة الأداة الى مدونتك
اتبع الخطوات التالية
اتجه الى قالب ثم تحرير HTML 
قم بالبحث عن الوسم  التالي </head> و ألصق فوقه/قبله الكود التالي

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/> 

الكود السابق هو كود مكتبة إذا كنت تتوفر عليه فلا داعي لإضافته

ابحث الان عن الوسم ]]></b:skin> وألصق فوقه/قبله الكود التالي

 /* AUTO LIGHTBOX IMAGE BLOGGER POST by arabic3professional.blogspot.com
=================================================== */
.lighter,.lighter *{-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
.lighter{position:fixed;top:0;bottom:0;left:0;right:0;z-index:400000;opacity:1}
.lighter.fade{opacity:0}
.lighter.fade .lighter-container{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}
.lighter img{width:100%;height:100%}
.lighter .lighter-overlay{background:rgba(0,0,0,0.5);height:100%;width:100%}
.lighter .lighter-container{background:white;position:absolute;z-index:400000;top:50%;left:50%;right:50%;bottom:50%;box-shadow:0 2px 8px rgba(0,0,0,0.5)}
.lighter .lighter-container .lighter-close{top: 0;right: 0;width: 30px;height: 30px;margin: -15px;line-height: 30px;font-size: 16pt;font-family: Helvetica,Arial,serif;}
.lighter .lighter-container .lighter-next{display:none;right:40px;top:50%;width:40px;height:40px;margin:-20px 0;line-height:34px;font-size:32pt;font-family:Times,serif}
.lighter .lighter-container .lighter-prev{display:none;left:40px;top:50%;width:40px;height:40px;margin:-20px;line-height:24pt;font-size:34px;font-family:Times,serif}
.lighter .lighter-container .lighter-next,.lighter .lighter-container .lighter-prev,.lighter .lighter-container .lighter-close{cursor:pointer;position:absolute;z-index:800000;text-align:center;border-radius:40px;color:rgba(255,255,255,0.8);background:rgba(0,0,0,0.2);}
.lighter .lighter-container .lighter-next:hover,.lighter .lighter-container .lighter-prev:hover,.lighter .lighter-container .lighter-close:hover{color:white;text-decoration: none;background:rgba(0,0,0,0.6)}
.lighter .lighter-container .lighter-next:active,.lighter .lighter-container .lighter-prev:active,.lighter .lighter-container .lighter-close:active{color:white;background:rgba(0,0,0,0.6)}
/* ===================================================
END AUTO LIGHTBOX IMAGE BLOGGER POST by arabic3professional.blogspot.com */
 

قم بالبحث عن الوسم </body> وألصق فوقه/قبله الكود التالي

 <script>
// tambahan code Javascript agar Auto Lightbox pada area .entry-content
$(&quot;.entry-content img&quot;).parents(&quot;a&quot;).on(&quot;click&quot;,function(a){a.preventDefault();a.stopPropagation();return $(this).lighter()});

// jQuery Lighter Plugin
(function(){var g,h,e,f=function(b,a){return function(){return b.apply(a,arguments)}};g=jQuery;h=(function(){function a(){}a.transitions={webkitTransition:&quot;webkitTransitionEnd&quot;,mozTransition:&quot;mozTransitionEnd&quot;,oTransition:&quot;oTransitionEnd&quot;,transition:&quot;transitionend&quot;};a.transition=function(k){var c,l,d,b;c=k[0];b=this.transitions;for(d in b){l=b[d];if(c.style[d]!=null){return l}}};a.execute=function(d,b){var c;c=this.transition(d);if(c!=null){return d.one(c,b)}else{return b()}};return a})();e=(function(){a.settings={padding:40,dimensions:{width:960,height:540},template:&quot;<div class='lighter fade'>\n  <div class='lighter-container'>\n    <span class='lighter-content'/>\n    <a class='lighter-close'>&#215;</a>\n    <a class='lighter-prev'>&#8249;</a>\n    <a class='lighter-next'>&#8250;</a>\n  </div>\n  <div class='lighter-overlay'/>\n</div>&quot;};a.lighter=function(c,d){var b;if(d==null){d={}}b=c.data(&quot;_lighter&quot;);if(!b){b=new a(c,d);c.data(&quot;_lighter&quot;,b)}return b};a.prototype.$=function(b){return this.$lighter.find(b)};function a(c,b){if(b==null){b={}}this.show=f(this.show,this);this.hide=f(this.hide,this);this.toggle=f(this.toggle,this);this.keyup=f(this.keyup,this);this.align=f(this.align,this);this.resize=f(this.resize,this);this.process=f(this.process,this);this.href=f(this.href,this);this.type=f(this.type,this);this.image=f(this.image,this);this.prev=f(this.prev,this);this.next=f(this.next,this);this.close=f(this.close,this);this.$=f(this.$,this);this.$el=c;if((this.$el.data(&quot;width&quot;)!=null)&amp;&amp;(this.$el.data(&quot;height&quot;)!=null)){if(b.dimensions==null){b.dimensions={width:this.$el.data(&quot;width&quot;),height:this.$el.data(&quot;height&quot;)}}}this.settings=g.extend({},a.settings,b);this.$lighter=g(this.settings.template);this.$overlay=this.$(&quot;.lighter-overlay&quot;);this.$content=this.$(&quot;.lighter-content&quot;);this.$container=this.$(&quot;.lighter-container&quot;);this.$close=this.$(&quot;.lighter-close&quot;);this.$prev=this.$(&quot;.lighter-prev&quot;);this.$next=this.$(&quot;.lighter-next&quot;);this.$body=this.$(&quot;.lighter-body&quot;);this.width=this.settings.dimensions.width;this.height=this.settings.dimensions.height;this.align();this.process()}a.prototype.close=function(b){if(b!=null){b.preventDefault()}if(b!=null){b.stopPropagation()}return this.hide()};a.prototype.next=function(b){if(b!=null){b.preventDefault()}return b!=null?b.stopPropagation():void 0};a.prototype.prev=function(){if(typeof event!==&quot;undefined&quot;&amp;&amp;event!==null){event.preventDefault()}return typeof event!==&quot;undefined&quot;&amp;&amp;event!==null?event.stopPropagation():void 0};a.prototype.image=function(b){return b.match(/\.(jpeg|jpg|jpe|gif|png|bmp)$/i)};a.prototype.type=function(b){if(b==null){b=this.href()}return this.settings.type||(this.image(b)?&quot;image&quot;:void 0)};a.prototype.href=function(){return this.$el.attr(&quot;href&quot;)};a.prototype.process=function(){var j,c,d,b=this;d=this.type(j=this.href());this.$content.html((function(){switch(d){case&quot;image&quot;:return g(&quot;<img/>&quot;).attr({src:j});default:return g(j)}})());switch(d){case&quot;image&quot;:c=new Image();c.src=j;return c.onload=function(){return b.resize(c.width,c.height)}}};a.prototype.resize=function(b,c){this.width=b;this.height=c;return this.align()};a.prototype.align=function(){var d,b,c;b=Math.max((d=this.height)/(g(window).height()-this.settings.padding),(c=this.width)/(g(window).width()-this.settings.padding));if(b&gt;1){d=Math.round(d/b)}if(b&gt;1){c=Math.round(c/b)}return this.$container.css({height:d,width:c,margin:&quot;-&quot;+(d/2)+&quot;px -&quot;+(c/2)+&quot;px&quot;})};a.prototype.keyup=function(b){if(b.target.form!=null){return}if(b.which===27){this.close()}if(b.which===37){this.prev()}if(b.which===39){return this.next()}};a.prototype.toggle=function(b){if(b==null){b=&quot;on&quot;}g(window)[b](&quot;resize&quot;,this.align);g(document)[b](&quot;keyup&quot;,this.keyup);this.$overlay[b](&quot;click&quot;,this.close);this.$close[b](&quot;click&quot;,this.close);this.$next[b](&quot;click&quot;,this.next);return this.$prev[b](&quot;click&quot;,this.prev)};a.prototype.hide=function(){var d,b,c=this;d=function(){return c.toggle(&quot;off&quot;)};b=function(){return c.$lighter.remove()};d();this.$lighter.removeClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.addClass(&quot;fade&quot;);return h.execute(this.$container,b)};a.prototype.show=function(){var d,b,c=this;b=function(){return c.toggle(&quot;on&quot;)};d=function(){return g(document.body).append(c.$lighter)};d();this.$lighter.addClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.removeClass(&quot;fade&quot;);return h.execute(this.$container,b)};return a})();g.fn.extend({lighter:function(a){if(a==null){a={}}return this.each(function(){var b,c,d;b=g(this);d=g.extend({},g.fn.lighter.defaults,typeof a===&quot;object&quot;&amp;&amp;a);c=typeof a===&quot;string&quot;?a:a.action;if(c==null){c=&quot;show&quot;}return e.lighter(b,d)[c]()})}})}).call(this);
</script>

 

و أخيراً قم بتعديل إعدادات مدونتك كما في الصورة


أتمنى أن أكون قد وفقت في طرح الإضافة لكم
في أمان الله

إضافة صندوق اقتباس الأكواد بمزايا عديدة


إضافة صندوق اقتباس الأكواد بمزايا عديدة
من منا لا يقوم باقتباس الأكواد في معظم مواضيع مدونته و غالباً نقوم بأقتباسها عبر ميزة الأقتباس الإفتراضية أو بعد تعديلها قليلاً بحث تقوم بوظيفة اقتباس الكود فقط  ولهاذا أتيتكم اليوم بإضافة ستزيد من مدوناتكم جمالية و سهولة في التصفح
إضافة لا تتميز بجماليتها فقط بل بخصائصها الرائعة
من مميزات صندوق الإقتباس: ميزة تحديد الكود كاملاً بنقرتين ,ميزة ترقيم الاكواد ,تمييز و تلوين الاكواد حسب نوعها.

معاينة الأضافة كيفية إضافة الاداة إلى مدونتك
ابحث عن الوسم </head> و أضف فوقه/قبله  الكود التالي

<style>
/* CSS Prism Syntax Highlighter A3P*/
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
    text-align: left;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'دبل كليك لتحديد الكل';';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
    font-family: Electrolize,ge_ss_threeregular;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}
</style>


الأن قم بالبحث عن الوسم </body> و ألصق فوقه/قبله الأكواد التالي

الكود المسؤول عن ميزة تحديد الأقتباس بنقرتين

 <script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 


الكود المسؤول عن ميزة ترقيم الأقتباس

 <script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script> 


الكود المسؤول عن ميزة تلوين الأقتباس

 <script src='https://a3p-mohammadalhor.googlecode.com/svn/arabic3professional/prism-A3P.js' type='text/javascript'/> 


كيفية استخدام الأداة في المواضيع
ألصق أحد الأكودا التالية بحسب نوع الكود و استبدل مابين النقط بالكود الذي تريد تظمينه في الأداة

 <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre> 


أتمنى ان أكون قد وفقت في طرح الموضوع لكم
ألقاكم في تدوينة جديدة و موضوع جديد
في امان الله

قالب Mega Mag الإحترافي معرب


قالب MegaMag معرب
قالب MegaMag معرب
قالب  Mega Mag  الإحترافي معرب

صورة  كاملة للقالب


مميزات القالب



  1. يدعم جميع مقاسات الشاشة
  2. مزود بأكواد السيو 100%
  3. إعلانات متجاوبة
  4. صفحة الخطأ 404
  5. تحميل المواضيع بـ jQuery
  6. 3 سلايدرات
  7. أزارا المواقع الإجتماعية
  8. شريط الأخبار 
  9. قائمة MegaMenu 
  10. يدعم مختلف المتصفحات
  11. سهولة تغيير الألوان
  12. عدة أقسام مختلفة
      و المزيد من المميزات الرائعة 

تحميل
  باسوورد فك الضغط : template-3rab 

طريقة تركيب الإضافات

1 الإضافة الخاصة بالصور


ابحث في القالب عن مقالات 
و استبدلها بالتسمية الخاصة بك

باقي الإضافات سنعدلها من تخطيط


1. نحرر اداة مثل قسم 1 
2. ضع عنوان إذا أردت / في الخانة الكبيرة ضع اسم لتسمية المتواجدة بمدونتك

* كل اداة مسمات بـ قسم في التخطيط حررها وضع بها  تسمية


* اداة اخر الأخبار يمكنك إبقائها بدون تسمية ستعمل تلقائيا حسب المواضيع الجديدة
* يمكنك أيضا أن تختار تسمية لمواضيع تريدها / بتحرير الأداة ثم ضع التسمية


* إضافة كود صفحة الخطأ

1. من الإعدادات توجه لــ تفضيلات البحث >>  ثم انقر على خيار [ لم يتم العثور على الصفحة المخصصة ]

2. ضع بداخل الخانة الكود التالي


<style type="text/css">
#slider-wrapper,#sidebar-wrapper,#sidebar-wrapper2,#carousel,#slide-widget2,#flex-slider,#slide-widget,#x-slide,#x-slide2,#x-slide3, #top-tab, #switch-left,#news-wrapper,#tagpost-wrapper,#sidebar-wrapper3,#sidebar-wrapper4,#tag-wid,#tag-wid2,#tag-wid3 {
display:none;
}

#main-wrapper {
overflow:hidden;
width:100%;
margin-left:0;
float:none;
margin-right:0;
}

#error-404 {
margin:50px 20px 40px 320px;
autotext-align:center;
transition:all .8s ease 0;
width:380px;
font-family:oswald, Arial, Verdana, sans-serif;
}

#error-404 span {
color:#f39c12;
font-size:160px;
margin-left: -600px;
font-weight:bold;
}

.large-heading {
font-size:60px;
line-height:1.2em;
}

.light-heading {
font-weight:400;
}

.status-msg-bg {
background-color:transparent;
}

#outer-wrapper {
min-height:0;
}

.status-msg-border {
border:0 none;
background-image:none;
height:100%;
}

#sidebar-wrapper,#sidebar-wrapper2 {
width:100%;
float:none;
margin-left:0;
}

.status-msg-wrap,.status-msg-body {
height:100%;
}
</style>
 <div id="error-404"> <span>404</span>
</div>
<h1 class="large-heading" style="text-align: center;">الصفحة غير موجودة. :/</h1>
<h2 class="light-heading" style="text-align: center;"> عزيزي أظن أنك تائه .. للأسف الصفحة غير موجودة.</h2>






* إضافة صفحة الأرشيف 



1. توجه إلى الصفحات / اضف صفحة جديدة / انتقل إلى وضع Html



2. ضع الكود التالي بها



<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://arabic3professional.blogspot.com/", //
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>



*غير http://arabic3professional.blogspot.com/

برابط مدونتك




* التعديل على القوائم والشبكات الإجتماعية



1.  التعديل على القائمة الأولى في القالب ابحث عن nav2 أو أعمالنا وستجد الكلمات غيرهم



2. التعديل على الشبكات الإجتماعية ابحث عن :
 facebookBtn smGlobalBtn
 ستجد الروابط هكذا # غيرهم



3. التعديل على القائمة الثانية  ابحث عن : قائمه منسدله ستجد باقي الكلمات والصور غيرهم بخاصتك 




* تفعيل ظهور إصدار للهواتف وغيرها من الأجهزة





1. توجه لقالب بجانبها إضغط على أيقونة الإعدادات وطبق ما في الصورة أعلاه






* التعديل على اللون / الخلفية



1. من قالب اختر تخصيص ثم خلفية واختر ما يناسبك شاهد الصورة أعلاه



2. بعد الإختيار إضغط على تطبيق على المدونة بالزر أعلاه



حقوق التعريب و التطوير محفوظة لــِعرب ويب
الموضوع الأصلي  : قالب MEGA MAG معرب

قالب Minima Colored 3 معرب

قالب Minima Colored 3 معرب
السلام عليكم ورحمة الله وبركاتو
أقدم لكم في هذه التدوينة  قالب Minima Colored 3 الإحترافي معرب لمنصة بلوجر
القالب مميز و مليئ بالمفاجئات الرائعة التي ستكتشفونها بعد معاينة القالب مباشرة

صورة للصفحة الرئيسية

صورة لصفحة التدوينات

مميزات القالب
  1. تصميم متجاوب
  2. سيو مدعوم
  3. عمودين
  4. إعلانات متجاوبة
  5. مواضيع ذات صلة
  6. أزرار المشاركة
  7. قائمة منسدلة احترافية
  8. صندوق بحث متطور
  9. ترقيم الصفحات
  10. زر الصعود لأعلى
  11. تعريف الكاتب

و المزيد ...




أتمنى أن ينال القالب إعجابكم
إذا واجهتك أي مشكلة باب التعليقات مفتوح للجميع

حصرياً قالب Minima Responsive الإحترافي معرب





حصرياً قالب Minima Responsive الإحترافي معرب
حصرياً قالب Minima Responsive الإحترافي معرب
السلام عليكم و رحمة الله وبركاتو
اقدم اليوم أحد أكثر القوالب بساطة و احترافية
قالب Minima Responsive الإحترافي معرب
قد عرضت لكم في وقت سابق على مدونتي قالب Minima الأحترافي معرب و اليوم اعرض القالب الثاني شبيه القالب الأول

صورة للصفحة الرئيسية
صورة قالب Minima Responsive
صورة للمواضيع
صورة قالب Minima Responsive

بعض من مميزات القالب

  1. قالب خفيف بعمودين
  2. متوافق مع جميع قياسات الشاشات
  3. قائمة منسدلة احترافية
  4. سيو وأرشفة قوية
  5. صفحة خطأ 404
  6. ميزة اخر التعليقات على شكل 'جرس'
  7. صندوق تعليقات مميز'اضافة الإبتسامات و محول الاكواد,و تمييز تعليق الكاتب'
  8. صندوق بحث متطور

و الكثير من المميزات الأخرى اكتشفها بفسك



تعديل و تخصيص القالب

1.تخصيص أكواد الميتا تاج
ابحث عن هذا الوسم


 <!-- [ اكواد الميتا تاج ] -->

ستجده مكرر مرتين عدل الأكواد اسفله بمايناسبك
2.لتعديل القائمة العلوية
ابحث عن هذا الوسم

<li><a href='/' title='الرئيسية'>الرئيسية</a></li>
ستجد باقي الأقسام اسفله عدلها بما يناسبك
3.لتخصيص أزرار مواقع التواصل الإجتماعي
ابحث عن هذا الوسم
<!-- [ أزرار مواقع التواصل ] -->
ستجد الأكواد اسفلة غير # بالروابط خاصتك
4.لتعديل القائمة الثانية
ابحث عن هذا الوسم

<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
ستجد باقي الأقسام أسفله عدلها بما يناسبك

5.لتخصيص جرس أخر التعليقات
ابحث عن هذا الرابط

http://minima-re-ar.blogspot.com/
 ستجده مكرر مرتين , استبدله برابط مدونتك

6.لإضافة صندوق الإشتراك عبر البريد الإلكتروني
أضف هذا الكود في اداة HTML/JavaScript  من تخطيط
<div id='subscribe-box'>
              <div class='title'>
           
              </div>
                 <p>اشتراك عبر البريد الإلكتروني.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=rLqALt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;الإسم&quot;;}' onfocus='if (this.value == &quot;الإسم&quot;) {this.value = &quot;&quot;;}' value='الإسم'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البريد الإلكتروني&quot;;}' onfocus='if (this.value == &quot;البريد الإلكتروني&quot;) {this.value = &quot;&quot;;}' value='البريد الإلكتروني'/>
<input name='uri' type='hidden' value='rLqALt'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='اشتراك'/>
              </form>
             </div> </div>
قم بتغيير rLqALt   إلى معرف مدونتك في FeedBurner 
7.إضافة الفهرس
هناك 3 نماذج للفهرس يمكنك معاينتها في القالب
أضف أحد الاكواد التالية في صفحة ثابتة / وضع HTML
النموذج الأول
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<script src="https://aisuka-project.googlecode.com/svn/sitemap.js" type="text/javascript"></script><script src="http://minima-re-ar.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script><br />
<div style="display: none;">
<a href="http://minima-re-ar.blogspot.com/">قالب تجريبي</a></div>
<style type="text/css">.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 {background:#fff;border-bottom:1px solid #fafafa;color:#444;font-size: 20px;margin: 0 0 10px 2px;padding: 0 0 10px;} .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a {background:#fff;color:#444;display:block;border-bottom:3px solid #f0f0f0; font-size: 14px; line-height: normal; outline:none;padding:10px 15px;transition:all .25s ease-in-out;} .ct-columns-3 p a:hover {background:#02a4e5;color:#fff;border-bottom:3px solid #0392cb;} .ct-columns-3 p span{color:#fff!important;font-style:normal!important;font-weight:normal!important;} @media screen and (max-width: 768px){ .ct-columns-3 {-moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style><br /></div>
استبدل http://minima-re-ar.blogspot.com/ برابط مدونتك
و قالب تجريبي بإسم مدونتك
النموذج الثاني
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<header id="resultDesc"></header><br /><br />
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://googledrive.com/host/0B5NxkB895DDIMDB3YnM0ZkFUVDg" type="text/javascript"></script></div>
لا تقم بتغيير أي شيء
النموذج الثالث
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div>
لا تقم بتغيير أي شيء

بعض الإعدادات المهمة
1.اعداد تجاوب الهاتف
 اتجه الى قالب>نمط الجوال>اظهارنموذج الجوال على أجهزة الجوال>مخصص
كما في الصورة
حصرياً قالب Minima Responsive الإحترافي معرب
2.اعداد صندوق فتح الصور المميز
اتجه الى اعدادات>مشاركة وتعليقات>عرض الصور في العرض المبسط>اختر لا
كما في الصورة
حصرياً قالب Minima Responsive الإحترافي معرب
و اي استفسار او سؤال ضع ما تريد في تعليق

شروط استخدام القالب
1.عدم استعمال القالب في أمور لا ترضي الله جل وعلا
2.عدم إزالة حقوق تصميم و تطوير القالب