طابور اليكسا واضطراب الترتيب

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

الطابور

أكيد تعرفه !! ومن منا لا يعرف الطوابير بدئاً من طابور فرن العيش الى طابور الإنتخابات الى طابور الصباح في المدارس الذي ليس منه اي فائده غير أنه يرهق الطلبة المهم
نفترض انك تقف في طابور مكون من 100 فرد وأنت رقم مئة
كم العدد الذي تحتاج تجاوزه لتصبح رقم 50 ؟؟
سأوفر عليك العملية الحسابية عليك تجاوز 49 فرد
لكن ماذا لو كان الطابور مكون من 1000 فرد ؟؟
ستحتاج لتصل لرقم 50 ان تتجاوز 949
بالرغم أنك في الحالة الثانية انجزت انجاز أكبر وتجاوزت عدد اضعاف العدد السابق إلا أن ترتيبك لم يتغير ما تزال رقم 50
لكن هنا أصبح للرقم 50 قيمة أخرى وهي انه بعدك 949 شخص اى أن قيمة موقعك ارتفعت مع عدم تغيره

هذا بالضبط ما حدث وما يحدث وما سيحدث مع ترتيب اليكسا

كل يوم هناك مواقع جديدة تفتح وتنافس في اليكسا
وبالتالي كل يوم قيمة مكانك في الترتيب ترتفع 
يعني من كان يريد ان يصل لترتيب 2 مليون منذ عام كان يحتاج مثلا 30 زيارة يوميا أما اليوم فيحتاج مثلا 50 الى 60 زيارة
لم يتغير الترتيب مازال 2 مليون لكن المنافسة جعلت قيمته من الزائرين أعلى فلنعتبر ان الزوار هم سعرالترتيب في اليكسا
اصبح ترتيب الـ 2 مليون سعرة 60 زيارة 
لذلك لو انه من عام ترتيبك كان 2 مليون ولديك 30 زيارة لو الآن لديك 40 زيارة واصبح ترتيب 3 مليون 
أنت لم تنحدر بل تفوقت ولكن القيمة هي التي اختلفت
لذلك كان يتم اعتبار سابقاً من يصل لمربع الـ 500 الف حقق انجاز اليوم من يصل لمربع الـ مليون حقق انجاز أكثر مما حققه صاحبا لـ 500 الف من عام
لأنك الآن تحتاج لزيارات أكثر من التي حققها صاحب الـ 500 الف من عام لتصل للمليون

هذا ببساطة ما حدث لترتيب اليكسا الفترة الماضية بقوة نظراً لانه تضاعفت كمية المواقع الجديدة عن الأعوام الماضية

وزادت المنافسة لذا عندما يتراجع رتيبك الآن لا تقول جن اليكسا أو تلف , ولا تعتبر انك تتراجع في النجاح 

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

والاهم هو ان تقدم شئ مفيد يرفع من قيمة المحتوى العربي

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

نموذج اتصال بلوجر المطور

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

معايــنة

المقارنة

البنود	نموذج بلوجر	foxyform
دعم اللغة
سهولة التركيب
امكانية تنسق الشكل
تنسيق الرسالة المرسلة
الحماية من السبام عبر كلمة التحقق

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

قم بالدخول لصفحة التخطيط ثم أضف آداة نموذج الإتصال ستجدها في المزيد من الأدوات

بعد ذلك قم بالدخول لصفحة تحرير القالب ثم اختار الآداة بالشكل التالي

ثم اضغط على أسهم توسعة الآداة واحذف كل ما هو مجود بين هاذين الكودين

 <b:includable id='main'>
 </b:includable>

وهذه صورة توضيحية لما تم حذفه

ملحوظة في حالة أن الآداة تحمل رقم آخر غير الرقم واحد أي مثلاً ContactForm2 قم بتغييره الى واحد

آخر جزء في عملية التركيب

ننشئ صفحة ثابته جديد أو ان كانت لديك واحده منشئه

قم بوضع الكود التالي بها بعد أن تحول صندوق المواضيع من وضع تأليف الى وضع Html احذف اى شئ موجود ثم أضف الكود

<style>
.cnmufourm {
  background: #ddd;background: -moz-linear-gradient(top,#ddd,#fff);background: -webkit-linear-gradient(top,#ddd,#fff);
  border-radius: 10px;
  box-shadow: 0 0 9px 2px #777777;
  margin: 10px auto;
  padding: 20px 20px 20px 30px;
  text-align: center;
  width:80%;
max-width:600px;
-webkit-padding-end:20px;
border:2px solid #777;
}

.contact-form-widget {
  max-width: 100%;
  width: 100%;
  height:100%;
}

.contact-form-name,.contact-form-email,.contact-form-email-message {
  border: 1px solid #BBBBBB;
  color: #605F5F;
  max-width: 100%;
  padding: 3px 5px 5px;
  width: 100%;
  font-size:16px;
height:40px;
  font-family: tahoma;
text-align:right;
}

.contact-form-email-message {
margin-bottom:15px;
min-height:150px
}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
  border: 1px solid #8F8F8F;
  color:#000;
}

.contact-form-button-submit {
background: #F68B00;background: -moz-linear-gradient(top,#FBB74B,#FA6400);background: -webkit-linear-gradient(top,#FBB74B,#FA6400);
border:0;
color:#000;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

.contact-form-button-submit:hover {
background:#EC992C;
border:0;
color:#000;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#6F6F6E,#000);background: -webkit-linear-gradient(top,#6F6F6E,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
border:0;
border-radius:20px;
}

#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
border-radius:20px;
}

</style>

