جرب..ولن تندم

‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل

الأربعاء، 16 يوليو 2014

إضافة ثلاث خانات أسفل القالب لمدونات بلوجر

- ليست هناك تعليقات

1 - خانات إضافية لقوالب بلوجر:

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


نموذج  ثلاث خانات أسفل القالب لمدونات بلوجر

2- طريقة إضافة ثلاث خانات أسفل القالب لمدونات بلوجر:

لإضافة الخانات السفلية لمدونة بلوجر خاصاتكم تابعوا معنا الخطوات التالية:

 - الخطوة 1:
من واجهة المدونة نختار القالب ثم تحرير HTML

- الخطوة 2:
من لوحة المفاتيح Ctrl+F للبحث داخل كود القالب عن ]]></b:skin>
ومن فوقه مباشرة أضيفو الكود التالي:
/* -----  Folfoly.com  LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434; } 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;        float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;        width: 32%;        text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: right;
       color:#0084ce;         text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

/* folfoly.com three column footer CSS  */

- الخطوة 3:
Ctrl+F من جديد للبحث عن  <div id='footer-container'>
وفوقها تقومون بإضافة الكود التالي:
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes' />

</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes' />

</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes' />

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

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


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

الثلاثاء، 15 يوليو 2014

صندوق CSS رائع للمتابعة بالبريد الإلكتروني لمدونات بلوجر

- ليست هناك تعليقات

1 - خدمة المتابعة أو التسجيل بالبريد الإلكتروني:

صندوق المتابعة بالبريد الإلكتروني لمدونات بلوجر

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

++ أنتم بحاجة لتفعيل خدمة المتابعة عبر البريد الإلكتروني.

2 - إضافة صندوق المتابعة بالبريد الإلكتروني CSS لمدونات بلوجر:

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


وتختارون HTML/Javascript

ثم تلصقون الكود التالي داخل الإطار:
مع تعويض folfoly بالأحمر بال ID الخاص بخلاصة فيدبرنر الخاصة بمدونتكم (طريقة إعداد ID خاص لخلاصات فيدبرنر)
<style>
#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNbxlg7rQgH7oWvMYWANW9OqXLUa8b2u0ZxbFS0mHuJxRsrSA_gdhpP5b6KfvN1te-qokZdxsOTwUrX0emXE799xquvPPxilmO_BaEjnkl8PtIfAN2_4I8M-F31E43_bROGFjNCtsmyb1E/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:5px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5iHf-d9lhF8F0YPctCZLM6f544dR9QSHwmEgSNR0gHE7SZOMSoqZ_5obz8bVHaITV1xlBF3mz9oGQrKnNPt0y-InORCD7Y4wcYFlISYRecA8BRvImqOeOEiDONNo9K77g1LADqieIs5v/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;text-align:center;text-transform:uppercase;padding:1px 20px 10px}.sidebar-subscribe-box-form{display:block;clear:both;margin:10px 0}form.sidebar-subscribe-box-form{display:block;clear:both;width:auto;margin:10px 0 0}.sidebar-subscribe-box-email-field{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3k_DRfWtqd68gpiNdExUTWXm_q7MwJIunJkFAr-0m6LFAH3izmMo77TpUOkXMsO7ihYfjF8gB4mt9MPctYOfVnzhQl7AbJHJKpKiWRjRXp9HGurFZAQWYldRhfJt2lX9HBai6oGNQS-G/s1600/email-small-logo.png) no-repeat scroll 10px center #fff;color:#444;width:68%;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ccc;margin:0 0 15px;padding:10px 40px}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;text-shadow:1px 1px 0 rgba(0,0,0,.4);font-weight:700;width:100%;font-family:verdana;text-transform:uppercase;padding:10px}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>
توصل بكل جديد عبر بريدك</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=folfoly', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="folfoly" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" onblur="if (this.value==" "){this.value="أكتب بريدك هنا .. " ;}" onfocus="if (this.value==" أكتب بريدك هنا .. "){this.value="" }" type="text" value="أكتب بريدك هنا .. " /><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="أرسل" /></form>
</div>
</div>
</div>


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


الاثنين، 14 يوليو 2014

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

- هناك تعليق واحد

1 - لماذا خدمة المتابعة بالبريد الإلكتروني؟

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

2- تفعيل خدمة المتابعة بالبريد الإلكتروني لمدونات بلوجر:

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



قوموا بالنقر على عنوان خلاصة مدونتكم بالأزرق، لتفتح صفحة حيث يوجد إعدادات هذه الخلاصة، وبعدها تنقرون على Publicize ثم Email Subscriptions:

ثم Activate

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

بعد تشغيلك لخدمة المتابعة بالبريد الإلكتروني، بإمكانك إضافة صندوق المتابعة بالبريد الإلكتروني لمدونتك .


الحصول على رابط خاص لخلاصات فيدبرنر

- ليست هناك تعليقات

1- خدمة الخلاصات فيدبرنر:

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

2- فتح موقع الفيدبرنر:

من خيارات مدونكم ستنقرون على التخطيط ثم إضافة أداة.


وستختارون متابعة بالبريد الإلكتروني:

ثم عرض الإحصاءات ومزيد من المعلومات

سيتم فتح موقع الفيدبرنر حيث يتم تسيير خلاصات مدونات بلوجر والتي ستظهر لائحتها في الوسط:

إسم الخلاصة  على اليسار، وعلى اليمين عدد المسجلين المتابعين لمدونتك عبر البريد الإلكتروني:

3 - إعدادات خلاصة الفيدبرنر:

قوموا بالنقر على إسم خلاصات مدونتكم  ثم في الأعلى Edit feeds details

ستظهر المعلومات التي ستقومون بتغييرها، وما يهم هنا هو Feed Adress والذي ستقومون بتغييره بإضافة إسم مدونتكم

ثم Save Feed Details

بإمكانكم زيارة خلاصات فيدبرنر الخاصة بمدونة مستر معلم عبر هذا الرابط:
http://feeds.feedburner.com/folfoly

أصبح لخلاصات فيدبرنر الخاصة بمدونتكم رابطها الخاص الآن. لنمر الآن لتفعيل خدمة امتابعة بالبريد الإلكتروني على مدونتكم.

دروس تعريب قوالب بلوجر (4)

- ليست هناك تعليقات

1 - تعريب قوالب بلوجر:

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


2 - تعريب نص العنوان والمشاركة:

للقيام بذلك سنقوم بفتح أداة تغيير كود القالب من واجهة المدونة نختار قالب ثم تحرير HTML. ومن لوحة المفاتيح ننقر Ctrl+F للبحث عن: .post
ستجدون كود بهذا الشكل:
.post{margin-bottom:15px;border:1px solid #7B360C;background:#3D0703;padding:10px;}
قوموا بتغييره وإضافة text-align: right; ليصبح:
.post{margin-bottom:15px;border:1px solid #7B360C;background:#3D0703;padding:10px;text-align: right;}

3- تعريب زر قراءة المزيد وتحويله لليسار مع رابط التعليقات:

لنمر لزر قراءة المزيد لتحويله إلى جهة اليسار بالبحث عن: .readmore
ستجدون كود بهذا الشكل:
.readmore{margin-bottom:5px;float:right}
لكي يصبح زر قراءة المزيد في جهة اليسار يكفي تعويض float:right ب float:left
ليصبح:
.readmore{margin-bottom:5px;float:left}



سنقوم بعد ذلك بالبحث عن الكلمات الإنجليزية لتعويضها وهي No comments التي تظهر أسفل العنوان ثم Read more:
سنبحث عن No comments ليظهر لنا هذا الكود:
<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></span>
لدينا ثلاث كلمات لتغييرها هنا:
No comments إذا لم تكن هناك تعليقات، 1 comment إذا كان هناك تعليق واحد، comments إذا كان هناك أكثر من تعليق واحد أي إثنان فما فوق.
ليصبح:
<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>كن أول من يعلق</b:if><b:if cond='data:post.numComments == 1'>تعليق واحد</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> تعليقات</b:if></a></b:if></span>

سنبحث الآن عن Read more حتى يظهر الكود التالي:
<a expr:href='data:post.url'>Read More</a>
يكفي تعويض Read more  بالجملة أو اللمة التي ترغبون بها ليصبح مثلا:
<a expr:href='data:post.url'>تابع القراءة</a>

الآن بإمكانكم مشاهدة التغييرات والتي تبدو بهذا الشكل:

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





دروس تعريب قوالب بلوجر (3)

- ليست هناك تعليقات
وصلنا للدرس الثالث من دروس تعريب قوالب بلوجر. وبعد تعريبنا للجزء العلوي ثم القوائم، سنرى اليوم طريقة تعريب المربع الأيمن من القالب مع تحويله لجهة اليسار.


الخطوة الأولى تبدأ بفتح أداة تغيير القالب، من واجهة المدونة تختارون قالب ثم تحرير HTML. ومن لوحة المفاتيح تنقرون على Ctrl+F للبحث عن الكود التالي: .tabs-widget
سيظهر كود بهذا الشكل:
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#F5CD6D;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToGBWBhrou9djpfaTE9LTDmtqrWY8dRtEg_NqP85B_KRKy1rOuIhhNIPuvJ05MY0aTxQLf8xi9PN7rkPq0FHUk0dtMWYhht0N_IHUvXNcTwb0lGl4357Do2bdf1oJOJcnxEVU3cPJy78/s0/tabs-bg.png) left top repeat-x;padding:6px 16px;display:block;text-decoration:none;font:bold 12px/12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToGBWBhrou9djpfaTE9LTDmtqrWY8dRtEg_NqP85B_KRKy1rOuIhhNIPuvJ05MY0aTxQLf8xi9PN7rkPq0FHUk0dtMWYhht0N_IHUvXNcTwb0lGl4357Do2bdf1oJOJcnxEVU3cPJy78/s0/tabs-bg.png) left -126px repeat-x;color:#5A2A12;text-decoration:none}
.tabs-widget-content{}
وكل ما ستقومون بتغييره هو float:left ب float:right. ليتم تحويل المربعات الثلاث لليمين:


لترجمة الكلمات للعربية قوموا بالبحث عن Popular، استمروا بالنقر على Enter حتى تجدوا كود بهذا الشكل:
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
ويكفي تغيير كلمات Popular, Tags, Blog Archives  بالكلمات التي ترغبون بها:


سنمر الآن لمحتوى أدوات المربع الأيمن لتعريبها، وللقيام بذلك سنبحث عن: .sidebar ليظهر كود بهذا الشكل:
.sidebar{margin:0 0 10px 0;font-size:13px;color:#E4BFAD; text-align: right;}
.sidebar a{text-decoration:none;color:#E4BFAD;}
.sidebar a:hover{text-decoration:none;color:#FDDD92;}
.sidebar h2, h3.widgettitle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkqHLCdtRNj7w9-wMAnbDoTGAr4xp7tLUUXHhT5HR5gJMgnLSr5SedXITLo6h2oQI_9I5qtuDD0-hDIyOcXfbVtPertKHDi4oIUxYCUXt4bXrs0LrTE0-63T5aLWAsoGmNQWyHrPsk_H0/s0/widgettitle-bg.png) left top repeat-x;margin:0 0 10px 0;padding:10px;color:#FFD059;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
.sidebar ul li{padding:0 0 9px 12px;margin:0 0 8px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHB1cv0qlrSilNMITtMkRPufjpcvx-8kwL3Uu9YXt9IMFwBNYNxju3f_My4JcP-yqRxjnyxwKIQ33OkqIfxZ1bcT18n2VoWnOa8o0IbMirVl2CbDzQoTTAAEE0juhyphenhyphen_aQLRoBh3jdcpk/s0/widget-list.png) left 3px no-repeat;}
.sidebar .widget{margin:0 0 15px 0;padding:0;color:#E4BFAD;font-size:13px;}
ستقومون بإضافة text-align: right; في السطر الأول، ثم تغيير left  ب right . 
بعد حفظكم للتغييرات ستلاحظون أن عناوين ومحتوى الأدوات أصبح إلى اليمين:

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

دعونا نحل هذا الإشكال:
في نفس الكود الخاص ب .sidebar الذي عملنا عليه للتو سنقوم بتغيير .sidebar url li بهذا الشكل مع تغيير padding:0 0 5px:
.sidebar ul li{padding:0 10px 5px 12px;margin:0 0 8px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHB1cv0qlrSilNMITtMkRPufjpcvx-8kwL3Uu9YXt9IMFwBNYNxju3f_My4JcP-yqRxjnyxwKIQ33OkqIfxZ1bcT18n2VoWnOa8o0IbMirVl2CbDzQoTTAAEE0juhyphenhyphen_aQLRoBh3jdcpk/s0/widget-list.png) right 3px no-repeat;}
ليصبح كل شيء في مكانه:

لم يتبقى الآن إلا تحويل  المربع الأيمن إلى اليسار. وللقيام بذلك قوموا بالبحث عن  rsidebar-wrapper ليظهر الكود التالي مع تعويض  float:left ب float:right  ثم float:right  ب float:left:
#main-wrapper{width:615px;float:left;margin:0px;padding:15px 0px 15px 0px;word-wrap:break-word;overflow:hidden;}
#rsidebar-wrapper{width:301px;float:right;margin:0px;padding:15px 0px 15px 11px;word-wrap:break-word;overflow:hidden;}

قوموا بحفظ التغييرات وستلاحظون أن المربع الأيمن تم تحويله إلى الجهة اليسرى:

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