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

شعار المدونة هو الرمز الذي يختاره صاحب المدونة للإشارة الى مدونته وتمييزها عن غيرها وعادة ما يكون هذا الشعار له علاقة وطيدة باسم المدونة أو محتواها وجلا ما نلاحظ ذالك في شعارات المواقع الكبيرة مثل موقع الفيس بوك مثلا " شعاره هو حرف f "  تعبيرا عن كلمة "facebook" او شعار موقع تويتر "طائر" تعبيرا عن كلمة  'twitter" والتي تعني "تغريد" .

لماذا اضيف شعار الى مدونتي ؟
لشعار المدونة مزايا كثيرة من بينها

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


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

الطريقة الأولى : 

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


الطريقة الثانية :

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


  <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>
 </div>




  • بعده مباشر قم بلصق الكود التالي :


<div dir='rtl' style='text-align: right;' trbidi='on'>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://blogger-onlin.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0GpHyfyLUPWqnMC8CIqyii4QzqKu0M6WBUZAUMEK4EVPU748pyRYbZsH9aH8YNQNkaFIZZQG_j1uYVqJFUgso6WlMRSw70dNZqJXO4cxxtl7tHrcI9eeQDhXsPfD0NF0LPxSBoQGxPk/s1600/blogger+online.png'/></a></div>
</div>

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


» تابع القراءة

اضاافة فهرس الى مدونات بلوجر هو امر ضروري حتى نجعل مواضيع المدونة مرتبة ومنظمة ومتسسلة للزوار ويسهل التنقل عبر المواضيع والوصول اليها من صفحة معينة.

مزايــا اضافــة فهــــرس المدونــــة 

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

طريقــة اضافــة الفهــرس الــى المدونــة 
1- من لوحة تحكم المدونة نقوم بانشاء صفحة او رسالة (مشاركة) جديدة ثم ننتقل الى قسم HTML للرسالة او الصفحة ونقوم بلصق الكود التـــــالــــــــــــــــــــــــــــي :

<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div style="text-align: right;"><script src="http://sites.google.com/site/javacodehtml/IndexWithLabels.js"></script></div><div style="text-align: right;"><script src="http://blogger-storm.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script></div><div style="text-align: right;"><script type="text/javascript">var accToc=true;</script></div></div><br /></div>

2- قم بتغيير الرابط الملون باللون اللحمر برابط مدونتك
3- انشر الرسالة او الصفحة لترى الفهرس بشكل منظم ومرتب.
» تابع القراءة

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

كيفية اضافة الأداة ؟
  • من لوحة التحكم للمدونة نختار التخطيط ثم نختار اضافة أداة ثم نختار اداة HtmlJavaScript
  • نقوم بلصق الكود التالي