<div class="cnmufourm">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class='form'>
    <form name='contact-form'>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="الإسم" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;الإسم&quot;;}' onfocus='if (this.value == &quot;الإسم&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="البريد الإلكتروني"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البريد الإلكتروني&quot;;}' onfocus='if (this.value == &quot;البريد الإلكتروني&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>
    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='اكتب رسالتك هنا'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;اكتب رسالتك هنا&quot;;}' onfocus='if (this.value == &quot;اكتب رسالتك هنا&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit' type='button' value='إرسال'/>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit2' type='reset' value='مسح'/>
    <p></p>
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    </div>
</div>
</div>
</div>

بعض التنسيقات

اللونين #ddd,#fff هما الوان تدرج الخلفية

الرقم 777 هو لون الظل ولون الإطار الخارجي

الكودين الأخضر والازرق هما الوان تدرجات الأزرار يمكنك تغيرهما

وطبعا مع قليل من الخبرة في CSS ستستطيع تنسيقها بشكل أفضل

وبالتوفيق

نظرة على طريقة عمل الجداول

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

نبدا على بركة الله

هذا هو أبسط شكل منسق للجداول

العنصر الأول	العنصر الثاني	العنصر الثالث
العنصر الأول	العنصر الثاني	العنصر الثالث

وهذا هو الكود وسنقوم بشرحة

<style type="text/css">
.cnmutable {
    border-collapse:collapse;
    border-spacing:0;
}
.cnmutable img {
    width:125px;
    height:125px;
}
.cnmutable tr, .cnmutable th {
    border:1px solid #000;
    padding:5px 10px;
    text-align:center;
    width:125px;
        }
</style>
<table class="cnmutable">
<tr style="background:#F66">
<th>العنصر الأول</th>
<th>العنصر الثاني</th>
<th>العنصر الثالث</th>
</tr>
<tr style="background:#F66">
<th>العنصر الأول</th>
<th style="background:#3FC">العنصر الثاني</th>
<th>العنصر الثالث</th>
</tr>
<tr style="background:#fff">
<th><img src="http://2.bp.blogspot.com/-UlO34YtXU3g/UqkcO_r4x1I/AAAAAAAACbw/WKiYTsiLq8U/s1600/cnmuvideo.jpg"></img></th>
<th><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm2sO-KeORpzQtBZv3iNTtuMcer46AoMBc1WlSFBK66Eyq8qAd80MUKcyMuCFb-7vgat_L67DqJyhFPuCdfhQhXdFucj2N4cybgIAL7Dd44fnDLrR_IzkXLX8jSmTL5ucT7dkvg7yvNff2/s1600/xnshell.jpg"></img></th>
<th><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05CWRHfNLCxVpEp-eQiNduC1JK1WmY-SMXqcfuZRSaoJg22Q3O3LrBr4e3xS5Qszfm1RZFOmn-xEKynTny2suR6-R4R_39Pyu79Vrk8U51IeL3BxQoRrWulRfUIw3L5rbJSVzjg7AjIU/s622/slidesubsc.jpg"></img></th>
</tr>
</table>

جزء الستايل

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

بالنسبة لهذا الكود border:1px solid #000; الرقم 1 هو حجم الإطار الذي يفصل بين الخانات واللون #000 هو لو الإطار

أما الكود الاخير width:125px; فهو يعبر عن عرض الخانات

هذا هو الجزء الأساسي في التنسيق وطبعا من له خبره في Css سيستطيع التعامل معه بشكل أفضل

جزء الـ HTML

يتكون الجدول من الوسم
<tr>
<th></th>
</tr>
ببساطة الوسم <tr> = بداية سطر حتى وسم الإغلاق </tr> هنا ينتهي السطر
أما الوسم<th></th>  فهو يساوي خانة بمعنى أن ما كتبناه هو سطر به خانة واحده
لو كررنا بهذا الشكل
<tr>
<th></th>
<th></th>
<th></th> 
</tr>
أصبح هكذا سطر يحتوي ثلاث خانات 
 <tr>
<th></th>
<th></th>
<th></th> 
</tr>
<tr>
<th></th>
<th></th>
<th></th> 
</tr>
هكذا أصبح لدينا سطرين كل منهما يحتوي ثلاث خانات
لو نظرنا للمثال الموجود سنجده أنه أيضا جدول مكون من ثلاث أسطر كل منهما يحتوي ثلاث خانات
طبعا يمكن الزيادة في عدد الخانات لكن هناك جزء زائد وهو
style="background:#F66"
هذا الجزء هو لون الخلفية ان وضعناه بعد وسم السطر <tr> سيصبح بهذا الشكل
 <tr style="background:#F66">
معناه أن هذا السطر باكمله سيصبح بهذا اللون #F66
وبالتالي يمكنك التلاعب بلون كل سطر

أما لو وضعنا نفس الكود ولكن بعد وسم أحد الخانات بهذا الشكل <th> فيصبح
<th style="background:#3FC">  
معناه أن تلك الخانة وحدها ستصبح بلون مختلف وهو ما نراه في الجودل
أن الخانة الوسطى من السطر السطر الثاني لونها مختلف

يمكنك تكرار أى عدد من الأسطر والخانات لتنشئ جدولاً

لكن كيف نحدد ما بداخل الخانة هل هو نص أم رابط أم صورة أم صورة قابلة للضغط ؟؟

ببساطة اضف بين كود الخانة أحد هذه الأكواد

إضافة رابط	<a href="#">Name</a>
إضافة صورة	<img src="#" /></img>
إضافة صورة قابلة للضغط	<a href="#"><img src="#" /></img></a>

lمكان هذا الرمز # تضيف الرابط ومكان كلمة name تضيف أى كلمة تريد

 ومكان هذا # الوجود في هذا الكود src="#" تضيف رابط الصورة

وطبعا هذا مثال لإضافة رابط داخل خانة

<th><a href="#">Name</a></th>

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

فابدع وأطلق لمخيلتك العنان

وبالتوفيق

قالب Zylyz معرب ومطور

قالب Zylyz من القوالب البسيطة جداً والخفيفة وله طابع لوني هادئ ويمتاز بالاناقة وهو يناسب المدونات النسائية كثيراً وهو نوع من التغيير من النمط العام للقوالب التي نعرضها خصوصا أن كثير من الأخوات أصبحوا حاليا منافسون اقوياء جداً في عالم بلوجر بل وتفوقوا على الشباب بقوة , لذلك يجب أيضاً ن نقدم نوع من القوالب يتناسب مع مدوناتهم طبعا ليس جميع الفتيات يدونون في المجالات النسائية او التصميم فهذا القالب يناسب مدونات التصميم أيضا فبعضهن يدون في مجالات التقنية و بلوجر (( وبيحاربونا في اكل عيشنا )) ^_^ لكن عموما هو قالب يتناسب مع من طلبوه من الأخوات لمحتوى مدوناتهم

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

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

الخفة والسرعة وصديق لمحركات البحث

متوافق مع المتصفحات العالمية

يحتوي على أربع أدوات في الفوتر

تم اضافة أكواد الميتا تاج في بداية القالب قم بتغيير ما يلزم

يحتوي على قائمة منسدلة وهي من التطويرات

فقط ندخل الى صفحة التخطيط ونحرر الآداة Css menu ونضيف بها هذا الكود

<style type="text/css">
#cnmudrdown{
  width:100%;
  height:40px;
  display:block;
  padding:5px 0;
  margin:0 0 22px 0;
}
#cnmudmenu,#drop{
    list-style:none;
    direction:rtl;
    padding:0;
    margin:0;
    }
