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

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

أروع قوائم جانبية ب CSS و jQuery لمدونات بلوجر

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

1- قوائم مدونات بلوجر وأهميتها:

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

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

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

بعد ذلك تختارون HTML/Javascript:

 وتلصقون الكود التالي داخل إطار الأداة بعد نسخه:

<div id='cssmenu'>
<ul>
<li>
<a href='/'><span>الأولى</span></a></li>
<li><a href='#'><span>بلوجر</span></a>
<ul>
<li><a href='#'><span>دروس بلوجر</span></a></li>
<li><a href='#'><span>أدوات بلوجر</span></a></li>
<li><a href='#'><span>قوالب بلوجر</span></a></li>
</ul>
</li>
<li><a href='#'><span>فوتوشوب</span></a>
<ul>
<li><a href='#'><span>تحميل</span></a></li>
<li><a href='#'><span>من نكون؟</span></a></li>
</ul>
</li>
<li><a href='#'><span>للإتصال بنا</span></a></li>
</ul>
</div>


<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 250px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ed1144;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){

$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});

});
</script>

قوموا بحفظ التغييرات بعد تغيير القوائم بحسب حاجتكم. وستلاحظون ظهور قوائم جانبية جميلة ورائعة ب ب CSS و jQuery  لمدونة بلوجر الخاصة بكم. ادعمونا بمشاركة الدرس إذا أعجبكم.
المصدر: CSSmenuMaker

