Anfas Elfajer
03/02/2013, 03:34 AM
http://www.3roos.com/files/ups/2012/205182/01359851455.png
أسعد الله أوقاتكم بالخير غالياتي
موعدنا مع درس جديد اليوم ..
____________
درسنا اليوم يتكون من نقطتين فقط
واليوم بإذن الله سنقوم لأول مرة في الدورة بالقيام بتعديل بسيط على قالب المدونة نفسه
وإن شاء الله يكون درس سهل التطبيق
سنضيف صفحتك على الفيس بوك كصفحة منتدانا مثلا والمستخدمة في الشرح
+
أزرار مواقع التواصل الاجتماعي كتويتر والفيس بوك وجوجل بلس وغيرها وزر الطباعة أيضا مما يحسن من نسبة الزيارات
أولا : صندوق معجبي صفحة الفيس بوك بشكل فلاشي متحرك
اذهبي للوحة تحكم مدونتك ومنها اختاري تبويب قالب
قبل البدء في التعديل على القالب قومي بتنزيل نسخة منه لتلافي حدوث أي أخطاء أثناء التعديل بالضغط على زر نسخ احتياطي / استعادة
http://www.3roos.com/files/ups/2012/205182/01354892041.jpg (http://www.3roos.com/files/ups/2012/205182/01354892041.jpg)
تظهر نافذة اضغطي فيها على تنزيل النموذج الكامل
http://www.3roos.com/files/ups/2012/205182/11354892041.jpg (http://www.3roos.com/files/ups/2012/205182/11354892041.jpg)
واحفظي نسخة من القالب في أي مكان على جهازك .. هكذا عند حدوث خطأ في التعديل على القالب يمكنك رفع هذه النسخة مرة أخرى كما سبق وشرحنا واستعادة قالبك كما هو
من تبويب قالب اضغطي على تحرير HTML
http://www.3roos.com/files/ups/2012/205182/21354892041.jpg (http://www.3roos.com/files/ups/2012/205182/21354892041.jpg)
ستفتح معك نافذة تحتوي على أكواد القالب كلها
اضغطي فيها على مربع .. توسيع قوالب عناصر واجهة المستخدم ..
http://www.3roos.com/files/ups/2012/205182/31354892041.jpg (http://www.3roos.com/files/ups/2012/205182/31354892041.jpg)
ابحثي عن الكود التالي </head> بالضغط على ctrl + F من لوحة المفاتيح واكتبي الكود ليبحث في القالب عنه
بعد ما تجديه قومي بإضافة الكود التالي فوقه / أعلاه مباشرة
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
ثم اضغطي حفظ النموذج
أغلقي صفحة التحرير واذهبي لتبويب التخطيط
واضغطي على إضافة أداة
http://www.3roos.com/files/ups/2012/205182/41354892041.jpg (http://www.3roos.com/files/ups/2012/205182/41354892041.jpg)
اختاري أداة HTML / JavaScript
http://www.3roos.com/files/ups/2012/205182/51354892041.jpg (http://www.3roos.com/files/ups/2012/205182/51354892041.jpg)
وضعي بداخلها الكود التالي ..
<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&width=245&colorscheme=light&show_face s=true&connections=9&stream=false&header=false&hei ght=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>
يمكنك استبدال رابط صفحة المنتدى على الفيس بوك برابط صفحتك إن كنت تمتلكين واحدة أو وضع الكود كما هو على سبيل التجربة ( رابط الصفحة المحدد بالأحمر )
http://www.3roos.com/files/ups/2012/205182/61354892041.jpg (http://www.3roos.com/files/ups/2012/205182/61354892041.jpg)
ثم احفظي الأداة وحركيها لمكان مناسب واحفظي الترتيب لتظهر على مدونتك هكذا
http://www.3roos.com/files/ups/2012/205182/71354892041.jpg (http://www.3roos.com/files/ups/2012/205182/71354892041.jpg)
وعند الوقوف عليها
http://www.3roos.com/files/ups/2012/205182/81354892041.jpg (http://www.3roos.com/files/ups/2012/205182/81354892041.jpg)
وهذا شرح بالفيديو لتوضيح الاضافة بتفصيل أكبر
zu8BTf3KxIE
_________________________________________
ثانيا : إضافة أزرار مواقع التواصل وزر الطباعة
هذه الاضافة سهلة جدا ولا تأخذ أي وقت
عليك أولا الذهاب للموقع التالي
AddThis (http://go.3roos.com/85j85ovs54g)
اختاري الشكل الذي تفضلينه للأزرار وحددي منصة بلوجر ثم اضغطي Install Blogger Widget
http://www.3roos.com/files/ups/2012/205182/91354892041.jpg (http://www.3roos.com/files/ups/2012/205182/91354892041.jpg)
ستفتح نافذة جديدة اضغطي فيها على .. إضافة عنصر واجهة مستخدم ..
http://www.3roos.com/files/ups/2012/205182/01354892046.jpg (http://www.3roos.com/files/ups/2012/205182/01354892046.jpg)
ستظهر الأداة في التخطيط ,, حركيها أسفل رسائل المدونة ثم احفظي الترتيب
http://www.3roos.com/files/ups/2012/205182/11354892046.jpg (http://www.3roos.com/files/ups/2012/205182/11354892046.jpg)
استعرضيها على مدونتك حيث تظهر أسفل كل تدوينة
http://www.3roos.com/files/ups/2012/205182/21354892046.jpg (http://www.3roos.com/files/ups/2012/205182/21354892046.jpg)
وهكذا انتهى درسنا لليوم
واجب الدرس ..
إضافة الأدوات المشروحة في الدرس لمدونتك
استفسارات الدرس التاسع (http://forums.3roos.com/3roos689267/)
أسعد الله أوقاتكم بالخير غالياتي
موعدنا مع درس جديد اليوم ..
____________
درسنا اليوم يتكون من نقطتين فقط
واليوم بإذن الله سنقوم لأول مرة في الدورة بالقيام بتعديل بسيط على قالب المدونة نفسه
وإن شاء الله يكون درس سهل التطبيق
سنضيف صفحتك على الفيس بوك كصفحة منتدانا مثلا والمستخدمة في الشرح
+
أزرار مواقع التواصل الاجتماعي كتويتر والفيس بوك وجوجل بلس وغيرها وزر الطباعة أيضا مما يحسن من نسبة الزيارات
أولا : صندوق معجبي صفحة الفيس بوك بشكل فلاشي متحرك
اذهبي للوحة تحكم مدونتك ومنها اختاري تبويب قالب
قبل البدء في التعديل على القالب قومي بتنزيل نسخة منه لتلافي حدوث أي أخطاء أثناء التعديل بالضغط على زر نسخ احتياطي / استعادة
http://www.3roos.com/files/ups/2012/205182/01354892041.jpg (http://www.3roos.com/files/ups/2012/205182/01354892041.jpg)
تظهر نافذة اضغطي فيها على تنزيل النموذج الكامل
http://www.3roos.com/files/ups/2012/205182/11354892041.jpg (http://www.3roos.com/files/ups/2012/205182/11354892041.jpg)
واحفظي نسخة من القالب في أي مكان على جهازك .. هكذا عند حدوث خطأ في التعديل على القالب يمكنك رفع هذه النسخة مرة أخرى كما سبق وشرحنا واستعادة قالبك كما هو
من تبويب قالب اضغطي على تحرير HTML
http://www.3roos.com/files/ups/2012/205182/21354892041.jpg (http://www.3roos.com/files/ups/2012/205182/21354892041.jpg)
ستفتح معك نافذة تحتوي على أكواد القالب كلها
اضغطي فيها على مربع .. توسيع قوالب عناصر واجهة المستخدم ..
http://www.3roos.com/files/ups/2012/205182/31354892041.jpg (http://www.3roos.com/files/ups/2012/205182/31354892041.jpg)
ابحثي عن الكود التالي </head> بالضغط على ctrl + F من لوحة المفاتيح واكتبي الكود ليبحث في القالب عنه
بعد ما تجديه قومي بإضافة الكود التالي فوقه / أعلاه مباشرة
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
ثم اضغطي حفظ النموذج
أغلقي صفحة التحرير واذهبي لتبويب التخطيط
واضغطي على إضافة أداة
http://www.3roos.com/files/ups/2012/205182/41354892041.jpg (http://www.3roos.com/files/ups/2012/205182/41354892041.jpg)
اختاري أداة HTML / JavaScript
http://www.3roos.com/files/ups/2012/205182/51354892041.jpg (http://www.3roos.com/files/ups/2012/205182/51354892041.jpg)
وضعي بداخلها الكود التالي ..
<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&width=245&colorscheme=light&show_face s=true&connections=9&stream=false&header=false&hei ght=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>
يمكنك استبدال رابط صفحة المنتدى على الفيس بوك برابط صفحتك إن كنت تمتلكين واحدة أو وضع الكود كما هو على سبيل التجربة ( رابط الصفحة المحدد بالأحمر )
http://www.3roos.com/files/ups/2012/205182/61354892041.jpg (http://www.3roos.com/files/ups/2012/205182/61354892041.jpg)
ثم احفظي الأداة وحركيها لمكان مناسب واحفظي الترتيب لتظهر على مدونتك هكذا
http://www.3roos.com/files/ups/2012/205182/71354892041.jpg (http://www.3roos.com/files/ups/2012/205182/71354892041.jpg)
وعند الوقوف عليها
http://www.3roos.com/files/ups/2012/205182/81354892041.jpg (http://www.3roos.com/files/ups/2012/205182/81354892041.jpg)
وهذا شرح بالفيديو لتوضيح الاضافة بتفصيل أكبر
zu8BTf3KxIE
_________________________________________
ثانيا : إضافة أزرار مواقع التواصل وزر الطباعة
هذه الاضافة سهلة جدا ولا تأخذ أي وقت
عليك أولا الذهاب للموقع التالي
AddThis (http://go.3roos.com/85j85ovs54g)
اختاري الشكل الذي تفضلينه للأزرار وحددي منصة بلوجر ثم اضغطي Install Blogger Widget
http://www.3roos.com/files/ups/2012/205182/91354892041.jpg (http://www.3roos.com/files/ups/2012/205182/91354892041.jpg)
ستفتح نافذة جديدة اضغطي فيها على .. إضافة عنصر واجهة مستخدم ..
http://www.3roos.com/files/ups/2012/205182/01354892046.jpg (http://www.3roos.com/files/ups/2012/205182/01354892046.jpg)
ستظهر الأداة في التخطيط ,, حركيها أسفل رسائل المدونة ثم احفظي الترتيب
http://www.3roos.com/files/ups/2012/205182/11354892046.jpg (http://www.3roos.com/files/ups/2012/205182/11354892046.jpg)
استعرضيها على مدونتك حيث تظهر أسفل كل تدوينة
http://www.3roos.com/files/ups/2012/205182/21354892046.jpg (http://www.3roos.com/files/ups/2012/205182/21354892046.jpg)
وهكذا انتهى درسنا لليوم
واجب الدرس ..
إضافة الأدوات المشروحة في الدرس لمدونتك
استفسارات الدرس التاسع (http://forums.3roos.com/3roos689267/)