#cnmudmenu li {
    float:right;
}
#cnmudmenu li a {
    display:block;
    padding:11px 15px;
    color:#fff;
    text-decoration:none;
    font:15px Tahoma, Geneva, sans-serif;
    font-weight:bold;
}
#cnmudmenu li a:hover {
    color:#7A0085;
    transition:all .7s ease 0s;
}
#drop {
    position:absolute;
    display:none;
    list-style:none;
z-index:60;
}
#drop li {
    float:none;
}
#drop li a {
background:#B781BD;
border-bottom:1px solid #452847;
padding:5px 10px;
width:150px;
}

#drop li a:hover {
background:#fff;
}
  
#sub:hover #drop {
    display:block;
}
#drop2:hover #cnmudmenu3 {
    display:block;
}
#cnmudmenu3 {
    position:absolute;
    display:none;
    margin-right:170px;
    margin-top:-29px;
    width:170px;
    border:1px solid #452847;
    border-bottom:0;
    }
#cnmudmenu3 li{
    list-style:none;
    margin-left:100px;
}
#cnmudmenu3 li a {
width:150px;
}
</style>

<div id='cnmudrdown'>
<ul id="cnmudmenu">
<li> <a href="#">العنصر الأول</a></li>
<li id="sub"> <a href="#">العنصر الثاني</a>
<ul id="drop">
<li> <a href="#">رابط فرعي 1 </a></li>
<li> <a href="#">رابط فرعي 2 </a></li>
<li id="drop2"> <a href="#">رابط فرعي 3 </a>
<ul id="cnmudmenu3">
<li> <a href="#">ثانوي 1</a></li>
<li> <a href="#">ثانوي 2</a></li>
<li> <a href="#">ثانوي 3</a></li>
</ul>
</li>
<li> <a href="#">رابط فرعي 4 </a></li>
<li> <a href="#">رابط فرعي 5 </a></li>
</ul>
</li>
<li> <a href="#">العنصر الثالث</a></li>
<li> <a href="#">العنصر الرابع</a></li>
</ul>
</div>

وللتعرف أكثر على التعامل مع القائمة قم بزيارة الوضوع التالي من هنــا

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

يمكن البحث عن كلمة الكاتب وتغيير ما يلزم ومهم زيارة هذا الوضوع لشرح الإضافة من هنــا

يحتوي القالب على سلايدر جذاب ويتم تخصيصه بتعديل هذه الاكواد

<div class='nivoSlider' id='slider'>
   
<a href='#'><img class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KSv_33E33r5nRcE592rJqOoamN4W6FOmuCQYfn704qrg1bKDVU9cAhYeeGdWkBWSp3lVi-WMuR2PPOe4waxg_xSqaIcSzJ5GW2O8ZPXNWz3KxzRW_ejyMuNhSG3UmzX5KWo3manWcLc/s1600/slide-1.jpg' title=''/></a>
   
<a href='#'><img class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbh1zh03bhQqKIfzl1PdmT3Y30KtfEJ01GXYsZbbiVzVhDPR2DNJZCmp7l2BVkG3-QoOK0VwuEiuPeYW2rO7D0M2Yu2SPSbFqfnHM5Ak_ysZi33V4s9BgWLezZbx1zGKDUGbCvHTN27w/s1600/slide-2.jpg' title=''/></a>
   
<a href='#'><img class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzcgnW_Z7C4JGJvPxTpinyf-IUAje2uVWtJOWF56ZWH4TBfpKarbqUAsKK2rrka3wMtBxt21nmORwkpWvlAICJ9FkGaNAvJQ6OAf_pC58Rtk5n8U5hUveB7uo6k27G_H_p8sDfZmRtQc/s1600/slide-3.jpg' title=''/></a>
   
<a href='#'><img class='slideimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Z22a7rF3grwAB5lHxdO_F_5s7toXFqEZO6vddsn26ApK5FuDPgVJO8FVyfRUJsHGAamIdNUMxI5LuSO_1IobwT0h6-XvyEatgL6Q_i1PzsTzPVOewjg5TRsN1TxSRqfsfI5hE7v8l6g/s1600/slide-4.jpg' title=''/></a>
   
</div><!-- nivo-Slider -->

الروابط هي روابط كل صورة قم بتغييرها بالصورة المناسبة ورمز # هذا هو رمز الرابط الذي تؤدي اليه الصورة عند الضغط عليها استبدله بما يناسبك

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

وبالتوفيق في إستخدام القالب

اعطاء فديوهاتك على بلوجر شكل مميز

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

معايــنة

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

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

ثم فوق الوسم ]]></b:skin> أضف الكود التالي

