الخميس، 21 مارس 2019

إضافة نموذج إتصال بلوجر في الصفحة الرئيسية

إضافة نموذج الإتصال بالصفحة الرئيسية في بلوجر

إضافة نموذج إتصال بلوجر في الصفحة الرئيسية - اليوم سوف نشارككم كيفية تثبيت نموذج الإتصال في الصفحة الرئيسية الخاصة بالمدونة و هذا يعني إن الإضافة سوف تظهر بالرئيسية الخاصة بمدونتك في اسفل الزاوية.

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



شرح تركيب النموذج


  1. ادخل إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. اضغط على تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.floating-ai-head a:hover{background:#2588ca;color:#fff}
.floating-ai-body{height:350px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:0px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:0px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;font-family:droid arabic kufi;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}


الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">اتصل بنا</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

ملاحظة: إذا كانت هناك اي اكواد لنموذج إتصال اخر يجب إزالتها جميعاً حتى تعمل الإضافة اي سؤال او استفسار لا تترد بوضعه في تعليق


اضافة المشاركات الشائعة الملونة في بلوجر

اضافة المشاركات الشائعة الملونة بشكل جديد و مختلف


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


شرح تركيب الإضافة


  1. اولا ادخل إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. ثم اضغط على تحرير HTML
ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}


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

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

ملاحظة إذا كانت هناك اي اكواد CSS لإضافة اخرى بنفس وظيفة الاداة فيجب عليك حذف الاكواد تجنُباً للمشاكل مُستقبلاً اي سؤال او استفسار لا تترد بوضعه في تعليق


قالب Invert Grid معرب

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

قالب Invert Grid معرب - كالعادة نبحث عن افضل قوالب بلوجر و نقوم بتعريبها 
و دائماً نحاول التنوع بالقوالب حتى تُناسب أذواق الكل و قالب اليوم مُصمم بتصميم شبكي 
و ألوان هادئة و مُريحة للعين و المميز في القالب إنه مُدعم بأكواد سيو و صديق لمحركات البحث 
و يصلُح للمدونات الأخبارية و ذات التخصص المُعين لن أتحدث اكثر من هذا لإنه سوف ترى مدى جماله في المعاينة ....


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

  1. مُتجاوب مع جميع الشاشات
  2. صديق لمُحركات البحث
  3. صفحة خطأ
  4. صفحة اتصل بنا
  5. صفحة الفهرس
  6. مشاركات بمظهر شبكي
  7. سلايدر في الرئيسية
  8. أماكن للإعلانات متجاوبة
  9. أداة مواضيع عشوائية
  10. أداة اخر المعلقين
  11. مواضيع ذات صلة
  12. صندوق النشرة البريدية
  13. تعريف الكاتب
  14. محرك بحث في الهيدر
  15. فوتر بثلاث اعمدة
  16. اضافة ازرار المعاينة و التحميل
  17. اضافة جدول داخل المواضيع
  18. ازرار المشاركة داخل المواضيع
  19. قائمة رئيسية علوية متجاوبة
  20. قائمة فرعية متجاوبة
       و المزيد .......


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


مجموعة كاملة من أدوات سيو للمدونين

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

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

و لقد رأيت العديد من المدونين يقومون بإنفاق اموالهم و شراء أدوات سيو من اجل إنجاز اعمالهم في حين إن هناك ادوات مجانية تقوم بنفس عمل الأدوات المدفوعة, لذلك قررت ان اعرض عليكم بعض الأدوات تحت مُسمى SmallSeoTools, في حين إن هذه الادوات ليست جديدة تماماً على المدونين, ولكن هناك من لا يعلم بوجودها لذلك دعونا لا نُكثر الكلام و نبدأ بشرح أدوات سيو المجانية التي قد تساعد أغلب المدونين في الحصول على ما يحتاجون في عالم سيو.

ما هو SmallSeoTools


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



1. Plagiarism checker

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


2. Keyword Rank Checker

