عنوان تجريبي لنص تجريبي
تجربة لكتابة موضوع يطل علينا عالم التقنية والعالم الرقمي من برامج والعاب وحواسيب بأخبار متجددة كل يوم. فأصبح لا حدود للإختراعات والصناعات المبتكرة في هذا المجال, وعالم التقنية مع مرور الوقت أصبح أكثر تعقيداً وأكثر أهمية لإحتياج الأفراد إليه في أغلب الأعمال. ومن يريد الدخول إلى عالم الرقميات دائماً ما يبحث عن أساس هذه الصناعات وبدائيات عالم التقنية ونعرض في هذا التقرير 18 معلومة جديدة لمعرفة كيف بدأ هذا العالم اللامتناهي .
عنوان
عنوان فرعي
عنوان ثانوي
- تعداد رقمي تجربة كاملة
- تعداد رقمي تجربة كاملة
- تعداد رقمي تجربة كاملة
- تعداد رقمي تجربة كاملة
- تعداد رقمي تجربة كاملة
- تعداد رقمي تجربة كاملة
اقتباس
لا يمكن أن تعرف كل شيء وهذا أمر صحيح بالإضافة لذلك هناك العديد من الأمور الغامضة سواء في عالم التقنية أو غيرها من مجالات، لذلك سنتناول 10 من أكثر الأسئلة التي قد تدور في ذهنك بشتى المجالات التقنية الحديثة ونحاول الإجابة عنها بطريقة بسيطة ومفهومة.
قائمة جانبية رأسية احترافية مصممة Html & Css
اليوم مع اضافة جديدة ومتناسقة وجميلة وهي قائمة جانبية رأسية أحترافية مصممه Html & Css , الاضافة بسيطة وجميلة وجذابة ومصممه بتقنية الفلات , الاضافة تصلح كقائمة لصفحاتك وأقسامك بشكل جميل وأحترافي .. ^_^
شرح تركيب الاضافة
أولا يجب أن نستدعي الخطوط المستخدمه في الاضافة , فقط ابحث عن </head> واضف قبلهم هذا الكود
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/earlyaccess/droidarabickufi.css");
//]]>
</script>
ثم نقوم بالبحث عن <body> ونضف بعده مباشرة هذا الكود
<div id='snav' class='en'><ul>
<li><a href='#'><i class="fa fa-home"></i><span>الرئيسية</span></a></li>
</ul></div>
<div id='snav' class='en'>
<ul>
<li>
<a href='#'>
<i class="fa fa-home"></i>
<span>الرئيسية</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-css3"></i>
<span>سي اس اس</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-camera"></i>
<span>صوري</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-circle-o-notch"></i>
<span>تحديث</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-envelope"></i>
<span>أتصل بنا</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-music"></i>
<span>موسيقي</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-quote-right"></i>
<span>اقتباس</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-rss"></i>
<span>RSS</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-html5"></i>
<span>HTML5</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-video-camera"></i>
<span>فديوهات</span>
</a>
</li>
</ul>
</div>
ثم نقوم بالبحث عن </b:skin> ونضيف قبله مباشرة هذا الكود وهو خاص بتنسيق شكل الاضافة
#snav.en {وهكذا يكون مبروك عليك الاضافة ... الى اللقاء في تدوينة جديدة ^_^
right: 0;
text-align: right;
}
#snav.en li span {
right: -100px;
}
#snav.en li a:hover span {
right: 35px;
}
/* main SideNav.css styles */
#snav {
position: fixed;
top:20%;
z-index: 9999;
font-size: 18px;
font-family: 'Droid Arabic Kufi', sans-serif;
}
#snav ul {
list-style: none;
}
#snav * {
margin: 0;
padding: 0;
outline: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#snav li a {
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
#snav .fa {
vertical-align: middle;
font-size: 18px;
width: 35px;
height: 37px;
line-height: 38px;
text-align: center;
position: relative;
z-index: 4;
}
#snav li span {
font-size: 15px;
vertical-align: middle;
height: 37px;
line-height: 35px;
width: auto;
white-space: nowrap;
overflow: hidden;
display: block;
padding: 0 15px;
position: absolute;
top: 0;
visibility: hidden;
z-index: 3;
}
#snav li a:hover .fa {
transform: rotate(720deg);
}
#snav li a:hover span {
visibility: visible;
}
/* colors styles 3aseq.blogspot.com */
/* menu items title background used for browsers not supporting :nth-child */
#snav li span {
background-color: #555;
}
/* icons color and background before hover */
#snav li .fa {
background-color: #EEE;
color: #555
}
/* icons hover color */
#snav li a:hover .fa {
color: #fff;
}
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
background-color: #30555C;
}
قالب شروق للمدونات الشخصية والتقنية
السلام عليكم ورحمه الله وبركاته , أقدم لكم هديتي لكم وهي قالب شروق للمدونات التقنية والشخصية , القالب من تصميمي بالكامل , كنت أود عرضه على بيكاليكا ولكن فكرت من ناحية أخري , أن أهديه لمتابعيني الكرام , لذا سيكون القالب هو لأعضاء المدونة فقط , القالب بسيط ومميز وأحترافي , بأسلوب بسيط وأنيق
مميزات القالب
- قالب بسيط وجذاب ومتناسق
- قالب متجاوب مع الجهزة اللوحية
- متجاوب مع شاشات الريتنا
- نظام عرض شبكي للتدوينات رائع وأحترافي
- شكل منسق وجذاب لاضافة متابعة بالبريد الالكتروني الاساسية
- ازار مواقع التواصل الاجتماعي
- قائمة جذابة ومنسقة
- صندوق للتعريف عن الكاتب تحت التدوينة
- مواضيع ذات صلة بالصور تحت كل تدوينة
- شكل منسق وجذاب للتعليقات
صورة من القالب
الاشتراك في:
الرسائل (Atom)