.cnmuvideo {
  background:#FFFFFF;
  border: 6px dashed #D73B36;
  border-radius: 15px;
  box-shadow: 0 0 5px 4px #000000;
  height: 315px;
  padding: 10px;
  width: 420px;
  margin:10px auto;
}

وهذه هي طريقة التنسيق

اللون #FFFFFF هو لون خلفية الفديو
أما هذا اللون #D73B36 هو لون الإطار الخارجي
الرقم 6 هو حجم الإطار
أما بالنسبة لكلمة dashed  فهي تعني ان الإطار عبارة عن خطوط متقطعة
يمكن استبدالها بـ dotted لتصبح نقاط متقطعة
أو solid ليصبح الإطار خط كامل دون تقطيع
الرقم 15 هو درجة نعومة الحواف
هذا اللون #000000 هو لون الظل الخارجي
والرقم 315 هو ارتفاع الفديو
و 420 هو عرض الفديو
طبعا الإرتفاع والعرض المحددين سيكونان هما أيضا المستخدمان في كود الفديو

طريقة اضافة الفديو 

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

ثم اضف الكود التالي

<div class="cnmuvideo">
كود الفديو هنا
</div>

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

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

<div class="cnmuvideo">
<iframe width="420" height="315" src="//www.youtube.com/embed/EhqCE9uKydc" frameborder="0" allowfullscreen></iframe>
</div>

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

انتهى درسنا بفضل الله

الحزمة الخدمية للتعامل مع الصور XnView Shell Extension

الصور والتعامل اليومي معها جزء من عمل المدون وطبعا هناك العديد من البرامج التي تتيح التعامل مع الصور لكن السرعة مطلوبة في بعض الأمور كتحويل صيغ الصور او تعديل الإتجاهات أو حتى رفعها وهنا ياتي دور تلك الحزمة الخدمية فهي حزمة تضيف خيارات على الزر الأيمن للماوس تمكنك من معاينة الصور وتحويل الإمتداد او قلب الصور أو نسخها أو حتى رفعها بضغطة زر بدون فتح برامج او أى شئ فقط كليك يمين واختار الأمر الذي يعجبك يمكنك التحويل بين الصيغ الآتية GIF, BMP, JPG, PCX, PNG, TIF, TGA  وطبعا هذا يوفر الكثير من الجهد كما انها تمكنك من رفع الصور السريع على موقع ImageShack كثير من المميزات في هذه الحزمة البسيطة يجب ان تكون على جهازك

إسم الحزمة : XnView Shell Extension

الترخيص : مجاني

الإصدار : V3.50

بيئة العمل : Windows 2000/XP/2003/Vista/7

الحجم : 1 ميجا تقريباً صغير جداً

تحميل النسخة 32   تحميل النسخة 64

قائمة منسدلة خفيفة فقط CSS

القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري Jquery ومنها ما يعمل باكواد CSS فقط , ماالفرق بينهما ؟ الفرق ان التي تعمل بتقنية جي كويري اكثر تطورا لكنها أثقل  أما الـ CSS فهي خفيفة للغاية وسهلة التعامل وانا أفضلها جداً ولهذا قمت بإنشاء هذه الإضافة وراعيت أن تكون سهلة التركيب و التنسيق للجميع لكي يتحكم بها كل مستخدم كما يريد

أولا عاين الإضافة من هنا

بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt

<style type="text/css">
#cnmudrdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
}
#cnmudmenu,#drop{
    list-style:none;
    direction:rtl;
    padding:0;
    margin:0;
    }
#cnmudmenu li {
    float:right;
}
#cnmudmenu li a {
    display:block;
    padding:11px 15px;
    color:#fff;
    text-decoration:none;
    font:15px Tahoma, Geneva, sans-serif;
    font-weight:bold;
}
#cnmudmenu li a:hover {
    background:#ccc;
    color:#000;
    transition:all .7s ease 0s;
}
#drop {
    position:absolute;
    display:none;
    list-style:none;
z-index:60;
}
#drop li {
    float:none;
}
#drop li a {
background:#000;
border-bottom:1px solid #bbb;
padding:5px 10px;
width:150px;
}
   
#sub:hover #drop {
    display:block;
}
#drop2:hover #cnmudmenu3 {
    display:block;
}
#cnmudmenu3 {
    position:absolute;
    display:none;
    margin-right:131px;
    margin-top:-28px;
    }
#cnmudmenu3 li{
    list-style:none;
    margin-left:100px;
}
#cnmudmenu3 li a {
width:150px;
}
</style>

<div id='cnmudrdown'>
<ul id="cnmudmenu">
<li> <a href="#">العنصر الأول</a></li>
<li id="sub"> <a href="#">العنصر الثاني</a>
<ul id="drop">
<li> <a href="#">رابط فرعي 1 </a></li>
<li> <a href="#">رابط فرعي 2 </a></li>
<li id="drop2"> <a href="#">رابط فرعي 3 </a>
<ul id="cnmudmenu3">
<li> <a href="#">ثانوي 1</a></li>
<li> <a href="#">ثانوي 2</a></li>
<li> <a href="#">ثانوي 3</a></li>
</ul>
</li>
<li> <a href="#">رابط فرعي 4 </a></li>
<li> <a href="#">رابط فرعي 5 </a></li>
</ul>
</li>
<li> <a href="#">العنصر الثالث</a></li>
<li> <a href="#">العنصر الرابع</a></li>
</ul>
</div>

والآن مع شرح التنسيق

هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة

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

إنشاء البومات صور من صفحات فيس بوك على بلوجر

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

معايـــنة


كما نرى هذه البومات صفحة قناة هدى HudaTV 

الآن كيف تضيف  البومات الصفحة التي تريد

أول شئ يجب ان تحصل على معرف الصفحة وذلك بالطريقة التالية

ادخل على هذا الرابط findmyfacebookid.com

ستجد صندوق كتابة ضع به رابط الصفحة

