قالب اتقان النسخة التانية متعدد الالوان

بسم الله الرحمان الرحيم

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

فكما نعلم ان الاصدار الاول كان به عدة مشاكل ومنها

كود:

 : طريقة وضع الاعلانات




  حيت كانت قياسات القالب لا تسمح بدالك مما يعطي للاعلان تشويه






















  : مشكل السليدر




 الدي كان من الصعب وضعه في المكان الصحيح و يتم وضعه على تنسيق التدوينات 












  : مشكلة الصفحات التابتة

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

فطبعا قد تم حل معضم المشاكل وان شاء الله القالب سيكون تحت التطوير المستمر

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

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

 تم اضافة اعلانين اسفل التدوينة بحجم 280×336 

 تم توسيع حجم الهيدر حتى يتم ادراج اعلان بحجم 90×728

 تم توسيع حجم القائمة الجانبية حتى يستوعب اعلان بحجم 250×300

 وطبعا كل هده الاحجام تم اخدها من دليل احجام اعلانات ادسنس

مميزات اخرى

 تم اضافة خاصية تدوينات ذات صلة بشكل جميل

 تم تعديل شكل التعليقات

 تم تعديل مشكل عدم ضهور محتوى الصفحة التابتة 

 تم تعديل شكل ضهور التدوينات في الرئيسية

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

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

 تم اضافة خمسة الالوان للقالب تتغير حسب اختيار الزائر مع تخزين الون المختار عند الرجوع الى المدونة مرة اخرى

طريقة التعديل على القالب

السليدر

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

كود HTML:

<div id="featpost"></div>

<script type='text/javascript'>

jQuery("#featpost").AutofeaturedPost({

blogURL: "http://it9anbloggerv2.blogspot.com/",
MaxPost:10,
tagName: "بلوجر"
});


</script>

مع تغير رابط http://it9anbloggerv2.blogspot.com الى رابط مدونتك
وتغير كلمة بلوجر الى التصنيف الدي تريده ان يظهر على السليدر


اضافة المواقع الاجتماعية



ندهب الى التخطيط تم في القائمة الجانبية نقوم باضافة ادات html/javascript تم نضع في الكود التالي

كود HTML:

<div class="arqam-widget-counter arq-outer-frame arq-colored arq-col3">

        <ul>   

                <li class="arq-facebook">

                <a href="http://www.facebook.com/it9an" target="_blank">

                    <i class="arqicon-facebook"></i>

                    <span>37,336</span>

                    <small>Fans</small>

                </a>

            </li>

                    <li class="arq-twitter">

                <a href="http://twitter.com/it9an" target="_blank">

                    <i class="arqicon-twitter"></i>

                    <span>2,829</span>

                    <small>Followers</small>

                </a>

            </li>

                    <li class="arq-google">

                <a href="http://google.com/+it9an" target="_blank">

                    <i class="arqicon-gplus"></i>

                    <span>24,868</span>

                    <small>Followers</small>

                </a>

            </li>

                    <li class="arq-youtube">

                <a href="http://youtube.com/user/it9anblogger" target="_blank">

                    <i class="arqicon-youtube"></i>

                    <span>6,325</span>

                    <small>Subscribers</small>

                </a>

            </li>

                    <li class="arq-linkedin">

                <a href="http://www.linkedin.com/" target="_blank">

                    <i class="arqicon-linkedin"></i>

                    <span>37,249</span>

                    <small>Members</small>

                </a>

            </li>

                    <li class="arq-dribbble">

                <a href="http://dribbble.com/" target="_blank">

                    <i class="arqicon-dribbble"></i>

                    <span>8,551</span>

                    <small>Followers</small>

                </a>

            </li>

                   

                                   

            </ul>

        </div>

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

اضافة القائمة البريدية



كدالك من التخطيط في القائمة الجانبية نقوم باضافة ادات html/javascript تم نضع الكود التالي

كود HTML:

<div class="vidvid" id='it9an-emailsubsocial'>

            <div class='heading'>

            القائمة البريدية

            </div>

                 <p>سجل الان وتوصل بجديد مدونتنا</p>

            <div class='emailsub'>

            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=كود مدونتك', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

            <input type='text' name='name' placeholder='ضع اسمك ...' />

            <input type='text' name='email' placeholder='ضع اميلك ...' />

            <input type="hidden" value="it9an.com" name="uri"/>

            <input type="hidden" name="loc" value="en_US"/>

                        <input value="تسجيل الان" class="button" type="submit" />


            </form>

            </div>


            </div>





 <style type='text/css'>

     #it9an-emailsubsocial {
      width: 300px;

      border: 1px solid #ddd;
      height: 330px;

     }
        border-radius: 5px 5px 0px 0px;

line-height: 35px;
     #it9an-emailsubsocial .heading {
padding: 15px 25px;
font-size: 26px;

text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
color: rgb(170, 170, 170);
text-align: center;

    font-size: 13px;
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #it9an-emailsubsocial p {

   }
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;

    color: rgb(170, 170, 170);
   #it9an-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #it9an-emailsubsocial .emailsub input {
    padding: 10px;

    border-radius: 5px;
    margin-top: 10px;
    font-size: 15px;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;

    border-color:#F4836A;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #it9an-emailsubsocial .emailsub input:focus {
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }

    width: 90%;
   #it9an-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    margin-right: 5%;

     </style>
    margin-left: 5%;
    cursor:pointer;
   }
   #it9an-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

تم نضع الاعدادات الخاصة بنا مكان رابط http://feedburner.google.com/fb/a/mailverify?uri=كود مدونتك

التعديل على الاعلانات داخل التدوينة



من لوحة التحكم ندهب الى قالب تم تحرير html

نبحت عن

كود:

اعلان 1

او

كود:

اعلان 2

ونقوم بتغير الكلمات بكود الاعلان الخاص بنا

التعديل صفحة الارشيف

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

كود HTML:

<div id="archive-container">

تحميل...</div>

التعديل على كاتب الموضوع

قم بتحرير القالب وابحت عن كلمة postauthor
تم بعدها ستجد كل معلومات الكاتب غير دالك بما يناسبك من معلومات و روابط
ولتغير الصورة ابحت عن 

كود:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhliCR-trGCvJ17Q8oXpLMRCRIQckCJWVb7Fos_Yoh-EzG7WaBOU42dYD3N4Ml5FXEGg0pVfpqrGjdpAk6gRydVTf459MZ4cWY-sDuaXmlEFpwyBO5xAu8YUoK4KSLJsgT3YxSmlIAt5nk/s80/MY.png

وغيرها بما يناسبك



وهنا نقول ان شرحنا قد انتهى واتمنى ان يكون الشرح وفيٌ
وان ينال القالب اعجاب الجميع

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

ناتي الان الى التحميل 

 تحميل مباشر