شرح انشاء قائمة التبويبات المنسدلة

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

معاينة

كما لاحظنا في المعاينة هناك روابط وهناك اضافة يمكنك تخصيص الآداة كما تريد والآن لشرح التركيب والتعامل مع الإضافة

هذا هو كود الإضافة يمكنك استخدامه في آداة HTML/JavaScript أو حتى داخل موضوع

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenu.js' type='text/javascript'></script>
<style>
.cnmuvrmenu {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  width: 300px;
}
.cnmuvrmenu .button a {
  background: url("https://lh6.googleusercontent.com/-taGhCUDRGUk/U_8HFbwtw7I/AAAAAAAAEko/J_KWIOVPWW0/s16/cnmuarrow.png") no-repeat scroll 4px center #0480d9;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px 8px 6px 2px;
}
.cnmuvrmenu .menu li {
  color: #555;
  font-size: 14px;
  list-style: none outside none;
}
.cnmuvmdrop li {
  background: #f1f1f1;
  border: 1px solid #bbb;
  color: #888;
  margin: 5px 0;
  padding: 4px 10px;
  transition: all 0.7s ease 0s;
}
.cnmuvmdrop li:hover {
  background:  #e7f3fc;
  border: 1px solid #7dc2f3;
}
.cnmuvmdrop a {
  color: #000;
  display: inline !important;
}
.cnmuvrmenu a {display: block; text-decoration: none; transition: all 0.7s ease 0s;}
.cnmuvrmenu .menu ul {margin: 0; padding: 0; width: 100%;}
.cnmuvmdrop li a:hover {text-decoration:none;}
.cnmuvmdrop{display:none;}
</style>
<ul class="cnmuvrmenu">
<!--------1-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الاولى</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الأولى</a></li>
<li>2. <a href="#">تعديل القائمة الأولى</a></li>
<li>3. <a href="#">تعديل القائمة الأولى</a></li>
</ul>
</li>
</ul>
</li>
<!--------2-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الثانية</a></li>
<li>2. <a href="#">تعديل القائمة الثانية</a></li>
<li>3. <a href="#">تعديل القائمة الثانية</a></li>
<li>4. <a href="#">تعديل القائمة الثانية</a></li>
<li>5. <a href="#">تعديل القائمة الثانية</a></li>
</ul>
</li>
</ul>
</li>
</ul>

 الكود المعلم بالأحمر يمكنك ازالته ان كانت لديك مكتبة جي كويري في قالبك

طبعا الكلمات العربية يمكنك تعديلها كما تشاء

ورمز الـ # بجوار كل كلمة هو الرابط أيضاً يمكنك تعديله ما عدا الخاص بالزر الاساسي لكل قائمة وهو المعلم بالأزرق

لعمل قائمة إضافية كل ما عليك فعله هو تكرار الكود الاخضر كاملا

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

وهذا السطر <!--------2--------> ما هو الا فاصل فقط بين القائمة والاخرى ليسهل التعديل والإضافة

يمكنك تعديل هذا اللون #0480d9 لتغير لون أزرار القائمة

وهذا لتغيير اللون #e7f3fc عند تمرير الماوس على الروابط

وهذا هو لون الإطار #7dc2f3

الرقم 300 هو عرض القائمة يمكنك تعديله
بالنسبة لطريقة اضافة آداة بدلا من الرابط كما في المثال أضفت صندوق الفيس بوك

بدلا من ان تكرر القائمة الخضراء كاملة كرر فقط الكود التالي

<!--------2-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>هنا كود الآداة</li>
</ul>
</li>
</ul>
</li>

ملاحظة : بخصوص تأثير الإهتزاز نلاحظ في المعاينة انه عند التنقل بين القوائم يحدث اهتزاز ان لم ترد التأثير بهذا الشكل وتريده انسيابي بدون إهتزاز استبدل الكود الأصفر بالكود التالي

<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenuno-shake.js' type='text/javascript'></script>

وبهذا انتهى موضوعناً وبالتوفيق

انشاء صفحات الخطأ أو اعادة توجيهها

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

1. من إعدادات المدونة
2. نختار تفضيلات البحث
3. الاخطاء وعمليات إعادة التوجيه 
4. لم يتم العثور على الصفحة المخصصة
5. نضغط على كلمة تحرير التي بجانبها

صورة توضيحية

