قالب اتقان النسخة التانية متعدد الالوان وتصحيح معضم الاخطاء

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

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




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

كود:

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

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

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

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

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

من ناحية الاعلانات
:56: تم اضافة اعلانين اسفل التدوينة بحجم 280×336
:56: تم توسيع حجم الهيدر حتى يتم ادراج اعلان بحجم 90×728
:56: تم توسيع حجم القائمة الجانبية حتى يستوعب اعلان بحجم 250×300
:56: وطبعا كل هده الاحجام تم اخدها من دليل احجام اعلانات ادسنس

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

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

السليدر

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

كود 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;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #it9an-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #it9an-emailsubsocial p {
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #it9an-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #it9an-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #it9an-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #it9an-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    cursor:pointer;
   }
   #it9an-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

     </style>

تم نضع الاعدادات الخاصة بنا مكان رابط 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/AVvXsEhDJ_J6NSIIZQk1peI6yXIT7JCASZE2wNen2V_a9f9h4T4NmxgSy8fO7_1gpzO1RF8QHF2LCJ9Ri79W6oF5qJPiX7NBbfWR3mSuCLU-yPY_6dtuWZ3ZVfsroSlrqDPNWvOQGqmxfwzDhDk/s80/MY.png

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



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

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

ناتي الان الى التحميل
:141:تنبيه : تم تحديث القالب من النسخة v2.0.0 الى v2.0.1

للعلم (ينمكننا ان نخبركم انه سيكون تصميم جديد خاص وبشكل مختلف ان شاء الله):72:

تم ولله الحمد

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