السلام عليكم ورحمة الله وبركاته
اليوم اخوتي واخواتي وصلنا إلى درجة لا بأس بها في التعامل مع منصة التدوين blogger.
حيث اننا قُمنا بإنشاء مدونة وضبطنا اعداداتها وقُمنا بتغيير قالب المدونة template.
واليوم درسنا مهم جداً لكل مدون.
انت عندما تدخل إلى مدونة تجدها تتكون من :
- header = رأس المدونة مكان البانر
- body = جسم المدونة مكان المشاركات
- sidebar = الشريط الجانبي يحمل بعض المعلومات والإضافات
- footer = ذيل المدونة ويحمل معلومات صاحب المدونة والحقوق وبعض الإضافات احياناً
- رأس المدونة header يستخدم دائماً لوضع البانر الذي يحمل اسم المدونة والبانر الإعلاني.
- جسم المدونة body يحتوي على مشاركات ودروس ومحتوى المدونة.
- الشريط الجانبي sidebar يحتوي على إضافات بلوجر من صندوق إعجاب فيسبوك ومتابعة عبر البريد وغيرها الكثير.
- ذيل المدونة footer يحتوي على إضافات بلوجر كما في الشريط الجانبي بالإضافة إلى حقوق المدونة
[alert title="ملاحظة" icon="info-circle"]إضافات بلوجر يمكن إضافتها في اي مكان بالمدونة ولكنها عادتاً تكون بالشريط الجانبي وذيل المدونة[/alert]
يتم وضع الإضافات للمدونة من خلال بند التخطيط
إذهب إلى لوحة تحكم المدونة ثم انتقل إلى بند التخطيط , وانظر ما في الصفحة سوف تجد عناصر كما في الصورة التالية..
يتم وضع الإضافات للمدونة من خلال بند التخطيط
إذهب إلى لوحة تحكم المدونة ثم انتقل إلى بند التخطيط , وانظر ما في الصفحة سوف تجد عناصر كما في الصورة التالية..
- خانة او مكان فارغ ينتظر منك إضافة آداة جديدة وذلك بالضغط على إضافة آداة
- خانة او مكان يحتوي على آداة متابعة عبر البريد الإلكتروني ولتحرير او تعديل الإضافة يمكنك الضغط على تحرير
عند الضغط على إضافة آداة يظهر امامنا نافذة منبثقة تحتوي العديد من أدوات واضافات بلوجر ومنها:
- مشاركة مميزة: إبراز مشاركة خاصة على مدونتك
- HTML/JavaScript: إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية.
- الملف الشخصي: عرض معلومات عن نفسك للزائرين.
- أرشيف المدونة الإلكترونية: تسهيل الأمر على الزائرين للتنقل في مدونتك باستخدام روابط للمشاركات الأقدم.
- رأس الصفحة: عرض عنوان مدونتك الإلكترونية ووصفها.
- صورة: إضافة صورة من جهاز الكمبيوتر، أو من أي مكان آخر على الويب.
- التسميات: إظهار جميع تسميات الرسائل في مدونتك الإلكترونية.
- الصفحات: عرض قائمة بالصفحات المستقلة في مدونتك.
- قائمة الروابط: عرض مجموعة من المواقع المفضلة لديك، أو المدونات، أو صفحات الويب لزائريك.
- نص: إضافة رسالة نصية إلى مدونتك.
- المشاركات الشائعة: عرض قائمة بالمشاركات الأكثر شعبية من مدونتك.
- مربع البحث: السماح للزائرين بالبحث في مدونتك، وقائمة المدونات الموصى بقراءتها، وكل شيء آخر وضعت روابط له.
- إحصاءات المدونة: عرض عدد مرات مشاهدة الصفحة في مدونتك.
- شريط الفيديو: عرض مقاطع YouTube لقرائك لمشاهدتها دون مغادرة الصفحة.
- قائمة المدونات الإلكترونية: قم بعرض ما تقرأه باستخدام مجموعة روابط المدونات الإلكترونية المفضلة لديك.
- متابعة بالبريد الإلكتروني: تسهيل الأمر على الزائرين للاشتراك في استلام البريد الإلكتروني عندما تنشر مشاركة.
- عرض الشرائح: إضافة عرض الشرائح من الصور المفضلة لديك إلى مدونتك.
- الشعار: إظهار تباهيك بخدمة Blogger من خلال إضافة شعار إلى صفحتك.
- استطلاع رأي: تعرف على آراء الزائرين بإضافة استطلاع رأي إلى مدونتك الإلكترونية.
- ارتباطات الاشتراك: اسمح للقراء بالاشتراك بسهولة في مدونتك باستخدام برامج قراءة المواجز الشائعة
- زر 1+: السماح للزائرين باقتراح علامتك التجارية والمحتوى الخاص بك.
- الترجمة: السماح للزائرين بترجمة مدونتك إلى لغات مختلفة.
- النشرة المصورة: عرض العناوين الرئيسية الحالية من أخبار Google في مدونتك.
- القائمة: إضافة قائمة بأسماء الكتب أو الأفلام المفضلة أو الأشياء الأخرى التي ترغبها.
- المتابعون في Google+: إبراز جمهورك في +Google بالكامل (من حيث حجمه وبعض من الوجوه الودودة التي تميزه)، وإتاحة الفرصة للزائرين لمتابعتك على +Google.
- شارة Google+: تعريف الزائرين بأنك متاح على +Google والسماح لهم بمتابعتك بنقرة واحدة.
- الإسناد: عرض بيانات الإحالة لمدونتك.
وهناك المزيد غير ذلك.
هذه كانت نبذة عن بند التخطيط وإضافات الأدوات سوف تنفعنا جيداً في دروس قادمة إن شاء الله.
مثال على تركيب إضافة المواقع الإجتماعية
انقر إضافة آداة في الشريط الجانبي للمدونة, ثم اختر الآداة HTML/JavaScript سوف يفتح امامك خانة للكتابة فارغة, ضع فيها هذا الكود:
[code type="JQuery"]<style> div#social_icons{height:25px;width:100%;position:relative} div#social_icons ul{clear:right;float:right;list-style:none;position:relative;right:50%;text-align:center;margin:0!important;padding:0!important} div#social_icons ul li{display:block;float:right;list-style:none;position:relative;left:50%;margin:0 0 0 1px !important;padding:3px 10px!important} div#social_icons ul li span{display:block;font-size:8px;border:none;padding:40px 0 2px!important} div#social_icons ul li:first-child span{margin-right:-2px} div#social_icons ul li:last-child span{margin-right:-10px} div#social_icons .delicious a,div#social_icons .twitter a,div#social_icons .google a,div#social_icons .facebook a,div#social_icons .pinterest a,div#social_icons .stumbleupon a,div#social_icons .linkedin a{width:24px;height:24px;display:block} div#social_icons .delicious a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -76px 0} div#social_icons .twitter a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat 0 0} div#social_icons .stumbleupon a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -101px 0} div#social_icons .google a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -50px 0} div#social_icons .facebook a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -25px 0} div#social_icons .pinterest a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -126px 0} div#social_icons .linkedin a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -151px 0} </style> <div id="social_icons"> <ul> <li class="delicious" style="padding:0 4px!important"><a id="delicious" href="http://delicious.com/post?url=ضع رابط مدونتك&" class="fade" target="_blank" style="opacity:1" title="Delicious"></a></li> <li class="twitter" style="padding:0 4px !important"><a id="twitter" href="http://twitter.com/معرف تويتر هنا" class="fade" target="_blank" style="opacity:1" title="Twitter"></a></li> <li class="facebook" style="padding:0 4px !important"><a id="facebook" href="http://www.facebook.com/معرف الفيسبوك هنا" class="fade" target="_blank" style="opacity:1" title="Facebook"></a></li> <li class="google" style="padding:0 4px !important"><a id="google" href="https://plus.google.com/u/1/YOUR-GOOGLE-PLUS-ID" class="fade" target="_blank" style="opacity:1" title="Google+"></a></li> <li class="stumbleupon" style="padding:0 4px !important"><a id="stumbleupon" href="http://www.stumbleupon.com/submit?&url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="StumbleUpon"></a></li> <li class="pinterest" style="padding:0 4px !important"><a id="pinterest" href="http://www.pinterest.com/هنا PINTEREST معرف" class="fade" target="_blank" style="opacity:1" title="Pinterest"></a></li> <li class="linkedin" style="padding:0 4px !important"><a id="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="LinkedIn"></a></li> </ul> </div>[/code]
[code type="JQuery"]<style> div#social_icons{height:25px;width:100%;position:relative} div#social_icons ul{clear:right;float:right;list-style:none;position:relative;right:50%;text-align:center;margin:0!important;padding:0!important} div#social_icons ul li{display:block;float:right;list-style:none;position:relative;left:50%;margin:0 0 0 1px !important;padding:3px 10px!important} div#social_icons ul li span{display:block;font-size:8px;border:none;padding:40px 0 2px!important} div#social_icons ul li:first-child span{margin-right:-2px} div#social_icons ul li:last-child span{margin-right:-10px} div#social_icons .delicious a,div#social_icons .twitter a,div#social_icons .google a,div#social_icons .facebook a,div#social_icons .pinterest a,div#social_icons .stumbleupon a,div#social_icons .linkedin a{width:24px;height:24px;display:block} div#social_icons .delicious a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -76px 0} div#social_icons .twitter a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat 0 0} div#social_icons .stumbleupon a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -101px 0} div#social_icons .google a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -50px 0} div#social_icons .facebook a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -25px 0} div#social_icons .pinterest a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -126px 0} div#social_icons .linkedin a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -151px 0} </style> <div id="social_icons"> <ul> <li class="delicious" style="padding:0 4px!important"><a id="delicious" href="http://delicious.com/post?url=ضع رابط مدونتك&" class="fade" target="_blank" style="opacity:1" title="Delicious"></a></li> <li class="twitter" style="padding:0 4px !important"><a id="twitter" href="http://twitter.com/معرف تويتر هنا" class="fade" target="_blank" style="opacity:1" title="Twitter"></a></li> <li class="facebook" style="padding:0 4px !important"><a id="facebook" href="http://www.facebook.com/معرف الفيسبوك هنا" class="fade" target="_blank" style="opacity:1" title="Facebook"></a></li> <li class="google" style="padding:0 4px !important"><a id="google" href="https://plus.google.com/u/1/YOUR-GOOGLE-PLUS-ID" class="fade" target="_blank" style="opacity:1" title="Google+"></a></li> <li class="stumbleupon" style="padding:0 4px !important"><a id="stumbleupon" href="http://www.stumbleupon.com/submit?&url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="StumbleUpon"></a></li> <li class="pinterest" style="padding:0 4px !important"><a id="pinterest" href="http://www.pinterest.com/هنا PINTEREST معرف" class="fade" target="_blank" style="opacity:1" title="Pinterest"></a></li> <li class="linkedin" style="padding:0 4px !important"><a id="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="LinkedIn"></a></li> </ul> </div>[/code]
إرسال تعليق