في المكان المخصص لإضافة الأكواد نضيف الكود التالى

<style>
#cnmu-Error-page {
  background:#FFFFFF;
  border-radius: 8px;
  box-shadow: 0 0 4px #222222;
  color: #555555;
  font: 25px/2em tahoma;
  margin: 20px auto;
  padding: 1px 10px 50px;
  width: 500px;
}
.cnmu-e-title {
  color: #F10018;
  font: bold 40px tahoma;
  text-shadow: 0 0 1px #222222;
}
.Home-e {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7URfi6d6yQ8J85ray6L-YsR4UKYJJxO7bAIqo0UA7Is9Yi0WhKW_Ff4cCNVoru-FgoEBFOArf-y-KqkrZjTzicQ0zlkbKDN1u7wwhUic_AYxafc64NBv3TD41E2ClwWEUAI3RGB7aCXk/s64/home.png") no-repeat scroll 97% center #000000;
  border-radius: 8px;
  box-shadow: 0 0 2px #000000;
  color: #FFFFFF;
  display: inline-block;
  margin: 5px auto;
  padding: 8px 80px 15px 20px !important;
  text-decoration: none !important;
  transition: all 0.7s ease 0s;
}
.Home-e:hover {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7URfi6d6yQ8J85ray6L-YsR4UKYJJxO7bAIqo0UA7Is9Yi0WhKW_Ff4cCNVoru-FgoEBFOArf-y-KqkrZjTzicQ0zlkbKDN1u7wwhUic_AYxafc64NBv3TD41E2ClwWEUAI3RGB7aCXk/s64/home.png") no-repeat scroll 97% center #B10418;
}
#cnmu-e-search {
  border: 4px solid #FFFFFF;
  display: inline-block;
  box-shadow: 0 0 4px #000000;
}
#search-text-e {
  background:#000000;
  border: 0 none;
  color: #DDDDDD;
  font: 20px tahoma;
  padding: 15px 5px 20px;
  width: 200px;
}
#search-submit-e {
  background:#B10418;
  border: 0 none;
  color: #FFFFFF;
  cursor: pointer;
  font: 20px tahoma;
  margin-right: -8px;
  padding: 14px 20px 19px;
  transition: all 0.7s ease 0s;
}
#search-submit-e:hover {
  background:#555555;
}
</style>
<div id="cnmu-Error-page">
<p class="cnmu-e-title">صفحة خطأ</p>
<p>الموضوع أو الصفحة التي تبحث عنها إما انها حذفت أو غير موجودة من البداية اضغط على الرابط التالي للعودة للرئيسية</p>
<a class="Home-e" href="/">الرئيسية</a>
<p>أو إستخدم محرك البحث التالي لإيجاد ما تريد</p>
<div id='cnmu-e-search'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='search-text-e' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البحث ...&quot;;}' onfocus='if (this.value == &quot;البحث ...&quot;) {this.value = &quot;&quot;;}' type='text' value='البحث ...'/>
<input id='search-submit-e' type='submit' value='بحث'/>
</form>
</div>
</div>

هذا هو كود صفحة خطأ يمكنك معاينتها من هنـــــــــــــا
هذا اللون #FFFFFF هو لون الخلفية يمكنك تغيره بلون آخر او ازالة هذه الأسطر إن اردتها بلون خلفية القالب
  background:#FFFFFF;
  border-radius: 8px;
  box-shadow: 0 0 4px #222222;
أما الرقم 500 هو المقاس يمكنك تغيره أو جعله نسبة مئوية ليكون متجاوب 98%
طبعا هناك الوان اخرى بقليل من الخبرة يمكنك تعديلها

إعادة التوجيه

غاليا ما تستخدم إعادة التوجيه لسببين

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

الثاني القالب محذوف منه صفحات الخطأ أو به مشكلة هنا الحل كالتالي

أضف الكود التالي فوق الوسم</head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
html {
  background: url(https://lh3.googleusercontent.com/-yuSvWA6ps4o/VALzDMz0TqI/AAAAAAAAElo/uOmRhgcAHVs/s320/Error.png) no-repeat scroll center 50% rgba(0, 0, 0, 0);
}
  body {display:none;}
</style>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function() {
location.pathname= &quot;/&quot;
}, 5000);
</script>
</b:if>