مثال صفحة هدى

https://www.facebook.com/Huda.Tv

ثم إضغط على زر Lookup numeric ID

سيظهر رقم قم بنسخة هذا هو المعرف افعل نفس الطريقة مع اي صفحة تعجبك

نأتي لطريقة التركيب يمكنك إضافة الكود التالي إلى صفحة ثابته او موضوع لا مشكلة
""المهم ان يكون عرض الصفحة أكثر من 640px ليظهر الصندوق بشكل جيد
حتى لو لم تكن كذلك سيظهر لكن قد يكون خارج قليلا عن الإطار""

ولكن عند الإضافة حول صندوق الكتابة من وضع التأليف الى وضع HTML

هذا هو الكود

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link media="all" href="https://cnmu.googlecode.com/svn/trunk/2014/facebook-albumstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/2014/facebook-album.js"></script>
<script>
    $(document).ready(function ($) {
        $('#FB_Album_Frame').FB_Album({
            facebookID: 'page ID',
            responsiveGallery: false,
            fixedWidth: 980
        });
    });
</script>

<div id="FB_Album_Frame"></div>

إستبدل Page ID بمعرف الصفحة

إذا كنت ستستخدم هذه الخاصة كثيراً او صادفت مشكلة في الإضافة بهذا الشكل

قم بوضع الجزء الأزرق فوق الوسم </head> في قالبك

ثم استخدم في الموضوعات الجزء الأسود فقط

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

أنا برئ من أى شخص يستخدم الطريقة في نشر البومات لصور تخالف الشريعة الإسلامية

وفقنا الله وإياكم الى ما يحب ويرضى

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

إضافة مواضيع ذات صلة بشكل العناوين

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

 الخطوة الاولى

ابحث عن هذا الوسم في القالب </head> وأضف فوقه الكود التالي

<!--cnmu.blogspot.com-Related-Posts-Starts-->
<style>
#related-posts {
float : right;
width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font-size:13px;
margin-bottom:10px;
font-family:arial;
font-weigh:bold;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #000;
font-size : 13px;
text-decoration : none;
font-weigh:bold;
display:block;
}
#related-posts a:hover {
color : #fff;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZe3BtO08B79vW38Sd08qC-G3ONastnL0PhOtxzsYXjqsDzf_VJ3M52T312cZOKUV6pzLOuSEPLxhooXkuI1GEYgHEZXpiu2JHDhL_MVvhHemu-PknSoI7qtbYjko1DoO19qB55uQxyk/s20/ktipp1.png") no-repeat scroll 0 5px #E7E7E7;
margin-bottom:5px;
padding:2px 10px;
line-height : 2em;
border-radius:8px;
border:1px solid #bbb;
}

#related-posts ul li:hover {
display : block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvStydT6EzyxUr31K7zAmLwL_0ocoGJkIA6o__c6gErZeKPvOWwuNrjCVO2Krbcf0zH31Q7AUuX8ExrwQ7dqvCyTseSk4LIfdLdHO951V8zaQNGUfU3TaSHCjtfq-MOD0Y0U-7qltOhOc/s20/ktipp.png") no-repeat scroll 0 5px #464646;
border-color:#000;
transition:all 0.8s ease 0s;
}
#related-posts h3 {color:#000; background:#FCA000; display:inline; margin-right:10px; border-radius:8px; padding:2px 10px; border:1px solid #000; font-size:16px; text-align:center;}
 </style>
<script src='https://cnmu.googlecode.com/svn/trunk/related-post-just-title.js' type='text/javascript'/>
<!--cnmu.blogspot.com-Related-Posts-end-->

طريقة التنسيق لمن يريد تنسيق مخصص

هذا #000 هو لون الرابط
وهذا #fff هو لون الرابط عند تمرير الماوس
والرقم 13 هو حجم الخط
هذا اللون #E7E7E7 هو لون الخلفية
وهذا #464646 هو لون الخلفية عند تمرير الماوس
الرابط الأحمر هو رابط الأيقونة والازرق هو رابطها عند تمرير الماوس ان اردت تغيرها
هذا #bbb هو لون الإطار
وهذا #000 لون الإطار عند تمرير الماوس
هذا #FCA000 هو لون خلفية كلمة مواضيع ذات صلة
وهذا #000 هو لون الخط
والرقم 16 هو حجم الخط

الآن الخطوة الثانية في تركيب الآداة

ابحث عن أحد هاذين الكودين 

<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>

وأضف تحته الكود التالي

<!--cnmu.blogspot.com-RELATED-POSTS-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b><h3>مواضيع ذات صلة</h3></b><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
<!--cnmu.blogspot.com-RELATED-POSTS-end-->

يمكنك تغيير كلمة مواضيع ذات صلة بكلمة تناسبك

والرقم 5 قم بزيادته ان اردت زيادة عدد الروابط

انتهى بحمد الله

القالب الشهير Infrared

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

معاينة     تحميل 

 معلومات وتنسيق القالب

يحتوي القالب على مساحة إعلانية في الهيدر بمقاس 468x60

يحتوي على قائمة منسدلة في أعلى القالب وطريقة تنسيقها كالتالي

<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>

<li><a href='#'>عن المدونة</a></li>
<li><a href='#'>راسلنا</a></li>
<li><a href='#'>مدونة</a></li>

<li><a href='#'>قائمة</a>
  <ul class='sub-menu'>
     <li><a href='#'>قائمة1</a>
    <ul class='sub-menu'>
       <li><a href='#'>قائمة 2</a></li>
    </ul>
     </li>
  </ul>
</li>


<li><a href='#'>قائمة</a>
   <ul class='sub-menu'>

       <li><a href='#'>قائمة فرعية</a>
       <ul class='sub-menu'>
           <li><a href='#'>تعديل</a></li>
       </ul>
       </li>

       <li><a href='#'>قائمة</a></li>
       <li><a href='#'>قائمة</a></li>

   </ul>