هذه الأداة سوف تُساعدك في معرفة ترتيب مواضيع مدونتك في جوجل من خلال الكلمات الرئيسية, بحيث يمكنك معرفة و تحليل مواضيعك بشكل جيد في محرك البحث الامثل جوجل. كل ما عليك فعله كتابة رابط المدونة الخاص بك, و إدخال الكلمات التي تستهدفها ( فقط كتابة 5 كلمات رئيسية في كل مرة) بعدها سوف يظهر لك الترتيب الخاص بك في جوجل. ايضاً يمكنك إضافة التصنيفات الخاصة بكل بلد مثل www.google.com.eg


3. Alexa Rank Checker

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


4. Domain Authority Checker

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


5. Keyword Suggestions Tool

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


6. Grammar Checker Tool

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


7. Broken Link Checker

هذه الأداة سوف تُساعدك في معرفة الروابط المعطوبة في مدونتك بحيث بعد إدخال الرابط الخاص بك سوف يظهر بجانب كل رابط كلمة ok و الروابط المعطوبة سوف يظهر بجانبها X صراحة انا وجدت الكثير من علامات x لذلك من يعرف طريقة جلها لا يبخل علينا بإضافة الحل في تعليق.


الأدوات الأخرى من SmallSeoTools التي تستحق التجربة و هي:

  1. What is my IP
  2. Class c IP Checker
  3. Domain Age checker

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


تجربتي مع الموقع


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

اي سؤال او إستفسار لا تترد بوضعه في تعليق

اضافة المشاركات الشائعة بثلاثة اشكال مختلفة

اضافة المشاركات الشائعة بثلاثة اشكال مختلفة و احترافية

اضافة المشاركات الشائعة بثلاث اشكال مختلفة - الجميع يعرف وظيفة المشاركات الشائعة في كل موقع على الويب أو مدونة على بلوجر فهي تقوم بعرض أخر المواضيع و الأكثر مُشاهدة مِن قِبل الزوار على أساس الوقت ويُمكن أن يكون كل اسبوع أو كُل شهر أو كُل الوقت و هي لا غنى عنها لذلك قررنا اليوم مشاركتكم هذه الإضافة بثلاثة أشكال مُختلِفة حتى تتناسب مع أذواق الجميع و أتمنى أن تُعجبكم.


الان ننتقل إلى طريق تركيب الإضافة

  1. ادخل إلى لوحة تحكم بلوجر
  2. انتقل إلى تبويب قالب
  3. انقر على تحرير HTML

ستايلات الإضافة


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

 الشكل الاول

الشكل الاول من اضافة المشاركات الشائعة
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-family: droid arabic kufi;font-size:12px;line-height:1.3em;font-weight:700}
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:400;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{font-family: droid arabic kufi;position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(21, 6, 21, 0.35);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:12px;line-height:1.3em;font-weight:700}


الشكل الثاني