الكود سيعيد التوجيه الى الصفحة الرئيسية
ويمكنك استبدال رابط الصورة المعلم بالاخضر التي تظهر عند إعادة التوجيه برابط صورة أخرى
وان اردت التوجيه الى صفحة أخرى غير الرئيسية
انسخ رابطها واضفه بدلا من علامة /
على أن يكون الشكل كالتالي
مثال هذا رابط موضوعنا
http://cnmu.blogspot.com/2014/08/Error-page.html
لو اردنا اعادة توجيه صفحة الخطأ للموضوع نضيف بدلا من علامة /
الجزء الأحمر فقط من الرابط وهذا ينطبق على أى رابط في المدونة ان اردنا ان نوجه صفحات الخطأ اليه
هذه هي اهم طرق عمل صفحات الخطأ مع أى قالب وتجنب الأخطاء التي تكون عائقاً في انشاء الصفحة في بعض القوالب
تحياتي

تأثير التحميل عند التنقل بين الصفحات في بلوجر

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

معاينة

طريقة التركيب سهلة وبسيطة فقط أضف الكود التالي فوق الوسم </body>

<style>
#cnmu-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://lh5.googleusercontent.com/-GL2UQvqMyOQ/U_EDmz70svI/AAAAAAAAEig/rYd-gKkV9OA/s43/load.gif') no-repeat 50% 50%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="cnmu-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#cnmu-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
//]]>
</script>

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

ويمكنك تعديل هذا اللون #000 وهو لون الخلفية

في حال عدم عمل الإضافة هذا يعني ان مكتبة جي كويري غير مضافة في مدونتك

قم بإضافتها بوضع الكود التالي فوق الوسم</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

وبالتوفيق

نظرة أقرب على معرفات عناوين بلوجر

تعتمد المواقع على معرفات عناوين HTML ما يسمى بـ Headline Tag وتترتب تلك المعرفات بدئاً من h1 الى h6 وتقل درجة الأهمية بالزيادة بمعنى h1 أهم لمحركات البحث من h2 و h2 أهم من h3 وهكذا , بلوجر تدعم المعرفات من h1 الى h4 كمعرفات اساسية مستخدمة في قوالبها لكن قوالب بلوجر الأساسية لم تحدث منذ فترة طويلة واصبحت تعمتد على معرفاتها الثابته لعناوين المواضيع وهو معرف h3 ومع انتشار ثقافة السيو بدأ الكثيرين يغيرون معرفات بلوجر وأصبح البعض يستبدل المعرف الخاص بالمواضيع وهو الذي تتمحور عليه أكثر الشروحات من h3 الى h1 وهذا ما رأيناه في القوالب الديناميكية لبلوجر كونها حديثة فأصبحت تحمل معرف h1 كمعرف أساسي لعناوين المواضيع لكن هنا نرى أمر هام وهو أن المعرف h1 مستخدم كأساسي في عنوان المدونة نفسها وبالتالي هذا يعطيه أهمية في التتبع قرأت عدة مقالات عن الأمر ثم استقريت على التالي 

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

العنوان وهو ما يحمل معرف h2

العنوان الفرعي وهو ما يحمل معرف h3

العنوان الثانوي وهو ما يحمل معرف h4

ولا يوجد مكان للمعرف h1 بالتالي يمكنك الإكتفاء بالمعرف الأساسي لعنوان الموضوع وهو h3 ونترك المعرف h1 ليتفرد به عنوان المدونة لترتيب الأهمية لذلك ان كنت ممن يجيدون التعامل مع الإضافات بشكل مقبول يمكن ان ترفع أهمية عنوان الموضوع بتغير معرفه من h3 الى h2 

لماذا قلت يجيدون التعامل مع الإضافات لان هناك اضافات قد تعتمد على معرفات المواضيع مثل هذه الإضافة

فهي تعتمد على المعرف لجلب عنوان الموضوع واغلب الإضافات يتم اعدادها طبقاً للمعرف الأساسي وهو h3 فإن لم ترد التعديل على بعض الإضافات التي تتطلب ذلك لا تعدل المعرف

ولتعديل معرف المواضيع اتبع التالي

ابحث عن الاكواد التالية واستبدل h3 بـ h2

             <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h3>

      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>

ربما تكون هناك اكود أخرى ولتميزها ستجد بجانب h3 كلمات كهذه post-title entry-title