الأربعاء، 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(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/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(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/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(http://1.bp.blogspot.com/-djYktoC8MIQ/UBhYd0ttdFI/AAAAAAAAFTc/cSs1vPnvbtU/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(http://1.bp.blogspot.com/--k3vSkeUe-k/UU5be03uncI/AAAAAAAACC0/jR0wxHrM8cc/s000/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(http://1.bp.blogspot.com/--k3vSkeUe-k/UU5be03uncI/AAAAAAAACC0/jR0wxHrM8cc/s000/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(http://2.bp.blogspot.com/-a5WflQMDEGw/UU5bbh0vLTI/AAAAAAAACBo/yljOlIochIg/s000/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(http://4.bp.blogspot.com/-sWFCKTzLk6M/UU5bbw93EdI/AAAAAAAACBw/FIkW3eoooJM/s000/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(http://4.bp.blogspot.com/-sWFCKTzLk6M/UU5bbw93EdI/AAAAAAAACBw/FIkW3eoooJM/s000/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;}

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

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

الأحد، 13 يوليو 2014

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

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

للقيام بذلك سنقوم بفتح أداة تغيير  القالب من واجهة المدونة ستنقرون قالب ثم تحرير HTML.
ثم من لوحة المفاتيح Ctrl+F ثم تبحثون عن .menus
ستجدون كود CSS الخاص بالقوائم يبدو بهذا الشكل:
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-primary-container{padding:0;position:relative;height:38px;background:url(http://2.bp.blogspot.com/-UzKnKHIf1tA/UU5bc14nKuI/AAAAAAAACCI/j2H6pL-ouCE/s000/menu-primary-bg.png) left top repeat-x;z-index:400;margin-bottom:10px}
.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#FFF;padding:11px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:normal 13px/13px &#39;Oswald&#39;,sans-serif;margin:0 3px 0 0}

وما ستقومون به هو تعويض كافة كلمات Left بالأحمر بكلمة right
وبشكل سحري ستتحول القوائم إلى جهة اليمين:
القوائم اصبحت على اليمبن

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

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

السبت، 12 يوليو 2014

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

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

1 - تعريب الجزء العلوي من قالب بلوجر:

النتيجة التي سنصل إليها بعد التعريب

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

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

2- تبادل أماكن عنصرين باستعمال Float: 

كما تعرفون فراس الصفحة حيث يكون إسم المدونة أو شعارها يكون على اليمين بالنسبة للمواقع والمدونات العربية. وبالتالي فما سنقوم به هو تبادل الأماكن بين Header على اليسار و Header2 على اليمين.


للقيام بذلك من لوحة المفاتيح Ctrl+F للبحث عن #header:
نستمر بالنقر على Enter حتى يظهر الكود التالي:
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:40%;overflow:hidden;}

قوموا بتغيير float:left ب float:right. أي تحويل Header من اليسار إلى اليمين.
قوموا بنفس الخطوة مع Header2 مع تعويض float:right ب float:left . أي تحويل Header2 من اليمين غلى اليسار.


الإطارين تم تبادل أمكنتهما بحيث أصبح رأس الصفحة إلى اليمين لكن المشكلة هي أنهما لا يحاديان الجوانب العمودية بل يتركزان في الوسط:

لجعل العناصر داخل كل إطار يأخذ مكانه سنبحث عن: #header h1 وهو رأس الصفحة
وسنجد كود الCSS  الخاص به يبدو كالتالي:
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:&#39;Oswald&#39;,Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}

ونقوم بإضافة كود سيجعل العنوان يحادي الجانب الأيمن بإضافة   text-align: right;  ليصبح:
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:&#39;Oswald&#39;,Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px; text-align: right; }
ستلاحظون أن رأس الصفحة حيث كلمة تعريب أصبح محاديا لجهة اليمين.

3 - تنظيم عناصر Header2 :

لنمر الأن ل Header2 والتي تتكون من عنصرين، مربع البحث وأيقونات الشبكات الإجتماعية. حيث سنقوم بتبديل أماكنهما ليصبح مربع البحث إلى اليسار وأيقونات الشبكات الإجتماعية إلى اليمين:


للقيام بذلك سنبحث عن #topsearch وتقومون بتغيير الكود من:
 #topsearch{float:right;margin-top:16px}
 إلى
 #topsearch{float:left;margin-top:16px}

سنقم بنفس الخطوة بالنسبة لعنصر أيقونات الشبكات الإجتماعية بالبحث عن #top-social-profiles وتغيير الكود من:
#top-social-profiles{padding-top:15px;height:32px;text-align:right;float:left;}
 إلى:
#top-social-profiles{padding-top:15px;height:32px;text-align:right;float:right;}

4- تعريب مربع البحث:

لم يتبقى إلا مربع البحث، حيث سنقوم بجعل رمز المكبر غلى اليسار مع تعويض كلمة Search بكلمة بحث:

للقيام بذلك قوموا بالبحث عن #search وتغيير الكود من:
#search{border:1px solid #4F230E;background:#6C3F1C url(http://2.bp.blogspot.com/-7zer2UjYwBE/UU5bcM01mbI/AAAAAAAACB4/N0mPMS43XwM/s000/search.png) 99% 50% no-repeat;text-align:right;padding:6px 50px 6px 6px}

إلى: مع تغيير 99% ب 2% و50px ب 5px


ثم نستمر بالقر على Enter من لوحة المفاتيح حتى نجد الكود التالي:
<div id='header2'>
<div id='topsearch'>
<div id='search' title='Type and hit enter'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>
</form>
</div>
</div>
وقوموا بتعويض كلمة Search بالأحمر بكلمة بحث. أحفظوا التغييرات وستشاهدون كيف تم تعريب الجزء العلوي من القالب بشكل كامل ومميز.

5 - تعويض روابط أيقونات الشبكات الإجتماعية:

لوضع روابطم لأيقونات الشبكات الإجتماعية قوموا بالبحث عن <div class='social-profiles-widget'> وستجدون كود يبدو بهذا الشكل:
<div class='social-profiles-widget'>
<a href='http://twitter.com/YOUR_USERNAME' target='_blank'><img alt='Twitter' src='http://3.bp.blogspot.com/-QxtjXrlYunQ/UU5bfN_fFbI/AAAAAAAACC8/P-UX2PfPfY0/s000/twitter.png' title='Twitter'/></a><a href='http://facebook.com/YOUR_USERNAME' target='_blank'><img alt='Facebook' src='http://3.bp.blogspot.com/-fGNnount4OY/UU5bftVfgkI/AAAAAAAACDI/-nqNEIL7Zww/s000/facebook.png' title='Facebook'/></a><a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' src='http://1.bp.blogspot.com/-DQ3Gj3t2FgY/UU5bf4dtktI/AAAAAAAACDQ/dRy4cEA5OMU/s000/gplus.png' title='Google Plus'/></a><a href='http://www.linkedin.com/' target='_blank'><img alt='LinkedIn' src='http://2.bp.blogspot.com/-m11qpglUwLE/UU5bgHm3WbI/AAAAAAAACDY/NuQGA4V4PYg/s000/linkedin.png' title='LinkedIn'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-Cv22k-uy00A/UU5bgjCfbhI/AAAAAAAACDg/-ViUMlSX4QE/s000/rss.png' title='RSS Feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='Email' src='http://3.bp.blogspot.com/-xXPE63d-Rgc/UU5bg9ZOb3I/AAAAAAAACDo/2sYzruYcvL4/s000/email.png' title='Email'/></a>
</div>
سنكتفي بشرح رابط تويتر وستقومون بنفس الطريقة لباقي الروابط. الرابط بالأحمر يخص رابط حسابكم على تويتر. أما اللون الأخضر فهو لأيقونة تويتر والتي يمكنكم تعويضها بأيقونة أخرى من اختياركم بتغيير الرابط.
للمزيد حول الروابط والصور راجع درس Html  الصور وروابط Html
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.

الجمعة، 11 يوليو 2014

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

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

1 - لماذا تعريب قوالب بلوجر؟

هل أنت مدون على منصة بلوجر وسئمت من البحث عن قوالب تناسب مدونتك؟ هل تريد البدء بتعريب قوالب بلوجر من الإنجليزية للعربية؟ هل تريد تعلم بناء وتصميم قوالب بلوجر بنفسك؟

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

2 - الأدوات المستعملة لتعريب قوالب بلوجر:

أي عمل يتطلب بعض الأدوات لتسهيل القيام به على أكمل وجه. أما تعريب قوالب بلوجر فهو لا يتطلب إلا أداة واحدة وهي إضافة الفايربوج على متصفح موزيلا فايرفوكس وإليكم طريقة استعمالها:



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

 3 - تحميل قالب التعريب:

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

قوموا بتحميل القالب وإضافته لمدونة جديدة، لا تنسوا متابعتنا على فايسبوك وعير القائمة البريدية للتوصل بالدروس الجديدة. دروس التعريب:
 1 - الدرس الأول: تعريب الجزء العلوي للقالب
2- الدرس الثاني: تعريب القوائم
3 - تعريب المربع الأيمن وتحويله لليسار
4 - تعريب المربع الرئيسي لللقالب

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

قالب بلوجر ترو بكسل 2014 الرهيب معرب

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

1- نوعين من القوائم، ثانوية في الأعلى ورئيسية تحت العنوان مع الروابط الثانوية.
2- صندوق التسجيل على القائمة البريدية.
3 - ترقيم الصفحات
4 - أزرار المشاركة على الشبكات الإجتماعية
5- أربع  خانات إضافية في الأسفل

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

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

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

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

1 - تعليقات فيس بوك:

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

 وللقيام بذلك اتبعوا معنا الخطوات التالية:

2 - إنشاء تطبيق على فيس بوك:

أول ما ستقومون به هو إنشاء تطبيق على فيس بوك ستحتاجونه لإظهار تعليقات فيس بوك العربية على مدوناتكم. وللقيام بذلك قوموا بالدخول لصفحة مطوري الفيس بوك . ثم قوموا بتتبع الخطوات التالية:
     * الخطوة 1:
ستنقرون على Apps من القائمة ثم Create a New App



   * الخطوة 2:
ستكتبون إسم في Display Name وفي الأسفل ستختارون الإتصالات للفئة أو تتروكنه كما هو ثم إنشاء تطبيق.

   * الخطوة 3:
قوموا بنسخ الرموز ثم تقديم

   * الخطوة 4:
قمتم بإنشاء التطبيق قوموا بنسخ App ID وحفظه في مكان ما لأننا سنحتاجه لاحقا

   * الخطوة 5:
قوموا بفتح إعدادات التطبيق من خلال  النقر على Settings على اليسار

   * الخطوة 6:
قوموا بإضافة بريدكم الإلكتروني
  بعد كتابة بريدكم الإلكتروني قوموا بالنقر على Add Platform ثم Website

اكتبوا رابط مدونتكم ثم احفظوا التغييرات بالنقر على Save Changes

  * الخطوة 7:
لنمر الآن لجعل التطبيق غام من خلال Statut and Review
 قوموا بالنقر على No لتظهر Yes، ستفتح نافذة لتأكيد الأمر قوموا بالنقر على تأكيد

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

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

  * الخطوة 8:
من واجهة بلوجر قوموا بالنقر على قالب ثم تحرير Html

 * الخطوة 9:
ثم Ctrl+F من لوحة المفاتيح للبحث عن الكود التالي : 
<b:includable id='comment-form' var='post'>

وتحته مباشرة قوموا بلصق هذا الكود  بعد نسخه مع تغيير الرابط بالأحمر برابط مدونتكم:
<fb:comments colorscheme='light' href='http://folfoly.com' numposts='5'/>

 * الخطوة 10:
قوموا بالبحث من جديد عن :
<body/>
وفوقه مباشرة قوموا بلصق الكود التالي مع تغيير رقم App ID الذي شرحنا طريقة الحصول عليه في الخطوة 4:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;280754522109166&#39;,
status : true,
xfbml : true
});
};
(function(){
if (document.getElementById(&#39;facebook-jssdk&#39;)) {return;}
var firstScriptElement = document.getElementsByTagName(&#39;script&#39;)[0];
var facebookJS = document.createElement(&#39;script&#39;);
facebookJS.id = &#39;facebook-jssdk&#39;;
facebookJS.src = &#39;//connect.facebook.net/ar_AR/all.js&#39;;
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
</script>

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

الثلاثاء، 24 يونيو 2014

طريقة إنشاء عنوان ويب لصفحات فيس بوك

- هناك 47 تعليقًا
بعد إنشاءكم لصفحة فايسبوك يطلب منك إختيار الرابط الخاص بها، لكن البعض يتجاهل هذا الأمر. ويصبح رابط الصفحة بعد ذلك بهذا الشكل:
https://www.facebook.com/pages/1521155464770824?ref=hl

 للراغبين في الحصول على رابط خاص أو عنوان ويب بصفحات فايسبوك  ليصبح بهذا الشكل:
 https://www.facebook.com/folfoly
  وهذا ما سيجعل الولوج لصفحتكم أسهل بكثير.
يرجى تتبع الخطوات التالية:

- الخطوة 1:
قوموا بفتح صفحة الفايسبوك المراد التحكم بها ثم انقروا على الإعدادت (1) ثم معلومات الصفحة (2) وبعد ذلك عنوان الموقع الإلكتروني لفيس بوك (3).
قوموا بالنقر على هل ترغب بإنشاء عنوان ويب لهذه الصفحة؟

- الخطوة 2:
قوموا بإضافة الإسم الذي تريدونه لصفحتكم. ثم انقروا على تحقق من التوفر.

- الخطوة 3:
اسم المستخدم متوفر يعني أنه بإمكانكم استعماله. يكفي النقر على تأكيد ليتم حفظ الإعدادت ويتم تغيير الإسم لصفحة.
بهذه الطريقة سيصبح عنوان الويب الخاص بصفحتكم قصيرا وخاصا بهذا الشكل، حيث سيتم إضافة إسم الصفحة مباشرة بعد رابط موقع فيس بوك:
https://www.facebook.com/folfoly