</li>


<li><a href='#'>رابط</a></li>

</ul>

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

يحتوي القالب على قائمة منسدلة أخرى وهذه طريقة تنسيقها

<ul class='menu' id='menu-secondary'>

<li><a href='#'>رابط 1</a></li>

<li><a href='#'>رابط 2</a></li>

<li><a href='#'>قائمة</a>
  <ul class='sub-menu'>
    <li><a href='#'>تعديل</a></li>
    <li><a href='#'>تعديل</a></li>
    <li><a href='#'>فرعي</a>
      <ul class='sub-menu'>
        <li><a href='#'>تعديل</a></li>
      </ul>
    </li>
  </ul>
</li>

<li><a href='#'>قائة 2</a>
  <ul class='sub-menu'>
     <li><a href='#'>تعديل</a></li>
     <li><a href='#'>تعديل</a></li>
  </ul>

نفس طريقة التنسيق

يحتوي أيضا على سلايدر وهذه أكواد تنسيقه

<div id='feature-56'>
<div class='inpost'>
<h3>سلايدر رقم واحد</h3>
<p>قم بتغير هذه الجملة كوصف للسلايد الاول</p>
</div>
<a href='الرابط'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZublpAVveDapvJN4qQT7Kw2pUOadvjh1aO_wpMLNWysYiNQXWzILZJAXb5pdsXKbGQwKrZwEIefd9wkyJWvv0YJ1d2tzXMEI2NNzD3oCpxYdtbP3tJjszakOGklcnnHAc_NM_7G_rrk/s650/image-1-large.jpg'/>
</a>
</div>
   
   
<div id='feature-54'>
<div class='inpost'>
<h3>سلايدر رقم 2</h3>
<p>قم بتغير هذه الجملة كوصف للسلايد الثاني</p>
</div>
<a href='الرابط 2'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhReDCi923mnZTnrVTRYeHRVvlRr9pD7Tv0qOrZLfp23nRl9wjWFOjI5mb7Z_LXzFExoTefsaAw4wopxQ132jDR-KPanT9XZthgy2zN8LSMkfLR8XQiOpbuFYaxVnr1ocemut-AXbT_8w/s650/image-2-large.jpg'/>
</a>
</div>
   
   
<div id='feature-50'>
<div class='inpost'>
<h3>سلايدر رقم ثلاثة</h3>
<p>قم بتغير هذه الجملة كوصف للسلايد الثالث</p>
</div>
<a href='الرابط 3'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5tIA-jyBog_ihaZkqZ3aSU6atnOOtcMBkIqVvQY-w1UUaHMaB_ZIA0YJM4VkDfZtXtR8sPpvab-8tSIguSKgcMnf1WhGsD08tCUUeknZ8hrGdxjkG_HDSrY3fhyJrkZEd7wcRNFpAakM/s650/mountain-biking-nature1.jpg'/>
</a>
</div>
   
   
<div id='feature-18'>
<div class='inpost'>
<h3>سلايدر رقم 4</h3>
<p>قم بتغير هذه الجملة كوصف للسلايد الرابع</p>
</div>
<a href='الرابط 4'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPXDkzgTO9oTtWvpk1g6ljO9wNJcXEWmwQ7ou7l_9tdz1D3jM0T38YJR0154SgtEKYap2H_0nzI-9CKwbSh6C9XFDnBt-SZmhekM3uFCxMe5r1Dd5g79xfLyruvg_zNCr1UhHBblOK7o/s650/IMG_1326-650x280.jpg'/>
</a>
</div>


</div>


<ul id='tabnav'>
   
<li><a class='listab' href='#feature-56'><img class='phumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJUxQHDRybs4vCnQBwo4zA87JS0i0ADnUZ109n9VwHdh4_MuleunxoyFVFW1bjE-P5NxMP8RJlSZeZFagC_MZA3_KRMhvCm16b2utBfQxPrYnbjnx9guqy_LG6a_T-QbCkAdwOoc6tUo/s1600/image-1-small.jpg'/>
<h3>عنوان سلايد رقم 1</h3></a></li>
       
<li><a class='listab' href='#feature-54'><img class='phumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3h87wPR7-XUDl0_OMDn8IJknqNyYB01vQnzT-uPUj6cSqbuX0owB0EKZWpi2QEQn8Rv7m8mEcvEv4sghv6qeuIqPo25czvbbW6qABA51s70toEqZS7bRok6JjfMq4BLeVvgNGDnnUJI/s1600/image-2-small.jpg'/>
<h3>عنوان سلايد رقم 2</h3></a></li>
       
<li><a class='listab' href='#feature-50'><img class='phumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5tIA-jyBog_ihaZkqZ3aSU6atnOOtcMBkIqVvQY-w1UUaHMaB_ZIA0YJM4VkDfZtXtR8sPpvab-8tSIguSKgcMnf1WhGsD08tCUUeknZ8hrGdxjkG_HDSrY3fhyJrkZEd7wcRNFpAakM/s650/mountain-biking-nature1.jpg'/>
<h3>عنوان سلايد رقم 3</h3></a></li>
       
<li><a class='listab' href='#feature-18'><img class='phumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPXDkzgTO9oTtWvpk1g6ljO9wNJcXEWmwQ7ou7l_9tdz1D3jM0T38YJR0154SgtEKYap2H_0nzI-9CKwbSh6C9XFDnBt-SZmhekM3uFCxMe5r1Dd5g79xfLyruvg_zNCr1UhHBblOK7o/s650/IMG_1326-650x280.jpg'/>
<h3>عنوان سلايد رقم 4</h3></a></li>

</ul>

طبعا الأجزاء بالعربية غيرها
أما الروابط الطويلة فهي روابط الصور مرة مكبرة وهم الأربعة الموجودين بالأعلى
 ومرة مصغره وهم الأربعة الموجودين بالأسفل غير كل منها

تم اضافة الميتا تاج ستجدها في اول القالب غير الكلمات الموجوده بها