الشكل الثاني من اضافة المشاركات الشائعة
/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{margin: 3px;font-family:droid arabic kufi;text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-family:droid arabic kufi;font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{float:right;display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}


الشكل الثالث

الشكل الثالث من اضافة المشاركات الشائعة
/* Popular Post Style 3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:700;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba (23, 11, 23, 0.38);padding:10px;font-family: droid arabic kufi;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

أكواد الجافا سكريبت

الان بعد إضافة أحد اكواد الـ CSS من أجل أن تعمل الإضافات يجب علينا إضافة أحد أكواد الجافا سكريبت فوق الوسم </body>

الكود الخاص بالشكل الأول
<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

الكود الخاص بالشكل الثاني
<script type="text/javascript">
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

الكود الخاص بالشكل الثالث
<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

إعدادات الإضافة


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

هذه هي الإعدادات الخاصة بإضافة المشاركات الشائهة

يُمكن معاينة أحد الأشكال من خلال زر المعاينة التالي:


لا تنسى الضغط على ازرار المشاركة من أجل دعمنا
اي سؤال أو استفسار لا تترد بوضعه في تعليق دُمتم بوِد


قالب Hot Mag معرب

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

قالب Hot Mag معرب - صراحةً انا اعشق هذه القوالب من بلوجر لإنه لها الكثير من الميزات الاكثر من رائعة لإنها تسمح لك بالتركيز على المحتوى والقالب يصلُح للمدونات التقنية و المدونات الأخبارية و الألعاب و الأفلام و المجلات, و يمتاز القالب بمزيج من الألوان الجذابةوهو ممتاز للمدونات الإعلانية بحيث يتم التركيز على خفض مُعدلات الإرتداد, مع زيادة التعرض للإعلانات
و هذا موضوع يُبقي زوارك من أجل رؤية المزيد من مُحتوى الموقع و تعظيم العائدات الإعلانية الخاصة بك! فإذا كُنت تبحث
 عن قالب بلوجر خاص بالمدونات الأخبارية أو المجلية فهذا القالب هو الخيار الأفضل بالنسبة لك.

يُمكِنك مُعاينة و تحميل القالب من خلال الأزرار التالية :)



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

  1. متوافق مع جميع الشاشات
  2. قائمة علوية متجاوب
  3. قائمة فرعية مُنسدلة
  4. زر عرض المواضيع بشكل عشوائي
  5. زر محرك بحث متطور
  6. شريط آخر الاخبار مُطور
  7. سلايدر في الرئيسية
  8. سكربت عرض المواضيع حسب التسمية
  9. اماكن للإعلانات جاهزة
  10. آداة رُباعية التبويبات للسايد بار
  11. ازرار مواقع التواصل الإجتماعي في السايدبار
  12. صندوق النشرة البريدية
  13. فوتر بثلاثة أعمدة
  14. أزرار المشاركة داخل المواضيع
  15. اضافة تعريف الكاتب
  16. اضافة مواضيع ذات صلة
  17. آداة مسار الموضوع
  18. صديق لمحركات البحث
  19. صفحة خطأ
       و المزيد


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


اضافة شريط آخر الأخبار المتحرك بشكل احترافي

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

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


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

  1. ادخل إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. اضغط على تحرير HTML


ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS ticker */
.ticker {overflow: hidden;}
.ticker .title {float: right;width: 150px;height: 40px;line-height: 40px;text-align: center;color: #FFFFFF;background: #2c97de;margin: 7px 6px 7px 0px;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font-family: Droid Arabic Kufi, cursive;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {float: right;line-height: 40px;font-size: 13px;font-weight: 700;font-family: droid arabic kufi,cursive;}
.ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {font-size: 12px;float: right;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;height: 40px;font-size:12px;font-weight:400;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {margin-right: 20px;width: 96.3%;overflow: hidden;background: #363b3f;-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.PageList .selectnav {margin-top: 8px;}
.jari { color: #fff; position: relative; right: 5px; }

ولجعل الشريط متجاوب مع الهواتف ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
@media screen and (max-width:1066px) {
.ticker .tickercontainer {width: 80%;}}

@media screen and (max-width:960px) {
.ticker .tickercontainer {width: 75%;}}

@media only screen and (max-width:768px){
.ticker .tickercontainer {width: 68%;}}

@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}

مُلاحظة

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

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"right",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-right'>&nbsp;</span><span class='tickeroverlay-left'>&nbsp;</span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
//]]>
</script>
<script>
  //<![CDATA[
$(".ticker .jari").each(function () {
 var e = $(this).text();
 if (e.match("recent")) {
  $.ajax({
   url: "/feeds/posts/default?alt=json-in-script&max-results=6",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
  })
 } else {
  $.ajax({
   url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
  })
 }
});
  //]]>
</script>


الان الخطوة الاخيرة 


الكود التالي هو المسئول عن عمل الإضافة بحيث يمكنك إضافته في المكان الذي تُريده
اسفل القائمة أعلى المدونة يمكنك إضافته في اي مكان

<div class='clear'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='ticker ticker-section' id='ticker'>
   <div>
     <div>
<div class='content-wrap container-wrapper '>
  <div class='title second-color-bg '>
        <div class='ticker-icon'> <i class='fa fa-spinner fa-pulse'/> </div>
        <h6>آخبار الموقع</h6>
      </div>
  <div class='jari'>
    recent
  </div>
       </div>
</div>
   </div>
 </div>
</b:if></b:if>

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


نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *