إنشاء صفحة خطأ 404 أحترافية

السلام عليكم ورحمة الله وبركاته.

[ html ] إنشاء صفحة خطأ 404 أحترافية 

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

مميزات صفحة الخطأ 404 المخصصة : 

• تنسيق حصري.
• خط كوفي.
• عبارة 404! لكي يفهم الزائر انها صفحة خطأ.
• ايضا اضفنا جملة بسيطة.

مثال مباشر : http://tec1new.blogspot.com/p/404.html

او جرب اي رابط خاطء في مدونتي :
http://tec1new.blogspot.com/2014/04/gggggggg.html
http://tec1new.blogspot.com//2014/04/dddddddd.html
http://tec1new.blogspot.com/2014/04/aaaaaaaaa.html
لا يهم , اي رابط خاطئ سيتم تحويلة الى صفحة مخصصة.

صورة : 

 إنشاء صفحة خطأ 404 أحترافية

طريقه التركيب : 

1. توجه لقالب >> تحرير

2. إبحث بإستعمال Ctrl+F عن : </body>

3. ضع الكود التالي قبله [ فوقه ]

<b:if cond='data:blog.pageType == &quot;error_page&quot;'><style>/* www.tec1new.blogspot.com */#error-not-found {    background: #ff0000;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEC8jzA074auZYgHK0KjTPPvTVQLcJsPsYYH8yVbG46ZmZNuJHbNPzNLiYx8M2g5sZ-3tk9uHnibMe2llV7I14AZ9ixVIVJccLYoedFUSBS6I9csn-gvD-HZYr8tuu-JA7lgFLVQws7g/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEC8jzA074auZYgHK0KjTPPvTVQLcJsPsYYH8yVbG46ZmZNuJHbNPzNLiYx8M2g5sZ-3tk9uHnibMe2llV7I14AZ9ixVIVJccLYoedFUSBS6I9csn-gvD-HZYr8tuu-JA7lgFLVQws7g/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );        text-align:center;        position:fixed;        top:0px;        right:0px;        bottom:0px;        left:0px;        padding-top:270px;        z-index:999999;}#error-not-found  h1 {        font-size:640px!important;        position:absolute;        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        top:70px;        left:50%;        letter-spacing: -8px;        margin-left:-502px!important;        width:960px;        z-index:-2;        color:rgba(0,0,0,.09)!important;}#error-not-found  h2 {        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        text-transform:uppercase;        font-size:81px;        line-height:100px!important;        letter-spacing: -3px;        color:#fff!important;        margin:0!important;        padding:0!important;}#error-not-found p a,#error-not-found p a:visited,#error-not-found p a:hover{        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        text-transform:uppercase;        font-size:56px;        line-height:80px!important;        border:none;        font-weight: bold;        color:rgba(0,0,0,.5)!important;        margin:0!important;        padding:0!important;        text-decoration:none!important;}</style><div id='error-not-found'> <h1>404</h1> <h2>أووبس..الصفحة غير موجودة</h2> <h2>كيف وصلت إلى هنا !</h2> <p> <a href='/' title='الرئيسية'> الرجوع لصفحة الرئيسية</a></p></div></b:if>

تغير شكل التسميات بتقنية css3

السلام عليكم

تغير شكل التسميات بتقنية css3

اليوم في هذا الموضوع الرائع حبيت ان اقدم لكم شرح بسيط ورائع لتغير شكل التسميات لمدونات بلوجر الى الى شكل رائع بألوان رائعة لكل قسم لون بتقنية css3 وتضيف لمسة من الجمال والرونق لمدونتك

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

 توجه لقالب >> تحرير
 ابحث بإستعمال CTRL+F عن :  ]]></b:skin>  واضف فوقه مباشراً الكود التالي

  .cloud-label-widget-content {
 text-align: right;
 }
 .label-size {
 background: #5498C9;
 display: block;
 float: right;
 margin:0 0 3px 3px;
 color: #fff;
 font-size: 11px;
 text-transform: uppercase;
 }
 .label-size:nth-child(1) {
 background: #F53477;
 }
 .label-size:nth-child(2) {
 background: #89C237;
 }
 .label-size:nth-child(3) {
 background: #44CCF2;
 }
 .label-size:nth-child(4) {
 background: #01ACE2;
 }
 .label-size:nth-child(5) {
 background: #94368E;
 }
 .label-size:nth-child(6) {
 background: #A51A5D;
 }
 .label-size:nth-child(7) {
 background: #555;
 }
 .label-size:nth-child(8) {
 background: #f2a261;
 }
 .label-size:nth-child(9) {
 background: #00ff80;
 }
 .label-size:nth-child(10) {
 background: #b8870b;
 }
 .label-size:nth-child(11) {
 background: #99cc33;
 }
 .label-size:nth-child(12) {
 background: #ffff00;
 }
 .label-size:nth-child(13) {
 background: #40dece;
 }
 .label-size:nth-child(14) {
 background: #ff6347;
 }
 .label-size:nth-child(15) {
 background: #f0e68d;
 }
 .label-size:nth-child(16) {
 background: #7fffd2;
 }
 .label-size:nth-child(17) {
 background: #7a68ed;
 }
 .label-size:nth-child(18) {
 background: #ff1491;
 }
 .label-size:nth-child(19) {
 background: #698c23;
 }
 .label-size:nth-child(20) {
 background: #00ff00;
 }
 .label-size a, .label-size span {
 display: inline-block;
 color: #fff !important;
 padding: 4px 10px;
 font-weight: bold;
 }
 .label-size:hover {
 background: #222;
    }
 .label-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }
 .label-size:hover .label-count, .label-size:focus+.label-count {
 background-color: #ff6bb5;
 }

افتتاح مدونة تقنيه نيو

السلام عليكم

افتتاح مدونة تقنيه نيو

اليوم بفضل الله تم افتتاح مدونة تقنية نيو بتاريخ 3/10/2014 في واقفه عيد الاضحه كل عام وانتم بخير وانشاء الله العيد يكون فاتحه خير ع المدونة ....  وتمتع بافضل الموضيع والمقالات والدروس و شروحات

اهم اقسام مدونة تقنية نيو 

1. الدروس و شروحات
2. حصريات
3. حمايه
4. سيو
5. Css3
6. HTML5
7. jquery
8. اضافات بلوجر
9. قوالب بلوجر
10. قوالب ووردبريس
11. قوالب psd

وستكون هناك هدايا ومسابقات عديده التى ستربحون من خلالها جوائز قيمه 

والمدونة راح توصل كل معلومه التى فى جعبتنا وتنميه للافضل والمواهب التى ينقصها القليل لكى تتالق ليس من عيبا ان تكون لا تعرف شيا فنحن ف خدمتك وسنبدا من الصفر لنصعد تدريجيا الى الاحتراف 

للاستفسار عن اي حاجة وفي وجوع موضوع تالف  اتصل بنا فى اي وقت ^^

واقرء قونين مدونة تقنيه نيو اتفاقيه الاستخدام

واتمنى ان ننال اعجباكم ^^ 

وسلام