تم إضافة أكواد المشاركة الإجتماعية للقالب

وتم تنسيق التعليقات وإضافة التعليقات التفاعلية

آخر اعداد ادخل على صفحة التخطيط وقم بتحرير صندوق الرسائل والغي التأشير من على خيار التاريخ الأول

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

حل بعض مشاكل القوالب عن طريق الإخفاء

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

أولا ثبت هذه الإضافة على متصفح فايرفوكس إسم الإضافة Firebug

كروم مدمج به إضافة مباشرة لكن أفضل العمل عبر فايرفوكس

 شاهد الفديو التالي لشرح طريقة العمل

إذا كل ما عليك فعله هو نسخ المعرف كما شاهدنا في الفديو طرقة الحصول عليه

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

ثم تضيف بعده او تحته هذا الكود 

display:none;

كل معرف يكون بعده قوس كهذا { نحن نريد إضافة الكود بعد القوس مثال لمعرف البحث لدي الذي اخفيته في الفديو

 #search وبعد تجد القوس فنضيف الكود بهذا الشكل

#search { display:none;

أو يكون بهذا الشكل

#search {

display:none;

كلاهما لن يفرق ولكن هو توضيح

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

ويمكن أن لا تحذفه لن يضر الأمر ولكن أوضح حتى تعلم الفرق

وبالتوفيق

قالب بلوجر أبيض و أخضر Android app

تحميل معاينة

قالب لمدونات بلوجر بعمود على اليسار وثلاثة أعمدة في الأسفل . به قائمة في الاعلى . الاضافات الموجودة فيه :

• مساحة إعلانية بحجم 728x90
•  مواضيع ذات صلة
• أزرار المشاركة الإجتماعية
• قائمة منسدلة

لمشاهدة باقي الاضافات و التعديلات و اعدادات القالب  في الموضوع الأصلي . صورة كاملة للقالب
 

تعريب كن مدون

أدوات آخر التعليقات واكثر المعلقين تفاعلا لنظام DISQUS

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

أول آدة أكثر المعلقين تفاعلاً

قم بوضع الكود التالي في آداة HTML/Java Script

<style>
#topcommenters {
  text-align: right;
  padding: 10px;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 10px;
}
#topcommenters ul {text-align: right;}
#topcommenters img {float: right;padding: 0 5px;}

li.dsq-widget-item:hover{background:#E1F4FE;}
</style>
<div id="topcommenters" class="dsq-widget">
<script type="text/javascript" src="http://cnmu.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=1&hide_avatars=0&avatar_size=48"></script>
</div>

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

هذا اللون #fff  هو لون خلفية الآداة

وهذا لون الإطار #bbb

هذا اللون الذي يظهر عند تمرير الماوس #E1F4FE

قم بتغير الرقم 0 الى 1 إن أردت إخفاء صور المعلقين

الرقم 5 هو عدد المعلقين الظاهرين

الرقم 48 هو حجم الصور يمكنك تصغيرها بوضع الرقم 32

الرقم 1 غيره الى 0 إن أردت أن تظهر تعليقات المدير في الآداة

وطبعا إستبدل cnmu بمعرف مدونتك في DISQUS

ثاني آداة آخر التعليقات

نفس طريقة التركيب

<style>
#recentcomments {
  text-align: right;
  padding: 10px;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 10px;
}
#recentcomments ul {text-align: right;}
#recentcomments img {float: right;padding: 0 5px;}

li.dsq-widget-item:hover{background:#E1F4FE;}
</style>
<div id="recentcomments" class="dsq-widget">
<script type="text/javascript" src="http://cnmu.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=48&excerpt_length=100&hide_mods=1"></script>
</div>

والتنسيق بنفس الطريقة هناك إختلاف واحد فقط وهو الرقم 100

قم بزيادته او إنقاصه فهو عدد الاحرف التي تظهر من التعليقات

الآداة الثالثة التبويبات المجمعة

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

<style>
#dsq-combo-widget.blue #dsq-combo-content .dsq-combo-box {border: 1px solid #bbb;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
#dsq-combo-widget.blue #dsq-combo-tabs li{border:1px solid #bbb; border-bottom:0;}
</style>
<script type="text/javascript" src="http://cnmu.disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=blue&default_tab=people&excerpt_length=30"></script>

تنسيق هذه الآداة مختلف قليلاً

اللون الأحمر هو لون الإطار إستبدله في الأربع مرات

أما كلمة blue هي لون الآداة وهي تأتي بخمس الوان اختر ما يناسبك منهم فقط انسخ كلمة اللون الذي تريد واستبدلها باللون الموجود

هذه هي الخمس الوان

 blue grey green red orange

 اختلاف أخر وهو كلمة people

وهي تخص تبويب المعلقين الأكثر تفاعلاً وهو التبويب الاساسي الذي ستظهره الآداة عند دخول الموقع إن اردت اختيار تبويب آخر

يمكن إستبدال الكلمة بكلمة recent إن أردت تبوبي آخر التعليقات أن يصبح الأساسي

أو اختيار التبويب الثالث popular وهو تبويب إضافي يخص المناقشات الشائعة ولكن لا أنصح بجعله الإفتراضي نظراً لانه لو لا توجد مناقشات حديثة لن يظهر به شئ

وباقي التنسيق بنفس الطريقة

الرقم 5 هو عدد المعلقين والتعليقات الظاهرين

الرقم 1 غيره الى 0 إن أردت أن تظهر تعليقات المدير في الآداة
وفقكم الله جميعاً
تحياتي

القالب المميز أندرويد آب Android App Blogger Template

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

معاينة     تحميل

الإضافات التي يحتوي عليها القالب

يحتوي القالب على مساحة إعلانية أفقية بحجم 728x90 

يحتوي على إضافة مواضيع ذات صلة

يحتوي على أزرار المشاركة الإجتماعية

مركب به نظام التعليقات التفاعلية

يحتوي على أربع أعمدة في الفوتر

يحتوي على أزرار متابعة إجتماعية يمكنك إستبدال اكوادها

<div class='social-box'>
 <a href='http://www.facebook.com'><img border='0' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSJ5pryCp9PRVdd2Q95RLOPP89V4O0mlqjL1MQBLwjBBy5g206kdqzdjnMDJj2LKjs9Glor3p7-XJyRwbWiG9UHSCdVJjuDYRq0hM3ThDHd605e77Npv5cLNjwm_gubLlk6T7CcQiVsWI/s48/facebook.png' width='48'/></a>

<div class='social-box'>
 <a href='http://twitter.com/'><img border='0' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmltaU8QCi-E3qkEKV3OPWq60RTwoUzHzu1G0Af955z_jJEh2J8CTDn0ZoyviDMJuP17IrlXCdQiDopij4RnFLqu4nAH_PcOdP6wiGAHJzCcn2z7pZH2jJqdvEuSyP_cH-cb1oxJ_G8S0/s48/twitter.png' width='48'/></a>

إستبدل الرابط الأزرق برابط صفحتك على الفيس بوك
والاحمر برابط حساب تويتر الخاص بك

يحتوي على قائمة منسدلة أفقية يمكنك تعديل أكوادها التالية

<div id='navigation'>
 <ul class='menu' id='menu-main'>
 <li><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
 <li><a href='#'>تعديل</a></li>
 <li><a href='#'>تعديل</a></li>
 <li><a href='#'>تعديل</a></li>
 <li><a href='#'>تعديل</a></li>
 <li><a href='#'>تعديل</a></li>
 <li><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>
 <li><a href='#'>تعديل</a></li>
</ul>
</li>
 <li><a href='#'>قائمة فرعبة 2</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>
</ul>
</div>

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

تنسيق آداة شريط الفديو في بلوجر

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

معاينة

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

والآن مع طريقة التنسيق

ندخل الى تحرير القالب نقوم بتوسيع عناصر الستايل بالضغط على السهم المخصص لذلك

ثم فوق الوسم ]]></b:skin> نضيف الكود التالي

