Thursday, 28 February 2019

اضافة صندوق اكواد ملون بخمسة انماط في بلوجر




اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او syntax highlighter وهو الذي تضع فيه الاكواد سواء كانت HTML , CSS , JAVASCRIPT , PHP , C++ , XML .


خصائص الصندوق

  • يتوافر بخمسة انماط " اشكال " مختلفه ليتناسب مع لون المدونة فهناك اسود اذا كانت المدونة لون فاتح وابيض اذا كانت غامق ..
  • يتم تلوين الاكواد بحسب لغة البرمجه المستخدمه .
  • شكل مستجيب مع الشاشات
  • تم إنشاء الشفرة - بواسطة Google.
  • سهل الاستخدام.


شرح التركيب


توجة الي لوحة تحكم بلوجر > المظهر > تحرير HTML
ثم ضع هذا الكود فوق الوسم <body>

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

الآن يأتي دورك في اختيار اي نمط تود ان تركب


الشكل الاول


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 1 -->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>


الشكل الثاني


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 2 -->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>


الشكل الثالث


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 3 -->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>



الشكل الرابع


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 4 -->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>



الشكل الخامس


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 5 -->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>



بعد اختيار نمط

الخطوه الاخيره وهي استخدام الصندوق اثناء التدوين ، توجه للمشاركات وانشئ مشاركه
افتح تبويب HTML - الذي بجوار " تأليف "

ضع الكود التالي داخله


<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>



طريقة التعديل علي الكود واستخدامه



استبدل " YOUR CODE HERE " بالكود التي تريد وضعه فالصندوق ولكن يجب اولاً تحويل الكود
" استخدم محول اكواد الأثير -

محول الاكواد


-


الرمزالقيمهلغة البرمجه
language-htmlhtmlHTML
language-cshCSS
language-jsjsJavascript
language-xmlxmlXML
language-xhtmlxhtmlXHTML
language-ccC
language-cppcppC++
language-cscsC#
Language-phpphpPHP
language-pypyPython
language-javajavaJava
language-rbrbRuby
language-perlperlPerl

اما لتحديد نوع لغة البرمجه فقم بتغيير Language-html  برمز لغة البرمجه كما في الجدول بالاعلي

- للمساعدة والاستفسارات : التعليقات !


شاهد كيف تعمل الاضافة 

مـعـايـنة

Wednesday, 27 February 2019

جعل خلفية مدونة بلوجر ذات الوان متغيره CSS3





جعل الاداة بالوان عشوائيه وغير محدده هو امر لافت للانتباه و النظر ، وهذا هو موضوعنا لليوم
- جعل خلفية مدونة بلوجر ذات الوان متغيره بتقنية CSS3



طريقة الاستعمال

توجه الي > لوحة تحكم بلوجر > المظهر > تحرير HTML

ثم ابحث عن  <head> واضف الكود التالي اسفله