بالنسبة للمعرف h1 يمكنك استخدامه كمعرف مواضيع أيضاً في حالة كنت تبني مظاهر للمعرفات الداخلية كلها ولا تريد ان تختلط المظاهر ببعضها فلا اشكال في الأمر

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

تحياتي

قالب Dynamic Mag معرب ومطور

القالب الإحترافي Dynamic Mag هو قالب مميز يصلح للمواقع الإخبارية والتقنية القالب له العديد من المميزات اهمها التجاوب ودعم الاجهزة الذكية وتصميمه هادئ ومريح لكن أهم ما في هذا القالب المجانية فالقوالب التي تكون بمثل تصميمه وتواجد أقسام متعدده غالباً تكون مدفوعة وما يعرض منها مجانا اما انه غير كامل وبه مشاكل او تتم سرقته وانتهاك حقوق الملكية به مما قد يتسبب بالعديد من المشاكل اخطرها حذف المدونة كما تطرقنا سابقاً في هذا الموضوع أما قالبنا هذا فهو مجاني ولن يسبب هذا النوع من المشاكل

معاينة تحميل

شرح تعديل القوائم

القائمة الاولى ابحث في القالب عن هذه الاكواد

<li><a href='#'>الفهرس</a></li>
<li><a href='#'>اتصل بنا</a></li>

يمكنك تعديل التسميات العربية بما تريد واما رمز الـ # بجوار كل تسمية هذا عدله بالرابط

القائمة الثانية ابحث في القالب عن هذه الاكواد

<li class='red'><a href='#'>أحمر</a>

<ul class='sub-menu'>

<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>

</ul>

</li>

<li class='yellow'><a href='#'>أصفر</a>

<ul class='sub-menu'>

<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>

</ul>

</li>

<li class='green-2'><a href='#'>أخضر</a>

</li>

<li class='orange'><a href='#'>برتقالي</a>

<ul class='sub-menu'>

<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>

</ul>

</li>

<li class='pink'><a href='#'>وردي</a>

<ul class='sub-menu'>

<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>

</ul>

</li>

<li class='green-3'><a href='#'>أخضر غامق</a></li>

عدل أيضاً الكلمات العربية بالكلمات التي تريد ورمز الـ # بالرابط المناسب

تعديل الاقسام المتعددة

ستجد اربع أدوات فوق صندوق المواضيع أضف الاكواد التالية طبقاً لإسم كل إضافة
آداة القسم الاول استبدل كلمة القسم بإسم القسم أو التسمية التي تريد ان تعرض المواضيع منه

<div id='featurebottom1'>
<h2 class='headingfeature1'><a class="linku1" href="/search/label/القسم">
القسم</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/القسم?
max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;
callback=recentthumbs&amp;' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>

آداة القسم الثاني والثالث استبدل كلمة القسم1 بإسم القسم الذي سيعرض على اليسار
والقسم2 بإسم القسم الذي سيعرض على اليمين

<div id='featurebottom2'>

<h2 class='headingfeature2'><a class="linku2" href="/search/label/القسم1">

القسم1</a>

</h2>

<div class='left-corner-canvas'/>

<script src='/feeds/posts/summary/-/القسم1?

max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;

callback=recentthumbs2&amp;' type='text/javascript'/>

</div>

<div style='clear:both;'/>

</script>

</div>

</div>



<div id='featurebottom13'>

<h2 class='headingfeature3'><a class="linku3" href="/search/label/القسم2">

القسم2</a>

</h2>

<div class='left-corner-canvas'/>

<script src='/feeds/posts/summary/-/القسم2?

max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;

callback=recentthumbs3&amp;' type='text/javascript'/>

</div>

<div style='clear:both;'/>

</script>

</div>

</div>

آداة القسم الرابع استبدل كلمة القسم بإسم القسم أو التسمية المراد عرض المواضيع منه

<div id='featuredpostbig4'>
<h2 class='headingfeature1'><a class="linku1" href="/search/label/القسم">
القسم</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/القسم?
max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;
callback=recentthumbs&amp;' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>

طبعا لا تنسى تعديل أكواد الميتا تاج في بداية القالب ويمكنك الإستعانة بهذا الموضوع لتعديلها

ويرجى عدم حذف الحقوق والإلتزام بشروط الإستخدام

دمتم في امان الله