.videoBar-container {float:right;}
div.resultDiv_gsvb {
  background:transparent;
  border:0;
  height: 100px;
  margin-bottom: 5px;
  text-align: center;
  width: 130px;
margin-right:10px;
}

div.resultDiv_gsvb img {
  cursor: pointer;
  display: inline;
  height: 90px;
  width: 120px;
border:3px solid #fff;
outline:1px solid #000;
}

div.resultDiv_gsvb img:hover {
border: 3px solid #C53E08;
outline: 1px solid #F90004;
transition: all 0.9s ease 0s;}

table.resultTable_gsvb {width:300px;}
table.gsc-branding, table.gcsc-branding{display:none}

.videoBar-container {float:right;}
table.resultTable_gsvb td {float:right; padding:0;}

الأرقام المعلمة باللون الأزرق هي عرض صورة الفديو ويجب ان يتم تغييرها بنفس القيم يعني ان زدت الأول 5 تزيد الآخر 5

والأرقام المعلمة بالأحمر هي طول صورة الفديو وتعامل بنفس الطريقة

هاذين اللونين هما الوان حدود والإطار الخارجي للصورة

#fff

 #000

اما هاذين فهما نفس الشئ الحدود والإطار الخارجي ولكن عند تمرير الماوس

#C53E08

#F90004

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

لو حجم الصورة 100 أى الأربع صور الخاصة بالفديو حجمهم يساوي أكثر من 300 وبالتالي ستظهر صورتين ثم ستصبح الصورتين الثانيتين في صف ثاني لكن ماذا لو جعلنا مثلا حجم الصورة 300 ستجد أن الأربع صور اصبحوا تحت بعضهم في صفوف أو لو جعلنا الصور صغيره مثلا 48 سنجدهم كلهم في صف واحد عموما جرب تعدي الرقم وستفهم أو اجعله كما هو ان لم تريد تعديل في الشكل وتجربه موفقة بإذن الله

حصرياً تعلم أسهل طريقة لتصميم سكويز بيج

 ما هي سكويز بيج Squeeze Page ؟

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

 يمكن معاينة سكويز بيج من هنا

كيفية تصميم سكويز بيج ؟

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

الخطوات بإختصار

أنشئ مدونة جديدة

قم بتركيب القالب

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

حمل القالب من هنا

هذا القالب ستركبه بالطريقة التالية

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

تعديلات القالب

هناك تعديلات يمكن عملها على القالب تخص الألوان بحيث تجعل السكويز بيج باللون الذي يناسب

وهي كالتالي

 body {background:#fff;font-size:30px;}

اللون المحدد هو لون خلفية القالب

.post {background:#E2E2E2;

 اللون المحدد هو لون خلفية الموضوع

border:8px solid #000;

أما هذا هو لون الإطار الخارجي

غيرهم بالألوان المناسبة لك وبالتوفيق للجميع

وطبعاً انوه على حفظ حقوق القالب

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

قالب بلوجر معرب New Focus Point

تحميل معاينة

قالب خاص بمدونات بلوجر بعمود على اليسار . بلون أبيض . به قائمة في الاعلى و أربعة أعمدة في الأسفل . الاضافات الموجودة فيه :

• عرض الصور بتقنية الـ lightbox
• زر الاعجاب الخاص بفيسبوك
• تمييز تعليقات صاحب المدونة
•  خاصية الرد على التعليق

لمشاهدة باقي الاضافات و التعديلات و اعدادات القالب  في الموضوع الأصلي . صورة كاملة للقالب
 

تعريب و تطوير أسماء أم نضال

مدونة شخصية لفتاة تعشق الإبداع والتميز، تهتم بعالم التصميم (جرافيك ديزاين)، تعريب وتعديل قوالب بلوجر، شروحات لتطوير سكريبت بلوجر وإضافاته الاحترافية