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

درس اليوم ممتع جدا وسهل
وأكيد مفيد لمدونتك سواء من ناحية الشكل أو من ناحية زيادة عدد الزوار

سنضيف مجموعة جديدة من الأدوات للمدونة وهي أربعة بالتحديد ..

1) أداة مواضيع ذات صلة ( أو مواضيع مشابهة )
2) أداة آخر المواضيع أو مواضيع جديدة بشكل فلاشي متحرك رائع
3) صفحة بفهرس مواضيع المدونة
4) نموذج اتصل بنا للتواصل مع الزوار


أولا : أداة مواضيع ذات صلة ..

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

linkwithin

لتفتح معك صفحة الموقع الرئيسية









قومي فقط بملء البيانات المشار لها بالاسهم في الصورة
بريدك الالكتروني ورابط مدونتك ومنصة بلوجر وعدد المواضيع التي ترغبين في عرضها كمواضيع مشابهة ( 4 رقم مناسب )
بالنسبة للمربع الصغير في نهاية النموذج فقط حسب لون مدونتك لو كانت الكتابة فاتحة اللون وخلفية المدونة داكنة قومي بتحديده اما لو العكس اتركيه كما هو
ثم اضغطي على Get Widget

لتنتقلي للصفحة التالية ..







اضغطي فيها على Install Widget لتفتح صفحة جديدة







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

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







واضغطي حفظ الترتيب .. ثم قومي بمعاينة الاداة الجديدة على مدونتك








____________________________

ثانيا : إضافة فهرس المدونة ..

ادخلي للوحة تحكم مدونتك واختاري الصفحات








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







امسحي الجزء المشار له في الصور وانسخي هذا الكود والصقيه مكانه

[BACKGROUND="60 #CCFFFF"]

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<span style="color: #990000;"><span style="font-size: large;"><b>فهرس المدونة لتصفح ميسر </b></span></span></div>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script><script src="http://myblog3roos.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script><script type="text/javascript">
var accToc=true;
</script> <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

<div dir="rtl" style="text-align: right;" trbidi="on">

</div>
</div>

[/BACKGROUND]

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








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








_________________________


ثالثا : نموذج اتصل بنا ..

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

foxyform

املئي النموذج الموجود في الصفحة حسب رغبتك واختاري ألوان مناسبة لمدونتك







ثم اضغطي على create formular لتنتقلي للصفحة التي تحتوي على كود النموذج








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








________________________


رابعا : أداة آخر المواضيع متحركة


اذهبي للوحة تحكم مدونتك ثم التخطيط واختاري إضافة أداة
من النافذة اختاري أداة HTML/JavaScript








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

[BACKGROUND="60 #CCFFFF"]

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul><small><a href="http://www.3efrit.blogspot.com/" target="_blank"><span style="color:#fff;">3efrit blogger</span></a></small>

[/BACKGROUND]

وضعي عنوان مناسب لها حسب ماترين( الرقم 5 المكتوب بالاحمر هو عدد المواضيع التي ستظهر على المدونة يمكنك تغييره أو تركه كما هو حسب رغبتك )








حركيها في التخطيط لمكان مناسب








وتظهر بهذا الشكل







الأداة فلاشية متحركة ويمكنك مشاهدتها في مدونتي هنا

عروس


وهذه نهاية درس اليوم ..

واجب الدرس ,,

إضافة الأدوات المشروحة في الدرس لمدونتك

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

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


أولا : صندوق معجبي صفحة الفيس بوك بشكل فلاشي متحرك

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






تظهر نافذة اضغطي فيها على تنزيل النموذج الكامل






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

من تبويب قالب اضغطي على تحرير HTML





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






ابحثي عن الكود التالي </head> بالضغط على ctrl + F من لوحة المفاتيح واكتبي الكود ليبحث في القالب عنه

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

[BACKGROUND="60 #CCFFFF"]

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

[/BACKGROUND]


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






اختاري أداة HTML / JavaScript






وضعي بداخلها الكود التالي ..

[BACKGROUND="60 #CCFFFF"]

<script src='http://egymodern.googlecode.com/files/facebooklike-box.js' type='text/javascript'></script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-mhGi20Pv8vk/TsZ6OzrfKNI/AAAAAAAACmk/d84HD-0_QDk/s1600/facebook-page12.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>

<div class="w2bslikebox" style="z-index: 9999999999;">
<div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/%D9%85%D9%86%D8%AA%D8%AF%D9%8A%D8%A7%D8%AA-%D8%B9%D8%B1%D9%88%D8%B3/318713243020&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="z-index: 9999999999; border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;">
</iframe>

</div>
<script type="text/javascript">
writeHTMLasJS();
</script>
</div>

[/BACKGROUND]

يمكنك استبدال رابط صفحة المنتدى على الفيس بوك برابط صفحتك إن كنت تمتلكين واحدة أو وضع الكود كما هو على سبيل التجربة ( رابط الصفحة المحدد بالأحمر )







ثم احفظي الأداة وحركيها لمكان مناسب واحفظي الترتيب لتظهر على مدونتك هكذا






وعند الوقوف عليها







وهذا شرح بالفيديو لتوضيح الاضافة بتفصيل أكبر


[YOUTUBE]zu8BTf3KxIE[/YOUTUBE]


_________________________________________


ثانيا : إضافة أزرار مواقع التواصل وزر الطباعة

هذه الاضافة سهلة جدا ولا تأخذ أي وقت
عليك أولا الذهاب للموقع التالي

AddThis

اختاري الشكل الذي تفضلينه للأزرار وحددي منصة بلوجر ثم اضغطي Install Blogger Widget






ستفتح نافذة جديدة اضغطي فيها على .. إضافة عنصر واجهة مستخدم ..






ستظهر الأداة في التخطيط ,, حركيها أسفل رسائل المدونة ثم احفظي الترتيب






استعرضيها على مدونتك حيث تظهر أسفل كل تدوينة







وهكذا انتهى درسنا لليوم

واجب الدرس ..

إضافة الأدوات المشروحة في الدرس لمدونتك

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

أولا ادخلي للموقع عبرالرابط التالي ..

Feedburner

سجلي دخولك بحساب جوجل Gmail لتظهر لك صفحة مشابهة لهذه




ضعي رابط مدونتك في المكان الموضح ثم اضغطي Next

قد تظهر لك الصفحة التالية أو لا تظهر .. إن ظهرت اختاري منها رابط الخلاصات التي سيتعامل معها فيدبرنر ( اخترت RSS )



ثم اضغطي Next

ستظهر هذه الصفحة ..



أدخلي عنوان مناسب للخلاصة .. واختصار مناسب لرابطها

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



اضغطي Next وحددي الخيارات المشار لها بالاسهم في الصورة التالية .




وهكذا تم حفظ التغيير




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




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



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




انتقلي لتبويب publicized واتبعي ترتيب الارقام في الصورة

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



وستجديها بهذا الشكل المختصر




انسخي رابط الخلاصة من أعلى المتصفح



واذهبي للوحة تحكم مدونتك >> الصفحات >> صفحة جديدة >> عنوان ويب



أضيفي عنوان مناسب للصفحة وضعي رابط الخلاصة واحفظيها




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




وهذه هي نهاية الدرس ونهاية دروس الدورة الأساسية

واجب الدرس

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