<style type="text/css">

 /* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 468px;
 margin: 0 auto;
        border:3px solid #E1E0E2;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 right: -4px;
}

#slider {
 width: 468px;
 height: 260px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_5TuS3fuu2Oow2-oaG9p19UoAzfJQMJ0qxgS0HICpwSDrEgTc-LEQCZSVvmmOJQq3eq_LlvD2qDd6UHWl5mc10TrCqJU1Bj3SR9TF6_iJqrRDPCiKhpOSI-BMYKNj5h1StqflMQsBQ/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px 010007;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 right: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 right: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}


div.mc-caption-bg {
 background-color: #0066CC;
}

div.mc-caption {
 font: bold 25px/21px traditional arabic ;
 color:  #0000;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 right: 190px;
 width: 150px;
 background: none;
 padding-right: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQSsLvENML9w0Ns56823WtTdshy2RmVDYPMuHXlI_4llcVqv426NyltndjKUttK8wU0DPUFMsJZBZqmX6RWjMqHeHPQuVs2Q8S3b8LTgelgs5DQ-0Ngcn21_wjqsopBL5eL7g0yk6wQ/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
 float: right;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp"alt=" ttttt"/></a>
                </div></div>
قبل حفظ الأداة نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :

  • نضع مكان الرمز xxxxx رابط الموضوع (الرابط الإلكتروني للموضوع )
  • نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)
  • نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )
  • ثم نقوم بحفظ الإضافة 
تعديل الإضافة بما يتناسب مع مدونتك 
1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :



#slider {
 width: 468px;
 height: 260px;



لتغيير عرض الأداة width 
لتغيير ارتفاع الأداة height

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي :



 background-color: #0066CC;


ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل للصفحة التالية )

4- تغيير حجم ولون خط عنوان الموضوع (عناوين  المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :


 font: bold 25px/21px traditional arabic ;


الرمز traditional arabic لإستبدال نوع الخط 

الرمز   25px حجم الخط .

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

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

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

كما يمكننا اضافة الأزرار بواسطة عداد افقي انظر المعاينة  .

كيفية القيام بهذا ؟

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

1- نبحث عن الكود التالي :

    <div class='post-body'>



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


<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f05a6b3451b61e4' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>  

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


<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f05a6b3451b61e4' type='text/javascript'/>
<!-- AddThis Button END -->
 

3- نقوم بحفظ قالب المدونة ومعاينة الإضافة الجديدة.

ب - اما اذا أردنا ظهور الأزرار عند نهاية أو أسفل الموضوع او الرسالة نقوم بمايلي :

1- البحث عن الكود التالي :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
2- بعده مباشرة نقوم بلصق الكود التالي : 
<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f05a6b3451b61e4' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>

نقوم بنفس العمل اذا أردنا ظهور الأزرار بالصفحة الرئيسية للمدونة كما سبق وأن قمنا بشرحه.

3- نقوم بحفظ القالب ومعاينة الإضافة الجديدة. 
» تابع القراءة

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



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

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


<br /> ]]></b:skin>

نقوم مباشرة بلصق الكود التالي قبل الكود السابق :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}<br /> 


ونقوم بحفظ القالب ومعاينة المدونة لنلاحظ تغير مؤشر زر الماوس بالمدونة التي قمنا باضافة الكود لها فقط.

يمكننا تغيير الأيقونة المتحركة والتي هي عبارة عن صورة من نوع gif من خلال الرابط التالي :

http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif

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


Totally Free Cursors :

http://cursors.funutilities.com/ : 

موقعين يحتويان على ألاف الأيقونات المتحركة الخاصة بزر الماوس التي يمكنك تحميلها واختيار ما يناسبك منها.

» تابع القراءة


اعلم أن هناك الكثير من الطرق التي يمكننا من خلالها اضافة مختلف أزرار موقع تويترمثل زر"tweeter " أو زر "تابعني على تويتر" الى مدونات بلوجر.


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

1 - أولا أدخل على الموقع التالي : أزرار تويتر

2- اختر الشكل المناسب للزر الذي تود اضافته الى مدونتك


3- بعض الخيارت كاختيار اللغة .



4 - وأخيرا نسخ الكود

5 - الأن اذهب مدونتك وألصق الكود أنى شئت بحيث يمكنك اضافة أداة جديدة ولصق الكود على الجوانب أو بالأعلى أو بأسفل المدونة

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

1 - قم بتحرير html لمدونتك ثم ابحث عن الكود التالي :

&lt;div class='post-header-line-1'/&gt;

2- قم بلصق الكود السابق تحته مباشرة( هذا في حالة أردت ظهور الزر بعد عنوان الموضوع)

3 - أما في حالة أردت ظهور الزر بعد نهاية الموضوع أو المشاركة ابحث عن الكود التالي :

&lt;data:post.body/&gt;

4 - ألصق الكود السابق الذي تحصلت عليه من الموقع بعده مباشرة واحفظ .

ان أعجبك الموضوع فلا تنسى أن تقوم بمشاركته مع أصدقائك عبر أزرار الشبكات الإجتماعيى أسفل المشاركة ولك جزيل الشكر وأي استفسار انا جاهز ياسيدي.
» تابع القراءة

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


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

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

الموقع يدعم ويتعامل مع كل مواقع الشبكات الإجتماعية بما في ذالك خدمة blogger للتدوين وموقع myspace لزيارة الموقع
» تابع القراءة