</style>
@keyframes colorchange
{
0% {background: #686de0;}
10% {background: #4834d4;}
20% {background: #3cad93;}
30% {background: #3fff00;}
40% {background: #f00f00;}
50% {background: #badc58;}
60% {background: #6ab04c;}
70% {background: #30336b;}
80% {background: #f0932b;}
90% {background: #f9ca24;}
}



@-webkit-keyframes colorchange
{
0% {background: #686de0;}
10% {background: #4834d4;}
20% {background: #3cad93;}
30% {background: #3fff00;}
40% {background: #f00f00;}
50% {background: #badc58;}
60% {background: #6ab04c;}
70% {background: #30336b;}
80% {background: #f0932b;}
90% {background: #f9ca24;}

}
<style>



ثم توجه الي كود ال CSS الخاص بك والذي تريد جعل الوانه عشوائيه 
لنفرض انه


body {



}



سنقوم باضافة هذا الكود داخله




animation: colorchange 30s;
-webkit-animation: colorchange 30s;



 ليصبح بهذا الشكل



body {
animation: colorchange 30s;
-webkit-animation: colorchange 30s;
}



وهكذا ستجد ان خلفية القالب او المدونة الوانها عشوائيه


شاهد كيف تعمل الاضافة 

مـعـايـنة

انفيرت برو مُعرب - قالب بلوجر متعدد الاستخدام




وصف القالب

قالب انفيرت برو هو في الاصل قالب غير عربي " كان باللغة الفرنسيه " وكان يفقد العديد من الميزات والاضافات التي قمنا باضافتها له وهو الان قالب متجاوب عربي بسيط وسهل الاستخدام للمدونات المحترفه و ايضا هو مجاني ..


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


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

تركيب القالب



نقوم بتركيب القالب علي طريقتين - 



  • الطريقة التقليديه
  • الطريقة الحديثه
الطريقة التقليديه وهي التوجه الي لوحة تحكم بلوجر > المظهر " Theme " > نسخ احتياطي او استعاده . ثم تقوم بإختيار .XML الخاص بالقالب وسيتم وضع القالب ولكن . سيكون هناك اثار من القالب القديم لذلك يتم وضع قالب تنظيف اولاً ومن ثم رفع القالب .. 


الطريقة الحديثه

 وهي الضغط بزر الفأره الايمن علي ملف .XML الخاص بالقالب والضغط على Edit ونسخ الاكواد
 لصقها في صفحة المظهر > تحرير HTML . وسيتم تركيب القالب دون اثار من قوالب سابقه .

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



تحميل ومعاينة

للتحميل تفقد ازرار التحميل التي توجد يسار الصفحة >

مـعـايـنة
تحميل القالب
رابط تحميل مُباشر

ربما ستحتاج لقالب التنظيف قبل استخدام القالب لمحو آثار القالب السابق :




<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : ITHEIRC Clean temp
Designer URL : Blog.ITHERIC.com
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html>

Wednesday, 13 February 2019

أزرار الويب الإصدار 1, أزرار بصور , بأيقونات ,بتأثيرات متغيرة


أزرار الويب الإصدار 1, أزرار بصور , بأيقونات ,بتأثيرات متغيرة

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

مـعـاينة الإضـافــة

تركيب الأزرار

اتجه الى بلوجر ثم سجل دخولك لمدونتك ثم اختر المظهر ثم تعديل HTML  ثم اتبع الخطوتين التاليتين
أولا عليك إضافة كود CSS الخاص بتنسيق الازرار
ابحث عن الوسم ]]></b:skin> أو </style> وألصق الكو التالي فوقه/قبله


.imgbtn{display:inline-block;font-size:12px;padding:1.2em 1.2em 1.2em calc(50px + 1.2em);border-radius:4px;position:relative;background-color:#263238;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px 0 rgba(0,0,0,.5);margin:5px;background-size:cover;background-repeat:no-repeat;background-position:center}
@media (min-width:560px){.imgbtn{font-size:14px}}
@media(min-width:768px){.imgbtn{font-size:16px}}
.imgbtn::after,.imgbtn::before{position:absolute;left:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.imgbtn::before{font-size:18px;z-index:5}
@media (min-width:560px){.imgbtn::before{font-size:20px}}
@media(min-width:768px){.imgbtn::before{font-size:22px}}
.imgbtn::after{background-color:#00BCD4;border-radius: 4px 0 0 4px;content:""}
.imgbtn:active,.imgbtn:focus,.imgbtn:hover{text-decoration:none!important;color:#fff!important}
.imgbtn--small{font-size:12px}
.imgbtn--large{font-size:20px}
.imgbtn--xlarge{font-size:20px;padding:1.2em 1.2em calc(50px + 1.2em)}
.imgbtn--xlarge::after,.imgbtn--xlarge::before{height:50px;width:100%;bottom:0;top:auto}
.imgbtn--amber,.imgbtn--cyan,.imgbtn--green,.imgbtn--indigo,.imgbtn--purple,.imgbtn--red,.imgbtn--teal{border-width:2px;border-style:solid}
.imgbtn--cyan{background-color:#224851;border-color:#00BCD4}
.imgbtn--red{background-color:#532f30;border-color:#f44336}
.imgbtn--red::after{background-color:#F44336}
.imgbtn--green{background-color:#3e4935;border-color:#8bc34a}
.imgbtn--green::after{background-color:#8BC34A}
.imgbtn--amber{background-color:#554927;border-color:#ffc107}
.imgbtn--amber::after{background-color:#FFC107}
.imgbtn--purple{background-color:#362d4b;border-color:#673AB7}
.imgbtn--purple::after{background-color:#673AB7}
.imgbtn--indigo{border-color:#3f51b5;background-color:#2e324a}
.imgbtn--indigo::after{background-color:#3f51b5}
.imgbtn--teal{border-color:#009688;background-color:#224041}
.imgbtn--teal::after{background-color:#009688}
@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}
@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}
.imgbtn--shake:hover::before{-webkit-animation:shake 1s;animation:shake 1s}@-webkit-keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}
@keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.imgbtn--rubber:hover::before{-webkit-animation:rubber 1s;animation:rubber 1s}@-webkit-keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}@keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}.imgbtn--rotate:hover::before{-webkit-animation:rotate 1s;animation:rotate 1s}@-webkit-keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}@keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}.imgbtn--flip:hover::before{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation:flip 1s;animation:flip 1s}.imgbtn[style]{font-weight:700}

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


<link href="https://raw.githack.com/MohammadQt/font-itheric/master/daicons-buttons.css" rel="stylesheet"></link>


التعامل مع الأزرار وكيفية إضافتها

أولا يجب علينا إضافة الكود الخاص بالرابط الذي يبدو على هذا الشكل <a href="#"></a> وسوف نضيف له الكلاس الأساسي للأزرار ither1btn  و نضيف بجانبة الكلاس الخاص بالأيقونات daicon-nameIcon   حيث يتم استبدال nameIcon بإسم الأيقونة المراد إضافتها لكي يصبح على هذا الشكل <a class="ither1btn daicon-nameIcon" href="رابط هنا">نص هنا</a> 
يمكنك الإختيار من الأيقونات التالية

الأيقونةالكودالوظيفة
daicon-download زر التحميل
daicon-download-alt زر التحميل إضافي
daicon-upload زر الرفع
daicon-upload-alt زر الرفع إضافي
daicon-cloud زر السحابة
daicon-open الفتح بنافذة جديدة
daicon-link Abrir enlace
daicon-lock فتح رابط
daicon-clip مستند
daicon-folder مجلد
daicon-print طباعة
daicon-zip أرشيف ZIP
daicon-rar أرشيف RAR
daicon-buy شراء
daicon-paypal الدفع بإستخدام Paypal

بمجرد الإنتهاء من الإعداد سيصبح الكود الخاص بالزر كالتالي <a class="ither1btn daicon-download" href="رابط هنا">نص هنا</a>
الذي هو مثال لزر التحميل

تغيير الالوان

لتغيير اللوان يجب إضافة هذا الكلاس ither1btn--nameColor الى الكود الخاص بالزر حيث nameColor هو اسم اللون المراد تطبيقه ليصبح الكود على الشكل التالي
  <a class="ither1btn ither1btn--nameColor daicon-download" href="رابط هنا">نص هنا</a>
يتوفر في الإضافة سبعة الوان مختلفة وهي كالتالي
اللونالكود
الازرقcyan
الأحمرred
الاخضرgreen
الذهبيamber
الرجوانيpurple
النيليindigo
البتروليteal

إضافة تاثيرات الى الأزرار

لإضافة التاثيرات الى الازرار يجب اضافة هذا الكلاس ither1btn--nameFrame الى الكود الخاص بالزر حيث nameFrame هو اسم التاثير المراد تطبيقه
ليصبح الكود الخاص بالزر على هذا الشكل
<a class="ither1btn ither1btn--nameFrame daicon-download" href="رابط هنا">نص هنا</a>

يتوفر في الإضافة اربعة تأثيرات مختلفة وهي كالتالي

التأثيرالكود
التفافflip
دورانrotate
الضغطrubber
الاهتزازshake


إضافة صورة كخلفية للزر

لإضافة هذه الميزة علينا اضافة الستايل style="background-image: url(img.png)" الى الكود الخاص بالزر حيث img.png هو رابط الصور المراد جعلها كخلفية
ليصبح الكود الخاص بالزر على هذا الشكل


<a class="ither1btn daicon-download" style="background-image: url(img.png)" href="رابط هنا">نص هنا</a>

تغيير حجم الزر

يتم تغيير حجم الزر عن طريق هذا الكلاس ither1btn--nameSize حيث nameSize هو حجم الزر
ليصبح الكود بهذا الشكل


<a class="ither1btn ither1btn--nameSize daicon-download"  href="رابط هنا">نص هنا</a>

يتوفر في الإضافة 3 أحجام للأزرار وهي كالتالي

الحجمالكود
صغيرsmall
كبيرlarge
كبير جداxlarge


زر بخصائص مشتركة

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


<a class="ither1btn ither1btn--flip ither1btn--red daicon-download" style="background-image: url(https://i.imgur.com/qfHpaZr.jpg)" href="رابط هنا">نص هنا</a>

مـعـاينة الإضـافــة

الى هنا أكون قد وصلت لنهاية المقال , أتمنى ان اكون قد وفقت في طرحه,إن أعجبكم لا تترددو  بمشاركته مع اصدقائكم وترك تعليق لنا و إن كانت لديكم أي استفسارات أيضا اتمنى طرحها في التعليقات .
دمتم في أمان الله وحفظه

Wednesday, 6 February 2019

اضافة قائمة جانبية منبثقه لموقعك - Siden menu



مقدمة


ربما رأيتم في المواقع الكبيره الشهيره قائمة صفحات ذات زر تُفتح بجانب الشاشه ، هذا هو موضوعنا اليوم
- طريقة : اضافة قائمة جانبية منبثقه لموقعك - Siden menu


 
معلومات عن الاضافة

  • الوانها فلات ديزاين مُريحه للعين ومتناسقة مع اي موقع
  • مكان لوضع لوجو خاص بموقعك
  • مُدعم بأيقونات Font Awesome
  • خط جذور مُسطح
  • مصمم ب CSS , JQuery , HTML


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


  1. اذهب الي لوحة التحكم بالمظهر > تحرير HTML 
  2. ابحث عن الوسم </head> والصق الكود التالي تحته
وهذا هو الكود الخاص بخط الايقونات وخط جذور و مكتبة JQuery

<!-- Joozor font -->
<link href='//www.fontstatic.com/f=flat-jooza' rel='stylesheet' type='text/css'/>
<!-- icons font -->
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>


3. ابحث عن الوسم <body> ثم الصق الكود التالي تحته مباشرةً

وهذا هو الكود الخاص بـ البنيه الخاصه بالقائمة الجانبيه


<!-- Start right menu -->
<div id='flatn'>

<div id='logo'><a href='google.com'><img src='https://developers.google.com/analytics/images/terms/logo_lockup_analytics_icon_vertical_white_2x.png?hl=es'/></a></div>
<div id='menu'>

<ul>


<li><a href='#'>خدمات مصغره<i class='far fa-folder'/></a> </li>
<li><a href='#'>تركيب القائمة<i class='far fa-folder'/></a> </li>
<li><a href='#'>فيديوهات يوتيوب<i class='far fa-folder'/></a> </li>
<li><a href='#'>اقسم بلوجر<i class='far fa-folder'/></a> </li>
<li><a href='#'>رابط تجريبي<i class='far fa-folder'/></a> </li>
<li><a href='#'>رابط تجريبي<i class='far fa-folder'/></a> </li>


</ul>
</div>

</div>

4. ابحث عن الوسم </body> والصق الكود التالي فوق مباشرةً

وهذا الكود هو الخاص بأن يجعل الزر يفتح ويغلق القائمة .

<!-- JQuery -->
<script>
$(&quot;#close&quot;).hide();
$(&quot;#open&quot;).click(function(){
$(&quot;#flatn&quot;).animate({left: &#39;30px&#39;});
$(&quot;#close&quot;).show();
$(this).hide();

});

$(&quot;#close&quot;).click(function(){
$(&quot;#open&quot;).show();
$(this).hide();
$(&quot;#flatn&quot;).animate({left: &#39;-250px&#39;});

});

</script>

5. ابحث عن الكود ]]></b:skin> وضع الكود التالي فوقه

وهذا الكود هو CSS والمسؤل عن مظهر الاضافة والوانها




#flatn {

    width: 220px;

    height: 700px;

    background: #ffffff;

    box-shadow: 1px 1px 22px #585858;

    position: fixed;

    margin: 15px;

    border-radius: 10px;

    left:-250px

}

   

#topnav{

    margin-top: -26px;

    height: 70px;

    background: #fa983a;

    box-shadow: 1px 1px 15px #555;

    width: 0%;

}



#logo img {

    width: 100%;

    margin: auto;

    height: auto;

}





* {

    font-family: flat-jooza;



}



#logo {

    background: #7647E2;

    background: -webkit-linear-gradient(50deg,#7647E2,#B577E8);

    background: -o-linear-gradient(50deg,#7647E2,#B577E8);

    background: -moz-linear-gradient(50deg,#7647E2,#B577E8);

    background: linear-gradient(50deg,#7647E2,#B577E8);

}



#open:hover{



    box-shadow: 1px 1px 9px #444;

    color: #fff;

    background: #737373;

    cursor: pointer;







}

#close:hover{



    box-shadow: 1px 1px 9px #444;

    color: #fff;

    background: #737373;

    cursor: pointer;







}

     

#close {

    outline: none;

    border-style: none;

    margin: 30px;

    border: none;

    width: 40px;

    color: #5a5a5a;

    background: #fff;

    height: 40px;

    border-radius: 100%;

    font-size: 15px;

}

#open {

    outline: none;

    border-style: none;

    margin: 30px;

    border: none;

    width: 40px;

    color: #5a5a5a;

    background: #fff;

    height: 40px;

    border-radius: 100%;

    font-size: 15px;

}

#flatn ul {

    list-style: none;

    text-decoration: none;

    width: 100%;

    text-decoration-line: none;

    float: right;

    text-decoration: none;

}



#flatn li:hover {

    BACKGROUND: #e8e8e8;

}



#flatn li {

    text-decoration: none;

    font-size: 20px;

    width: 100%;

    height: 44px

}

#flatn ul a {

    text-decoration: none;

    color: #666;

    border: 1px;

    font-size: 15px;

    FLOAT: RIGHT;

    font-weight: 600;

}

#flatn i{

    padding: 15px 14px;

}




6. هي الخطوه الاخيره وهي اختيار موضع زر فتح القائمه وهنا لدينا خيارين

6 - 1. ان تضع الزر بأي مكان تريده
6 - 2. تجعله عائم وثابت علي الصفحة

وهذا هو الكود الخاص بالزر ان كنت تريد وضعه بأي مكان تريده



<!-- Open and close buttons -->

<div id='topnav'>



 <button class='fas fa-bars' id='open'/>

 <button class='fas fa-times' id='close'/>



</div>



وهذا هو الكود الاضافي الذي يجعل الزر عائم 



#flatn button {



position: fixed;


}








معاينة الاضافة

تحميل قالب المعاينه
Powered by Blogger.

Report Abuse

الأقسام الشائعة

نموذج الاتصال

Name

Email *

Message *

اتصل بنا

Name

Email *

Message *

إحصائيات المدونة

Search This Blog

Blog Archive

Labels

التسميات (الأقسام)

أداة الترجمة والإعدادات

Categories

إعلان بجانب الشعار

Comments

حقوق المدونة

الصفحات

الصفحات

Follow Us

مربع البحث

كود التفعيل

U3F1ZWV6ZTMwMTY4NzcyMzc1MTQwX0ZyZWUxOTAzMzA3MDMzMzkxNA==